DEV Community: Aya Ayari

SEO (Frontend best practices part II)

Aya Ayari — Fri, 18 Dec 2020 20:13:49 +0000

You can find the first part of this article in here Frontend best practices (part I)

Search Engine Optimization aka SEO as mentioned by Google is " the practice of increasing the quantity and quality of traffic to your website through organic search engine results"

Here are the most important rules to follow to improve your website traffic:

Make sure you have a title tag per page
Make sure you have meta-description per page and do not use quotes or any non-alpha characters
Exactly one <h1> tag per page
Make sure every image have alt tag( use dashes (-) and do not use non-alpha characters)
Use internal linking like breadcrumbs
Choose a good URL structure (short, meaningful and without stop words like "the" "a" )
Use more backlinks
Improve page performance (exp: use lazy loading for pictures, consider the best image format ...)
Mobile friendly pages
Consider the website architecture

                    Home page
                        |
           ———————————————————————————————         
           |            |                 |
    IT courses    language courses       mathematics courses

Part III will be about Accessibility

Frontend best practices (Part I)

Aya Ayari — Sat, 12 Dec 2020 19:41:08 +0000

In this post, I will try to summarize some of the tips my team and i were using to write a quality code:

Naming

When trying to name your variables or your components try always to make the name describe the purpose of the variable or function or component.
Rule: If you need a comment to describe the purpose of variable/function/component most probably you didn't use an adequate name for your variables.
It's okey if the name is long as far as it still making the purpose clear.
One more thing you need to consider when choosing names is consistency.
Assuming that you are creating a file Registration.js the styles of this file should be in registration.scss and if you have more files related to registration like RegistrationCTA.js as separate component for the call to action button you can use a folder called Registration to put all files together.

Styling:

1. Mobile first:

When trying to style your page, it is recommended to start by designing the mobile first then use media queries to design tablets and desktop.
This rule creates consistency between all your styles and all the team working on separate pages or other parts of the page. In addition it makes media queries simpler to understand for developers.

.registration-form__image {
  padding: __px-to-rem(40);
  margin: 0 __px-to-rem(20);

  @media (min-width: $tablet-breakpoint) {
    padding: __px-to-rem(80) __px-to-rem(40) 0;
  }
  @media (min-width: $desktop-breakpoint) {
    margin: 0 __px-to-rem(129);
  }
}

2. Common files:

When working on a project and you have recurrence of some values across files like colors, variables of media queries and mixins in this case it's recommended to create a common folder:

common
   |
   |__colors.scss
   |__queries.scss

his will help ensure consistency across project.

3. BEM naming:

Like any other rules that has a purpose to keep consistency in the project especially if there is a big team working on it they need to name Class Names using a standardized naming convention. For that you can use BEM to name all CSS classes.
CSS class is taking this format
block__element--modifier

Block
Standalone entity that is meaningful on its own.
form header footer section container menu
Element
A part of a block that has no standalone meaning and is semantically tied to its block.
title item list checkbox caption
Modifier
A flag on a block or element. Use them to change behavior or appearance.
color disabled highlighted checked

.form { }
.form--theme-xmas { }
.form--simple { }
.form__input { }
.form__submit { }
.form__submit--disabled { }

Note: They better appear in css files in same order they are in your component.

Consider SEO and Accessibility

In next articles I will talk about both of them

Getting Started with Gatsby

Aya Ayari — Fri, 16 Oct 2020 05:24:07 +0000

Gatsby is react-based open source framework and fast static websites generator. It allows to create static HTML at build time and gives the browser a complete page.
Gatsby uses preload to speed up loading of resources required by the page: all the necessary CSS , data and its core JavaScript needed to run the page and starts prefetching all links on the page. Also uses code splitting during compilation in a way that WEBPACK imports the dependencies on separate bundles.

Gatsby vs NextJs vs create-react-app

The choice of the framework depends on the project itself.

Gatsby: Static HTML and can be used when you need good SEO and you don't have frequent data updates
NextJs: Server Side rendering if you need good SEO and data is updating frequently exp: facebook
CRA: Client side rendering when you don't need good SEO exp: private dashboards

Getting Started on Gatsby:

Install Global CLI:

npm install -g gatsby-cli

Create new Site:

gatsby new my-gatsby-app

Start development server:

gatsby develop

Gatsby project Structure

Once you create you Gatsby application you will find this structure of the project:

|-- /.cache
|-- /plugins
|-- /public
|-- /src
    |-- /pages
    |-- /templates
    |-- html.js
|-- /static
|-- gatsby-config.js
|-- gatsby-node.js
|-- gatsby-ssr.js
|-- gatsby-browser.js

src folder: This directory will contain all of the code related to what you will see on the frontend of your site (what you see in the browser), like your site header, or a page template. “Src” is a convention for “source code”.
- pages: become pages automatically with paths based on their file name
- templates: Contains templates for programmatically creating pages.
- html: need to be modified if you want to insert custom HTML into the or of each page on your site
static: it will not be processed by webpack.
gatsby-config.js: This is the main configuration file for a Gatsby site. This is where you can specify information about your site (metadata) like the site title and description, which Gatsby plugins you’d like to include, etc.
gatsby-node.js: This file is where Gatsby expects to find any usage of the Gatsby node APIs (if any). These allow customization/extension of default Gatsby settings affecting pieces of the site build process.
gatsby-ssr.js: This file is where Gatsby expects to find any usage of the Gatsby server-side rendering APIs (if any). These allow customization of default Gatsby settings affecting server-side rendering.
gatsby-browser.js: This file is where Gatsby expects to find any usage of the Gatsby browser APIs (if any). These allow customization/extension of default Gatsby settings affecting the browser.

Gatsby’s data layer is powered by GraphQL and it allows you pull data into your components