Today I want to teach you how you can achieve routing programmatically in Ionic with React. There are a few different ways it can be done, but there's one way that should definitely be utilised, especially in the day and era we live in with hooks and the functionality we're provided with out-of-the-box by Ionic!

I've found it hard in the past, along my journey to come across docs and resources in one place detailing these miniscule, specific use cases, and I want to start creating valuable, short pieces of information to help you on your Ionic React journey too, all in one place!

💥 Let's get started.

useIonRouter hook

This is a React hook that comes baked into the Ionic Framework by default. It gives us as developers more direct control over routing in an Ionic React applicaiton.

All we need to do is import it;

import { useIonRouter } from "@ionic/react";

Now, because this is a hook, we need to obey by the rule of hooks in React. What's that?

You must only call hooks inside inside a function. Never inside a loop, or other conditional statement etc and always at the top level.

Just think of it like your standard local useState hook call within a component that you're probably already familiar with.

Initializing the hook

Lets say we have a component called Page1.js and at the top of this functional component we can initialize our hook like so;

import { useIonRouter } from "@ionic/react";

export const Page1 = () => {

    const router = useIonRouter();
}

Methods of the useIonRouter hook

We have access to a few very useful built-in methods we can use to navigate through our app, these are;

1. goBack() This method will navigate backwards in history, using the IonRouter to determine history. It accepts one argument for an optional custom transition if wanted

   • animationBuilder?: AnimationBuilder- *Optional - A custom transition animation to use*

2. push() This method allows us to push a route into the history of the router. This also accepts a few additional arguments to pass to the method. These are;

   • pathname: string

     • The path to navigate to - e.g. /page2.

   • routerDirection?: RouterDirection

     • *Optional - The RouterDirection to use for transition purposes, defaults to 'forward', can also be 'back', 'none' and 'root'.*

   • routeAction?: RouteAction

     • *Optional - The RouteAction to use for history purposes, defaults to 'push', but can also be 'pop' and 'replace'.*

   • routerOptions?: RouterOptions

     • *Optional - Any additional parameters to pass to the route.*

   • animationBuilder?: AnimationBuilder

     • *Optional - A custom transition animation to use.*

3. canGoBack() Determines if there are any additional routes in the the Router's history. However, routing is not prevented if the browser's history has more entries. Returns true if more entries exist, false if not.

4. routeInfo() This method will return some information about the current route.

Now let's see how we can implement this in a real piece of code, following on from earlier in the post;

NOTE

Let's assume that all routes and pages/tabs and main IonApp is already set up and working. This is simply a demonstration of how to use the router from within a component/page.

import { useIonRouter } from "@ionic/react";

export const Page1 = () => {

    //    Initializing our router
    const router = useIonRouter();

    //    A simple, hard-coded navigation
    const simpleNavigate = () => {

        router.push("/page2", "forward", "push");
    }

    //    A more usable, dynamic navigate function
    //    Passing in the path and direction
    //    Working out the action based on direction
    const dynamicNavigate = (path, direction) => {

        const action = direction === "forward" ? "push" : "pop";
        router.push(path, direction, action);
    }

    //    Checking if we can go back
    //    Before calling the goBack() method
    const navigateBack = () => {

        if (router.canGoBack()) {

            router.goBack();
        }
        //     else...
    }

    return (
        <IonPage>
            <IonContent>

                //    Calling a function which calls the push method
                <IonButton color="primary" onClick={ simpleNavigate }>
                    Go to Page 2
                </IonButton>

                //    Calling a function which calls the push method
                //    But is dynamic, and we have control
                <IonButton color="primary" onClick={ () => dynamicNavigate("/page3", "forward") }>
                    Go to X
                </IonButton>

                //    Calling a method of the router directly
                <IonButton color="secondary" onClick={ () => router.goBack() }>
                    Go Back
                </IonButton>
            </IonContent>
        </IonPage>
    );
}

Awesome, right? That's pretty much it! You can see how easy Ionic have made it for us with this useIonRouter hook, however sometimes having a little context is good!

I really hope you enjoyed this little tutorial on routing programmatically in Ionic React! Be sure to sign up below to receive emails about new posts like these directly and all future content!

Let me know what you think via Twitter

If you’re interested in learning more about Ionic and React you could also check out my website

Ionic React Hub

I post UI Examples, tutorials and posts there. As well as share some valuable content and resources!

See you in the next one 👋

Here's a breakdown of what I'm going to briefly cover:

• Numeric separators
• String.prototype.replaceAll()
• Logical assignment operators
• Promise.any
• WeakRef

Numeric Separators

It can be quite hard to read a large number when written in Javascript for example;

let population = 81760456;

Looking at this number right away, it's not easy to see that it is in fact 81 million, you spend a second just figuring out how many digits there are in your head before you come to that conclusion.

With ES12 we will have the ability to separate out our numbers when assigning a value to a variable like so;

let population = 81_760_456;

It's a lot more readable and easier to understand right? Using the underscore character, we'll be able to neatly separate numbers and can now clearly see that this number is 81 million.......

String.prototype.replaceAll()

This is a big win! I'm sure all JS devs and even all web developers generically will agree on this point! It's not a HUGE benefit, but it's definitely a neat addition.

Rightly so, as the function name suggests, we will be able to replace all occurrences in a string! Previously, as you'll know, you would have had to use the replace() function with a regex or pattern like;

let sentence = "Looking outside I can see 5 flowers, 1 flower is red, another flower is blue, and another is green.";
sentence = sentence.replace(/flower/g, 'car');

// This would replace all the instances of "flower" with "car"

With the new replaceAll, there is no need for our regex now and we could simply do;

sentence = sentence.replaceAll("flower", "car");

Why didn't this ever exist in the first place? 😅

Logical assignment operators

We will have three introductions of new logical operators;

1. &&= (AND AND EQUALS)
2. ||= (OR OR EQUALS)
3. ??= (QUESTION QUESTION EQUALS)

&&= (AND AND EQUALS)

This operator will perform an assignment when the left is a true value, for example;

let var1 = 100;
let var2 = 150;

var1 &&= var2;

// Just like saying if var1 then var1 = var2
if (var1) {
   var1 = var2
}

||= (OR OR EQUALS)

The new logical OR is like the opposite of the above - the assignment will happen when the left is a false value, for example;

let var1 = null;
let var2 = 150;

var1 ||= var2;

// Just like saying if !var1 then var1 = var2
if (!var1) {
   var1 = var2
}

// Which means var1 will now hold the value of var2 in this case

??= (QUESTION QUESTION EQUALS)

With this new operator, the assignment happens when the left operand is null or it is undefined. For example;

let var1 = null;
let var2 = 150;

var1 ??= var2;

// Just like saying if var1 is null or undefined then var1 = var2
if (var1 == null || var1 == undefined) {
   var1 = var2
}

// Which means var1 will now hold the value of var2 in this case as var1 is actually null.

NOTE: It only checks for null or undefined and not for example a FALSE value.

Promise.any

This new method will take multiple promises and resolves whenever any of the promises are resolved. What does this mean?

Promise.any() will take whatever promise resolves first. If no promise resolves then we'll get thrown an error.

WeakRef

Also known as Weak References - this can be used to hold a weak reference to another object.

You can create a Weak Reference by using new WeakRef, and you can read a reference by calling the deref() method. A simple example would be;

const largeObject = new WeakRef({
     name: "CacheMechanism",
     type: "Cache",
     implementation: "WeakRef"
});

largeObject.deref();
largeObject.deref().name;
largeObject.deref().type;
largeObject.deref().implementation;

My favourite feature coming in ES12 is definitely the replaceAll method, which will save a lot of confusion is nothing else. I also like the new operators.

What's your favourite?

Are you on Twitter? Let's connect! @93alan

I also have a YouTube channel where I post coding tutorials, tips, tricks, reviews and more! I'd love to see you over there, I'd appreciate it:

That is mobile development. Both for the web and for native devices like iOS and Android. The only difference is, I use web native technology like Ionic, React and CapacitorJS to develop cross platform mobile apps and manage one codebase. I've been a Mobile Team Lead now using Ionic React to develop mobile apps for local government for 2.5 years, with over 7 years experience of full stack development under my belt.

I love sharing knowledge, and this is where the idea came from about starting a podcast to discuss the leading, cutting edge modern web tech known as web native.

If you'd like to sign up to be notified of the first episode release you can visit the Mobile DevCast website below:

Let's get started with Part 2...

What are you going to learn?

It's all well and good being able to enable flexbox css, create a flex container, and use CSS to tell our elements which way to flow (row or column), however you can also justify the content of the whole container as well. This makes it very powerful and easy to position items within a flex container with one bit of CSS.

Justify Content

By specifying the justify-content property on a flex container, you can position the entire contents of the container (all child elements inside the parent element). The key point here for this property is the entire contents.

.container {

    justify-content:
}

You might be familiar with this kind of positioning when using float in CSS or even margin to space items (elements) out.

How can you justify content in flexbox css?

There are lots of different values for this property. In fact, there are 16 official flexbox justify content values. That's a lot right? Well, we only need to focus on 6 of them, the most important values and most commonly/needed options. Take a look below...

Flex Start

.container {

    justify-content: flex-start;
}

This value for justify-content will align the entire contents of the flex container to the start of the container. There won't be any padding or spacing taken into consideration in this case, all items will just be pushed to the start.

Flex End

.container {

    justify-content: flex-end;
}

You've probably guessed it by now right? If you did, leave a comment!

This value for justify-content is similar to the flex-start value however it will align the entire contents of the flex container to the end of the container.

Center

.container {

    justify-content: center;
}

You can also align the entire contents of a flex container into the center on the horizontal axis. Again, quite like the first two options/values, the items inside the flex container will not have any padding or margin around them, unless specified obviously.

...The next three justify-content values are a bit more powerful and popular for aligning content in a nice readable format.

Space Between

.container {

    justify-content: space-between;
}

Using this value, the space-between justify-content value will space out the items inside the flex container throughout the whole row or column. For example if you had three items (elements) inside a flex container, the first one would be aligned to the start (flex-start), the second to the center (center) and the third to the end (flex-end).

Space Around

.container {

    justify-content: space-around;
}

This value will ensure that there is adequate space around the items within the flex container. For example, there will be equal amounts of space from the start of the container compared to the end of the container, with the second item being in the center.

Space Evenly

.container {

    justify-content: space-evenly;
}

Quite like the other two; space-between and space-around, the space-evenly will also provide spacing or "padding" around the items inside the flex container. The only difference with this value is that all spacing inside the flex container will be equal or evenly distributed.

Those are the main, most important values that you should focus on when using the justify-content CSS property using flexbox. Feel free to look into the other options available however the only other ones that may be of use would be baseline most likely which would align items at the bottom base of the flex container.

I hope you enjoyed Part 2 of this mini series! Are you understanding flexbox CSS a little more? Please let me know by replying if you are! 🧙🏻‍♂️

Stay tuned for Part 3!

Are you on Twitter? Let's connect! @93alan

I also have a YouTube channel where I post coding tutorials, tips, tricks, reviews and more! I'd love to see you over there, I'd appreciate it:

What is Flexbox CSS?

Flexbox CSS is a one dimensional layout model/method used for laying out items (HTML elements) in a row or column fashion (horizontal or vertical).

Why Flexbox CSS?

Long gone are the days of using float and position in CSS to create layouts and responsive layouts. Utilising flexbox allows you to create fully responsive, mobile first layouts without needing to write lots of different media queries.

Display

The most important CSS property in flexbox is the display property. This is how we define a "flexbox container". Familiar display properties include block, inline, inline-block etc etc. Flex is no different, it can be defined like this:

.container {

    display: flex;
}

Container

<div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

Our flex container is typically a block level element, usually like a div for example. Refer to the below image; I have defined a flex container and inside my flex container, I have three more divs.

Items

These are called flex items. Each child inside a flex container is referred to as an "item". You can style these individually again, using flexbox CSS if wanted and we'll get into the specifics of this in the next part.

Flex Direction

.container {

    display: flex;
    flex-direction:
}

The next important CSS property in terms of flexbox is the flex-direction property. This allows you to specify which direction you want to place the items inside the flex container. There are four values which can be used for the flex-direction property, either in a row or a column (e.g. horizontally or vertically).

Row

.container {

    display: flex;
    flex-direction: row;
}

By default, a flex container will automatically have the flex direction of row. Items inside a row direction flex container will be displayed left to right (LTR), your first item will be the first placed element on the display.

Row Reverse

.container {

    display: flex;
    flex-direction: row-reverse;
}

The row-reverse value for flex-direction is similar to the row value, however the items inside a row-reverse direction flex container will be displayed right to left (RTL), so your first item will now become the last for example.

Column and Column Reverse

.container {

    display: flex;
    flex-direction: column | column-reverse;
}

The next type of flex-direction you can specify is in the vertical axis in the form of columns. First of all with the column value, similar to the row value but placed top to bottom (TTB). Alternatively you can use the column-reverse value which again, is similar to row-reverse but displayed bottom to top (BTT).

Hope you enjoyed part 1 of my easy to understand flexbox CSS tutorial. It really is that simple to get started using it. In the next part we'll look at some more specific properties we can use to justify-content to space out flex items inside our flex containers!

Please leave a comment and a reaction to this post if you enjoyed it! Also, I have a YouTube channel where I'm posting lots of coding tutorials, tips, tricks, reviews and more, would love to see you there:

See you in the next part!

There are multiple ways to solve this with things like

• React Redux
• MobX
• ...and more

One of the newer ways, especially introduced with React Hooks, is the React Context API.

What is the Context API?

It is a way to enable multiple components (or pages in NextJS) to share global variables and data without having to "pass" these as props. Think of it like a global "object" which stores data.

Although the Context API can be used for most cases, it shouldn't be used for everything. A close observation on component re-renders should be taken when using Context API to prevent any compromising leaks or inefficiencies.

That being said, we can easily implement Context API using React Hooks into NextJS.

Let's step through the creation of a simple custom Auth to allow our NextJS app to see the logged in status of a user, and the users details throughout every component and page.

1. Creating a Provider component

This component will provide our defined data to the rest of our app.

import { useState, createContext } from "react";

export const AuthContext = createContext();

const AuthProvider = ({ children }) => {

    const [ loggedIn, setLoggedIn ] = useState(false);
    const [ userDetails, setUserDetails ] = useState([]);

    const login = value => {

        setLoggedIn(true);
        setUserDetails({
            name: "Alan",
            notifications: 3
        });
    }

    const logout = value => {

        setLoggedIn(false);
        setUserDetails([]);
    }

    const contextValue = {

        status: {

            loggedIn,
            login,
            logout
        },
        user: {

            userDetails,
            setUserDetails
        }
    };

    return (
        <AuthContext.Provider value={ contextValue }>
            { children }
        </AuthContext.Provider>
    );
};

export default AuthProvider;

• The createContext() method, allows us to create a context object to hold some global data.
• I've set up some state variables using the useState hook, including a variable for logged in, and a variable for the user details.
• Custom login/logout functions created to set the logged in status and also the user details (for this example, when logging in, we just mimic it with hard-coded values).
• I've set up a contextValue object which we can use to structure our global data nicely, for example, for the loggedIn variable and functions, I've called it status, which means, further down the React Tree of components we will be able to access the loggedIn state variable like AuthContext.status.loggedIn which we will see shortly.
• A Provider component will always return the children, in our case, the children will be the component or page, wrapped with our AuthContext.Provider.

We can save this Provider in a providers folder or utils or anything you like.

2. Wrap our app root component with our Context

In traditional React, we would wrap our <App /> with the Context, however, in NextJS, this doesn't exist. Instead we can provide a custom App component by creating a file in the root folder called _app.js, it should already be present in most cases.

Let's first import our AuthProvider component:

import AuthProvider from "../utils/AuthProvider";

Then wrap our <Component .... /> with this Provider. At this point then the Component will be passed as a child to our Context API Provider, which we saw above with the return of children.

return (

    <AuthProvider>
        <Component { ...pageProps } />
    </AuthProvider>
);

3. Import useContext and our custom AuthContext into index.js

In order to use the values from our Provider, we need to utilise the useContext hook from React, as well as importing our AuthContext we created earlier:

import { useContext } from "react";
import { AuthContext } from "../utils/AuthProvider";

Inside our Home (or any other) component/page we can easily grab all of our Context global variables using the above hook, and destruct our custom, nicely formatted values like this:

const { status, user } = useContext(AuthContext);

At this point, we now have access, globally to the variables we set up earlier, e.g. { status.loggedIn } will return the loggedIn value held in that state variable.

4. Setting up a simple login / logout UI

Using our global Context API variables/functions and data, we can now manipulate our UI based on this, let's set up a very basic, mimicked example of this:

Example of our return in index.js

<main className={styles.main}>
    <h1 className={styles.title}>
        Welcome to <a href="https://nextjs.org">Next.js!</a>
    </h1>

    <h4>
        Status:&nbsp;
        <span style={{ color: status.loggedIn ? "green" : "red" }}>
            { status.loggedIn ? "Logged in" : "Not Logged In" }
        </span>
    </h4>

    { status.loggedIn && <button onClick={ status.logout }>Logout</button> }
    { !status.loggedIn && <button onClick={ status.login }>Login</button> }

    { status.loggedIn &&
        <h3>Hi { user.userDetails.name }</h3>
    }
</main>

Logged out state:

Logged in state:

Keep in mind, our Context API global "object" or data is accessible by every page/component. So in this case, if we were to navigate to /account for example, the state would be retained and accessible in the same, global way.

This was a very very basic example of how to set up a Context API provider, and inject it into our NextJS app, then use the accessible functions and data based on the state, I hope this helps anyone, if it did, leave a little reaction on this post, greatly appreciated!

I've also recently started a YouTube channel. I'd love to see you over there and I welcome new subscribers. I'm posting coding tutorials, mostly on JavaScript, React and NextJS! 👇👇👇👇

Alan Montgomery - Coding Tutorials

Thanks for reading! Leave a comment below if you liked this!

Building upon what you've done already

When you have a piece of code, you can stop and continue building upon your solution at any time - you're not forced to finish all of your code at once - you can pause and come back to it at any point - however if you stop at a point when your code isn't complete in working order then it'll obviously be broken / unfinished. The same goes for Lego - you can build something then come back to it and continue however it'll be unfinished if you leave it.

Multiple ways of building things

There are so many different ways to build certain solutions - more efficient ways, shorter ways (in terms of lines of code), modern ways, old school or "traditional" ways etc. They all have one thing in common - they all achieve the same end goal. However one solution or method may be better than another due to certain factors like efficiency, speed, performance etc.

Consistency and maintainability

Building and developing consistent code ensures the integrity of your website or product in the long term. If you continue to use proven working patterns and techniques then it's going to be future proof. It also keeps your code alot neater and makes it more readable. Looking at the maintainability factor - this means that you can continue to come back to your code and make easy and fast changes to the code without having to touch core functionality. This also applies to if another developer down the line comes on board and tries to maintain your code - the more consistent and maintainable your code is then the easier it's going to be to be picked up by someone else.

All of these points can be applied directly to Lego - and although it is slightly a weird comparison - it definitely does fit together. If you ever need to bring yourself back to basics for some scope or to realign your vision of a project then think of this post.

Can you build upon the code you're writing? Is your code consistent and maintainable? Have you figured out the best way to write the solution?

Building a house

Think of building a house... Do you think the builders just randomly start building a house by placing bricks and wood? Do you think it just magically all fits together? No - definitely not! It has been planned out, sketched out and carefully decided upon how to build it, what materials needed, and what features the house will have.

This is almost the same way we should think about when planning a website. The same way with the house, we need to plan out what layout we will use, colours, functionality included, images or if we will use any additional styling resources and if there will be any forms or input capture, the list goes on...

Colours

Deciding on a colour scheme/palette for your website beforehand will really help save time down the line when you're actually coding and developing your web site. Decide on a dominant colour and a contrasting colour, also decide on a few different variants of these colours to act as button hovers, links etc, as well as text colours.

Font family

It's a good idea to figure out initially as well what font you want your website to use. You can download this font and have it ready for when you're developing. The font really does say a lot about a website so this part of the planning phase should be given some thought to if the font is readable, easy on the eye and fits its purpose. E.g. If it's a professional website or a portfolio, you will want a nice professional looking font. In comparison, if it was a fun, joke style website, then maybe a more playful font would be suitable.

Images

If you are going to use images on your website, try and get these ready beforehand and have them in a folder so you can focus on development when coding. You should always aim to optimize images aswell. Google Lighthouse is a good way of auditing a website to get information on performance and accessibility including image optimization, check out my post on it here.

The Layout

You want to have an idea of how your content will be laid out on your individual web pages. Consider thinking about how spaced out your content "containers" will be, if you will have a centred website, or a full-width website, if you'll have a split column website or multiple columns, etc.

Sketching

The best way to plan out your layout is to sketch it out.

✏️ Use a pencil (or pen) and paper - draw out exactly what is in your head on a piece of paper, and this could act as your base layout/design for your website. This eliminates the guessing game while developing your website and it will ensure you have a consistent layout.

Wireframes

You could plan your layout a step further with wireframes. What are wireframes? These are like a "digital sketch" of your layout/design done on the computer where you can really solidify your ideas. This step isn't needed though if you successfully sketch out your layout by hand.

I hope you enjoyed this short post about planning a website. It's SO important.

I've recently started a YouTube channel for coding tutorials, beginner to advanced, I'd love to see you there;

Alan Montgomery - Coding Tutorials

I'm going to show you here in a few simple tutorial-like steps how to implement the useState hook into your React app. If you'd prefer to learn via video, I actually have a YouTube video explaining this as well.

Step 1

If you haven't already got a React project up and running you can spin one up quite easily using the npx command:

npx create-react-app my-app

This will create a project called my-app inside the directory you're currently in, on your CLI, using the create-react-app utility.

If you already have a project, you can skip this step.

Step 2

Let's create a new page or component for this little example. We'll be creating a functional component for this case, as hooks can only be used within functional components and not class-based components.

import React from "react";

const MyComponent = () => {

    return (
        <h1>My Component</h1>
    );
}

export default MyComponent;

This is a very simple component which, at the minute only renders a heading tag saying "My Component". However, this is the perfect basis to implement the useState hook and get familiar with it, without much bloated code to distract you.

Step 3

We need to import the useState hook method from react. This is a method which can basically take in a default value and gives you back a variable, and a set method for that variable to override or re-set the value it's holding.

import React, { useState } from "react";

Step 4

We need to somehow use this hook method now. We can set out a state variable inside our component, anywhere before our return like this:

const [ myVariable, setMyVariable ] = useState("Hello");

What have we done here?

We have a variable called myVariable which holds an initial or default value of "Hello", quite like writing:

const myVariable = "Hello";

We also have a set method now, which we can use to update the value held in our state variable and call it just like we'd call a regular function, like:

setMyVariable("Goodbye");

With our state variable and set method pair set up, we can use our state variable in a number of ways:

1. As a condition, to render a piece of UI in our return
2. To simply output the value of the state variable
3. Pass this state variable as a prop into a child component

With that being said, let's see how we can achieve these 3 things.

Using our state variable as a condition to render a piece of UI in our return

return (
    { myVariable === "Helllo" ? <h1>Welcome to My Component!</h1> : <h1>Goodbye, Hope you enjoyed My Component.</h1>
);

How you write your ternary operators in your JSX, is obviously up to you.

To simply output the value of the state variable

return (
    <h1>{ myVariable }, there!</h1>
);

Pass this state variable as a prop into a child component

return (
    <MyChildComponent variable={ myVariable } />
);

Now, what about our set method, how can we use this? Well, it's quite simple, as I said above, we can use this set method (or function) just like any regular javascript function.

• Let's add a button into our simple React component to demonstrate this.

import React, { useState } from "react";

const MyComponent = () => {

    const [ myVariable, setMyVariable ] = useState("Hello");

    return (
        <div>
             <h1>{ MyVariable } friend!</h1>
             <button onClick={ () => setMyVariable("Goodbye") }>Set Variable</button>
        </div>
    );
}

export default MyComponent;

This will basically call the setMyVariable function and pass in a value to update the state with, because we are outputting the state variable value in our h1 tag, and we know that a change in state promotes a UI re-render of affected elements, we now know that the value held within the h1 tags will change to Goodbye friend.

I hope this helped you understand the useState hook in React. It really is very simple once you grasp how to use it and what you can do with it.

Again, if you'd prefer the video format i have a YouTube video as well.

Don't forget to head over to my YouTube, I'd love to see you there, where I'm posting coding tutorials, all to do with JavaScript, React and more coming!

This may seem really simple, but sometimes just doing it, works. A lot of the time you will hesitate when wanting to try something different in web development. For example, if you have an idea of how to implement functionality, my advice is just to do it! Try it out. If it doesn't work, try something else - it's the best way to self learn as well after you have learned the basics and fundamentals.

Seek advice.

Seeking good experienced advice from a web developer who knows what they are talking about is a great way to solidify and help you understand a problem. If you're stuck on an issue and you really can't understand how to fix or implement it, then sometimes, asking a senior or more experienced web developer will benefit you. They can pass knowledge and expertise on to you which you'll never forget!

Take a break.

I find a lot of times if I've hit a problem in web development I can't solve, taking a quick 5-minute break and coming back to the code helps massively. You can clear your head in the space of 5 minutes, get a new perspective on things, and get fresh ideas. Most of the time it works and it can work for you too!

These are just some pointers to keep in mind when you are developing and implementing new ideas/solutions after you've learnt the fundamentals and basics.

Ps. I've recently started a YouTube channel for coding tutorials, would love to see you over there. Alan Montgomery - Coding Tutorials

It's an automated audit tool aimed at helping you improve web page quality. They provide reports for:

✔️ Performance ✔️ Accessibility ✔️ Best Practices ✔️ Progressive Web App Capabilities ✔️ SEO

👉 Why is this useful?

With any website or web page, it's very important to provide the fastest, highest performing content to the browser as possible. Why? So your site has speed, doesn't lag and doesn't force users to leave your site instantly. It also greatly helps with SEO (Search Engine Optimization).

👉 The Google Lighthouse tool

There is a free tool as a developer we can use called Lighthouse. This lets us audit any website, in those categories outlined above from 0-100 score - it also gives us really in depth explanations as to what is bringing the score down and how to fix each individual issue encountered.

🔥 Try it out

• Go to any webpage using Goggle Chrome
• Right click the page and press Inspect
• On the console tabs, scroll across to Lighthouse
• Click generate report https://developers.google.com/web/tools/lighthouse

This is an absolute must use tool if you want to provide top quality, fastest performing webpages that are going to rank high in searches with SEO.

This image is an audit that I've just done on dev community I am building.