Gatsby JS is a free and open-source framework that allows developers to build fast and high-performance websites using React and GraphQL. It is built on top of React, which is a popular JavaScript library for building user interfaces, and it utilizes the power of GraphQL to easily pull in data from a variety of sources.

One of the main advantages of Gatsby is its static site generation capabilities. This means that it pre-builds all of the pages of a website at build time, resulting in a faster and more secure website for users. This also allows for better performance on lower-end devices, as well as improved SEO.

Compared to traditional dynamic websites, which build pages on the fly using server-side scripting, Gatsby websites can be served directly from a CDN, reducing the load on the server and improving the speed of the website. Additionally, Gatsby’s static site generation allows for easy integration with a wide variety of hosting options, such as Netlify or GitHub Pages, making it a great option for developers of all skill levels.

Comparison to Other Popular JavaScript Frameworks: When compared to other popular JavaScript frameworks like React and Next.js, Gatsby stands out for its focus on performance and developer experience. React, while a powerful tool for building user interfaces, does not have built-in support for static site generation and requires additional setup and configuration to achieve similar performance. Next.js, on the other hand, is a framework built specifically for server-rendered React applications and while it also has static site generation capabilities, it has a steeper learning curve and requires a more complex setup.

Getting Started

Setting up a Gatsby Project: Getting started with Gatsby is simple and straightforward. The first step is to install the Gatsby CLI, which can be done by running the following command in the command line:

Copy codenpm install -g gatsby-cli

Once the CLI is installed, you can create a new Gatsby project by running the following command:

Copy codegatsby new my-project

This will create a new project in a directory called “my-project” with the basic file structure and a set of starter files. This includes a basic layout, a few pages, and some sample components to get you started.

Building components

In Gatsby JS, components are built using React. React is a popular JavaScript library that allows developers to build reusable, modular user interface components.

Each Gatsby component is a separate React component, and it follows the same principles as React components. Each component can have its own state, props, and lifecycle methods, and it can be rendered to the DOM using JSX.

To create a new component in Gatsby, you would typically create a new file in the src/components directory and name it with a .js or .jsx file extension. The file should start with an import statement to bring in React and any other dependencies, and then define the component as a class or function component.

For example, here’s an example of a basic component in Gatsby:

Copy codeimport React from "react"

const MyComponent = () => {
  return (
    <div>
      <h1>Hello, World!</h1>
    </div>
  )
}

export default MyComponent

In this example, the component is defined as a functional component, and it simply returns a div element with a h1 element inside. The component is exported at the end of the file so it can be imported and used in other parts of the application.

In Gatsby, components are typically used to define the structure and layout of a page or a section of a page. By building your application as a set of reusable, modular components, you can easily create complex, dynamic web pages with minimal code.

Also, Gatsby has a built-in support for JSX, which is an extension of JavaScript that allows you to write HTML-like elements directly in your JavaScript code. This makes it easy to create and style components using a familiar syntax, and it eliminates the need to write a lot of complex, verbose code.

Customising your Gatsby Project

Customizing the design of your website can be done using CSS, but Gatsby also has built-in support for themes. Themes are a collection of reusable styles, components, and configuration that can be easily applied to a Gatsby website. This makes it easy to change the look and feel of your website without having to write a lot of CSS from scratch.

You can also use Gatsby’s powerful plugin system to add additional functionality to your website. There are a wide variety of plugins available for things like SEO, analytics, and image optimization. The plugins are easy to install and can be configured in the gatsby-config.js file.

Once you have finished building your website, the next step is to deploy it. Gatsby makes it easy to deploy to a wide variety of hosting options, including Netlify and GitHub Pages. Both of these options provide a simple and straightforward way to deploy your website with just a few clicks. Netlify also provides additional features like continuous deployment and serverless functions, which can make your website even more powerful and performant.

Deploying Gatsby to Netlify

Deploying a Gatsby website to Netlify is a simple and straightforward process that can be accomplished in a few steps. Here’s an overview of the process:

1. Build your Gatsby website: Make sure your website is fully functional and ready for deployment. You can do this by running the command gatsby build in the command line. This will create a production-ready version of your website in the public directory.
2. Sign up for a Netlify account: If you haven’t already, sign up for a Netlify account. You can do this by going to the Netlify website and clicking the “Sign Up” button.
3. Create a new site on Netlify: Once you’re logged in, click on the “New site from Git” button to create a new site.
4. Connect your Git repository: Connect your Git repository to Netlify by selecting your repository provider and selecting the appropriate repository.
5. Configure your build settings: Netlify will automatically detect that you’re using Gatsby and set the build command to gatsby build and the publish directory to public. If there’s a different build command or publish directory in your project, you can change it in the build settings.
6. Deploy your site: Once your build settings are configured, click on the “Deploy” button to deploy your site. Netlify will start building your site and deploying it to a unique URL.
7. Verify your site: After the deployment is complete, you can check your site by visiting the unique URL provided by Netlify.
8. Customize your domain: If you have a custom domain, you can configure it by going to the domain settings in your Netlify account.

That’s it! Your Gatsby website is now live and accessible to the world. Netlify offers a lot of features and options, such as continuous deployment, server less functions, and custom domains, that can help you to take your website to the next level.

Jane James is a WordPress web developer based in Melbourne, Australia but also services clients from Sydney, Brisbane, Newcastle, Perth, Adelaide, Darwin and Hobart. Have a project in mind? Contact me here.

The post Building sites with Gatsby JS: what it is and why it’s so popular appeared first on Freelance Wordpress developer Melbourne | Sydney | Gold Coast | Brisbane |.

I was working on a client project where they wanted the WordPress admin bar hidden from all non admins- and editors.

And I found this guide which explains nicely how to edit your functions.php file to hide the admin bar except all non admins: but what if you want to also include another group, say contributors on in this use case – editors?

I’m going to share my gist on how I edited my functions.php file to also hide editors as well as administrators, which works well for this client. As a developer, I always try to build functionality into the site instead of installing plugins, but for good measure I have included two non technical ways to do this, for those out there not comfortable editing their websites functions file. If that is you- pick option 1 or 2, as direct edits to the functions file can cause your site to crash if you make any mistakes and you will have to SFTP into the site to fix the changes you made.

Hide the WordPress admin bar manually

The first and easiest way you can hide the admin bar is to go into users, select a user profile and select the box that says hide the toolbar. For reference, it looks like this:

Hide the wordpress admin bar with a plugin.

Let’s walk through this. First, we declare a function to disable admin bars. Next we have an IF statement saying if users are administrators, then show the admin bar. Knowing how the PHP language works, I decided to try and use the || operator to add editors as well. Adding in the logical operator of ||, means that the below statement says “IF current user can administrator or editor, then show the wordpress admin bar with a boolean of true. Else, show admin bar with a boolean of false.

Of course, if you anted to select contributor or another role, you can just add in the same title and they will also be exempt from the hidden admin bar.

Alpha Omega Digital is a WordPress web development agency based in Melbourne, Australia but also services clients from Sydney, Brisbane, Newcastle, Perth, Adelaide, Darwin and Hobart.

The post How to disable WordPress admin bar from all non admins AND editors appeared first on Freelance Wordpress developer Melbourne | Sydney | Gold Coast | Brisbane |.

So I went searching the deep dark corners of the internet for a slanted DIV overlay, and I found this awesome article. Nils explains it in a much cooler way than me, and has awesome graphics to match, so I won’t go into detail here. Regardless I am sharing the code I used to implement this on a WordPress site and you are welcome to cut and paste it into your next project.

Step 1.

First I cloned Nils pen on Codepen, and added the code from the article. Now with the code he provided, as soon as I dumped it into WordPress it did not display the same. I had to modify it heavily to get the look I wanted. Mostly because he was using the transform:skewY property, and for this project I need to use transform:skewX. That and I needed multiple media queries to work with WordPress. I started with the overlay, and then made some design decisions on how wide I wanted it to be. It had to be wide enough to cover roughly half the image, and comfortable display the text inside it, but not so wide that it don’t go all the way to the edge of the screen.

Step 2.

Then I added my text into the heading tags, and added a default margin for a wide screen. Because we are using the transform:skewX() property, everything inside the DIV is going to skew including the text. We don’t want this. Here’s an example of the ugliness that skewed text is, check out this H2 element:

Step 3.

I added the transform:skewX() property to each heading element. Since the overlay has a property of transform:skew(200.25deg), we have to apply transform: skewX(-20deg) to each heading element to ensure the headings are upright.

Step 4.

I started working on the media queries to make the page look responsive on all devices. This was a tad painful, as I had to keep tweaking the elements and overlay to get the right balance, but I got there. Now mind you if you view the Codepen, and it doesn’t look right on devices- this code has been used on a live wordpress site, so the responsive widths work on WordPress but they will not work on Codepen. Click here to view the source code.

Alpha Omega Digital is a WordPress web development agency based in Melbourne, Australia but also services clients from Sydney, Brisbane, Newcastle, Perth, Adelaide, Darwin and Hobart.

The post Creating a slanted div overlay with pure CSS appeared first on Freelance Wordpress developer Melbourne | Sydney | Gold Coast | Brisbane |.