DEV Community: ezgihendrickx

Great GatsbyJS😎

ezgihendrickx — Sun, 07 Feb 2021 21:29:31 +0000

💅 Building a Minimalist CV with Gatsby

🍋 Live

Helloooo everybody! I've been busy with Gatsby recently and I was trying to learn the basics in a fun way. Therefore I created a minimalist CV with Gatsby. I've built my CV step by step, and in this way you can also create a basic CV with me or just learn the basics along the way. I hope you will like and enjoy it. Oke, let’s dig in!

🐝 Intro

First we need to set up our development environment.

🌱 Global Installation

Install Homebrew. (To install Gatsby and Node.js on a Mac, it is recommended to use Homebrew.)
If you don't have it already, install the Node.js, npm. (Node.js is an environment that can run JavaScript code outside of a web browser.)
Install Git: be able to work with starter templates.
Install Gatsby globally on your machine npm install -g gatsby-cli
Create a new site from Starters
- Choose the one you like or start with a default gatsby starter which is hello world

TL;DR 🔖 If you’re not sure what you installed before then just check from your Command Line: e.g
node --version to learn your version.

🐙 Github & Terminal & VS Code

Create a repository named gatsby-introon your github.
Don't forget to initialize your README file.
Clone it to your machine.(I personally use VS Code)
Change the Directory (This says ‘I want to change directories (cd) to the “hello-world” subfolder’. .)
If you are stuck or lost, type in your terminal gatsby --help and see the options it gives you.
Start the development mode.. gatsby develop This command starts a development server. You will be able to see and interact with your new site in a development environment — local (on your computer, not published to the internet)
View your site locally: Open up a new tab in your browser and navigate to http://localhost:8000/
Your hello world index.js file should be like this:

import React from "react"

export default function Home() {
  return <div>Hello world!</div>
}

{/* you need to always export and this is a  React rule. */}.

Create components in your srcfolder.
- Components structure should more or less look like below .
- Footer.js
- Header.js
- Main.js
  - About.js
  - Contact.js
  - Skills.js
  - Projects.js

Sorry for the shiny colors:) I created it rather quickly in Figma
⚠️ Don't forget to create styles.cssfiles.

💫 Installing Plugins

In your gatsby-config.jsfile you need to create plugins to work on..

gatsby-plugin-sass

Provides drop-in support for Sass/SCSS stylesheets

npm install node-sass gatsby-plugin-sass

How to use

extra: If you have a problem with installing the sass plugin then follow these instructions from stackoverflow

🎨 Give a shape

CSS: Apply some basic CSS. If you feel confident with CSS frameworks then you can implement a framework to your gatsby project. Tailwind or Bootstrap.

🚀 Deploy your work

gatsby build You need this command to build your project.

Always push your work on github (at least 3 times per hour)
Drag and Drop your public file to Netlify, so we can see your CV online!

Well done! Nice job 👏

🎣 Tools

🖤 Please check my Github Repo

Thank you for reading.

11 Golden Rules for A11Y

ezgihendrickx — Wed, 16 Dec 2020 19:10:29 +0000

Let's make our websites accessible for everyone!

As a self-taught front-end developer, when I discovered the concepts of accessibility and inclusive design a few months ago, I did not know much about it. But I realised that many of us, in this web dev field, also don't know much about it. It is regrettable but accessibility is not the best field to invest in these days. It is just a popular buzzword which sometimes comes in and out of our attention. But we can really make a difference when we decide to start learning more about this. And possibly this would just be a small drop in the ocean but we really need that to achieve our goals.
Are you ready or eager to learn more?

What does `a11y` stand for?

“a11y” stands for “accessibility.” It is a numeronym, with 11 representing the count of letters between the letter a and the letter y. Other numeronyms you may be familiar with include: i18n (internationalization), P2P (peer to peer) etc.

11 Golden Rules for Accessibility

Which steps should we follow when we create a website?

The below rules are important and deserve our attention not only for accessibility but also for the usability of your website.

Always use a meaningful Alt text:
Screen readers may read out ugly, nonsense filenames to describe images. We don't want that as responsible developers right 😏 ?
Define the level of accessibility of your website and follow the guidelines : Web Content Accessibility Guidelines
This website should be your holy book when you want to get inspired 📕 .
Optimise Color Contrast: Getstark This is one of the color optimization platforms where you can find more information about optimising colours for accessibility.
Simplify the language: We don't need complicated or sophisticated words to have a website. Someone once said that if you cannot explain your work simply then you don't understand it well enough.. Keep your content always simple and understandable, and keep your layout clear.
Lead the users: e.g. Always use form labels to describe input fields and place holders. Keep in mind that acceptable input field examples are really handy and useful.
Always provide captions for video content. Without captions it is meaningless to a person with a permanent or temporary visual problem. Never ever have your video automatically begin playing.
Don't forget to test keyboard navigation. A user should have the right to use his/her keyboard to navigate the website. We cannot take this advantage away from them.
Create large buttons! You don't have to be a designer to create large buttons. In this way it is more clear that this is a clickable button and it calls an action.
Create understandable links: Have you ever thought: "I don't know where to click or where to go"? Yes! This is the reason why we need to be clear when we create links. Every link should have a meaningful reason behind it. So don't just make a href because you love a href..
Use semantic HTML elements: What on earth is semantic markup? Semantic elements mean elements with a meaning.

<main>, <nav>, <header>, <section>, <article>, <form>

and so on. Semantic elements clearly define its content.
Use ARIA landmark roles to add feature context to HTML elements.
Aria Landmark Features

If you followed all the golden rules and are not sure where to ask, then ask the community: A11Y Project; they have the Accessibility Checklist for beginners to guide and enlighten you..

In a nutshell, Accessibility and Inclusive Design are really import to increase web content quality and make the standards higher on the web. Everyone has the right to reach your content. We should be more aware of these different aspects of web design and development.. I encourage you to everyday apply one new accessibility guideline on your website and enjoy while teaching to others.

Useful links to learn more:

Please do not hesitate to give any comment and add more sources or knowledge about accessibility.