Scrimba - freeCodeCamp.org

Algorithms in Javascript - Binary Search Explained

freeCodeCamp — Mon, 15 Jun 2020 09:44:40 +0000

By Per Harald Borgen

If you want to gain new problem-solving skills and level up your Computer Science knowledge, look no further than Scrimba's free one-hour course, The Working Developer's Guide To Algorithms. It was designed for those who don't have a background in Computer Science and feel they would benefit from learning to think algorithmically.

What does the course do?

Our guide takes you through how to craft six different binary search algorithms. In classic Scrimba style, it contains a bunch of challenges along the way, so you'll gain the muscle memory you need to improve your skills as a software developer and work better with algorithms going forward.

You'll learn:

Binary Search
Big O notation
Imperative code
Recursion
Tail recursion
Array splitting
Array view
Partition

Each algorithm is taught in three stages:

Walkthrough: Jonathan introduces the algorithm conceptually.
Implementation: We get our hands dirty by crafting our own versions of the algorithm.
Solution: Jonathan shows us his implementation for comparison.

Prerequisites

You'll get the most out of this course if you have a good understanding of Javascript and are ideally already working as a developer or are a Bootcamp graduate.

If you're not there yet, check out Scrimba's great free tutorials Introduction to JavaScript and Introduction to ES6+.

Intro to the instructor

Jonathan Lee Martin is a software developer, web educator, speaker, and author. He helps other developers achieve their professional and personal goals through writing, speaking, immersive Bootcamps, workshops, and online tutorials.

With clients including companies such as NASA and HP, he's just the person to take you through the learning journey. So let's get started!

Binary Search

Click the image to access the course.

In the first cast, Jonathan introduces to the concepts of Big-O notation and binary search, the algorithm we'll be working with.

Big-O notation is a means of describing the worst-case performance of an algorithm. A Big O of O(n) says that if an array has a length of n elements, the run time will be proportional to n. In other words, an array of seven entries will take 7 lookups in the worst case, just as an array of 7 million entries will take 7 million entries in the worst case. We can also say this algorithm's runtime is linear, as illustrated in the graph above.

Binary search is one of several strategies for answering the question "Where does this element appear in a list?"

When answering the question, there are two main approaches:

Sweeper: Checking through each item in the list until the correct item is found.
Splitter / Binary Search: Splitting the list in half, checking whether you have gone too far or not far enough to locate the item, searching either right or left side respectively and repeating until the item is located.

We can think of these approaches in terms of checking an old-school paper phone book. The sweeper approach would involve looking through each and every entry from the start until the correct one is located. The splitter approach is the one most people would use - opening the book randomly and seeing whether you need to go forwards or back until the entry is located.

Binary Search is more efficient than the sweeper approach, particularly for larger lists. But it only works when the list has already been sorted.

While the sweeper approach has a linear runtime (see graph above) and Big O of O(n), the splitter approach has a sub-linear runtime and a Big O of O(log n).

Imperative

In the first challenge cast, Jonathan encourages us to get our hands dirty by implementing binary search in a traditional style, that is with a Big O of O(n), using a fixed amount of memory and loops.

Jonathan provides us with a test suite we can use to ensure our solution is successful and encourages us to try the challenge ourselves before checking out his implementation. No spoilers here, so head over to the cast to give it try yourself.

While this solution is short and close to the original formulation of binary search, you've probably noticed that the solution was difficult to write and not the best solution from a software craftsmanship point of view. Read on to find out ways to level up the solution...

Recursion

In this cast, we look at improving our binary search by implementing a new version with a few constraints. While our solution should still have a Big O of O(n), it should not use loops and must use recursion. All variables should be initialized with the const operator so they can't be mutated.

Jonanthan kicks us off with a skeleton version of the solution and then encourages us to try the challenge on our own:

let binarySearchWithRecursion = (array, element, compare = defaultCompare) => {
    return -1;
};

export default binarySearchWithRecursion;

If you've completed this challenge, you've probably seen that this solution is a lot easier to read but is quite verbose. In the worst case, it can also result in infinite recursion. Continue with the course to see whether there are ways of streamlining the solution...

Tail Recursion

The challenge for the next cast is to improve our previous implementation by reducing duplication.

Jonathan warns us that the solution will look worse than the previous two solutions, however, it sets us up for some better optimizations further down the line. Head over to the course now to try the challenge for yourself and see Jonathan's solution.

Array Splitting

If you completed the previous challenge, you may have felt that we're still passing a lot of extra information into our binary search via recursion. This cast looks at a way of cleaning that up called array splitting.

We can think of array splitting in terms of our phone book example from earlier - whenever we decide that half the phone book is irrelevant, we just tear it off and throw it away. Similarly, our next solution should disregard any parts of the array which don't include our desired entry.

To help us achieve this, Jonathan starts us off with some skeleton code:

let binarySearchWithArraySplitting = (
    array,
    element,
    compare = defaultCompare
) => {
    return -1;
};

Then, as usual, he gives us free rein to try to the solution for ourselves before walking us through his own implementation.

Although this is an elegant method of binary search, because it involves making a copy of part of the array, it no longer has a Big O of O(n) and has a higher memory usage and slower run time. Continue with the course to find out whether there is a way to regain a higher performance with a similar code solution...

Array View

In this cast, we look for ways of merging the higher performance of our previous solutions with the elegance of array splitting. To do this, we create an array-like object that responds to the same methods as an array. We'll then inject this object in place of the original array.

Jonathan gets us started by initializing a function ArrayView which returns an object that expects three arguments: array, start and end. When invoked, ArrayView should return an object with four methods, length, toArray, slice and get.

export let ArrayView = (
    array,
    start = 0,
    end = array.length,
) => ({
    length: end - start,
    toArray: () => array.slice(start, end),
    slice: () => ,
    get: () => ,
});

let binarySearchWithArrayView = (array, ...args) =>
    binarySearchWithArraySplitting(ArrayView(array), ...args)

Our challenge is to implement the slice and get methods of ArrayView without making a copy of the original array. Click through to try it out and then view Jonathan's walkthrough.

Although this solution produces better, more readable code, it is longer than some of our previous solutions. Continue with the course to find out if we can retain the benefits of ArrayView while lifting even more of the logic out of binary search code...

Array Partition

In the final challenge cast of the course, Jonathan gives us a goal of extracting some of the cryptic bounce logic in our previous version into a data structure.

For this, we need a simple data structure which returns the middle, left or right part of an array. To start us off, Jonathan sets up a function ArrayPartition:

export let ArrayPartition = (array, pivot) => ({
    left: () => array.slice(0, pivot),
    middle: () => array.get(pivot),
    right: () => array.slice(pivot + 1, array.length),
});

Next, Jonathan sets up a new version of binary search called binarySearchWithPartition, which has a starting signature the same as binarySearchWithArraySplitting:

let binarySearchWithPartition = (array, element, compare = defaultCompare) => {
    if (array.length === 0) {
        return -1;
    }
    const middle = Math.floor(array.length / 2);
    const comparison = compare(element, array.get(middle));

    if (comparison === 0) {
        return middle;
    }

    //bounce logic
    const [left, right] =
        comparison === -1 ? [0, middle - 1] : [middle + 1, array.length];
    //end of bounce logic

    const subIndex = binarySearchWithArraySplitting(
        array.slice(left, right),
        element,
        compare
    );

    return subIndex === -1 ? -1 : left + subIndex;
};

let binarySearchWithPartitionAndView = (array, ...args) =>
    binarySearchWithPartition(ArrayView(array), ...args);

Our challenge now is to rewrite binarySearchWithPartition with none of the bounce logic highlighted above, instead of creating an array partition and making calls to its left, middle and right methods.

Head over to the course now to try the challenge for yourself. As Jonathan points out, this challenge is tricky, so it's ok to skip to his solution if you get stuck for too long but give it a go first on your own.

Wrap-Up

You've made it to the end of the course - great work! We've covered several approaches to binary search, all with their own benefits and drawbacks, and we've built some great muscle memory for working effectively with algorithms.

Now that you've seen six different approaches to binary search, you'll probably notice it pop up in many different places in programming.

Jonathan's full course featuring 10 algorithms will be coming out at the end of the year, but in the meantime, I hope you can put your newfound binary search skills to good use.

Happy coding :)

Learn Vuetify in 5 Minutes

freeCodeCamp — Fri, 12 Jun 2020 16:38:26 +0000

By Leanne Rybintsev

Welcome to a whistle-stop tour of Vuetify - a popular component library for Vue.js. It allows you to create attractive, accessible apps with 80 elements ready to use from the get-go, plus it gives you the option to customize elements for a bespoke design.

In the next five minutes, I'll you show you the following hot Vuetify elements:

Typography
Spacing
Buttons
Navigation
Grid
Card

And by the end of this article, you'll feel confident in making stunning apps with just a few lines of code.

While reading, head over to Scrimba's 2-hour Vuetify course to find out more and explore the code in the platform's interactive playground. Plus you can test your new skills with some interactive coding challenges. Let's get started!

Creating a Vuetify object

To use Vuetify, we first pull in Vue and Vuetify from their CDNS.

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js">script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js">script>

This allows us to instantiate a Vue application with a Vuetify property and create a new Vuetify object:

new Vue({ 
    el: '#app',
    vuetify: new Vuetify({}),
    data: {
        message: 'Using Single File Components'
    }
});

Click through to see this in detail.

Typography

Click the image to go to the cast.

Vuetify provides plenty of options for creating stunning typography, from headings of various sizes, to titles, subtitles and body text:

Heading 1
Heading 2
Heading 3
Title
Subtitle
Body

Changing text color and background color is easy with Vuetify, too. For the background color, simply add the name of the required color to the element's class. For text color, just add the color name followed by --text.

This works for around 20 standard colors and can be customized using accompanying classes such as lighten and darken.

Heading 1

Vuetify also offers classes to change the font weight and style, as well as truncate and transform text. Head over to the cast to find out more.

Spacing

Anyone who's ever used CSS knows that margins and padding can be tricky. Not with Vuetify! To add and adjust the spacing between elements, simply use classes with the following abbreviations:

m = margin p = padding t = top r = right b = bottom l = left x = right + left y = top + bottom a = all

Spacing size is adjusted using the numbers 1 to 12, which correspond to four-pixel increments. For example ml-5 denotes a left margin of 20 pixels.

Spacing

Centering elements is also easy with Vuetify. Simply wrap the element in a container that spans the page, then give it a right and left margin of auto:


     Spacing

That's not the end of Vuetify's handy tips and tricks for element spacing. Click through to the cast to see more!

Buttons

Vuetify offers dozens of options for styling buttons, including regular clickable buttons, outline buttons with ready-positioned icons, and icon-only buttons.

Keeping reading to see some of the options available straight out the box, or click through to see how to customize buttons.

Large outline button:

Submit

Button with icon:


     mdi-pencil Edit

Floating action icon button:


     mdi-plus

Click the image to go the cast.

The two main navigation options available in Vuetify are and .

Although the two elements are interchangeable to some extent, is designed for use as a site's main navigation and includes features such as scroll animations and a range of props and options.

is a smaller, more versatile component which is designed to provide functionality to other areas of an app. For instance, it could be used for the basic edit features on a small text editor.

Both navigation elements handle list drop-downs and automatically size navigation icons and buttons.

Grid

Vuetify has a built-in grid system which makes sizing and positioning elements in an app simpler than ever. The grid is split into 12 columns and has five media breakpoints for handling a variety of screen sizes.

While the default width of an element is 12 columns, it's easy to adjust this by changing the column value. For example, an item with a column value of 6 takes up half the page width. Items can be positioned using the offset property.


    
    Column

Columns in Vuetify come with pre-set spacing. Click through to the scrim to see how this affects the element and how to customize it.

Card

Click the card to access the scrim.

Adding cards to your app is simple with Vuetify's element, which is easily customisable with its four optional nested elements: , , and .

I've played around with the card provided in the cast to make my own Coffee Card. Why not head over and see where your imagination takes you, too?

 
    
     mdi-coffee
    Coffee Card
    

    "Coffee Rocks!"

    
    
        
        Miss C Bean

That's all for our hyper-speed tour of Vuetify's basic functions. To explore further, head over to the course and check out the Playground.vue file, where you can test out the code and see more of what it can do.

The course also includes a bunch of interactive challenges to put your newfound knowledge to the test and get you well on your way to becoming a Vuetify pro. When you're done there, why not check out Scrimba's huge range of other topics to continue your learning journey?

Whatever you choose to do next, happy coding :)

Learn React Hooks by Building a Paint App

freeCodeCamp — Fri, 05 Jun 2020 17:04:06 +0000

By Per Harald Borgen

According to people in the know, React Hooks are hot, hot, hot. In this article, we follow Christian Jensen's 14-part tutorial to find out about the basics of this new feature of React. Follow along to find out more!

Intro

Hooks are new to the React library and allow us to share logic between components and make them reusable.

In this course, we will be building a paint app similar to Microsoft Paint, which will allow us to name our project, switch out colors, get a new batch of colors and of course paint.

Scrimba allows you to pause screencasts at any time and play with the code. It's a great way to learn by doing!

Prerequisites

The course assumes some prior knowledge of ES6, JSX, State and Props, but no worries, we've got you covered - check out our Scrimba articles by hitting the links above.

If you are completely new to React, be sure to check out our Scrimba React course

`useState` - Part 1

First, we give our application a way to manage state using useState.

In our component, we declare a component called and create buttons to increment and decrement it. We then give useState an argument of (0) and use state restructuring to get state and setState (the function which updates the state) from our useState function. These are now renamed to count and setCount. We then render our count in the browser.

Lastly, we render buttons which update the count using an inline function which will be triggered on the click.

To ensure our count is accurate, we pass a function to our setState function instead of a value. This function takes the current state as its argument, which is then updated:

import React, { useState } from "react";
import randomColor from "randomcolor";

export default function Playground() {
    const [count, setCount] = useState(0);
    return (
        <div>
            {count}
            <button onClick={() => setCount((currentCount) => currentCount - 1)}>
                -
            button>
            <button onClick={() => setCount((currentCount) => currentCount + 1)}>
                +
            button>
        div>
    );
}

If you're worried about the performance of inline functions, take a look a this blog.

`useState` - Part 2

Now we add our name input to the component so the user can name their project.

To set up with a useState Hook, we need to import the Hook with a named import and then set our state up. Our state will be name and we will update it with setName. We then call useState and pass in an empty string as our default state value.

We now need an input element with four properties. These are:

value, which will always be the state name from above
onChange, which will use setState inline to update name by passing the value into setState
onClick which uses setSelectionRange which takes a start index of 0 and end index of the length of the string to select the entire name, making it easier for the end-user to change the name.
placeholder, which we set to 'Untitled'.

import React, { useState } from "react";

export default function Name() {
    const [name, setName] = useState("");
    return (
        <label className="header-name">
            <input
                value={name}
                onChange={(e) => setName(e.target.value)}
                onClick={(e) => e.target.setSelectionRange(0, e.target.value.length)}
                placeholder="Untitled"
            />
        label>
    );
}

We can now name our project and select the name to reset it with just one click:

`useEffect`

Currently, our Playground.js component is simply rendering a counter where can increment or decrement the count. Now we will update this so that every time the count is changed, the color of something is also changed.

We use the useState Hook to set up the initial color, which we set to null and the function to update it (setColor). Now, we set up useEffect to update this color. useEffect's first argument is setColor, which we want to set to a randomColor.

As we only want a change in count to trigger useEffect, we set this as the second argument. If the count value hasn't changed, the Hook will not run the effect and the color will remain the same.

import React, { useState, useEffect } from "react";
import randomColor from "randomcolor";

export default function Playground() {
    const [count, setCount] = useState(0);

    const [color, setColor] = useState(null);
    useEffect(() => {
        setColor(randomColor());
    }, [count]);

    return (
        <div style={{ borderTop: `10px solid ${color}` }}>
            {count}
            <button onClick={() => setCount((currentCount) => currentCount - 1)}>
                -
            button>
            <button onClick={() => setCount((currentCount) => currentCount + 1)}>
                +
            button>
        div>
    );
}

Now, our color changes every time we increment or decrement our count.

`useState` & `useEffect` Challenge

It's now time to test the skills we have acquired so far. In this screencast, a function which gets some random colors for us has been added to :

const getColors = () => {
    const baseColor = randomColor().slice(1);
    fetch(`https://www.thecolorapi.com/scheme?hex=${baseColor}&mode=monochrome`)
        .then((res) => res.json())
        .then((res) => {
            setColors(res.colors.map((color) => color.hex.value));
            setActiveColor(res.colors[0].hex.value);
        });
};

Our task is to write the functions for setColors, which will give us an array of hex colors and setActiveColor, which will tell use what the active color is.

If we set up everything correctly, the UI will update with five colors which we can click on to expand. We only need useState and useEffect for this test.

#useState & useEffect Solution#

In this screencast, Christian walks us through how to give functionality to the component. At the end of it, we now have some colors:

`useEffect` Clean Up

Now we add a component called which will show the window width and height at the bottom of the screen when the user resizes the window. This then disappears after half a second.

When we set up a timer or an event listener, we also need to clean it up once the component unmounts. This requires two pieces of state - the window size and visibility of the component:

export default function WindowSize() {
    const [[windowWidth, windowHeight], setWindowSize] = useState([
        window.innerWidth,
        window.innerHeight,
    ]);
    const [visible, setVisible] = useState(false);
}

Now we set up our effect, which adds the event listener:

useEffect(() => {
    const handleResize = () => {};
    window.addEventListener("resize", handleResize);
});

Next, we set up the cleanup phase. This returns the function and an empty array is passed in to tell it that useEffect should only run on the first mount. The cleanup will then run and remove the event listener:

useEffect(() => {
    const handleResize = () => {};
    window.addEventListener("resize", handleResize);
    return () => window.removeEventListener("resize", handleResize);
}, []);

We now set up the window size, the visibility and the timer so that the the resize window appears and then disappears after 500 milliseconds:

const [visible, setVisible] = useState(false);
useEffect(() => {
    const handleResize = () => {
        setWindowSize([window.innerWidth, window.innerHeight]);
        setVisible(true);
        setTimeout(() => setVisible(false), 500);
    };
    window.addEventListener("resize", handleResize);
    return () => window.removeEventListener("resize", handleResize);
}, []);

However, we do not want to add a new timer every time the user resizes the window, so we also need to clean up the timer with clearTimeout(timeoutId):

timeoutId = setTimeout(() => setVisible(false), 500);

To give clearTimeout the timeoutId from the last time the function ran, we use closures, which means that we declare our timeoutId variable outside the handleResize function. This way, the variable is still available to the inner function. Every time the function runs, the previous timeout will be cleared and a new one will be set up.

Lastly, we render our resize function to the browser.The final code can be seen in the screencast.

Now, whenever the user resizes their window, the window size is set to the current window size, the visibility is set to true, and a timer is started to set the visibility to false after 500 milliseconds.

`useRef` Challenge

If you need to access to actual DOM elements in React, you may need to use Refs. React has a Hook, useRef, which is dedicated to Refs.

To use a Ref, it needs to be added to the element:

"range"
    onChange={(e) => setCount(e.target.value)}
    value={count}
/>

This input is a slider which updates the count and therefore the selected color. As the value is also tied to the count, the slider will also adjust if the count is changed via the buttons we added earlier.

We have now declared our Ref, but we also need to set it up by calling useRef:

const inputRef = useRef();

In order to focus the input every time we change the count with the buttons, we simply add the necessary logic inside the effect which runs when the buttons are clicked:

 useEffect(() => {
    setColor(randomColor())
    inputRef.current.focus()
  },

Currently, the canvas is set to the height of the window itself, which makes it possible for the user to scroll within the canvas, which can lead to empty whitespace if the image is exported.

Our challenge now is to ensure that the canvas of our paint app is only as big as the window minus the header height. To do this, we need to use useRef to get the height of the header and subtract it from the window's height.

`useRef` Solution

In this screencast Christian walks us through how to get the correct canvas height with useRef.

After this, the user is no longer able to scroll, except for a few pixels offset between Scrimba's browser and a regular browser. There is now no whitespace at the bottom of the image.

`useCallback` & `useMemo` + Challenge

In this screencast, we are introduced to the concept of memoization. This is when a pure function returns the same output from a calculation it has previous processed, rather than re-running the entire calculation:

function Calculate(num) {
    // first call, num === 3... ok I will calculate that
    return fetchComplicatedAlgorithmToAdd47(3); // returns 50 after a while

    // second call, num === 5... ok I guess I have to calculate that too
    return fetchComplicatedAlgorithmToAdd47(5); // returns 52 after a while

    // third call, num === 3... WAIT, I've seen this before! I know this one!
    return 50; // immediately
}

React provides two Hooks which allow us to use memoization: useCallback and useMemo.

###useCallback###

We start off with a very simple component in Playground.js which renders the number of times the function has rendered:

function Calculate(num) {
    const renderCount = useRef(1);
    return <div>{renderCount.current++}div>;
}

Now let's say that the component should only render when the count changes, but not when the color changes. To achieve this, we could use useCallback. We assign the result of useCallback to a variable called calculate:

const calculate = useCallback(<Calculate />, [count]);

We will now render our new calculate variable instead of the component. Now, the component only renders when the count is changed, and not when the 'Change Color' button is clicked.

We also need to render our component instead of the variable we previously used and create a callback function. We use useCallback and assign it to a variable called cb. The count is the only dependency, meaning that if the count changes we will get a new function instance:

const cb = useCallback((num) => console.log(num), [count]);

Now we pass in a number (which is set to the count) to the Calculate component and the callback function, which we log to the console. Whenever the Calculate component re-renders (i.e. when the plus and minus buttons are clicked), the current count will be logged to the console.

However, with this method, the count is also logged to the console when we click the 'Change Color' button. This is because we are using memoization for our console.log function, but not for our actual component, meaning that is not checking whether the callback function is the same as a previous one.

`React.memo`

To solve this, we add React.memo to the Calculate component. Now, it will check the inputs and see whether they are the same, and will not render if so:

const Calculate = React.memo(({ cb, num }) => {
    cb(num);
    const renderCount = useRef(1);
    return <div>{renderCount.current++}div>;
});

The 'Change Color' button now no longer logs the count to the console.

###useMemo### To see what useMemo can do, we add a useCallback call right next to a useMemo call:

useCallback(() => console.log("useCallback"));
useMemo(() => console.log("useMemo"));

This tells us that useMemo is used every time the function renders. This is because useCallback returns the functions, whereas useMemo returns the result of the function:

useCallback(() => console.log("useCallback")); // return the function
useMemo(() => console.log("useMemo")); // return the result of the function

useMemo can be used for some expensive functions which you want to memoize. UseCallback, on the other hand, is better for passing a callback into a component when you don't want to render the component unnecessarily.

The screencast finishes with a new challenge. Our paint app currently offers only a few colors to work with. Our challenge is to add some functionality to a newly-added refresh button so that the user can click the button and get some new colors. This should take place in RefreshButton.js, which is currently taking in a callback and should be calling that callback when the refresh button is clicked. Our challenge is to pass in the callback using useCallback or useMemo.

As a bonus challenge, we are also asked to use React.memo to memoize the component, which is currently rendering unnecessarily every time we change our colors.

`useCallback` Solution

Now, Christian walks us through the solution to the previous challenges, follow him in this marvellous screencast.

At the end of the screencast, our refresh button is now supplying shiny new colors when clicked:

Custom Hooks

Here, we learn about custom Hooks by refactoring the component into a Hook. This is great for reusability.

Currently, is handling two different sets of state; the window size and visibility. As visibility might not be needed in future uses of , we move its logic into our component, which is also where we will use our useWindowSize Hook.

The following lines are removed from WindowSize.js:

let timeoutId;
///
setVisible(true);
clearTimeout(timeoutId);
timeoutId = setTimeout(() => setVisible(false), 500);

Additionally, the following lines now need to be returned from instead of :

`window-size ${visible ? "" : "hidden"}`}>
    {windowWidth} x {windowHeight}

The window width and height will be returned from :

return [windowWidth, windowHeight];

To make the windowWidth and windowHeight variables available, we add the following code to :

const [windowWidth, windowHeight] = useWindowSize();

To implement the visibility logic so that we can show and hide the window size as necessary, we pass in a callback to our useWindowSize Hook and use a Ref to make timeoutID available between renders:

let timeoutId = useRef();
const [windowWidth, windowHeight] = useWindowSize(() => {
    setVisible(true);
    clearTimeout(timeoutId.current);
    timeoutId.current = setTimeout(() => setVisible(false), 500);
});

We can now call this when we need to from :

export default function useWindowSize(cb) {
    const [[windowWidth, windowHeight], setWindowSize] = useState([
        window.innerWidth,
        window.innerHeight,
    ]);

    useEffect(() => {
        const handleResize = () => {
            cb();
            setWindowSize([window.innerWidth, window.innerHeight]);
        };
        window.addEventListener("resize", handleResize);
        return () => window.removeEventListener("resize", handleResize);
    }, []);
    return [windowWidth, windowHeight];
}

We now have the same functionality as before but the logic is in a reusable Hook.

The lessons ends with another challenge - to convert the component into a function which uses Hooks instead of lifecycle methods.

Building the paint app with Hooks

This screencast walks us through how to convert into a functional component using Hooks. It also shows us how to refactor our app to make it much cleaner and more readable. A big advantage of using Hooks is that all related logic is next to each other, in contrast to our old components in which related logic items were separated from each other.

At the end of the screencast, our paint app is finally finished and we are ready to paint our masterpieces:

Outro

We have now finished the React Hooks course. We have learnt about:

useState, which manages state
useEffect, which does side effects,
useRef, which gets references to DOM elements and keeps values across renders
useCallback, which creates functions which don't need to be created on every render
useMemo, which memoizes expensive computations
React.Memo, which can go around a React component and memoize it
custom Hooks, which allow us to create our own reusable logic.

There are two rules to keep in mind when using any of these Hooks:

Only call Hooks at the top level of the React component, i.e. not within if blocks or anything similar.
Only call Hooks from React functions, not your own custom functions.

Congratulations on following the tutorial and learning all the skills used in this project. To further your learning, check out Scrimba's free, six-hour Learn React for Free course which aims to make you a React wizard!

Happy coding!

Learn How to Build Tic-Tac-Toe with React Hooks

freeCodeCamp — Fri, 29 May 2020 13:49:57 +0000

By Per Harald Borgen

If you have a good understanding of HTML, CSS, JavaScript, and React you might be wondering where to go next on your learning journey. So why not check out Scrimba's brand new, free tutorial on how to build the classic tic-tac-toe game in React?

Click above to go to the tutorial.

The example game is pulled from React's official tutorials but is brought up to date using React hooks - the latest hot topic in the React world.

This article gives you an overview of the tutorial and lets you click through to the screencasts and play with the code at any time.

If your HTML, CSS, JavaScript or React skills feel shaky, never fear - Scrimba offers a huge range of tutorials to bring you up to speed. We recommend the following courses to get you ready for the tic-tac-toe tutorial:

HTML & CSS Crash Course with Kevin Powell
Introduction to Javascript with Dylan C. Israel
Learn React for Free with Bob Ziroll

In true Scrimba style, the Build Tic-Tac-Toe with React Hooks tutorial contains loads of interactive challenges along the way, so you'll embed your learning and feel like a hooks wizard by the end of it.

The course is led by Thomas Weibenfalk, a passionate developer, designer, and coding instructor from Sweden. Thomas loves teaching people about front-end development, especially React, making him the ideal teacher to take you through this learning experience.

Assuming you're ready to go with tic-tac-toe, let's get started!

Introduction

In the first scrim, Thomas tells us about his plans for the tutorial and shares the Official React Documentation, which we can refer to for a more detailed explanation of the features used to build the game.

As well as talking us through the file structure he has implemented for the app, Thomas also gives us our first glimpse of the finished product. Click the image above to visit the cast.

Scaffolding Components

Next up, Thomas talks us through setting up the Board.js, Game.js and Square.js files needed to create the game. We also see how to import Game.js into the App.js file.

import React from "react";
import Game from "./components/Game";

const App = () => <Game />;

export default App;

Square Component and Destructuring Props

In the next scrim, we create our square component using JSX to add a button:

const Square = (props) => (
    <button onClick={props.onClick}>{props.value}button>
);

For our first challenge, Thomas encourages us to destructure out the props in our component. Click through to the cast to give the challenge a try.

Board Component and Scaffolding Functions

Now it's time to create the board component by importing the square component and adding nine instances of it to the board (note that we will refactor this with a loop to improve the code later):


    <Square value="1" onClick={() => onClick("dummy value")} />
    <Square value="2" onClick={() => onClick("dummy value")} />
    <Square value="3" onClick={() => onClick("dummy value")} />
    <Square value="4" onClick={() => onClick("dummy value")} />
    <Square value="5" onClick={() => onClick("dummy value")} />
    <Square value="6" onClick={() => onClick("dummy value")} />
    <Square value="7" onClick={() => onClick("dummy value")} />
    <Square value="8" onClick={() => onClick("dummy value")} />
    <Square value="9" onClick={() => onClick("dummy value")} />

Thomas also scaffolds out the functions we need in Game.js, which we'll complete later.

Square Styling

Click the image to access the cast.

Next up, we style our squares using the style default prop:

const style = {
    background: "lightblue",
    border: "2px solid darkblue",
    fontSize: "30px",
    fontWeight: "800",
    cursor: "pointer",
    outline: "none",
};

const Square = ({ value, onClick }) => (
    <button style={style} onClick={onClick}>
        {value}
    button>
);

Board Styling

Click the image to access the scrim.

Now that our squares are ready, it's time to the style the board. Thomas kicks us off by once again creating a style object, this time with CSS grid:

const style = {
    border: "4px solid darkblue",
    borderRadius: "10px",
    width: "250px",
    height: "250px",
    margin: "0 auto",
    display: "grid",
    gridTemplate: "repeat(3, 1fr) / repeat(3, 1fr)",
};

Our challenge now is to apply the style object to the board. Head over to the scrim to give it a try.

Don't forget, while Thomas has provided some great styling options, Scrimba is fully interactive, so you are free to customize your game however you prefer - let your imagination run wild!

The calculateWinner Function Explained

export function calculateWinner(squares) {
    const lines = [
        [0, 1, 2],
        [3, 4, 5],
        [6, 7, 8],
        [0, 3, 6],
        [1, 4, 7],
        [2, 5, 8],
        [0, 4, 8],
        [2, 4, 6],
    ];
    for (let i = 0; i < lines.length; i++) {
        const [a, b, c] = lines[i];
        if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
            return squares[a];
        }
    }
    return null;
}

Next up, Thomas explains the all-important calculateWinner() function, which is taken from the original tutorial from reactjs.org. Head over to the cast to explore the function and hear how it works.

Create States and Fill with Initial Data

In the next scrim, we start creating the logic for the game.

We begin by adding a hook called usedState in Game.js and creating states to set an empty board and specify the next player. Lastly, we add const winner, which tells us whether the latest move was a winning one:

const [board, setBoard] = useState(Array(9).fill(null));
const [xIsNext, setXisNext] = useState(true);
const winner = calculateWinner(board);

Over in Board.js, we delete our manually-rendered squares and replace them with mapped squares as promised earlier. Click through to see this in detail:

const Board = ({ squares, onClick }) => (
    <div style={style}>
        {squares.map((square, i) => (
            <Square key={i} value={square} onClick={() => onClick(i)} />
        ))}
    div>
);

Create the handleClick Function

Next, we create the handleClick() function, which carries out the calculations when we make a move:

const handleClick = (i) => {
    const boardCopy = [...board];
    // If user click an occupied square or if game is won, return
    if (winner || boardCopy[i]) return;
    // Put an X or an O in the clicked square
    boardCopy[i] = xIsNext ? "X" : "O";
    setBoard(boardCopy);
    setXisNext(!xIsNext);
};

renderMoves Function and the Last JSX

Click above to go to the tutorial.

In this scrim, we create the JSX which makes the game playable.

<>
  <Board squares={board} onClick={handleClick} />
  <div style={styles}>
    <p>
      {winner ? "Winner: " + winner : "Next Player: " + (xIsNext ? "X" : "O")}
    p>
  div>

We now have the all knowledge needed to create a fully working tic-tac-toe game with React hooks!

BONUS: Implement Time Travel

Click the image to go to the bonus tutorial.

In the bonus scrim, we take our game to the next level by implementing time travel to review the moves made throughout the game. Click through to get the goodies in this bonus tutorial.

So there we have it - a fully working tic-tac-toe game using React hooks! I hope you found this tutorial helpful. Don't forget, you can refer back to it at any time to refresh your memory of the topics covered or play around with the code in the interactive screencasts.

Next up, why not check out some of many other tutorials available on Scrimba? With a huge range of topics, there is something for everyone.

Happy learning :)

Here's a Free Course to Help Front End Developers Learn Math

freeCodeCamp — Mon, 25 May 2020 15:05:47 +0000

By Per Harald Borgen

Are you looking to become a more effective developer by improving your fundamental math skills without reaching for NASA-level calculations? Look no further!

At Scrimba, we're are really excited to announce our new course 'Practical Math for Front-End Developers', which offers exactly that. In the course we build 3 projects:

A Shopping Cart, where we generate a list of products, calculate the total price of the products and apply a tax rate.
A Weekly Schedule, where we introduce the Date object, perform layout manipulation and learn about the reduce function.
A Monthly Expense Sheet, which brings together everything we've learned and gives us a few handy tips and tricks.

This course is brought to you by Ryan Gonyon, who has his own Twitch and YouTube channels.

With 5 years of Web Dev experience, a B.S. in Computer Science, and experience tutoring K-12 and University-level math, Ryan is the perfect tutor for this course. Head over to Scrimba to see what he has in store!

App Layout and CSS calc() Introduction

Click the image to access the course.

In this screencast, Ryan shows us how to build the outer shell of our applications by correctly sizing the

and

tags with CSS variables and the calc() function.

We use overflow-y: auto; to ensure that the contents of the

tag do not extend over the footer.

* {
    --headerFontSize: 2rem;
    --headerPadding: 0.5rem;
    --footerFontSize: 1rem;
    --footerPadding: 1rem;
}

header {
    font-size: var(--headerFontSize);
    padding: var(--headerPadding);
}

main {
    font-size: 1.5rem;
    height: calc(
        100vh - var(--headerFontSize) - (2 * var(--headerPadding)) - var(
                --footerFontSize
            ) - (2 * var(--footerPadding))
    );
    overflow-y: auto;
}

footer {
    font-size: var(--footerFontSize);
    padding: var(--footerPadding);
}

The roll() Function

At some point during your front-end journey, it will be useful to generate random data to test your layouts. The roll() function does exactly that. This cast also shows us how to use JavaScript's Math module and random() function.

function roll(min, max, floatFlag) {
    let r = Math.random() * (max - min) + min;
    return floatFlag ? r : Math.floor(r);
}

Shopping Cart - Generate Data / Build Layout

Click the image to access the course.

Now we start building our first project, the Shopping Cart, using our newly written roll() function to generate prices. This shows us how much time we save using our new knowledge!

let products = [...Array(5)].map((_, i) => {
    return {
        index: i,
        title: possibleProducts[roll(0, possibleProducts.length)],
        price: roll(1, 10, 1).toFixed(2),
        count: roll(1, 6),
    };
});

Shopping Cart - Calculate Total / Apply Tax Rate

In this screencast, we learn how to use .reduce to calculate the total price of the cart

let cartTotal = products
    .reduce(function (accumulator, product) {
        console.log(accumulator, product);
        return accumulator + parseFloat(product.price) * product.count;
    }, 0)
    .toFixed(2);

We also see how to use roll() to generate a random tax rate and apply it.

let taxRate = roll(5, 9, 1).toFixed(1);

Along the way, we practise parsing float values and rounding them to a specified number after a decimal point.

Shopping Cart (Bonus Challenge) - Weights

As a bonus challenge in this cast, we randomly generate the weight of each item in our shopping cart and calculate the total weight at the checkout. In the real world, this could be used to estimate the shipping cost for the buyer.

No spoilers here, so if you want to see the solution you'll have to click through to the course. ?

A Brief Exploration of CSS Shapes

Click the image to access the course.

In this cast, we learn how to create a square, a circle, a diamond and a triangle with CSS shapes.

.triangle {
    height: 0;
    width: 0;
    border-left: 5.5rem solid transparent;
    border-right: 5.5rem solid transparent;
    border-bottom: 5.5rem solid black;
    margin: 1rem;
    position: relative;
}

.triangle:after {
    content: "";
    position: absolute;
    height: 0;
    width: 0;
    border-left: 4.5rem solid transparent;
    border-right: 4.5rem solid transparent;
    border-bottom: 4.5rem solid red;
    left: -4.5rem;
    top: 0.6rem;
}

Weekly Schedule - Using Date() to Build Week / Generating Tasks

In this cast, we start work on our Weekly Schedule app. First up, we learn about JavaScript's Date object.

function getNextDay(day) {
    let nextDay = new Date(day);
    nextDay.setDate(day.getDate() + 1);
    return nextDay;
}

Next, we look at using the roll() function to test the layout and produce a list of tasks. Take a look at the course to see how it works

Weekly Schedule - Build Layout / Display Data

Click the image to access the course.

In this cast, Ryan shows us how to use the calc() function to display the data generated in the previous cast.

--mainHeight: calc(
    100vh - var(--headerFontSize) - (2 * var(--headerPadding)) - var(
            --footerFontSize
        ) - (2 * var(--footerPadding))
);

We also learn how to cross out completed tasks (click through to find out how.) The result is a clean, functional app that we can use in everyday life.

Monthly Expense Sheet - Generate and Display Month

Click the image to access the course.

Next, use the concepts from the previous casts to build something more complex - our expenses tracker. In this project we generate data, display months and draw up a grid.

function displayMonth(month) {
    // 3
    let monthHtml = month.reduce(function (accumulator, day) {
        return accumulator + `${day.date.getDate()}
`;
    }, "");
    document.getElementById("MonthlyExpenses").innerHTML = monthHtml;
}

Monthly Expense Sheet - Generate, Display, and Track Expenses

Click the image to access the course.

In the final cast, we perform budget calculations by writing functions to track our expenses, rent and utility bills. We then display the expenditures alongside the remaining available budget.

function displayMonth(month, budget, netValue) {
    let monthHtml =
        `
        Budget: \$${budget.toFixed(2)} | Net Value: \$${netValue.toFixed(2)}
    
` +
        month.reduce(function (accumulator, day) {
            return accumulator + `${day.date.getDate()}
`;
        }, "");
    document.getElementById("MonthlyExpenses").innerHTML = monthHtml;
}

Conclusion

Well done for finishing this course, I really hope you have learned some useful tips and tricks that you can apply in your future coding adventures!

Happy learning ;)

Want to Learn Vuetify? Here's Our Free 15-Part Course by Gwen Faraday

freeCodeCamp — Sat, 23 May 2020 16:02:00 +0000

By Per Harald Borgen

If you love building apps in Vue.js but struggle to know where to start with UI design, look no further than Vuetify. It's a UI library containing handcrafted material components which give apps a beautiful finish and professional feel.

Why learn Vuetify?

Vuetify is the most popular component library for Vue.js, enabling you to create great-looking, accessible apps even if UI design isn't your area.

While the library has over 80 elements ready to use straight out the box, it also allows you to create custom elements, giving your apps a clean yet bespoke feel.

This article takes you through Scrimba's free two-hour Vuetify course by Gwen Faraday. The course teaches you all the core skills needed to get started with Vuetify, including:

Typography
Spacing
Buttons
Navigation
Grid
Card

In the first half, Gwen introduces all the Vuetify elements needed to build a great app. As with all Scrimba courses, you can pause the scrims and explore the code.

The second half lets you get your hands dirty by building a webshop. This puts your new skills to good use and lets you apply your newfound knowledge.

By the end, you'll be fully versed in building professionally-styled apps with Vuetify.

Intro to the Instructor

Gwen Faraday is a software engineer, author, speaker, and & content creator who also runs a Youtube channel, the Faraday Academy, where she teaches a wide range of subjects including Vue.js and Vuetify. This makes her the perfect teacher to take you through this learning journey and bring your Vuetify skills to the next level.

Prerequisites

To learn the most from this tutorial, you'll need a decent understanding of HTML, CSS, Javascript and Vue.js. If you're not there yet, check out Scrimba's great free courses to get you up to speed:

If you’re ready to hit the ground running with Vuetify, let’s get into it!

Intro to Vuetify

In the first cast, Gwen introduces us to Vuetify and shares the two Github repositories where she has stored all the code, basic-components and vuetify-responsive. This allows us to download the code and try it out for ourselves.

What is Material Design?

Next up, we learn about Material Design, a standard developed by Google for implementing accessible, user-friendly interfaces.

The Material Standard provides a set of rules for the most common elements found on web pages including buttons, text, navigation and more advanced features such as movement and elevation.

Vuetify takes the hard work out of implementing this standard by providing a bunch of ready-made compliant UI elements which we can add to our Vue.js application straight out the box.

First Look at Vuetify Code

In the next cast, Gwen gives us our first look at Vuetify code by instantiating a Vue application, adding a Vuetify property and creating a new Vuetify object:

new Vue({
    el: "#app",
    vuetify: new Vuetify({}),
    data: {
        message: "Using Single File Components",
    },
});

Next, Gwen shows us the element, which is the root component of all Vuetify elements (Vuetify components must fall within ):

Typography

Click the image to access the course.

In the next scrim, we see some of the options Vuetify offers to handle typography, including headings, titles, subtitles and body text. We also see how to change text color and background color.


     Heading 1
     Heading 2
     Heading 3
     Title
     Subtitle
     Body

Finally, we see how to use Vuetify classes to adjust font weight and style:

Heading 1

Note: Vuetify classes override any other styles that the browser applies to HTML tags.

Spacing

Next up, we explore some of the spacing classes in Vuetify, which allow us to add margins and padding. We also see how to change spacing size.

Spacing

Best of all, Gwen also shows us how Vuetify classes can help with that holy grail of app styling - centering an element! Click through to the course to find out more.

Buttons

Click the image to access the course.

In the next scrim, we look at some of the options available with Vuetify's button component, including buttons with text, icons or both.

Submit

Lastly, we look at how to build custom buttons using classes from earlier.

Click the image to access the course.

Next up, we look at the two main navigation options available in Vuetify, and . Both navigation elements provide automatic button and icon sizing, navigation icons and the ability to handle list dropdowns.


    
App Title

Click through to see all this in action!

Grid

Click the image to access the course.

In the next scrim, Gwen takes us through Vuetify's grid system, which is split into 12 columns, with five built-in media breakpoints for handling different screen sizes.


    
        
        Column

Card

Click the image to access the course.

In this cast, Gwen explains that Vuetify uses a component as the wrapper for any UI card. This component can take props, classes and slots and has custom events, allowing for neat, well-aligned cards in any use case.

 
    
        mdi-twitter
    
    

    
    "Vue Rocks!"

Gwen also introduces us to the element, which lets us easily add whitespace between elements.

Finally, we check out the Playground.vue file - a space for us to explore the features of Vuetify Gwen has shown us so far. Head over to the course to try it out for yourself and see what Vuetify can do.

Click the image to access the course.

Next, it's time to start building our store application. Gwen starts us off by adding a navigation bar including responsiveness and a drawer menu. We also run through some options for styling, including icons and a dense menu.

Home Page

Next up, it's time to add a home page. Gwen adds the header and a footer and then sets us the challenge of coding the mid-section using the mock-ups provided. Head over to the screencast to test out your new Vuetify skills and compare your work to Gwen's solution.

To finish off, Gwen shows us the element, which can be used to notify a user when a product has been added to the cart.


    {{ $store.state.snackbar.message }}
    
    Close

Store Page

Click the image to access the course.

In the next Scrim we build out our store page using Vuetify grid elements. First up, we add product cards by reusing the cards we built for our home page. Next, Gwen challenges us to build out a sidebar with the and elements.

Head over to the cast to give the challenge a try.

Cart Page

Click the image to access the course.

Next up, we add a cart page to our app. Once again, Gwen sets us the challenge of coding out the page as per her mock-ups, which is great practice for real-world coding and flexes the muscle memory needed to become a Vuetify wizard.

Click through to give the challenge your best shot before comparing your work with Gwen's final code. Don't forget, you can always look back at the previous scrims or check out the Vuetify docs if you're having trouble.

Checkout Screen

In the final code scrim, we build a simple checkout flow using the element.

To finish the course, Gwen points out that there are a few features in the mockups which we haven't covered and encourages us to have a go at coding them ourselves using Scrimba's interactive interface.

Conclusion

A huge well done for completing the course! I hope you've found it useful and now have the confidence to build stunning apps using Vuetify. Why not continue your learning journey by checking out the huge range of other topics available over at Scrimba?

Wherever you go next, happy coding :)

Want to build an app with React and GraphQL? Here's our free 1-hour course by Karl Hadwen

freeCodeCamp — Mon, 18 May 2020 20:00:00 +0000

By Per Harald Borgen

If you've ever wondered how to connect React.js & GraphQL, then Scrimba's hot one hour course is for you! The course jumps right into using a wide range of technologies to build a fast application with a concise amount of code - what's not to love?

Why learn React and GraphQL?

GraphQL has a faster build and iteration time than REST APIs and reduces the amount of data sent from the server. This means faster and more responsive apps - a must for any React developer.

Intro to the instructor

This course is brought to you by Karl Hadwen - a JavaScript and React developer with over ten years of experience. Karl also runs a YouTube channel teaching React, JavaScript, and GraphQL, so he's just the person to help you level up your React and GraphQL skills.

What's covered in the course?

In this course, we'll learn how to build a fun front-end application that uses React, GraphQL, and Apollo to display Pokemon characters, facts and images! The course is interactive and to-the-point, meaning you'll build something like this in no time:

Click the image to access the course.

In true Scrimba tradition, Karl's course is jam-packed with interactive coding challenges to help you apply your knowledge and embed your learning, so head over to Scrimba now and read on to find out more.

Welcome to the course

In the first scrim, Karl introduces us to the technologies we'll use in the course, which are:

React
GraphQL
Apollo
CSS
the Pokemon open API.

Installing our dependencies & creating our skeleton project

Click the image to access the course.

Now it's time to start our project. First things first, we install the Apollo, GraphQL and React dependencies. Next up, we build up the files and folders we need for our project:

import React from "react";
import { render } from "react-dom";
import { App } from "./App";

render(<App />, document.getElementById("root"));

Giving our application life!

Now it's time to give our application life by adding to our app file and hitting the GraphQL server:

export function App() {
    const client = new ApolloClient({
        uri: "https://graphql-pokemon.now.sh",
    });

    return <p>I am a Pokemonp>;
}

This scrim takes us through the following steps to allow our user to interact with our application:

setting up the Apollo client
building the ApolloProvider and passing in the client as a prop
adding our
tag and PokemonsContainer

Let's talk about GraphQL

Click the image to access the course.

This scrim takes a look at the GraphQL server that we'll be using in our app. The great thing about GraphQL is that it allows us to request just the fields we need from the object, unlike REST which sends all the information available. Karl shows us this in action by walking us through building and running our first GraphQL query.

Using our container component to map over our Pokemons!

In the next scrim, we build out our main container so we can loop over our Pokemons.

Karl kicks us of by showing us how to get the data from the Pokemon API:

const { data: { pokemons = [] } = {} } = useQuery(GET_POKEMONS, {
    variables: { first: 9 },
});

Next, it's time for an interactive challenge: passing two props, the key and pokemon. Head over to the course to give the challenge a try for yourself.

Adding a GraphQL query and creating our Pokemon component!

Click the image to access the course.

In this scrim, we start by building our graphQL query:

import gql from "graphql-tag";

export const GET_POKEMONS = gql`
    query pokemons($first: Int!) {
        pokemons(first: $first) {
            id
            name
            image
            maxHP
            maxCP
            attacks {
                special {
                    name
                    damage
                }
            }
        }
    }
`;

Next, Karl gives us the bare bones of our Pokemon component:

export function Pokemon({ pokemon }) {
    return <p>{pokemon.name}p>;
}

Our challenge now is to build up the Pokemon component so it displays all the information retrieved from the API. Click through to the course now to give it a try.

Finishing our Pokemon component

Next up, Karl talks us through how to map over up to three of a Pokemon's multiple attacks:

{
    pokemon.attacks.special.slice(0, 3).map((attack) => <span>span>);
}

We also have a mini-challenge of adding a key within our pokemon__attacks div. Click through now to give it a try.

Let's style our application!

Click the image to access the course.

Now that we've created our app, it's time to style it. In this bumper scrim, Karl talks us through styling all the elements of our Pokemon app and gives us a few CSS challenges along the way. Of course, Karl's suggested styles are his personal preference - you could style your app however you like!

.container .pokemon {
    width: 49%;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0, 0, 0, 0.125);
    border-radius: 0.25rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    overflow: hidden;
    margin-bottom: 20px;
}

Responsively styling our application

Click the image to access the course.

In the last scrim of the course, we find out how to responsively style our app with media queries:

@media (max-width: 800px) {
    .container .pokemon {
        width: 100%;
    }
}

@media (max-width: 400px) {
    .container .pokemon__attacks,
    .container .pokemon__meta {
        flex-wrap: wrap;
    }

    .container .pokemon__meta span,
    .container .pokemon__attacks span,
    .container .pokemon {
        width: 100%;
    }

    .container .pokemon__meta span {
        margin-bottom: 10px;
    }
}

Now that's done, our app looks great across all browser sizes.

Well done for completing the course - you've created and styled a fully working React app that hits a GraphQL server, which is a great achievement!

Hopefully, you've learned a lot throughout this course and you'll have a chance to apply your new knowledge to other applications soon. In the meantime, why not head over to Scrimba to see what other courses are on offer? You could even catch 'em all :)

Whatever you decide to learn next, happy programming!

Want to Learn Svelte? Here's a Free 16-Part Course by Noah Kaufman

freeCodeCamp — Thu, 14 May 2020 22:09:51 +0000

By Per Harald Borgen

If you're looking to learn a new Javascript framework which allows you to write less code, use no virtual DOM, and create truly reactive apps, then Svelte is for you.

What is Svelte?

Svelte is a Javascript framework, a compiler, and a language. Unlike other Frameworks such as React and Vue which do much of their work in the browser, Svelte does its work in the compile step. This results in highly efficient code and a potentially faster run-time on the client-side.

Svelte offers faster development, faster web pages, and a better developer experience - the creators of Svelte created it with other developers in mind).

On top of this, knowing Svelte will help you stand out to potential employers and shows that you're interested in newer technologies.

Great! Tell me about Svelte.

This article takes you through Scrimba's brand-new 16-part Svelte course which covers the following essential topics to put you well on your way to becoming a Svelte master:

Components
Importing/exporting
Slots
Template
Event Handling
Event Dispatching
Buttons
Reactivity
Binding

The course is delivered through a series of interactive screencasts, allowing you to practice your new skills and truly embed your learning.

Finishing up with an in-depth Final Project which consolidates all the skills learned along the way, the course helps you build the muscle memory needed to become an effective Svelte developer.

It is led by is Noah Kaufman, a Senior Frontend Developer from San Francisco, California with an M.S in Computational Linguistics.

If this sounds right up your street, head on over to the course on Scrimba and read on to find out more.

Components

In Svelte, everything exists inside a component, and the first cast shows what the anatomy of these components looks like.

The component has three optional parts; <style> div { color: red; } style> <div> Say: {say} div>

Importing and Exporting

Here, we take a quick look at how to import and export components so they can be used elsewhere in our app.

Components are imported with the import keyword:

import Face from "./Face.svelte";

While the export keyword allows other components to change components on import:



<div style="font-size: {size}em">=)div>

Challenge 1

In this cast, Noah challenges us to put our new Svelte skills to the test. No spoilers here, so click through to the course to give the challenge a try and check the solution.

Slots

Slots allow us to place elements inside components. For example, inserting a into a

with the class Container allows us to place as many elements as we want into the component:

class="Container">
  <slot>slot>

The newly-placed elements are children of the component:


  <div>Say: {say}div>

  <Face index={0} />
  <Face />
  <Face index={2} />

Templating

The Svelte templating syntax allows us to add if statements and for loops to our HTML. That's right, to our HTML!

An if statement looks like this:


    {#if say}
        
            Hi!
        

    {/if}

While a for loop looks like this:

{#each [2,1,0] as faceIndex}
        
    {/each}

Making Header - Challenge 2

In this challenge, we use what we've just learned about Svelte templating to add a Header to our app. Check out the course to try it out for yourself and check your answer.

Event Handling

Next up, Noah shows us a simple inline event handler, which allows the user to show the app's header at the click of a button.

However, if we use a

Event Dispatching

Event dispatching allows a component to emit more than one type of event, for example, the same <button on:click={() => dispatch('hide')}> Hide button>

Finally we define the <button on:click={() => dispatch('click', false)}> Hide button>


  <Buttons
    on:click={(e) => {
      showHeader = e.detail;
    }}
  />

Buttons - Challenge 3

Our third challenge is more involved than the previous two and puts our new knowledge of event dispatchers to the test. To help us along, Noah breaks the challenge down into bitesize chunks:

Head over to the course now to give it a try and see the solution.

Reactivity

Reactive statements are a unique feature of Svelte which tell a piece of code to re-run each time a variable within that code is updated.

For example, the code below will run each time the score variable is changed (note that we declare a reactive statement with $:).

let score = 0;
$: smileySays = "Hi there, your score is: " + score;

We can also run if statements inside reactive statements:

let score = 0;
$: smileySays = "Hi there, your score is: " + score;
$: if (score < -4) smileySays = "Wow your score is low!";

Reactive Challenge - Challenge 4

We can now test our new skills by completing the Reactive Challenge, which brings us one step closer to being ready for the final project.

Once again, Noah splits the challenge into smaller parts to help us on our way:

Click through to the course to try it out and check your answer.

A Bit More Reactivity

Next up, Noah gives us another example of using Reactive Statements, an emoji face which changes according the current happyScore variable:

const faceList = [
  "?",
  "?",
  "?",
  "?",
  "?",
  "?",
  "?",
  "?",
  "?",
  "?",
  "?",
];
$: index = happyScore + 5;

Similarly to the previous examples, the code runs each time the 'happyScore' variable changes, so a Reactive Statement is just the right tool for the job.

Binding

Binding allows a user to update a variable (in this case called name) by entering a value into an field. As binding is a two-way process, changing the variable also updates the 's value:

We bind values like this:



<Container>
    //binding declared below:
    <input type="text" bind:value={name}>
    <h1>{name}, {smileySays}h1>
Container>

As well as binding variables, it's also possible to bind values from objects, lists or components.

Final Project

Click the image to access the final project.

Well done for making it through the course! We wrap things up with a final project which ties together all the skills we've learned along the way.

Once again Noah breaks it down into smaller chunks to help us through:

Check out the cast to test out your news Svelte skills and see the solution.

Outro

That brings us to the end of the course. Great job for finishing it! And if you're eager to learn more Svelte, do check out the official docs at svelte.dev for topics like: Context, Stores, Lifecycle methods, Actions, Sapper and more.

You can also follow my SvelteMaster Youtube Channel and do sign up for the Scrimba Svelte Bootcamp to be the first to know about the launch and any discounts.

I hope you've found it useful and can put your brand-new knowledge to good use very soon.

In the meantime, why not head over to Scrimba to see what other courses are on offer to help you reach your coding goals?

If you also want to hang out with your fellow learners or chat with more experienced folks and the creators of Scrimba courses, do join our Scrimba Discord server.

Happy learning :)

Scrimba - freeCodeCamp.org

Algorithms in Javascript - Binary Search Explained

What does the course do?

Prerequisites

Intro to the instructor

Binary Search

Imperative

Recursion

Tail Recursion

Array Splitting

Array View

Array Partition

Wrap-Up

Learn Vuetify in 5 Minutes

Creating a Vuetify object

Typography

Heading 1

Heading 2

Heading 3

Title

Subtitle

Heading 1

Spacing

Spacing

Spacing

Buttons

Navigation

Grid

Card

Learn React Hooks by Building a Paint App

Intro

Prerequisites

useState - Part 1

useState - Part 2

useEffect

useState & useEffect Challenge

useEffect Clean Up

useRef Challenge

useRef Solution

useCallback & useMemo + Challenge

React.memo

useCallback Solution

Custom Hooks

Building the paint app with Hooks

Outro

Learn How to Build Tic-Tac-Toe with React Hooks

Introduction

Scaffolding Components

Square Component and Destructuring Props

Board Component and Scaffolding Functions

Square Styling

Board Styling

The calculateWinner Function Explained

Create States and Fill with Initial Data

Create the handleClick Function

renderMoves Function and the Last JSX

BONUS: Implement Time Travel

Here's a Free Course to Help Front End Developers Learn Math

App Layout and CSS calc() Introduction

Want to Learn Vuetify? Here's Our Free 15-Part Course by Gwen Faraday

Why learn Vuetify?

Intro to the Instructor

Prerequisites

Intro to Vuetify

What is Material Design?

First Look at Vuetify Code

Typography

Heading 1

Heading 2

Heading 3

Title

Subtitle

Heading 1

Spacing

Spacing

Buttons

Navigation

Grid

Card

Store Navigation

`useState` - Part 1

`useState` - Part 2

`useEffect`

`useState` & `useEffect` Challenge

`useEffect` Clean Up

`useRef` Challenge

`useRef` Solution

`useCallback` & `useMemo` + Challenge

`React.memo`

`useCallback` Solution