DEV Community: Jane Tracy 👩🏽‍💻

Nevertheless, She choose to challenge and coded. ✨

Jane Tracy 👩🏽‍💻 — Sun, 07 Mar 2021 16:31:04 +0000

How it all started

Last year a time like this I didn't know how to code. But through a video I watched of how amazing women became self-taught developers, I decided to look around and use resources I could find. To be honest, at first, I was going in blind because I didn't have anyone in the tech industry. But a YouTube recommendation from The come up about how to be a self-taught software engineer completely changed my view.
When I told my friends and family that I wanted to change careers to tech, I could see the doubt and resistance in their eyes. Going to campus is the conventional route. My path of being self-taught was crazy and an illusion to them. But I do understand them, they love the safer route but to me, going back to Uni wasn't doable financially. I started using free resources like FreeCodeCamp to get me started. At the same time, I joined Dev to get more insight and got inspired by Lydia Hallie and the ladybug 🐞 podcast team of engineers. They truly shed light 🔆 on how to get started in the industry and how to change careers. That's how it all started, yes from a YouTube recommendation. 😁

My most recent achievement was…

I was able to join a small start-up that's passionate about code and they have now become my inspiration in the industry.
I didn't expect to have a place there at first but they are so encouraging and help me along the way. As the only female web developer on the team, it made me want to work harder and bring more female engineers to the team.

My biggest goal is…

To inspire more youth around my community to join the tech industry. I believe anyone can do it, it's just a matter of finding someone who can guide along the way. Bringing more information on how to be a self-taught developer will change someone's life one day. Being part of that will be my greatest joy this year.

My advice for allies to support underrepresented folks who code is...

Always stand up for those who can't speak up for themselves. Be their voice and work together for a better environment that's positive and supports all.

In Conclusion

I didn't want the post to be lengthy but I hope someone will be inspired by it. I believe we all have a part to play in this life, you can be someone's inspiration or role model without you knowing it. Keep pushing and keep fighting for your dreams. All it takes is taking the first step and working hard for what you want.

Introduction to Framer Motion

Jane Tracy 👩🏽‍💻 — Sun, 20 Dec 2020 17:02:58 +0000

Making cool animations with CSS is great but can be tricky when you want to create powerful ones. If you are not an expert in CSS this task can be more frustrating. With Framer motion, you don't need to be perfect in CSS, the hard work is already done for you. You just need to install the library, customize the values and create smooth animations.

What is Framer Motion

Framer Motion is an open-source React library to power production-ready animations. It will help you create fluid animations for the web across desktop and mobile. This makes creating complex animations easier, with its simple syntax. You can build gesture animation, variants, keyframes, drag, motion values, exit animations and more.

How to install Framer motion to your React project

For you to start using it, you have to install the library through the node package manager first.

npm install framer-motion

Import it to your project

import { motion } from "framer-motion"

To use it in your React components you have to use:

Motion Components

Motion components are the heart of framer motion. By including the props (properties) you can add gestures and animations to your components. Without incorporating it you can't animate anything at all. You can easily initiate it by including motion. before your div element.

Motion components accept props like animate and transition for basic animations. The props can include single or multiple objects that will have keys and values to induct motion.
let's start off by animating the title

import { motion } from "framer-motion"

<motion.h1
       animate={
         {fontSize: "3rem",
          x: 20, y: -10 
          }
       }>
        Welcome to Framer Motion
   </motion.h1>

Before I start to explain the results, let's first understand the meaning of the positive and negative values in x and y.

To move to the right - Use a positive number
To move to the left - Use a negative number
To move upwards - Use a negative number
To move downwards - Use a positive number

This means our h1 will first increase it's the font size by 3 rem, move to the right by 20px and then move up by 10px. The default value uses a px unit but if you want to use rems, you have to state it as I did with font size.

Using Initial prop

Apart from animate prop you can use the initial prop that illustrates how the component will look like before the animate property is indicated. For example, we can say before the h1 is seen, it would be invisible and later on, it's seen on the browser.


<motion.h1
       initial = {{y: -300, opacity: 0}}
       animate={
         {opacity: 1,
          fontSize: "3rem",
          x: 20, y: -10 
          }
       }>
        Welcome to Framer Motion
   </motion.h1>

The initial prop will make h1 be hidden first with an opacity 0, it will move from the top of the browser and settle on its original position. Then animate prop will be mounted as I explained in the previous section.

Transition prop

This prop determines how your animation will appear. You can control the delay, type and duration time for components. This creates a smooth transition and makes your animations more appealing to the eye.
Types of transition for framer motion

Tween- This is a linear or easing curve and given duration.
Spring- It is based on mass, damping and stiffness.
Inertia - It includes spring and friction combined scroll physics.

<motion.h1
        initial={{ y: -1000, opacity: 0 }}
        animate={{ opacity: 1, fontSize: "3rem", x: 20, y: 15 }}
        transition={{type:'spring', duration: .5, delay: .2 }}
      >
        Welcome to Framer motion
  </motion.h1>

Here the h1 transition will be spring which is also the default type of transition for Framer Motion. The duration determines how long the animation will be. In this case, the title will animate for 0.5 seconds and it will be delayed too.

whileHover prop

In order to create hover animations, you have to use the whileHover prop. This determines how the components will be when a user hovers over it.

Example let create a simple button and create some hover animations

<motion.button
   whileHover={{
     scale: 1.02,
     color: '#231738'
    }}
   transition={{duration: .3}}
  className="Button">Click me
 </motion.button>

In transition, you can also add yoyo key and give it a value of Infinity to make the hover animation last longer. Creates a heartbeat type of animation.

Variants

Variants are visual states that can be defined externally from a Frame and passed in via the variants property. This helps us to apply the dry code method. Where there is no repetition of properties in the components. You can create values for initial, animate, hover or press.

const titleVariants = {
 hidden:{
  y: -1000, 
  opacity: 0
 },
 visible:{
  opacity: 1, fontSize: "3rem", x: 20, y: 15,
  transition:{
    type: "spring", duration: 0.5, delay: 0.2
  }
 },
}

<motion.h1
   variants={titleVariants}
  initial= 'hidden'
  animate= 'visible'
>
  Welcome to Framer motion
 </motion.h1>

By using variants it makes our code components cleaner and less confusing to others who will review our code later on.
The properties of the variants can be inherited to the other children. Hence variants with the same name will be triggered.
Let's continue with our example and include the button variants.

const textVariants = {
  hidden: {
    x: "-100vw",
    opacity: 0
  },
  visible: {
    opacity: 1,
    fontSize: "1.5rem",
    x: 0,
    y: 15,
    transition: {
      type: "spring",
      duration: 0.5
    }
  }
};

const titleVariants = {
 hidden:{
  y: -1000, 
  opacity: 0
 },
 visible:{
  opacity: 1, fontSize: "3rem", x: 20, y: 15,
  transition:{
    type: "spring", duration: 0.5, delay: 0.2
  }
 },
}

const buttonVariants = {
  hover: {
    scale: 1.1,
    backgroundColor: "#d62ba3",

    transition: {
      duration: 0.5,
      yoyo: Infinity
    }
  }
};

<motion.h1 
variants={titleVariants} 
initial="hidden" 
animate="visible">
   Welcome to Framer motion
</motion.h1>

<motion.p
 variants={textVariants}
>
The title will increase in size move to the right and downwards      </motion.p>

<motion.button
  variants={buttonVariants}
  whileHover="hover"
  className="Button"
>
   Click me
</motion.button>

As you can see, the paragraph inherited the variants from the parent component, the h1. This makes it easier to write more complex animations to your components.

Animating Routes

First, add the Router tag in the index.js

import { BrowserRouter as Router } from 'react-router-dom';

<React.StrictMode>
    <Router>
      <App />
    </Router>
</React.StrictMode>

import useLocation from react-router and save useLocation function in a variable. You can do this in the App.js file

import { Route, Switch, useLocation } from "react-router-dom";

const location = useLocation();

wrap the switch with Animate presence

<AnimatePresence exitBeforeEnter>
 <Switch location={location} key={location.key}>
   <Route exact path="/" exact component={Home}/>
   <Route exact path="/about" exact component={About}/>
   <Route exact path="/recipe" exact component={Recipe}/>
   <Route exact path="/order-now" exact component={Order}/>
 </Switch>
</AnimatePresence>

Add the exit prop to the pages. This determines how the page will animate when you exit it to another page.

const exitVariants = {
  hidden: { 
    opacity: 0, 
  },
  visible: { 
    opacity: 1, 
    transition: { duration: 1 }
  },
  exit: {
    x: "100vh",
    transition: { ease: 'ease' }
  }
};

//add the variants
<motion.div className="home container"
  variants={exitVariants}
  initial="hidden"
  animate="visible"
  exit="exit"
 >

This means the page will exit from the right instead of the left side of the browser.
Add the exitVariants to the other pages in your projects and there you go. You have animated your routes successfully. 🎉

Resources

In conclusion

Framer motion is a great animation library for your next React project. It makes it easy to create complex animations without stressing out about having advanced skills in CSS animations. By creating simple props like animate, initial, hover or press, you make your website more fun to interact with. To best honest who doesn't love playing around with animations from sites they visit.
As long as you don't overuse the animations, your website will be more appealing to users.

If you find this post useful, share it with your peers or beginners who are learning Framer Motion and might find the content useful to their journey. You can also buy me coffee. 🙂

40+ Python resources you should have

Jane Tracy 👩🏽‍💻 — Sat, 12 Dec 2020 20:18:46 +0000

Python is an object-oriented, interpreted, high-level programming language. It's very beginner-friendly and has an easier learning curve. There are a lot of resources online you can use, whether you are a student or a mid-level developer who wants to learn python. I created a great list of learning resources that you can add to your pocket.

Python learning resources

I have subdivided them for those who want free resources or paid ones. I will keep updating the list but I hope this one helps in your journey.

Free Resources😎

1) Python course by AlphaCodingSkills

2) Python course for beginners by Tultlane

3) Learn Python from basics to Advanced by TechBeamers

4) Google's Python Class

5) Learn Python 2 from CodeCademy

6) A Byte of Python

7) Free Interactive Python Tutorial

8) Free Interactive Python Tutorial by DataCamp

9) Python for everybody Specialization by Coursera

10) Python Track from Basics to Advanced by Exercism

YouTube Resources🎥

11) Learn Python - Full Course for beginners by FreeCodeCamp

12) Python Tutorial - Python for Beginners 2020 by Programming With Mosh

13) Python Tutorial for Absolute Beginners by CS Dojo

14) Python Tutorial for Beginners by Corey Schafer

15) Python Tutorial for Beginners by Clever Programmer

16) Python Programming Tutorial for Beginners by Telusko

17) Python Full Course - Learn Python in 12 Hours by Edureka!

Paid Resources🎉

18) Learn Python Programming Masterclass from Udemy

19) 2020 Complete Python Bootcamp From Zero to Hero in Python

20) 100 Days of Code - The Complete Python Pro Bootcamp for 2021

21) Automate the Boring Stuff with Python Programming

22) Learn Python The hard way

23) Learn Python Programming Masterclass

Python Exercises or challenges✨

24) Python Challenges on HackerRank

25) Python Challenges on CodeWars called Kata

26) Python Track Challenges by Exercism

Podcast Resources🙌

27) Podcast.init

28) Talk Python To Me

29) CodeNewbie Podcast has great espisodes on python

30) Django Riffs

31) The Real Python Podcast

32) Python Bytes

32) Teaching Python with Kelly and Sean

Books📚

33) Automate the Boring Stuff with Python

34) Python Python Crash Course

35 Learn Python 3 the Hard Way

36 Head First Python

37 Invent Your Own Computer Games with Python

38 Python Tricks: A Buffet of Awesome Python Features

37 Effective Python: 59 Specific Ways to Write Better Python

40 Learning Python by Mark Lutz

Blog platform✍

41 Dev.to Blog platform

42 FreeCodeCamp blogs

43 Daily Dev Blog platform

44 Python blog posts on Hashnode

Update

Tutorials point Python crash course

In conclusion

With the internet, you can take advantage of it and get as many resources as you want to learn. I hope this list helps and for any resources I haven't included list them on the comment section. It's always good to share. 😉 If you want an inclusive python community, there is KalleTech community at discord. More experienced devs carry live stream over the VC to show others how to solve bugs in their project. Also if you are learning machine learning, JavaScript or you are into Linux, it's just the place for you.

If you find this post useful share it with your fellow Developers who learning Python. You can also buy me coffee. 🙂

A React website with Styled-components for beginners ✨

Jane Tracy 👩🏽‍💻 — Sun, 15 Nov 2020 17:10:27 +0000

Background story

I wanted to learn about how to create a React website from the ground up but I really didn't know if I should use CSS modules or styled-components. But after watching a tutorial on Youtube on how to use styled-components and props, I decided to make a simple site to practice. Some things I had to google like how to use global styles, import a font family, etc. The good thing is learning how to google is also a skill in the industry, I didn't get frustrated or think I was wasting time. If you are self-taught I am sure you are already used to doing this. The next step I will need to do is to refactor the code and make it clean (I promise I will do that🤗).
After finishing the website, I thought it would be great if I shared how I built it from the Figma wireframes to the design and finally to code. Week three of learning React has been fun so far, hope any code newbie will find the content useful. Next, I will build another site that has more clean code by creating a data file and using the map method.

Some Useful tips

Before starting you can download the following extensions if you don't have them.

Quick intro to styled-components

Styled-components utilises tagged template literals to style your components. Example
Let's create a button

// The wrapper will render the section which will contain the button
const FeatureWrapper = styled.section`
background-color: #f9f9f9;
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
`;
// The FeatureButton component will render the button with thestyles below
const FeatureButton = styled.button`
border-radius: 20px;
background-color: #0F111C;
color: #fff;
padding: 18px 30px;
font-size: 20px;
outline: none;
cursor: pointer;
border: none;
`;
render(
<FeatureWrapper>
  <FeatureButton> Explore Components</FeatureButton>
</FeatureWrapper>
)

Result

Making props with styled-components

Inside a styled-component, you can pass a function to change it based on its props. Example
We want a button styled-component which can have a background colour of orange when it's primary and black when it's not. Plus on hover, the black button will have a background colour of orange and the primary button, orange will have a black background.

const ButtonWrapper = styled.section`
background-color: #f9f9f9;
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
`;

const Button = styled.button`
border-radius: 20px;
background-color: background-color: ${({primary}) => primary? '#E38B06': '#000'};
color: color: ${({primary}) => primary ? '#000': '#fff'};
padding: 18px 30px;
font-size: 20px;
outline: none;
cursor: pointer;
border: none;
transition: transform .2s ease;
&:hover{
    background-color: ${({primary}) => primary? '#fff': '#E38B06'};  
transform: translateY(-.5rem) scale(1.02);
 color: #000;
}
`;

render(
<div>
   <ButtonWrapper>
       <Button primary> Primary </Button>  
       <Button> Not primary </Button>
   </ButtonWrapper>
</div>

)

Result
This makes it easier to write a variety of styles depending on the props us, which is more dynamic. When primary is true the button will have the orange background, if it's false it will have the black background. For more go through the Styled-component documentation.

Let's create a simple website

Design

You can also view the Figma file and see the designs. (It's not all that flashy, but basic haha 😂) . To give you the visuals of how the website should look like. Here is the design image.
If you want the code, it's available on my Github.

1) First create the react app by running

npm init react-app Homemade-website

2) Delete files in the src file and leave the App.js and index.js

|__src
|
|__App.js
|__index.js

3) Create the components folder in the source file. This is where we are going to create the major components like Navbar, hero section, welcome section, personalized meals section and footer section.

Add index.js in components folder to export the components in on file. It makes your app files less cluttered and organized.

Inside the components, folder created a Navbar folder. Then add Navbar.js and Navbar.styles.js.

|--components
   |--Navbar
      |--Navbar.js
      |--Navbar.styles.js

    |--index.js

In the index.js folder, we will export all our components.
export {default as Navbar} from './Navbar/Navbar';

Import styled-components and write global styles for the website

Import styled-components in your react project

npm install --save styled-components

Create a GlobalStyles.js folder in the Src folder.

|__src
|  |__components
|
|__App.js
|__GlobalStyles.js
|__index.js

Add font family and some global styles you want to add in your website. I used Nunito for this website. For more read style component docs

I didn't know how to use Global styles, especially how to import a font family but with the documentation and joining the Styled-component community on the spectrum helped.

These styles will be used globally and for that, I added the container and the buttons that shall be used through the pages.
The good thing about Styled-components is, you can use props to create different variations of elements like buttons.

import styled, {createGlobalStyle} from 'styled-components';

const GlobalStyles = createGlobalStyle`

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;800;900&family=Rubik:wght@800&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: inherit;
}

html {
    box-sizing: border-box;
    font-size: 62.5%;

    @media only screen and (max-width: 1200px){
        font-size: 58%;
    }
    @media only screen and (min-width: 1980px){
        font-size: 70%;
    }
}
body{
    font-family: 'Nunito', sans-serif;
    font-weight: 400;
    line-height: 1.6;
    font-size: 1.6rem;
    background: #F9F9F9;
    color: #333;

}
`;

export default GlobalStyles;

export const Container = styled.div`
margin: 0 auto;
padding: 0 50px;
max-width: 1300px;
width: 100%;

@media (max-width:400px){
    padding: 0 10px;
}
@media (max-width:991px) {
    padding: 0 30px;
}

@media (min-width: 1500px) {
    max-width: 1500px;
}

@media (min-width: 1800px) {
    max-width: 1800px;
    padding: 0 30px;
}
`;

export const Button = styled.button`
border-radius: ${({bigRadius}) => bigRadius ? '30px': '20px'};
background-color: ${({primary}) => primary? '#E38B06': '#000'};
color: ${({primary}) => primary ? '#000': '#fff'};
padding: ${({big}) => big? '18px 30px' : '10px 28px'};
font-size: ${({bigFont}) => bigFont? '20px': '18px'};
outline: none;
cursor: pointer;
border: none;
transition: all .5s ease;

&:hover{
    background-color: ${({primary}) => primary? '#fff': '#E38B06'};  
    transform: translateY(-.5rem) scale(1.02);
    color: #000;
}
&:active{
    transform: translateY(.5rem);
}

@media only screen and (max-width:1000px) {
    /* width: 100%; */
    padding: ${({big}) => big? '18px 30px' : '10px 20px'};
}
@media only screen and (max-width:375px) {
    padding: ${({big}) => big? '12px 20px' : '10px 20px'};
    font-size: ${({bigFont}) => bigFont? '16px': '18px'};
}


`;

export const OutlineButton = styled.button`
border-radius: ${({bigRadius})=> bigRadius? '40px' : '30px'};
border: 2px solid #333;
color: #333;
outline: none;
padding: ${({big}) => big? '15px 60px' : '13px 55px'};
font-size: ${({fontBig}) => fontBig? '22px':'18px'};
transition: all .5s ease;
background-color: #fefefe;


&:hover {
    background-color: #333;
    color: #fff;
    border: none;
    transform: translateY(-.5rem) scale(1.02);
}
&:active{
    transform: translateY(.5rem);
}


@media only screen and (max-width: 1200px) {
    border-radius: ${({bigRadius})=> bigRadius? '20px' : '18px'};
    padding: ${({big}) => big? '9px 30px' : '8px 28px'};
    font-size: ${({fontBig}) => fontBig? '18px':'16px'};
}
`;

// add it to the App.js file and put it at the top.
<GlobalStyles/>

Component 1: Let's start adding and styling the Navbar

1) Let's create the navbar with the logo and the menu icon

We need to import react-router and some react icons
To import react-router to use the link plus later to navigate through the pages.
I don't know why, but creating the Nav took me longer than expected. Especially to make it work on click. But been new at this, it was expected.

npm install react-router-dom

Import react icons

npm install react-icons --save-

In the Navbar.js write the code below.
For the menu icon we will use useState to handle the click function.
Add IconContext.Provider to add colour to the Menu Icon. This made possible by React icons that we installed earlier on.

//In the Navbar.js file
import { BiMenu, BiX } from "react-icons/bi";
import {Button} from '../../Globalstyles';
import 
{
    Nav,
    NavbarContainer,
    NavLogo,
    NavIcon
} from './Navbar.styles';
const Navbar = () => {
//click is the initial state and setclick will be the update state
    const [click, setClick] = useState(false);

//Create a function to handle the click state of the menu icon. 
//if the menu icon was the menu bar at the beginning when clicked it will have the close icon
    const handleClick = () => setClick(!click);

    return (
        <div>
            <IconContext.Provider value={{ color: '#fff'}}> //turns the menu icon to white
                <Nav>
                    <NavbarContainer>
                        <NavLogo to="/">
                            <NavIcon/>
                            Home Made
                        </NavLogo>
                        <MenuIcon onClick={handleClick}>
                            {click ? <BiX/> : <BiMenu/>}
                        </MenuIcon>

                        <Menu onClick={handleClick} click={click}>
                            <MenuItem>
                                <MenuLink onClick={closeMenu} to="/">Home</MenuLink>
                            </MenuItem>
                            <MenuItem>
                                <MenuLink onClick={closeMenu} to="/about">About</MenuLink>
                            </MenuItem>
                            <MenuItem>
                                <MenuLink onClick={closeMenu} to="/recipe">Recipes</MenuLink>
                            </MenuItem>
                            <MenuItemBtn>
                                {button?(
                                    <MenuLinkBtn to="/order-now">
                                        <Button primary>Order Now</Button>
                                    </MenuLinkBtn>
                                ): (
                                    <MenuLinkBtn to="/order-now">
                                        <Button primary bigFont onClick={closeMenu}>Order Now</Button>
                                    </MenuLinkBtn>
                                )
                                }
                            </MenuItemBtn>
                        </Menu>

                    </NavbarContainer>


                </Nav>
            </IconContext.Provider>
        </div>
    )
}

export default Navbar;

In the Navbar.styles.js write the code below. I used flexbox for the navbar. On top of that, I used chrome dev tools to make it precise. (No, I didn't just know how to place them, I inspected the elements until I got something that worked. Plus I had the design, that helped too. 🤗)

import styled from 'styled-components';
import { Link } from 'react-router-dom';
import {BiRestaurant} from 'react-icons/bi';
import {Container} from '../../Globalstyles';


export const Nav = styled.nav` 
font-size: 18px;
position: sticky;
top: 0;
z-index: 999;
height: 80px;
background-color: rgba(0, 0, 0, 0.5);
/* box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.5); */
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.15);
display: flex;
justify-content: center;
align-items: center;
`;

export const NavbarContainer = styled(Container)`
display: flex;
justify-content: space-between;
align-items: center;
height: 80px;
${Container};
`;

export const NavLogo = styled(Link)`
color: #fff;
cursor: pointer;
display: flex;
align-items: center;
text-decoration: none;
font-size: 2.5rem;
font-weight: 800;
transition: all .5s ease;
&:hover{
    transform: scale(1.08);
}
`;

export const NavIcon = styled(BiRestaurant)`
margin-right: .8rem;
transition: all .5s ease;

&:hover {
    transform: scale(2);
}
`;

export const MenuIcon = styled.div`
display: none;

@media (max-width: 1000px) {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(-50%, 20%);
    font-size: 4rem;
    cursor: pointer;
}
`;

export const Menu = styled.ul`
display: flex;
align-items: center;
text-align: center;

@media only screen and (max-width:1000px) {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 80px;
    left: ${({click}) => click ? '0' : '-100%'};
    background-color: rgba(0, 0, 0, 0.9);
    transition: all .5s ease;
}
`;

export const MenuItem = styled.li`
list-style: none;
height: 80px;


@media only screen and (max-width:1000px){
    width: 100%;
    &:hover {
        border: none;
    }
}
`;

export const MenuLink = styled(Link)`
text-decoration: none;
font-weight: bold;
font-size: 2rem;
color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 2rem;
height: 100%;
transition: all .2s ease;

&:hover {
    color: #E38B06;
    transform: traslateY(-3rem);

}
&:active {
    transform: traslateY(3rem);
    color: #E38B06;
}

@media only screen and (max-width:1000px){
    display: block;
    padding: 3rem;
    text-align: center;
    transition: all .2s ease;
}
`;

export const MenuItemBtn = styled.li`
list-style: none;
@media screen and (max-width:1000px){
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50%;
    height: 120px;
}
`;

export const MenuLinkBtn = styled(Link)`
text-decoration: none;
display: flex;
justify-content: center;
align-items: center;
padding: 8px 16px;
height: 100%;
width: 100%;
border: none;
outline: none;

`;

In the App.js you need to add the router

If not you will get this error
`Error: Invariant failed: You should not use <Link> outside a <Router>`

//Wrap your components inside the router.
import {BrowserRouter as Router,Switch,Route,Link} from "react-router-dom";
import {Navbar} from './components';
import GlobalStyles from './Globalstyles';
function App() {
  return (
    <Router>
      <GlobalStyles/>
      <Navbar/>

    </Router>
  );
}

export default App;

Component 2: The Hero component

This section will contain the Navbar, the background image, the text and the button.

Create the Hero folder, add the Hero.js and Hero.styles.js

|--components
   |--Navbar
      |--Navbar.js
      |--Navbar.styles.js
   |--Hero
      |--Hero.js
      |--Hero.styles.js

    |--index.js

In the index.js folder, we will export all our components.
export {default as Hero} from './Hero/Hero';

Coding the Hero section In the Hero.js, we will import the Button component from the GlobalStyle component created earlier. I used flexbox for this section since the content was less.

import Navbar from '../Navbar/Navbar';
import {Button} from '../../Globalstyles';
import {
    HeroContainer,
    HeroContent,
    HeroContentText,
    HeroTitle,
    HeroTitleText,
    HeroSubTitle,
    HeroText,
    HeroBtn,

} from './Hero.styles';

const Hero = () =>{
    return(
        <div>
           <HeroContainer>
               <Navbar/>
               <HeroContent>
                   <HeroContentText>
                        <HeroTitle>
                            <HeroTitleText>Healthy</HeroTitleText>
                            <HeroTitleText>Meals All Day</HeroTitleText>
                        </HeroTitle>
                        <HeroSubTitle>For a longer Life</HeroSubTitle>
                        <HeroText>
                            Get a fresh and tasty recepies that are well balanced and 
                            will improve your wellness, plus add nutrients to your body.
                        </HeroText>
                        <HeroBtn to="/order-now">
                           <Button primary big bigFont bigRadius>Pick your meals</Button>
                        </HeroBtn>
                   </HeroContentText>
               </HeroContent>
           </HeroContainer>
        </div>
    )
}

export default Hero;

Styles of the Hero section => Hero.styles.js

Component 3: How it works section

This section only has 3 cards in it, I used flexbox but you can use the grid to make it easier for the layout part. To centre the text you should definitely use flexbox to centre the text.

display: flex;
justify-content: center;
align-items: center;

Create the Works folder, add the Works.js and Works.styles.js I not that good at naming folders, haha, bare with me.

|--components
   |--Navbar
      |--Navbar.js
      |--Navbar.styles.js
   |--Hero
      |--Hero.js
      |--Hero.styles.js
   |--Works
      |--Works.js
      |--Works.styles.js

    |--index.js

In the index.js folder, we will export all our components.
export {default as Works} from './Works/Works';

Let's code the section. Inside the Works.js file add the code below. For the icons, I used react-icons that we installed earlier. I picked Boxicons for the site, that I also included in the design files. 😊

import {
    WorksContainer,
    WorksContent,
    WorksTitle,
    WorksCardContent,
    WorksCard,
    WorksIconContainer,
    WorksIcon1,
    WorksIcon2,
    WorksIcon3,
    WorksCardTitle,
    WorksCardText
} from './works.styles';
const Works = () => {
    return (
        <div>
            <WorksContent>
                <WorksContainer>
                    <WorksTitle> How it works</WorksTitle>
                    <WorksCardContent>
                        <WorksCard>
                            <WorksIconContainer>
                                <WorksIcon1 className="Icon"/>
                            </WorksIconContainer>
                            <WorksCardTitle>Pick a meal</WorksCardTitle>
                            <WorksCardText>
                                There are different meals every week to choose from. 
                                This gives you a variety of options to switch it up.
                            </WorksCardText>
                        </WorksCard>
                        <WorksCard>
                            <WorksIconContainer>
                                <WorksIcon2/>
                            </WorksIconContainer>
                            <WorksCardTitle>Customize it</WorksCardTitle>
                            <WorksCardText>
                               Choose your favourite recipes that you want to cook. 
                               Pick the category you love. 
                            </WorksCardText>
                        </WorksCard>
                        <WorksCard>
                            <WorksIconContainer>
                                <WorksIcon3/>
                            </WorksIconContainer>
                            <WorksCardTitle>Cook it up</WorksCardTitle>
                            <WorksCardText>
                               Order the meal you have chosen. 
                               Fresh and packed ingredients straight to your doorstep.
                            </WorksCardText>
                        </WorksCard>
                    </WorksCardContent>
                </WorksContainer>
            </WorksContent>

        </div>
    )
}

export default Works;

Styles of the Works section => Works.styles.js

component 4: Welcome section

This is really simple you can use grid for the layout and as usual flexbox for the text in the welcome content.

Create the Welcome folder and add welcome.js and welcome.styles.js files. Also, remember to export it to the index.js file as I showed earlier.
For this part, I had to google how to import local images in a react app. Here is how it's done.

import PizzaImg from '../../images/pizza.png';
 <Img src={PizzaImg} alt=" Delious Pizza"/>

In the welcome.js file, add the following code.

import {
    WelcomeContainer, 
    WelcomeContent,
    WelcomeImg, 
    WelcomeContentText,
    WelcomeContentTitle,
    WelcomeText,
    Img
} from './Welcome.styles';
import PizzaImg from '../../images/pizza.png';
const Welcome = () => {
    return (
        <div>
            <WelcomeContainer>
                <WelcomeContent>
                    <WelcomeImg>
                        <Img src={PizzaImg} alt=" Delious Pizza"/>
                    </WelcomeImg>
                    <WelcomeContentText>
                        <WelcomeContentTitle>Welcome</WelcomeContentTitle>
                        <WelcomeText>
                            Home made is a great way to make meals at home that are health and enjoyable. 
                            We have a variety of categories to choose from that help meet your needs in your health journey.
                            You can customize the ingredients you want to be added to your meal. This can be due to health 
                            resources, you don’t have to use everything on the list.
                        </WelcomeText>
                        <WelcomeText>
                            The order will be sent straight to your doorstep in less then 
                            1hr pre-packed for you in portions. 
                            Start cooking by following the visual guide in your order and serve your family a healthy meal.
                        </WelcomeText>
                    </WelcomeContentText>
                </WelcomeContent>


            </WelcomeContainer>

        </div>
    )
}

export default Welcome;

Styles of the Welcome section => Welcome.styles.js

Component 5 : Recipe section

This section was fun to make. Got the idea from dribble. I loved the overall outcome with the layout. For the responsive design, it was a bit of pain at first but I got it to work. You can check the link on my Github.

Create the Recipe folder, add the recipe.js and recipe.styles.js file. For code, as usual, it will be in the recipe.js file and the styling using styled-components will be in the recipe.styles.js file.
In the recipe.js file, you can add the code below.
Ps: this is one of the files I need to refactor, the code even hurts my eyes, haha. 😫

import {OutlineButton} from '../../Globalstyles';
import SalmonImg from '../../images/salmon.png';
import ChickenImg from '../../images/Chicken.svg';
import PizzaImg from '../../images/Italian-pizza.svg';
import PastaImg from '../../images/Pasta.svg';
import SaladImg from '../../images/salad.png';
import {
    RecipeContainer,
    RecipeWrapper,
    RecipeTitle,
    RecipeContentContainer,
    RecipeTabContainer,
    RecipeBtn,
    RecipeCardWrapper,
    RecipeFeature,
    RecipeFeatureContent,
    RecipeFeatureTitle,
    RecipeFeatureText,
    RecipeFeatureDetails,
    RecipeFeatureItem,
    RecipeItemTitle,
    RecipeItemContent,
    RecipeItemIcon,
    RecipeItemText,
    RecipeCardSection,
    RecipeSmallCards,
    RecipeCard,
    RecipeCardContent,
    RecipeCardHeading,
    RecipeCardDetails,
    RecipeCardItems,
    RecipeCardTitle,
    RecipeCardItem,
    RecipeCardIcon,
    RecipeCardText,
    RecipeImg,
    Img,



} from './Recipes.styles';
const Recipes = () => {
    return (
        <div>
            <RecipeWrapper>
                <RecipeContainer>
                    <RecipeTitle>Recipes</RecipeTitle>
                    <RecipeContentContainer>
                        <RecipeTabContainer>
                            <RecipeBtn to='/sea-food'>
                                <OutlineButton big bigFont bigRadius>Sea Food</OutlineButton>
                            </RecipeBtn>
                            <RecipeBtn to='/Vegetarian'>
                                <OutlineButton big bigFont bigRadius>Vegetarian</OutlineButton>  
                            </RecipeBtn>
                            <RecipeBtn to='/meat'>
                                <OutlineButton big bigFont bigRadius>Meat and Poultry</OutlineButton>
                            </RecipeBtn>
                            <RecipeBtn to='/easy-preps'>
                                <OutlineButton big bigFont bigRadius>Easy meal preps</OutlineButton>  
                            </RecipeBtn>
                        </RecipeTabContainer>
                        <RecipeCardWrapper>
                            <RecipeFeature>
                                <RecipeImg src={SalmonImg} alt="Salmon Recipe"/>
                                <RecipeFeatureContent>
                                    <RecipeFeatureTitle>
                                        Salmon and Hot Honey Butter
                                    </RecipeFeatureTitle>
                                    <RecipeFeatureText>
                                        The hot honey kinda sounds like a hype name used before the 20s, (I used it back then). 
                                        It’s a perfect coating for the salmon to enrich it with sweetness and heat. 
                                    </RecipeFeatureText>
                                    <RecipeFeatureDetails>
                                        <RecipeFeatureItem>
                                            <RecipeItemTitle>Serving</RecipeItemTitle>
                                            <RecipeItemContent>
                                                <RecipeItemIcon/>
                                                <RecipeItemText>2</RecipeItemText>
                                            </RecipeItemContent>

                                        </RecipeFeatureItem>
                                        <RecipeFeatureItem>
                                            <RecipeItemTitle>Cook time</RecipeItemTitle>
                                            <RecipeItemText>35-45 min</RecipeItemText>
                                        </RecipeFeatureItem>
                                        <RecipeFeatureItem>
                                            <RecipeItemTitle>Difficulty level</RecipeItemTitle>
                                            <RecipeItemText>20%</RecipeItemText>
                                        </RecipeFeatureItem>

                                    </RecipeFeatureDetails> 
                                </RecipeFeatureContent>
                            </RecipeFeature>
                            <RecipeCardSection>
                                <RecipeSmallCards>
                                    <RecipeCard>
                                        <Img src={ChickenImg} alt="Chicken Recipe"/>
                                        <RecipeCardContent>
                                            <RecipeCardHeading>
                                                Pretzel-Crusted Chicken
                                            </RecipeCardHeading>
                                            <RecipeCardDetails>
                                                <RecipeCardItems>
                                                        <RecipeCardTitle>Serving</RecipeCardTitle>
                                                        <RecipeCardItem>
                                                            <RecipeCardIcon/>
                                                            <RecipeCardText>2</RecipeCardText>
                                                        </RecipeCardItem>

                                                    </RecipeCardItems>
                                                <RecipeCardItems>
                                                    <RecipeCardTitle>Cook time</RecipeCardTitle>
                                                    <RecipeCardText>30-45 min</RecipeCardText>
                                                </RecipeCardItems>
                                                <RecipeCardItems>
                                                    <RecipeCardTitle>Difficulty level</RecipeCardTitle>
                                                    <RecipeCardText>20%</RecipeCardText>
                                                </RecipeCardItems>

                                            </RecipeCardDetails>
                                        </RecipeCardContent>

                                    </RecipeCard>
                                    <RecipeCard>
                                        <Img src={SaladImg} alt="Salad Recipe"/>
                                        <RecipeCardContent>
                                            <RecipeCardHeading>
                                                 Sesame Asian Salad
                                            </RecipeCardHeading>
                                            <RecipeCardDetails>
                                                <RecipeCardItems>
                                                        <RecipeCardTitle>Serving</RecipeCardTitle>
                                                        <RecipeCardItem>
                                                            <RecipeCardIcon/>
                                                            <RecipeCardText>2</RecipeCardText>
                                                        </RecipeCardItem>

                                                    </RecipeCardItems>
                                                <RecipeCardItems>
                                                    <RecipeCardTitle>Cook time</RecipeCardTitle>
                                                    <RecipeCardText>10-15 min</RecipeCardText>
                                                </RecipeCardItems>
                                                <RecipeCardItems>
                                                    <RecipeCardTitle>Difficulty level</RecipeCardTitle>
                                                    <RecipeCardText>10%</RecipeCardText>
                                                </RecipeCardItems>

                                            </RecipeCardDetails>
                                        </RecipeCardContent>

                                    </RecipeCard>
                                </RecipeSmallCards>
                                <RecipeSmallCards>
                                    <RecipeCard>
                                        <Img src={PizzaImg} alt="Pizza Recipe"/>
                                        <RecipeCardContent>
                                            <RecipeCardHeading>
                                                Italian Pizza with Cheese
                                            </RecipeCardHeading>
                                            <RecipeCardDetails>
                                                <RecipeCardItems>
                                                        <RecipeCardTitle>Serving</RecipeCardTitle>
                                                        <RecipeCardItem>
                                                            <RecipeCardIcon/>
                                                            <RecipeCardText>2</RecipeCardText>
                                                        </RecipeCardItem>

                                                    </RecipeCardItems>
                                                <RecipeCardItems>
                                                    <RecipeCardTitle>Cook time</RecipeCardTitle>
                                                    <RecipeCardText>30-45 min</RecipeCardText>
                                                </RecipeCardItems>
                                                <RecipeCardItems>
                                                    <RecipeCardTitle>Difficulty level</RecipeCardTitle>
                                                    <RecipeCardText>20%</RecipeCardText>
                                                </RecipeCardItems>

                                            </RecipeCardDetails>
                                        </RecipeCardContent>

                                    </RecipeCard>
                                    <RecipeCard>
                                        <Img src={PastaImg} alt="Pasta Recipe"/>
                                        <RecipeCardContent>
                                            <RecipeCardHeading>
                                               Pasta with creamy sause
                                            </RecipeCardHeading>
                                            <RecipeCardDetails>
                                                <RecipeCardItems>
                                                        <RecipeCardTitle>Serving</RecipeCardTitle>
                                                        <RecipeCardItem>
                                                            <RecipeCardIcon/>
                                                            <RecipeCardText>2</RecipeCardText>
                                                        </RecipeCardItem>

                                                    </RecipeCardItems>
                                                <RecipeCardItems>
                                                    <RecipeCardTitle>Cook time</RecipeCardTitle>
                                                    <RecipeCardText>10-15 min</RecipeCardText>
                                                </RecipeCardItems>
                                                <RecipeCardItems>
                                                    <RecipeCardTitle>Difficulty level</RecipeCardTitle>
                                                    <RecipeCardText>10%</RecipeCardText>
                                                </RecipeCardItems>

                                            </RecipeCardDetails>
                                        </RecipeCardContent>

                                    </RecipeCard>
                                </RecipeSmallCards>

                            </RecipeCardSection>

                        </RecipeCardWrapper>
                    </RecipeContentContainer>
                </RecipeContainer>
            </RecipeWrapper>

        </div>
    );
}

export default Recipes;

Styles of the Recipes section => Recipes.styles.js
For the styles, I used flexbox hence the increase of code. But you can style it however you want, maybe use grid layout.

Component 6: Personalize meals section

This is a simple section similar to the welcome section. You can use grid or flexbox for this, no need to worry.
Remember to create the folder where you will write your code for the component and export it to the index.js file.

In the meals.js file add the following code. (Yes, I know I am bad naming folders, haha 😪)

import {Button} from '../../Globalstyles';
import ChickenImg from '../../images/Big-chicken.svg';
import {
    MealsContainer,
    MealsWrapper,
    MealsImage,
    Img,
    MealsContent,
    MealsContentTitle,
    MealsContentText,
    MealsContentItems,
    MealsContentList,
    MealsContentDetails,
    MealsContentIcon,
    MealsContentCategory,
    MealsContentBtn
} from './Meals.styles';
function Meals() {
    return (
        <div>
            <MealsContainer>
                <MealsWrapper>
                    <MealsImage>
                        <Img src={ChickenImg} alt= "Personalized Chicken meal"/> 
                    </MealsImage>
                    <MealsContent>
                        <MealsContentTitle>Personalize your Meals</MealsContentTitle>
                        <MealsContentText>
                           Choose your weekly or daily meal plan from our meals to kick 
                           start your month. All meanu are fresh and set for you in portion to make it easier to cook immediately. 
                        </MealsContentText>
                        <MealsContentItems>
                            <MealsContentList>
                                <MealsContentDetails>
                                    <MealsContentIcon/>
                                    <MealsContentCategory> Vegetarian</MealsContentCategory>
                                </MealsContentDetails>
                                <MealsContentDetails>
                                    <MealsContentIcon/>
                                    <MealsContentCategory>Gluten-Free</MealsContentCategory>
                                </MealsContentDetails>
                                <MealsContentDetails>
                                    <MealsContentIcon/>
                                    <MealsContentCategory>Card-conscious</MealsContentCategory>
                                </MealsContentDetails>
                                <MealsContentDetails>
                                    <MealsContentIcon/>
                                    <MealsContentCategory>Calorie -conscious</MealsContentCategory>
                                </MealsContentDetails>

                            </MealsContentList>
                            <MealsContentList>
                                <MealsContentDetails>
                                    <MealsContentIcon/>
                                    <MealsContentCategory>15 mins pre-kit</MealsContentCategory>
                                </MealsContentDetails>
                                <MealsContentDetails>
                                    <MealsContentIcon/>
                                    <MealsContentCategory>Featured Meals</MealsContentCategory>
                                </MealsContentDetails>
                                <MealsContentDetails>
                                    <MealsContentIcon/>
                                    <MealsContentCategory>New recipes</MealsContentCategory>
                                </MealsContentDetails>
                                <MealsContentDetails>
                                    <MealsContentIcon/>
                                    <MealsContentCategory>Low fat meals</MealsContentCategory>
                                </MealsContentDetails>

                            </MealsContentList>
                        </MealsContentItems>
                        <MealsContentBtn to='/order-now'>
                            <Button big bigFont bigRadius>Explore Our Meals</Button>

                        </MealsContentBtn>
                    </MealsContent>
                </MealsWrapper>
            </MealsContainer>

        </div>
    )
}

export default Meals;

Styles for the Meals section => Meals.styles.js

Component 7: The footer section

This is the last component for the website. The footer section is easier to style with flexbox. Just look at the content in terms of the bigger block inside small blocks. Your eyes should work like Pesticide chrome extension, try to see the bigger picture of the layout, the big blocks inside small blocks, etc. (Haha, it's a trick that works for me, plus it makes coding easier.🤗)

Create the footer folder, add the Footer.js and Footer.styles.js file. Inside the footer.js file add the code below.

import {
    FooterSection,
    FooterContainer,
    FooterNewsletter,
    FooterNewsletterTitle,
    FooterNewsletterText,
    FooterNewsletterForm,
    FooterNewsletterInput,
    FooterBtn,
    FooterLinkContainer,
    FooterLinksWrapper,
    FooterLinks,
    FooterLinkTitle,
    FooterLink,
    FooterCopyRight,
    FooterLabel
} from './Footer.styles';
function Footer() {
    return (
        <div>
            <FooterSection>
                <FooterContainer>
                    <FooterNewsletter>
                        <FooterNewsletterTitle>Join our listing for execlusive discounts and new recipes</FooterNewsletterTitle>
                        <FooterNewsletterText>We create new recipes every week and cooking tips</FooterNewsletterText>
                        <FooterNewsletterForm>
                            <FooterLabel htmlFor="email">Email address</FooterLabel>
                           <FooterNewsletterInput name="email" id="email" type="email" placeholder="Email address" />
                           <FooterBtn>Submit</FooterBtn>
                        </FooterNewsletterForm>
                    </FooterNewsletter>
                    <FooterLinkContainer>
                        <FooterLinksWrapper>
                            <FooterLinks>
                                <FooterLinkTitle>About Us</FooterLinkTitle>
                                <FooterLink to='/'>Our Chefs</FooterLink>
                                <FooterLink to='/'>Our Farm</FooterLink>
                                <FooterLink to='/'>Testimonials</FooterLink>
                                <FooterLink to='/'>Terms of service</FooterLink>
                            </FooterLinks>
                            <FooterLinks>
                                <FooterLinkTitle>Services</FooterLinkTitle>
                                <FooterLink to='/about'>How it works</FooterLink>
                                <FooterLink to='/'>Meal prep kit</FooterLink>
                                <FooterLink to='/'>Gift cards</FooterLink>
                                <FooterLink to='/'>Orders</FooterLink>
                            </FooterLinks>

                        </FooterLinksWrapper>
                        <FooterLinksWrapper>
                            <FooterLinks>
                                <FooterLinkTitle>Resources</FooterLinkTitle>
                                <FooterLink to='/'>Kitchenware</FooterLink>
                                <FooterLink to='/'>Recipes</FooterLink>
                                <FooterLink to='/'>FAQ &amp; Support</FooterLink>
                                <FooterLink to='/'>Affiliate Program</FooterLink>
                            </FooterLinks>
                            <FooterLinks>
                                <FooterLinkTitle>Contact</FooterLinkTitle>
                                <FooterLink to='/'>Instagram</FooterLink>
                                <FooterLink to='/'>Facebook</FooterLink>
                                <FooterLink to='/'>Youtube</FooterLink>
                                <FooterLink to='/'>Linkedin</FooterLink>
                            </FooterLinks>

                        </FooterLinksWrapper>
                    </FooterLinkContainer>
                    <FooterCopyRight to='https://github.com/muchirijane'> &copy; Copyright 2020, Designed and coded with 💛 by Jane Tracy</FooterCopyRight>
                </FooterContainer>
            </FooterSection>

        </div>
    )
}

export default Footer;

Styles for the Footer section => Footer.styles.js
Remember to export the footer component inside the index.js file.

The App.js file

In the app.js file will import our components.

import {BrowserRouter as Router,Switch,Route} from "react-router-dom";
import {Hero, Works,Welcome,Recipes,Meals,Footer} from './components';
import GlobalStyles from './Globalstyles';
function App() {
  return (
    <Router>
      <GlobalStyles/>
      <Hero/>
      <Works/>
      <Welcome/>
      <Recipes/>
      <Meals/>
      <Footer/>
    </Router>
  );
}

export default App;

For the whole code check my Github. Congratulations you just made a simple react website. I couldn't put all the code because the post would be extremely long, but I tried to cover the most important parts.

In conclusion

The only way to learn is by doing. Go to Figma app and start doing your wireframes and code it up. Along the way, you will learn a lot as your google stuff you don't understand or don't know how to use. To give you a simple picture, I google how to import a font family, import local images, etc. Don't feel like you can't do it, yes you can Code Newbie. 🤗(I have a feeling I am gonna laugh at my code 5yrs to come.)
I really did a lot to create this post even though it is long I hope it's useful in any way. I can't wait to learn more about React. Week three of learning React was terrific.

If you find this post useful, share it with your peers or beginners who are learning React and might find this article useful to their journey. You can also buy me coffee for support as I write more posts. 🙂

Designers to follow on Dribble or Instagram and Awwards Website for Web UI inspiration

Jane Tracy 👩🏽‍💻 — Sun, 08 Nov 2020 17:04:00 +0000

Background Story

This week has been great, I have gone through some fantastic designers who are inspiring on UI/UX design. I decided to share the links that you can follow and add them to your inspiration list. Whether you are doing a side project or building your portfolio learning how to combine colours and create a great UX flow will be advantageous. So far I have learnt the best way to be better in design, is to follow talented designers on their platforms for daily inspiration. If you love creating out of the box front end projects, I hope the list helps you.
Plus the designers on platforms, like dribble, have freebies that you can use for personal or commercial use. You can take the designs and code it up yourself as you learn how to code and use animations.

If you are code newbie and want to build projects but you don't know where to start or how to make the UI look good. I hope the list below helps. Thank you Anto Elkwaet for suggesting I start a design series.

Dribble

1) Zhenya Rynzhuk - Art Director & Awwwards Judge

2) Mike | Creative Mints- Graphic design & Illustration

3) Cuberto Full-cycle agency

4) Outcrowd A full-service innovative agency

5) tubik - Design for awesome experiences and bright brands

6) Dwinawan - UI Designer, love something simple and clean

7) Filip Justić - Head of Design at Balkan Bros. digital agency

8) Focus Lab - A brand agency where imagination meets process

9) Barthelemy Chalvet- Co-Founder & Creative Director of AgenceMe

10) Synchronized - Full-service studio crafting unique digital experiences

Instagram

11) Richard | Frontend Dev & UI/UX

12) interfacely - UI/UX/Webdesign Inspiration

13) UI Gradient - Learn UI/UX

14) Ux brainy - UX / UI Design Inspiration

15) dailywebdesign - Web Design Inspiration (UI/UX)

16) websitebrainy - UI/UX Design Inspiration

17) uiuxdailydesign - Daily UI/UX Inspiration

18) website.ui - Daily web Ui inspiration

19) pixelwebworks - Web design UI/UX Inspiration

20) ui.mob - Web Design Inspiration

Awwards Website

Awwwards is a professional web design and development competition body. It aims to recognize and promote the best of innovative web design. It is a website competition that developers can submit to.

This is a great place to get web and colour inspiration from talented designers and developers.

I hope the list helps a beginner or senior dev in their next project as you work on your colour scheme or UI UX designs. You can drop links to designers you love and follow for web inspiration in the comment section.

If you find this post useful share it with your peers or beginners who learning code and want to get UI inspirations that will be useful to their journey. You can also buy me coffee. 🙂

Mental health in the Dev community

Jane Tracy 👩🏽‍💻 — Sun, 01 Nov 2020 17:03:16 +0000

For those who started out coding during the pandemic, it can be a bit hard. Especially if you were laid off because 'you were new to the company'(Trying to reduce the budget, they say). On top of that, It can be overwhelming to learn something completely different from the previous career you had. If you a single parent, it because even more overwhelming to balance learning to code and family. Pull off last nights or early mornings before everyone gets up.

If you want to join a community that supports mental health among Devs join => Devs Helping Devs on discord. At times when there is a lot of uncertainty, you need people who are positive and believe in you, even when you can't.

I wanna know, how you still keep that fire burning and pushing to learn code against all odds? (Do it in the comment section🤗)

I love taking time to relax and go for walks alone when I am overwhelmed or anxious about something. It gives me time to analyze the situation and come up with a realistic solution. This rejuvenates and helps me to clearly think about the next step. (Mostly for coding challenges or when I am learning something new.)

Stay positive, push through the hard times and remember `WHY` you started your journey in the first place. We are all in this together.❤

15+ Chrome extensions you should have in your pocket.

Jane Tracy 👩🏽‍💻 — Sun, 25 Oct 2020 17:00:48 +0000

This week I was looking at the chrome extensions that I have used so far and have been helpful in my journey. I love how some apps that I use also have chrome extensions with the same functionality. It reduces the hustle of downloading the app itself on my laptop. There are more common extensions like momentum, Json viewer, Octree, etc that most developer uses. But I will list others that are not that extremely popular but I love how efficient they are in my daily dev routine. I will also like to mix up both design and dev extensions that might be helpful to you.
All the extensions I will list down are free and very useful. At times I can't believe how efficient they are yet you get them free. That's why I love open source contribution, it's a way to give back to these amazing developers.

Top 12 extension that you should add to your list

1) Wave for accessibility

This amazing extension evaluates your website and tells you the accessibility issues that you have. Through this tool, you can know whether your site is accessible or not. Plus it directs you to the code with the issue and gives you a detailed explanation of the issue. On top of this, it gives you links to articles for accessibility standards and guidelines for that specific error.
This tool helps me when I am involved in any open source projects and I can write many issues such as contrast errors, missing labels, same alt text in images, etc. Also helps me analyze someone's website upon request for a portfolio review. It would be awesome when you go to a job interview and tell the company about how the team should use it to improve accessibility in their site(They will see you as a great junior developer, I promise).

2) Mercury Reader

Mercury Reader removes ads or any other distractions and leaves the text and images for a more focused reading on any website. Plus you can send the post straight to your Kindle if you want to. Just click send to Kindle link at the top of the blog post.
This extension is one of my favorites extensions because I love reading through design or tech blogs in the morning. For many devs reading blogs like the smashing magazine or hacker news is a great way to know what's new. With this tool, you can now read through blogs without been interrupted by ads. Now my reading process is smoother and more enjoyable.

A blog post I was reading in smash magazine

When I used Mercury Reader

You can click the setting icon at the top right and customize it. Change the font size, Typography, or theme.

3) Dark Reader and Midnight Lizard

From the name itself, the Dark Reader Chrome extension turns any website to a dark mode theme. This is a great way to take care of your eyes especially during the night. But for me I use it 24/7, haha I don't like the brightness of websites whether day or night. (No, I ain't a vampire, haha 😁)
Midnight Lizard is also similar to Dark Reader but it more customizable with multiple different color themes.

Smashing Magazine with Dark Reader

Midnight Lizard custom settings

4) Go full page screen capture

This extension takes high-quality screenshots of the whole website. I use this tool when I want to collect design inspiration from different websites. I put them in my Figma canvas to see what I can pick for my personal projects. Also, It's a great way to take images of your projects to add them to your portfolio or social media account.

5) Take Webpage Screenshots Entirely - FireShot

This extension captures, edits, and saves them to PDF/JPEG/GIF/PNG, upload, print, send to OneNote, clipboard, or email. This has more functionality on how to capture specific areas of the website. I have used this tool a lot this month during Hackoberfest. It's useful When creating front-end issues on projects or when creating a pull request and showing my changes. People seeing something visually is always preferred than just plain text.

6) Focus To-Do: Pomodoro Timer & To Do List

This is a Task management chrome extension that helps you to be more focused and motivated in your daily workload. If you want to use it on your computer without downloading the actual app itself, this extension will be done. It has the same functionality as the desktop or mobile app. You can create projects that you are doing and set time to take breaks. Whether it's after every 25 minutes or 40 minutes. The extension is free for basic usage but you can pay the premium package if you want.

7) Loom for Chrome

This extension is great for making video messages to your team or for project collaboration with a friend. It's also used for making coding reviews or showing your clients how to solve small issues on their website. The good thing about it, you can customize it to your needs. Whether it's recording the full desktop, the current tab only, or choose to use the video camera or audio-only.

8) Image downloader

From the name itself, the extension helps you download images from any website you want, plus it's free and open source. When you want to get images individually or in bulk this will be a great tool. I have used it when I want to code websites I love using, just to improve my front-end skill. Have the images that exactly look like the website you are cloning with great.

9) Read Aloud

This extension read out the text on any website with just one click. When you want to read your blog but you also want to work on code, this tool will be useful. It will read the blog for you in the background as you continue writing your code. Even as I write this blog, I am using it to read out some articles on smashing magazine and Dev to. You can customize the voice, speed, pitch, volume, etc.

I am now listening to A complete beginner guide to React by Hemant Joshi

10) Get Pocket

This extension helps you to save your favorite videos or articles you come across on the web. Plus you can organize them using tags to make it easier to find them in one place.

11) CSS Peeper

This extension is a CSS viewer that lets you inspect the styles used in the site. You can also view the colors used on the website or the assets such as images or icons.

Inspect the styles

Colors used in the website

Assets used

In conclusion

There are so many extensions I have not listed but are very effective. The list will be 20 + extensions, haha. But I will do part two of efficient productivity tools that I use. Other extensions I use that are very common are:

whatfont - Inspect the font family or font-size used
Color pick eyedropper- zoomed color picker for websites.
Momentum - Replace a new tab page with a personal dashboard featuring to-do, weather, and inspiration.
JSON Viewer -
Grammarly- Grammarly helps you eliminate writing errors and find the perfect words to express yourself.
Daily Dev- This is the fastest way to get news on what's new in the tech sector. Plus I love the User experience of the extension for sure.
Lorem Ipus Generator - Generates lorem ipus text easily.
Lighthouse - Improves the performance of your website by giving you guidelines that you can improve on.
Web developer checklist - Analyses any web page for violations of best practices.
Octotree - Used for Github exploration and code reviews.
Wappalyzer- It shows you what the website is built on.

Hope you go new tools to help you out and be more efficient and productive. Share your favourite extensions that are not on the list. I will love to take a look at them. 💖✨

UPDATE: I have removed The great suspender from the list. Take a look at this link for more details. Thank you Entio for telling me about this.

If you find this post useful share it with your peers or beginners who learning code and might find these extensions useful to their journey. You can also buy me coffee. 🙂

20 Basic React Questions to help you as you learn

Jane Tracy 👩🏽‍💻 — Sun, 18 Oct 2020 17:08:41 +0000

Learning React can be challenging in the first few weeks. Getting to know how to use props when to use class or functional components. I am still on this journey of learning React and I found it helpful to use some basic beginner questions that I can be asking myself every week. This is a good way to help me understand the fundamentals plus repetition will make recall easier. I used some of my favorite resources I came across this week. I will post the question and answers plus the source link that I got them from. I will not be diving into redux or hooks, just basic common React questions for now. As I advance, I will definitely write a part two with more complex questions.
If you are learning React too, you can use these questions to ask yourself every Friday and with time it will be easier to recall the answers. Don't wait to rush through them when you are getting ready for the interview.

React Questions

1) What is React

Front end Javascript library
Developed by Facebook in 2011
Follows component-based approach
It allows you to create reusable UI components
Used to develop complex, interactive web as well as mobile UI
Open-Sourced in 2015 and has a strong foundation and large community.

✨ Source link

2) Feature of React

Uses Virtual Dom
Does Server-side rendering
Follow Unidirectional data flow ie one-way data binding. React’s data flow between components is uni-directional (from parent to child only).
Uses reusable/composable UI components to develop the view.

✨ Source link - Edureka

3) Advantages and disadvantages of React

Advantages

Easy to know how a component is rendered, you just look at the render function.
JSX makes it easy to read the code of your components. It is also really easy to see the layout, or how components are plugged/combined with each other.
You can render React on the server-side.
It is easy to test, and you can also integrate some tools like jest.
It ensures readability and makes maintainability easier.
You can use React with any framework (Backbone.js, Angular.js) as it is only a view layer.

Disadvantages

It is only a view layer, you have still to plug your code for Ajax requests, events, etc.
The library itself is pretty large.
The learning curve can be steep.

✨ Source link - Stackoverflow

4) What is JSX

JSX stands for Javascript XML- eXtensible Markup Language.
Utilizes the expressiveness of Javascript with an HTML - like templates syntax.
Makes HTML easy to understand.
It is Robust
Boosts up the JS performance.
JSX expression must have only the outermost element.

✨ Source link - Edureka

5) What is the Virtual DOM

The virtual DOM (VDOM) is a programming concept where an ideal, or “virtual”, representation of a UI is kept in memory and synced with the “real” DOM by a library such as ReactDOM. This process is called reconciliation.

✨ Source - React Docs

6) How does virtual Dom work?

Whenever any underlying data changes, the entire UI is re-rendered in Virtual Dom representation.
Then the difference between the previous DOM representation and the new one is calculated.
Once the calculation is done, the real DOM will be updated with only the things that have actually changed.

✨ Source link - Edureka

7) Difference between the Virtual DOM and the Real DOM

Virtual DOM	Real DOM
Updates faster	Updates slower
Can't directly update HTML	Can directly update HTML
Updates if JSX element renders	If elements updates it creates a new a DOM
No DOM manipulation expense	DOM manipulation is very expensive
No memory wastage	Too much of memory wastage

✨ Source link - Edureka

8) Why can't the browser not read JSX

JSX is not a regular Javascript
Browsers can read Javascript objects only.
JSX file is converted to JS object by JSX Transformer link Babel that converts it before reaching the browser.

✨ Source link - Edureka

9) How React is different from Angular?

Topic	React	Angular
1) Architecture	Only view MVC	Complete MVC
2) Rendering	Server-side rendering	Client-side rendering
3) DOM	Uses virtual DOM	Uses real DOM
4) Data Binding	One-way data binding	Two-way data binding
5) Debbuging	Compile time debugging	Run time debugging
6) Author	Facebook	Google

✨ Source link - Edureka

10) 'In React everything is a component', Explain?

First, components are the building blocks of React User Interface.
Components let you split the UI into independent, reusable pieces, and think about each piece in isolation.
Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen.

✨ Source - React Docs

11) Explain the purpose of render function

The render function is used to update the user interface
It returns a single React element which is the representation of the native DOM component.
To render a React element into a root DOM node, pass both to ReactDOM.render()

const title = <h1>Hello, world</h1>;
ReactDOM.render(title, document.getElementById('root'));

✨ Source link - React Docs

12) What are props in React

Props stand for properties of a component.
Are pure ie immutable.
Always passed down from parent to child component.
Used to render dynamic data

✨ Source link - Edureka

13) What is state in React

State is an in-built object in React that helps the components to create and manage their data.
Determines components rendering and behavior.
Creates dynamic and interactive components
It is accessed via this.state()
Can update the state using this.setState()

✨ Source link - Edureka

14) What is an event in React

An event is a result of a triggered reaction from specific action like a mouse click, mouse hover, keypress, etc.
Events in React are similar to vanilla Javascript events.

15) Modularize code in React

This simply means putting your code in independent modules or files.
You can use the import and export method and use components from different components.

16) Difference between controlled and uncontrolled components

Controlled Components	Uncontrolled Components
Do not maintain their own state	Maintain their own state.
{Data is controlled by the parent component	Data is controlled by the DOM
Takes in current values through props and notifies changes via callbacks	Refs get their current value.

✨ Source link - Edureka

17) What are the higher-order components?

Custom components that wrap other components.
They accept dynamically provided child components.
Are pure functions.

✨ Source link - Edureka

18) What is the significance of keys in React?

Used to identify unique virtual DOM Elements with their corresponding data driving the UI.
Helps React to optimize rendering by recycling existing DOM elements.
Keys must be a unique number or string.
Application's performance increases.

✨ Source link - Edureka

19) How to use React label element

Instead of using for="" like in HTML, you use htmlFor="" attribute.

<label htmlFor = {'name'}> </label>
<input type={'text} id={'name'}/>

20) Why are arrow function used in React

Arrow functions are useful when you want this to refer to the parent component.
Arrow function don't it's own this.
this will be inherited from its enclosing scope.

In conclusion

I have linked the resources where I got the questions and answers. You can use them to go them deeper into the question you didn't understand or couldn't answer on the first go. Keep asking yourself 3 questions a day and see how you are progressing in your journey. The more you can explain them in detail without googling the more you are getting better at it.

If you find this post useful share it with your peers or beginners who learning React JS and might find these questions useful to their journey. You can also buy me coffee. 🙂

What's the hardest thing about learning React JS?

Jane Tracy 👩🏽‍💻 — Sun, 11 Oct 2020 17:08:37 +0000

Learning React can have it's ups and downs especially when you are learning it by yourself.

Great react questions and discussions

This week I came across these resources that I found useful in breaking down the hard parts of React.

I would love to hear:

1) what you found hard or confusing at first when you started learning React?

2) How you solved it.

How to participate in the Hacktoberfest as a Code Newbie 💻

Jane Tracy 👩🏽‍💻 — Sun, 04 Oct 2020 17:04:31 +0000

What I Learned From Hacktoberfest so far

This is my first Hacktoberfest event to participate in as a code newbie. To be honest at first, when I had the about the event, I thought it was a month where hackers come together and hack their way into any server. In the end, those that hack into the most 'secure' servers win. (Don't laugh at me, I blame MR.Robot😂, in my defense, I didn't even know what HTML was, at that time.) But since last month I have engaged in a few open-source projects and to be honest, I have learned so much. At times I just look back at how little I knew and laugh, I was so nervous to even make my first Pull request. (Will it be good enough to be merged, do I know what I am doing 👀). The first try I ever did, It got rejected cause I forget to make a branch (I was so frustrated that I could forget something so simple 😒). But when I started to contribute to more projects, I made fewer errors, and a lot of my PRs(Pull Requests) got merged. I am now participating more and even rising issues to different projects that I participate in. Mostly the accessibility issues because I find most people build amazing projects but tend to forget the little things like contrast errors, not using labels in the inputs or having the same alt text in all images, etc. If you just started coding a few weeks ago and this is your first time contributing to an open-source project, I will show you step by step on how to do it. (basics common steps)

How to participate with basic HTML and CSS or JS skills

If you are a beginner in the coding world you might be nervous or scared this event will pass by without you participating. But the good news is, you don't have to be a hardcore developer to participate. I will show you, where you find beginner-friendly projects and engage with the open-source community.

1) Register for the event

One thing you should have before registering is creating a Github account (If you already have one, you are good to go). You will be able to sign in to your account and they will track your Pull request for this month. Plus there is a 14 days review window, so you can get your Pull request sorted during this time.

Click the start hacking button and you will be directed to connect to your GitHub account.
Click the sign in with Github button
This will direct you to log in to your GitHub account and authorize it. Now you have successfully registered as a contributor to the event.

2) Find projects you can participate in

In the other years, you could participate in any Public GitHub project that was open source. But this year there are new rules (at least the few ones that were updated from 3rd October). For your Pull Request to count the project you want to be involved in must have a hacktoberfest topic in the repository. This just means they have accepted to participate in the event.
I made a PR on a hacktoberfest label issue but the repository didn't have the topic. So the PR was marked as ❗Ineligible Repository. If you find such projects you can raise an issue about it(ask the maintainer to add the hacktoberfest topic) or move on to valid projects.

PRs count if: Submitted in a repo with the hacktoberfest topic AND during the month of October AND ( The PR is merged OR The PR is labeled as hacktoberfest-accepted by a maintainer OR The PR has been approved )

Important : Check out the 2020 hacktoberfest updated rules

Where to find projects?

Go to the Hacktoberfest website. The official website has everything you will need, from which projects you can participate in and the questions you what some clarification(FAQ).

Go to your Github account and filter projects with the Hacktoberfest Topic Yes, if the repository doesn't have the hacktoberfest topic your PR will be marked as ❗Ineligible Repository. Play it safe and follow the rules. But if you just want to contribute without partaking in the event you can contribute to any open-source repo.

Create your own project. If you have Html, CSS, or even Javascript skills you can create your own project and ask your dev friends to participate. Yes, you can be a maintainer even if it's a small project. Then create issues like: make the navbar responsive, make the website have zero contrast errors on wave or post design with a zip folder to your assets and other devs can turn it to code. There are many possibilities. If you see other projects are too complex, create your own and in the process, you will help other beginners learn how to code. You can follow resources lists of the Hacktoberfest website and get to see how to be an effective maintainer💕

2) Steps to take to make your contribution

When you find the right project for you, remember to follow the PR etiquette.
Let's do any easy step to a beginner project, just to give you a visual guide on how to do this yourself. I love learning as I follow along. Hope you understand as you follow the steps with me.🙂

1) Fork the Github project

This is done by clicking the fork button on top of the page. This will create a copy of the repository in your own Github account.

2) Step two: Clone the project

Click on the clone button and then click on the copy to clipboard icon.
This will create a copy of the project files to your local environment.
Ps: You can create an 'open source' folder where you want to copy the project files.
Open your terminal or in my case 'cdmer' and run



git clone <URL>

## Let's get the URL for the contributions repo

   git clone https://github.com/muchirijane/learning-code-through-github-repos

3) Run git status

Before you start coding run git status to make sure everything in the project files are updated with the 'origin/master/main branch'.



git status

4) Create a new branch

In this small open-source project for beginners, your task is to add Github repositories with resources and tools.
The branch will include your resource under the feature flag



git checkout -b feature/<add-your-resource-in-the-branch>

   ## In my situation the branch should be 

   git checkout -b feature/react-resource

5) Make your contribution

In this case, you are required to add your resource to the readme.md file. But you have to use the feature flag and compare it to the develop branch, not the main branch.
After that run git add, git commit and push your branch



git add .

   ## commit the changes

   git commit -m "added awesome react resource GitHub repository  to the readme file"

   ## Let's push our branch

   git push origin <branch-name-you-created>

   git push origin feature/react-resource develop

6) Compare and Pull request

Nope! you are not done yet, one more step.
To contribute your code to the origin repository.
Click Compare and pull request

7) Create a new pull request

In some projects, you will have to really go into detail because they are using a PR template. You got to check [x] the correct checkboxes depending on your pull request. Ensure your pull request has a hacktoberfest-accepted label(I don't know how crucial this step is but you can ask around). This action should be taken by the maintainer of the project. (Take a look at the updated rules)

That's it, congratulations you just made your first successful hacktoberfest pull request. I'm so proud of you!!!

In conclusion

Let me just say this, don't make pull requests just for the sake of making them or getting a T-shirt/platting a tree. Take this, a serious way to learn how to contribute and be part of the open-source community. Don't spam repos by deleting and adding the same code just for a commit. (I have seen messed up things on twitter 😒). Take your time to understand the project, go to the contribution.md file, and see the steps to take to contribute to the project. Ensure you make meaningful commits.

Example of a bad commit I have seen going around twitter For more details about Hacktoberfest follow the Dev series here on dev.to. You will get updates and things you need to know during the event. If you want to learn more about Git and Github for beginners, Check out my first post. If you want to practice on how to make a pull request, I have a small open-source project about adding useful resources. Read the contribution.md file and make a pull request. I will merge it Asap. You can also join the Hacktoberfest Discord channel for updates, help in your open-source project, or sharing your project for others to contribute. Apart from that, I want to wish you a happy hacktoberfest, and thank you for your support. I truly appreciate it.

If you find this post useful share it with your peers or beginners who are learning how to contribute to open-source projects - Hacktoberfest event. They might find these guidelines useful in their journey. You can also buy me coffee. 🙂

Free React resources you should have in your pocket.

Jane Tracy 👩🏽‍💻 — Sun, 27 Sep 2020 17:10:04 +0000

Background story

I have been learning React JS in the last two weeks(including this week) and the journey is amazing so far. Getting to learn about stateful components, stateless components, how to use useState instead of Class Component, and using event handlers. I am still learning each day and building small projects to practice the basics(I don't want to be in a tutorial hell, looks scary😲). The road will be long and it will have ups and downs but that's the coding journey. Knowing how you learn the tools or resources that work for you is important. Let's not forget been patient with yourselves is key to learning new things. Take your time and don't rush through something. Because months down the line, you know less than you expected and you have to go back and relearn what you rushed through. I decided it will be good if I made a post about the react resources that will be beneficial as I practice react.

React Resources to use

The list will include different websites with free react resources that will be beneficial to you and your project. They include:

Free react templates
Free learning resources
React UI libraries
React Github Repositories

1) Awesome React

This amazing Github repository has great resources that include the React ecosystem. You can fork or star it will be useful in your next project. The repo includes:

React tools
React General Resources
React Community
React Online Playgrounds
React tutorials

Take a look at the repository, I hope you find informative tools and resources.

2) Reactiflux

To be honest, I didn't know about this website until now but that why I am making this post. Reactiflux is an amazing react community where you can learn and engage with other react developers. They also hold Q&As talks with Facebook engineers which is a great way to ask questions on how to improve your skills. They also have a list of learning resources for Javascript and react. Plus they have a job search section where you can get to see who wants to hire a remote react developer.
Yes, Reatiflux is worth checking out and using it in your journey.

3) Awesome React Talks

This is a Github repository with a list to react talks that go from 2013 to 2019. If you want to add an informative react talk, you can because it's open-source.
Some of the talks I enjoyed from the list are:

For more lists of amazing talks follow awesome React talks on GitHub.

4) Hero35 website

I can't believe I didn't know about this amazing website until now. This is where most of the react talks or conferences are posted and you can follow them. If you missed a talk from other talks they have the videos which you can watch, like, and share. It's like you didn't miss the important talks at all. Amazing talks/conferences included are:

Women of React
JAMStack conference talks
React Europe
React Summit
React Conf AU
Frontend developer love 2020
React Day Berlin

If you don't want to miss the upcoming virtual talks before the year ends, sign up to Hero35 website

5) Awesome React Components

This amazing Github repository has a great list of resources that will help you in any part of your project process. You can expect amazing things like:

UI Components like buttons, menu, tabs, charts, tables, etc
Code design
UI Frameworks like material design
UI layout
UI animation like Parallax
UI utilities
Performance
Dev tools and cloud solutions.

6) 35+ Free React templates and themes by Davide Pacilio

Davide made an amazing post here on Dev.to where he listed amazing react templates to use in your next project. All the 35 resources are free, you don't have to worry about licenses for commerce use. You will get a list of:

Admin dashboards
Websites
Landing pages
Online portfolios
Blogs
Design systems

Some of the useful links I found are:

Atomize - A great design system for react js where developers and designers can work together to build UIs easily
Treat - The site has Customizable modern React UI Templates and Components built using TailwindCSS for the front-end. All the websites are fully responsive, you can twitch a few things to your liking.
Gatsby Starter Ghost - This a simple but effective template for blogs, magazines, or news websites. I have to say the design is so beautiful and I will definitely use it in the future.

8) The Official React Documentation

I know you all know it but the documentation has amazing is always the first free resource for any framework or language. The documentation is well written, easy to follow with a lot of code snippets and a game built-in react for practice.

9) React Resources

This website has different react resources that you can use in your learning journey or your project. The different categories include:

Article and tutorials
Video guides and talks
Books and Guides
Courses and video series
Podcast episodes
conference and jobs

10) React learning resources

I have listed a bunch of resources especially the Github repositories with 90+ react resources and tools. But you can't build anything without understanding the syntax used when it's your first framework. You have to learn at least the basics and then build small projects as you level up your skills by building. For most people, they love starting with free resources on the internet or through reading books. For me personally what has worked for me is using the documentation and video tutorials. Here is a list of free resources you can use to learn React Js:

In Conclusion

Learning React Js after being comfortable with Javascript is a good way to level up your skills. You get to use the knowledge you learned with vanilla javascript and put it into practice. Before I finish this if you want to join a good React community, join the Reatiflux discord channel. The community has over 126k members who are friendly and welcoming to beginners. If you want more experienced devs to give you a hand during your journey, this is the best place.
The Hackoberfest registration is already open, hope you have registered, if not please go register now. If you are a beginner to open source no worry, I have a few posts just to guide you.

Git and Github for beginners - Git and GitHub are essential for you to learn and make your contribution process easier.
Open Source contribution for begineers - I will take you, step by step on how to make a successful Pull request with an example of course.

If you find this post useful share it with your peers or beginners who learning React JS and might find these resources useful to their journey. You can also buy me coffee. 🙂

The vanilla Javascript basics to know before learning React JS

Jane Tracy 👩🏽‍💻 — Sun, 20 Sep 2020 17:24:06 +0000

REACT JS

Background Story

If you just finished JavaScript online courses or other self-taught resources going to your first JS framework can be scary. One thing I would like to encourage you is that we all have some doubts as a beginner. But pushing through the 'fear/doubt' of I don't think 'I am ready enough' or 'smart enough' is something that you go through. Coding is a continuous journey that evolves all the time with new programming languages or frameworks being created. If you are presented with an opportunity to be on a project that uses a framework or technology that you haven't used, don't be quick to say no. Just say you don't know it but you are willing and ready to learn it. At least that's what I did. In the next three months, I will be learning React as I contribute to the project, the team, and grow.

Let's get started with the vanilla javascript basics

In the process of learning React JS, I have found a few things you should understand before starting it. I will brush through the features and add useful links to the documentation you can use to learn them on a deep level. These are ES6 syntax or ES7 syntax mostly used are:

Es6/ES7 classes
Arrow functions
let and const
Imports and Exports
Spread and rest operator
Destructuring
Array functions especially filter and map

Using Let and Const variables

Before var was used to set new variables but with the ES6 updates let and const were introduced.
Scope: var variables are globally scoped or accessible. This means when they are declared outside a function they are accessible throughout your file or window. This can be dangerous because you can change it without knowing, hence getting a lot of errors. let and const has blocked scope. This means when they are declared inside a function or any block of code, they can’t be accessed outside it. Thus you can’t easily break your code by manipulating or redeclaring the same variable outside the function.
Re-assigning: Var variables can be re-assigned and updated easily, let can be updated but not re-assigned, and const variable can't be re-assigned, it is constant(doesn’t change). But the values within a const array or properties within a const object can be changed.


//Var can be re-assigned
var name = 'Jane Tracy 👩‍💻';
var name = 'Luke Wilsey 🎥';
console.log(name);
//output => Luke wilsey 🎥 

//var can be updated too
var name = 'Spencer 👩‍💻';
name = 'Tom🍄';
console.log(name);
//output => Tom🍄

//let can’t be re-assigned
let name = 'Jane Tracy 👩‍💻';
let name = 'Luke Wilsey 🎥 ';
console.log(name);
//output => Syntax error: the name has already been declared

// let can be updated
let name = 'Spencer 👩‍💻';
name = 'Tom🍄';
console.log(name);
//output => Tom🍄

//const can’t be re-assigned
const name = 'Jane Tracy 👩‍💻';
const name = 'Luke Wilsey 🎥 ';
console.log(name);
//output => Syntax error: the name has already been declared

//const object properties or array values can be changed
const friends = [{
    name: 'Bob 🥽',
    age: 22,
    hobby: 'golf🏌',
    music: 'rock 🎸'
  }

];

const result = friends.age = 23;
console.log(result);
//output => 23

// const object can't be re-assigned 
const friends = [{
    name: 'Bob 🥽',
    age: 22,
    hobby: 'golf🏌',
    music: 'rock 🎸'
  }

];

friends = [{
  name: 'Jane 🥽',
  age: 24,
  hobby: 'golf🏌',
  music: 'Pop 🎸'
}];

console.log(friends);
//output => Uncaught TypeError: Assignment to constant variable.

For more about const take a look at W3Schools section on const

Arrow functions

When I started learning about arrow functions, I immediately loved them. They are short and straight to the point. Basically arrow functions are a way to write functions with shorter syntax. They were also introduced in the ES6 update.

Named functions without arguments


//old function syntax 
function name() {
  console.log("Tracy 🚠");
}
name();

// arrow function
const name = () => {
  console.log("Tracy 🚠");
};
name();
//or you can even make it shorter by removing writing

const name = () => console.log("Tracy 🚠");
name();

Named functions with arguments

function add(a, b) {
  return a + b;
}
console.log(add(3, 5));

//arrow function
const add = (a, b) => {
  return a + b;
};
console.log(add(3, 5));

//you can also shorten if it returns one thing
const add = (a, b) => a + b;
console.log(add(3, 5));

Not using parentheses when you have one argument

//Using template literals to avoid the old concatenation
const series = favorite => console.log(`I love watching ${favorite}`);
series("The office");

Note: Arrow functions are used a lot in modern frameworks, it will be better if you get comfortable with them. For a deep dive look at Arrow functions by MDN

ES6 Classes

A class is another type of function which is declared by the class keyword and can be used to create new objects. A class contains properties and methods. The constructor method is used for initializing objects that are created by the class itself and we use this keyword to refer to the current class.

class GreatMovies {
  constructor(movie) {
    this.movie = "The Lord of the Rings 🎥";
  } 

  printMovie(){
    console.log(`My favorite movie is ${this.movie}`);
  };
}

//this creates an object by using new before the class name
const myMovies = new GreatMovies(); 
myMovies.printMovie();
//output => My favorite movie is The Lord of the Rings 🎥

Class inheritance

We use extends in classes to inherit properties from another class.
In the example below, the class GreatSeries inherits the property and method from the GreatMovies class. The super method is used to call the parent constructor. In our case, it will call the constructor of the GreatMovies class.

class GreatMovies {
  constructor(movie) {
    this.movie = movie;
  }

  printMovie() {
    return `My favorite movie is ${this.movie}`;
  }
}

class GreatSeries extends GreatMovies {
  constructor(movie, series) {
    super(movie);
    this.series = series;
  }

  printList() {
    return `${this.printMovie()}, now I am watching ${
      this.series
    } series today.`;
  }
}
const watchingList = new GreatSeries("The Social dilemma", "The Society");
console.log(watchingList.printList());

ES7 class syntax

The best thing about the ES7 class syntax you don’t have to write the constructor or the super method. We can also use the arrow functions as class methods. This for me makes it easier and faster to write code.
Let's redo the former classes we used and change it to ES7 syntax.

class GreatMovies {
  movie = "The Social dilemma";

  printMovie = () => {
    console.log(`My favorite movie is ${this.movie}`);
  };
}

const myMovies = new GreatMovies();
myMovies.printMovie();

How to write extended classes without the super method

The constructor and super method are written behind the scenes, so you don’t have to write them.

class GreatMovies {
  movie = "The Social dilemma";

  printMovie = () => {
    console.log(`My favorite movie is ${this.movie}`);
  };
}

class GreatSeries extends GreatMovies {
  movie = "The Social dilemma 🎥 ";
  series = "The Society";

  printList = () => {
    return `My favorite movie is ${this.movie} and now I am watching ${this.series} series today 🍹.`;
  };
}

const watchingList = new GreatSeries();
console.log(watchingList);
console.log(watchingList.printList());

For more about classes check out MDN mozilla docs

Imports and exports

You can store functions in one Javascript file and later on export it to use it in another Js file by importing the file or a specific function/s.

How to export a file or some functions
You can use the default when exporting one main thing from the file. This can be done only once in a file.

const movieList = movie => `I enjoyed watching ${movie} movie`;

export default movieList;

//If the function is more than one
const movieList = movie => `I enjoyed watching ${movie} movie 💕 `;

const seriesList = series => `I enjoyed watching ${series} series 🍹 `;

export {movieList , seriesList as default};

//You can also export function individually => named export
export const movieList = (movie) => `I enjoyed watching ${movie} movie 💕 `;

export const seriesList = (series) => `I enjoyed watching ${series} series 🍹 `;

How import files

//How to import multiple functions individually
//uses the named export
import {movieList, seriesList} from './watching/mylist.js';

//how to import one function called movieList
//using the default export
import movieList from './watching/mylist.js';

//importing using an alias
import {movieList as MovieList} from "./watching/mylist.js";

If you want to learn more about imports and exports you can follow the following resources
import and export in Javascript by Digital Ocean
import and export by Javascript info

Spread and rest operator

When I first heard of this operator I was so curious to understand how only three dots can be so powerful, simple and easy to use. To me the three dots were like magic, a safe way to copy reference types without any issues.
The spread and rest operator uses three dots (. . .) to initialize it.
The spread operator is used for splitting up the values of an array and adding them to another array or splitting the properties of an object and adding them to another object.

//In arrays
const jobs = ["teacher 👩‍🏫 ", "engineer 🧰", "developer 👩‍💻"];

const currentJobs = [
  ...jobs,
  "actor 🎥",
  "social media influencer 📴",
  "musician 🎻",
];

console.log(currentJobs);
//output => ["teacher 👩‍🏫 ", "engineer 🧰", "developer 👩‍💻", "actor 🎥", "social media influencer 📴", "musician 🎻"]

//In objects
const currentJob = {
  name: "Jane",
  job: "developer 👩‍💻",
};

console.log(currentJob);

const funJob = {
  ...currentJob,
  name: "Tracy",
  PartTimejob: "musician 🎻",
};

console.log(funJob);
//output => {name: "Tracy", job: "developer 👩‍💻", PartTimejob: "musician 🎻"}

The rest operator
This operator is used to represent an infinite amount to arguments in a function.

const num = (...args) => {
  return args.map((arg) => arg / 2);
};
const result = num(40, 60, 80, 120, 200, 300);
console.log(result);

//output => [20, 30, 40, 60, 100, 150]

//example 2
const myFruits = (...fruits) => {
  return fruits.filter((fruit) => fruit !== "🍌");
};

const result = myFruits("🍎", "🥝", "🍌", "🍍", "🍉", "🍏");

console.log(result);
//output
["🍎", "🥝", "🍍", "🍉", "🍏"]

Destructuring

At first I thought that destructuring and the spread operator do the same job, but I was wrong. The spread operator copies all the values of an array or all properties of an object while destructuring copies specific values or properties which you store in a variable.
Array destructuring

const myFruits = ["🍎", "🥝", "🍌", "🍍", "🍉", "🍏"];
const [myFavorite, , , listFavorite] = myfruits;
console.log(myFavorite, listFavorite);
//output 
🍎 🍍

Objects destructuring

const { name, job } = { name: "Tracy", job: "musician 🎻" };
console.log(name, job);
//output 
Tracy musician 🎻

Array function

Array functions are not new but they are still important to know and practice on. In react, map and filter methods are commonly used when dealing with data. For more about them, go to the MDN docs, it's my best resource to learn about Js array functions.

Filter method
The filter method creates a new array of elements that returned true from the call back function passed.

const friends =[
  {name: 'Jane', age: 23},
  {name: 'Bob', age: 22},
  {name: 'Tracy', age: 24},
  {name: 'Jack', age: 25},
  {name: 'Fred', age: 25}
];

const filterAge = friends.filter(friend => friend.age> 23);
console.log(filterAge);
//output 
 [
  {name: 'Tracy', age: 24},
  {name: 'Jack', age: 25},
  {name: 'Fred', age: 25}

 ]

In the example above it returns the objects with people who are 23 years and above only.

Map method
The map method creates a new array from the results of the callback function. The callback is called on each index on the array. The indexes are the elements in the array. Let’s look at an example.

const friends = [{
    name: 'Jane 🌟',
    age: 23
  },
  {
    name: 'Bob 🥽',
    age: 22
  },
  {
    name: 'Tracy 🏌',
    age: 24
  },
  {
    name: 'Jack 🎸',
    age: 25
  },
  {
    name: 'Fred 🤾',
    age: 25
  }
];
const mapNames = friends.map(friend => friend.name);
console.log(mapNames);

//output
["Jane 🌟", "Bob 🥽", "Tracy 🏌", "Jack 🎸", "Fred 🤾"]

Where to learn React for free

Learn react for free by Bob ziroll in scrimba
FreeCodeCamp react and redux section
Front end development with React in Coursera
Building application with react and flux by Cory House from PluralSight

In conclusion

To make your transition to react learn Javascript first, don’t rush the course or documentation. Take your time weeks or months to ensure you understand vanilla Javascript. When I started with Javascript three months ago, I never thought I could even explain Js this well. Kinda laughing at myself since I thought I would take a year or so to understand mid-level JS 🥺(Hey, don't laugh at me 😄). I hope this article gives you an idea of the topics I brushed through. For more details and in-depth look, check out MDN Docs. For learning about ES6, ES7, ES8, ES9 see history of Javascript article by Madasamy M

If you find this post useful share it with your peers or beginners who learning Javascript and want to react js. You can also buy me coffee. 🙂

DEV Community: Jane Tracy 👩🏽‍💻

Nevertheless, She choose to challenge and coded. ✨

How it all started

My most recent achievement was…

My biggest goal is…

My advice for allies to support underrepresented folks who code is...

In Conclusion

Introduction to Framer Motion

What is Framer Motion

How to install Framer motion to your React project

Motion Components

Using Initial prop

Transition prop

whileHover prop

Variants

Animating Routes

In conclusion

40+ Python resources you should have

Python learning resources

Free Resources😎

YouTube Resources🎥

Paid Resources🎉

Python Exercises or challenges✨

Podcast Resources🙌

Books📚

Blog platform✍

Update

In conclusion

A React website with Styled-components for beginners ✨

Background story

Some Useful tips

Quick intro to styled-components

Let's create a simple website

Design

Import styled-components and write global styles for the website

Component 1: Let's start adding and styling the Navbar

Component 2: The Hero component

Component 3: How it works section

component 4: Welcome section

Component 5 : Recipe section

Component 6: Personalize meals section

Component 7: The footer section

The App.js file

In conclusion

Designers to follow on Dribble or Instagram and Awwards Website for Web UI inspiration

Background Story

Dribble

Instagram

Mental health in the Dev community

I wanna know, how you still keep that fire burning and pushing to learn code against all odds? (Do it in the comment section🤗)

Stay positive, push through the hard times and remember WHY you started your journey in the first place. We are all in this together.❤

15+ Chrome extensions you should have in your pocket.

Top 12 extension that you should add to your list

3) Dark Reader and Midnight Lizard

In conclusion

20 Basic React Questions to help you as you learn

React Questions

1) What is React

2) Feature of React

3) Advantages and disadvantages of React

4) What is JSX

5) What is the Virtual DOM

6) How does virtual Dom work?

7) Difference between the Virtual DOM and the Real DOM

8) Why can't the browser not read JSX

9) How React is different from Angular?

10) 'In React everything is a component', Explain?

11) Explain the purpose of render function

12) What are props in React

13) What is state in React

14) What is an event in React

15) Modularize code in React

16) Difference between controlled and uncontrolled components

17) What are the higher-order components?

18) What is the significance of keys in React?

Stay positive, push through the hard times and remember `WHY` you started your journey in the first place. We are all in this together.❤