DEV Community: 🧸 🏳️‍🌈 cooper-codes 💻 🎮

Gratitude

🧸 🏳️‍🌈 cooper-codes 💻 🎮 — Fri, 29 Jan 2021 04:02:07 +0000

Good day friends

Recently I have been blessed with a great new role, in a brand new industry, at an amazing company full of exceptional people with some life-changing business practices, and it is one of these practices that I would like to share.

It is a small practice that kicks off our daily stand-up of practicing gratitude, and I was wildly unprepared for the ways this small element of our daily meeting would impact my life.

So what of this process of gratitude?

Practicing gratitude is about thankful appreciation for what an individual receives, be it tangible or intangible, according to the Harvard Medical Centre.

In my own research, there are lots of ways people practice gratitude, usually by keeping a journal, an interesting one was writing one on a piece of paper every day and putting it in a jar and reading them on New Years to celebrate the year (something I am considering).

But in relation to work, it is only a few mins introduction to the daily standup, where you start with one thing you are grateful for.

There is no right or wrong answer and sometimes they are more personal and sometimes they're very simple, one morning I was thankful for Berocca after a rough night's sleep because it helped pep me up, but it has to be genuine.

How has it affected me?

It started off small, I wanted to have a genuine gratitude to discuss in the morning so I was participating and carving out my own space in the team, I’d been a wallflower in previous organisations and I didn't want to make that mistake again.

One of the immediate benefits I noticed was how quickly I build a rapport with the team, every morning as we each opened up with a gratitude I am actively listening to the things each found joy in and more often than not would find a connection with their gratitude, connections form quickly as it creates a genuine bond.

Given we are all still working remotely at this time, and only just starting to trickle back into the office, this is quite a testament to the power of how it connects even total strangers and closes that digital distance gap.

How it evolved.

Even as I started by initially ‘preparing’ gratitude in the evening, this practice continued, but I'm not ‘preparing’ anymore, I am reflecting, reflecting on the day and what I have achieved, how I connected with my partner, the cute bursts of energy my cat has that endlessly entertain me, the food I had for lunch and what I may add to it next time to change it up.

The daily gratitude process has created a cyclical buildup of positivity that has been gradually elevating my self-worth, and as it climbs I find my gratitudes are getting deeper and increasingly personal.

2020 has been a tragic year for so many, it was also an exceptionally dark place for me, there were times I wondered if it was ever going to get better or if I would even survive it. But just a month later of twice-daily gratitudes and self-reflection has decreased my anxiety (or increased my ability to cope with anxiety, I feel there is an important distinction in there).

There have been quite a few things over the last year that I've been repressing due to the lack of personal strength in facing them, but as I feel more confident each day in the things I am grateful for these scary dark parts are getting less daunting and I'm afforded the strength to deal with them.

All of this has just come from a daily 5 min exercise of reflecting on moments I am grateful for.

And this is where I come to the important part.

This article hasn't been for some self-therapy (although therapeutic it has been), I have borne a bit of my soul here because I would love to help share the impact, and it doesn't really come across without demonstrating the benefits I have received.

I hope that after the terrible time that was 2020, this might be able to positively impact other people's lives, it may help someone build up confidence, or maybe your workplace is moving to a remote space and you want to try something to maintain a connection with your team and positively impact morale.

I won't sit here and say it's a total solution, it might not work for everyone or every team, but I can assure you that if practiced consistently and properly I’d be shocked if you saw no results at all.

I suggest giving it a go for a month, I highly recommend introducing it into your team meetings as this will amplify the effects in a shared social setting, and I would be extremely keen to hear back if it worked, what you tried, and what you did differently.

What is next?

Well, I have some ideas, I would like to bring my partner along on this journey to engage on a deeper level, the glass jar idea from the beginning of the article sounds great, I thought about creating a website and tracking my daily gratitudes (so basically a tech-heads journalling).

A11y :~ Alert

🧸 🏳️‍🌈 cooper-codes 💻 🎮 — Fri, 22 Jan 2021 04:08:22 +0000

Image from Unsplash

intro

Hi Friends!

Welcome to the first blog in my accessibility series, where I will delve into the deep and nitty-gritty details of various ARIA features (as many as I can, if not all).

why

Well, firstly, why not! Accessibility is a human right on the internet and it is our role as developers to ensure we aren't gatekeeping people out, it's discrimination for us to not do everything we can and utilise the tools available to us to get it right.

Let's not be Dominos, who took a visually impaired man to the Supreme Court because they didn't want to make the site accessible, I mean WTF 🤷‍♂️ that is not cool 'source'.

BTW, I buy much MUCH less dominos because of this.

ARIA

what is it?

ARIA is an acronym for Accessible Rich Internet Applications and is used by developers to create content that is accessible for assistive technology.

ARIA Alert

MDN docs state that the alert role is used to provide the user with important, and usually time-sensitive, information, and often to tell the user an element has been dynamically updated.

Image Source

We use these all the time, they're great at popping up on the screen, grabbing the users attention to alert them of a message we want to display in a timely manner.

Well, what happens if we don't provide an ARIA role to identify that? The message gets lost, Assistive Technology doesn't understand the importance.

So this is when we use an ARIA alert role="alert" within the content.

Impportant stuff

It is important to note, the alert must be placed within the content for the Assistive Technology to identify the alert properly, if not the focus will not move to the alert and it will get missed.
Be very careful to not have alerts trigger too close to each other, it can get messy and will create a terrible and confusing user experience.

Show me some code

So how can we set this up?

We can use CSS styles to trigger an alert, display: none hides the <p> element form the document, the moment we remove display: none from the element, the alert role gets picked up by Assistive Technologies and read.

<p role="alert" style="display: none;">I'm an ALERT.</p>

Or in the codepen example, we can inject the alert into the document ensuring we set the attributes with setAttribute("role", "alert");

What's next?

Thanks for taking a moment to read my intro to Accessibility with the Alert Role.

Next up is the Application Role, this one is a bit more in-depth, so I look forward to bringing you that one soon.

As I am still really new with Accessibility I encourage dialogue, if there is something missing or I've made a mistake please let me know and I will review edit, or add to the article.

References:

Grace Papers work update

🧸 🏳️‍🌈 cooper-codes 💻 🎮 — Mon, 18 Jan 2021 21:06:09 +0000

Hi family

Welcome back fam, it has been a few months since I have blogged, and for good reason.

In the wake of the disaster that was 2020, I managed to find myself a dream role as a developer.

Organisation

It couldn't have been a better fit from the get-go.

The organisation is called Grace Papers, and we are committed to fighting gender discrimination, by working with governments and corporations to improve their employment practices to support people returning to work after having children, driving inclusion in the workplace, and instilling practices that will help retain talent through nurturing and supporting employees.

It just couldn't have been more perfect, and it made 2020 worth the wait.

Tech & Learning

The stack is a fresh React front-end and a Laravel back-end, and I plan to do a lot of regular blogging as I learn and skill up.

My two main focuses will be

A11y ~ as we build the front-end in React I am committed to ensuring it is built with Accessibility in mind first, not as something we will add later.
Laravel/PHP ~ the rest of my blogs will be about my learning path in the back-end.

Well, stay tuned I have my first A11y post coming tonight ot tomorrow morning.

Set-up Tailwind in a Next.JS app

🧸 🏳️‍🌈 cooper-codes 💻 🎮 — Fri, 16 Oct 2020 04:08:46 +0000

Welcome

Hey, fam!

It's ya boi Coops back with another article, recently I've been playing around in Next.js and freakin loving it so I wanted to share the love.

I won't be building styles with it, that's coming in a future article.

Today is just about the setup.

Create New Next App

It may seem obvious, but the best place I find to start is at the beginning.

So let's create that shiny new project, I use Yarn these days, I've found it is faster and have only once needed to use NPM as one library wasn't supported.

    $ yarn create next-app <project-title>

Once we have the launchpad setup, I like to do a safety check just to make sure it was created properly, if it's a package its checking the -version to ensure it's installed.

But for a new project I like to kick off the server

    $ yarn dev

I call this a safety check because if you create a new app, start building and then something hasn't installed properly it can cause elevated heart rates and sometimes unsafe environments for technology within arms reach (haha!).

We should then have a folder structure like the following

root-folder
 > .next
 > node_modules
 > pages
    ├── api
    │   └── hello.js
    ├── _app.js
    └── index.js
 > public
    ├── favicon.ico
    └── vercel.svg
 > styles
    ├── globals.css
    └── Home.modules.css
 ─ .gitignore
 ─ package.json
 ─ README.md
 ─ yarn.lock

I won't be going over what files and folders do what, that is definitely for another lesson as I absolutely 💜 💜 💜 Next.JS and have a deep dive planned soon.

Installation

Firstly let's remove all our CSS imports at the beginning of the file, and anything in the code with styles reference className={styles.<style>}

As this page is being rebuilt I am more likely to just delete all the code and start fresh anyway, but each to their own.

Then kick off by installing the package

    $ yarn add --save-dev tailwindcss postcss-preset-env

Remember to follow that up with your version check to ensure we don't have any gotchya creep up later on

    $ yarn -v tailwind

I know most of you don't do this, but that's because you've probably not been caught out for 30 mins wondering why code doesn't work only to find out that the package didn't install.

As the docs say 'Now the fun begins!'

Initialise tailwind with the NPX command

    npx tailwindcss init

(at this stage I'm not sure about yarn with NPX use, although I am investigating and if you know the answer do leave a comment below)

Once that has run, we need to create ourselves the postcss.config.js file in the root of our directory.

We should be left with something like this now

root-folder
 > .next
 > node_modules
 > pages
    ├── api
    │   └── hello.js
    ├── _app.js
    └── index.js
 > public
    ├── favicon.ico
    └── vercel.svg
 > styles
    ├── globals.css
    └── Home.modules.css
 ─ .gitignore
 ─ package.json
 ─ postcss.config.js
 ─ README.md
 ─ yarn.lock

And in postcss.config.js add

module.exports = {
    plugins: ["tailwindcss", "postcss-preset-env"],
};

Then clear out the styles/globals.css file we don't need those anymore, and replace with the Tailwind imports

@tailwind base;
@tailwind components;
@tailwind utilities;

And delete the Home.module.css file completely.

And for the setup of Tailwind in a Next.JS app thats completed!

If you yarn dev and run the server you'll notice your app defaults to a styleless app and this is where I say HERE COMES THE FUN PART

But wait there's more... but I am saving the actual Tailwind magic for another article.

This was built with the guidance of James Q Quick and his soothing southern accent.

As well as the guidance of the Tailwind docs

object-orientated programming - an intro.

🧸 🏳️‍🌈 cooper-codes 💻 🎮 — Tue, 29 Sep 2020 09:26:40 +0000

Hi fam and welcome back to another blog.

Recently I was in a situation where I needed to describe some OOP fundamentals, and it had been so long that I'd actually coded strictly in OOP that I decided it was time for a refresher.

Bare with me, the code examples I use will be templates and I've deliberately chosen to leave the methods empty, so use your imagination we should be able to work out what they return by the naming conventions 😇.

Functional programming

So for comparison, what is OOP up against? That would primarily be functional programming.

Functional programming is defined by two definitions

It's deterministic: it will return the same result given the same arguments.
It doesn't cause any observable side effects, ie modifying a global object passed by reference.

I won't go too deep here as we're discussing OOP and just wanted to give a comparison, but this is a topic I will probably discuss at a later date.

What is OOP?

OOP is a programming design model designed around objects, which themselves contain their own data in the form of fields and methods to operate the functions on that data.

Most commonly OOP is arranged around Classes that create instances of objects to interact with other classes.

So where functional programming can be considered smaller contained programs that return different results given data, OOP is an object that represents the stuff it and contains its own data structures, operating rules and mutates its own state/data.

The big 4

While different OOP languages do mention more, there are 4 main principles of OOP, encapsulation, abstraction, inheritance and polymorphism

Let's dive straight into it with encapsulation and a little bit of code!

Encapsulation

Wikipedia states that encapsulation is the bundling of data within the methods that operate on that data, meaning encapsulation is a nice way of controlling the data within a class to external objects.

From within the class, we can use Getters and Setters to set the rules of what fields can be viewed/accessed and what data (if any) can be modified.

Encapsulation adds security to the code itself and allows us to define what we want to be available and to what.

Let's look at some code

class Teacher {
    // Declare protected (private) fields
    _attendance = 0;

    constructor(name, birthday, subjects, grades) {
        this.name = name;
        this.birthday = birthday;
        this.subjects = subjects;
        this.grades = grades;
    }

    get showGrades() {
        // Getter
        return this.calcGrades();
    }

    set showGrades(grades) {
        // Calculate grades formula
        return result;
    }

    rollCall() {
        return console.log("Roll Call!");
    }

    updateAttendance() {
        // add a day to the attendance days
        this._attendance++;
    }
}

const teacherOne = new Teacher("Cooper", "01/01/1984");
teacherOne.showGrades();

In this example, showGrades() is prefaced with get, and the get is calling set showGrades(grades) where all the work is being performed.

This is extended upon in Abstraction.

Abstraction

Abstraction shares similarities with Encapsulation, in an attempt to alleviate large unwieldy codebases and to improve maintainability, Abstraction is splitting large objects down into much smaller ones.

For example, a car, when we start a vehicle we use the key, as we turn the key and the motor starts, all the inner operations of why that car starts are abstracted away behind the key turn object.

We don't need to know all the inner workings of why the car started, it just did.

Inheritance

Inheritance is a way to reuse objects and cut down on excess code when two objects share features.

Take our Teacher and Student object for example, and while they have differences like date-of-birth, grades, etc, a Student has grades and a subjects field but a teacher wouldn't (or not in the same capacity, but more on that later).

Well, Inheritance would be a swift way to incorporate all the shared fields from Teacher without having to duplicate everything.

Let's look at some code

class Teacher {
    // Declare protected (private) fields
    _attendance = 0;

    constructor(name, birthday, subjects, grades) {
        this.name = name;
        this.birthday = birthday;
        this.subjects = subjects;
        this.grades = grades;
    }

    get showGrades() {
        // Getter
        return this.calcGrades();
    }

    set showGrades(grades) {
        // Calculate grades formula
        return result;
    }

    rollCall() {
        return console.log("Roll Call!");
    }

    updateAttendance() {
        // add a day to the attendance days
        this._attendance++;
    }
}

// Child class Student, inherits from parent Teacher
class Student extends Teacher {
    constructor(name, birthday, subjects) {
        super(name, birthday, subjects);
    }

    skipClass() {
        // additional method for Student child class
        return console.log("I missed the bus");
    }
}
const studentOne = new Student("Cooper", "01/01/1984");
studentOne.rollCall();

As we can see from the example, Student doesn't contain rollCall, but as Student class inherited from the parent Teacher class, we can create an instance of Student and call the roleCall method.

TaDaa sweet huh

Polymorphism

Probably the most complex of them all, but let's break it down.

Polymorphism is the ability of an object to take many forms, or in a more readable term, it allows us to use a class like its parent so there are no mixups with data types, and each child class can implement its own version of the method.

For example, our Teacher class has grades, and our Student class also inherits grades, but the student calculation of grades would be different from how a teacher would calculate grades, this is where Polymorphism comes in.

Polymorphism means we can create different methods for the derived classes, and through Inheritance, objects can override the shared parent method with child-specific behaviors.

Using rollCall as a code example

class Teacher {
    // Declare protected (private) fields
    _attendance = 0;

    constructor(name, birthday, subjects, grades) {
        this.name = name;
        this.birthday = birthday;
        this.subjects = subjects;
        this.grades = grades;
    }

    rollCall() {
        console.log("Roll Call!");
    }

    updateAttendance() {
        // add a day to the attendance days
        this._attendance++;
    }
}

// Child class Student, inherits from parent Teacher
class Student extends Teacher {
    constructor(name, birthday, subjects) {
        super(name, birthday, subjects, grades);
    }

    rollCall() {
        console.log("Here, teacher.");
    }
}

const studentOne = new Student("Cooper", "01/01/1984");
studentOne.rollCall() => Here, teacher.

In our example, both the Teacher and Student use the rollCall() method, but it would require different outcomes, a teacher would call for attendance and a student would reply.

Polymorphism means that we can inherit a method from a parent class but also change it to suit our needs.

This is one of those awesome rabbit hole moments that I could potentially do down for days, but hopefully, you get the idea.

Well, I hope you enjoyed this recap on OOP as much as I did, if there are any further things you'd like to point out feel free to let me know.

I am a big fan of constructive feedback as I start to blog more and more.

Peace out!
Coops

JavaScript Functions: a breakdown.

🧸 🏳️‍🌈 cooper-codes 💻 🎮 — Wed, 26 Aug 2020 11:14:43 +0000

Welcome back Fam!

Today I wanted to create a blog to break down the different types of JavaScript functions in the most basic terms.

When I was first starting to code the MDN docs confused me most of the time, so this will be part of an ongoing series into the core fundamentals of JavaScript written by someone who didn't come from a CompSci background.

What is a Function

That's right, we need to start from the beginning!

A function is the very building block of coding, and whether it is JavaScript or Java you're going to want to get acquainted with the fundamentals of the fundamentals.

In JavaScript (like most languages) a function is a block of code that performs a task or returns a value, one good thing to note at this point is a function should do that, perform one function (but that's a debatable story for another time).

But to make it a bit more interesting, JavaScript has evolved and has quite a few different ways to declare and use them, so let's start.

Function Declaration

I will start with a Function Declaration because it comes first, and I mean that because a Function Declaration gets hoisted the moment the program is compiled.

Hoisting you ask? hoisting is the way JavaScript allocates functions to memory and in what order, and this is a topic worth exploring on its own and this article explains it well.

function funcName(withParams) {
  // params can be declared, but are not enforced;
};

function funcName() {
  // without declared params;
};

funcName();

Syntax:

starts with 'function'
followed by the name
with optional params, if you don't declare params, you can still pass them though and they'll be accessed with arguments
invoked by calling the function name

The reason a Function Declaration gets hoisted first is that as it compiles, JavaScript looks for the declarations starting with 'function', makes sense, huh, this then hoists all those declarations to the top of the pile.

This can lead to some gotcha moments though that we should be aware of, mainly that if a program is compiled and a Function Declaration gets invoked before the Function Declaration is hoisted.

Function Expressions

A Function Expressions is where an anonymous function is assigned to a variable(var/let/const)

const funcName = function() {
  // do something;
};

funcName();

Syntax:

starts with the name declared in a variable
function() assigned to the variable
params operate the same way
invoked the same way

Function Expressions are not hoisted, so this would prevent those icky instances of a Function Expressions getting invoked before it gets hoisted and stashed in memory.

P.S. while Function Expressions are not hoisted the VAR declaration IS, so if you declare a function with VAR it will be hoisted.

But wait,

And it's called a Named Function Expression

const funcName = function yoda(){
  // do something
};

typeof yoda; // -> "undefined"
funcName(); // -> "function"

So why do this right? as Yoda is 'undefined' when we checked the type, the bonus with a named function expression is the name is recognised within the function itself and can help dramatically when debugging as the name will show up in your call stack, whereas an anonymous function wouldn't show up in the stack.

const funcName = function yoda(param) {
  console.log(typeof yoda === 'function'); // -> true
  return typeof param;
}

funcName(3);     // -> 'number'
funcName.name;   // -> 'yoda'

So as you level-up it might be worth considering if Named Function Expressions are for you?

Arrow Functions

Ahh Arrow Functions, everyone's new favourite addition to ES6.

Arrow Functions are a Syntactic extension of Function Expressions, utilising what we call a fat arrow (or I prefer to call a rocket), and it can be constructed in a few different ways.

// -> no params
const funcName = () => {
  // do something;
};

// -> one param
const funcName = param => {
  // if one param the brackets arent needed;
};

// -> more than one param
const funcName = (paramOne, paramTwo, paramThree) => {
  // but if more than one they are required;
};

// -> if the function is simple enough it can be simplified to a single line, removing the need for brackets after the rocket.
const funcName = (x, y) => x * y;

Like with all our functions so far there are some times when Arrow Functions, so let's go over a few of these gotchas.

It gets funky with This

Wes Bos can probably do a way better at explaining this, with this.
As he does such a good job I'll phone a friend and leave you to review that article rather than repeat.

Constructors

Arrows Functions can't be used as constructors, therefore 'New' cant be invoked with an Arrow Function.

Object literals

And the final sticky part ill cover is object literals, due to the syntax Arrow Functions can't decipher them, for example.

An ES5 object literal would operate like this.

const setColour = function (colour) {
    return {value: colour}
};

let backgroundColour = setColour('Blue');
backgroundColour.value; // -> "Blue"

But since the Arrow Functions use the curly braces by default, they can't differentiate between a block scope and an object literal and would result in an error.

const setColour = colour => {value: colour };

But this can be overcome but wrapping them as such.

const setColour = colour => ({value: colour });

Immediately Invoked Function Expressions(IIFE)

As the name does suggest, this is a function that is invoked the moment it is defined.

(function () {
    // do something;
})();

This one looks a bit weirder, but it is just an anonymous function wrapped in brackets and invoked immediately after.

They can be handy as they're invoked immediately, and not hoisted into the global scope (and this could be considered pollution), they cannot be expressed with a Rocket.

As they are invoked due to the compile process, they do not need a name, but they can be given one.

(function funcName() {
  // do something;
})();

There are plenty of bonus features with IIFE but I will point you to an amazing article that covers all those quite clearly.

Well, I hope you liked the article if you reached this far a like or a share would be lovely if you were so inclined.

I will be back soon with some more JavaScript-related content.

Much luv
Coops

Building the React Scaffolding from scratch

🧸 🏳️‍🌈 cooper-codes 💻 🎮 — Tue, 18 Aug 2020 03:52:00 +0000

Welcome, Fam!

While I originally planned to do a fair bit more blogging it's been a roller-coaster ride the last 6 months, stepping into the C# world spending some time with a company working on an older asp.net application.

As I find myself gravitating back to React, I realised 🤔... I'd forgotten so much! and since I dropped off just before Hooks became so stable/adopted, I recognized very little JSX code anymore.

So back on the horse I go! but this time if I was going back to the start it wasn't going to be from 'create-react-app' scaffolding, I wanted to level up my knowledge and learn from the ground up.

And I felt it was worth a blog, so if you are relatively new to React or haven't built a project from scratch this article might be for you.

The most surprising part really is just how easy this was!

Setting up the folder structure and web-server.

First off we need to create a few folders and get the HTML file running with the web-server.

I like to get this running and make sure there aren't any critical issues (I try and identify known issues early and weed them out).

In the root project create a Public file and an HTML document, this will be the entry point for our React app.

But while we're at it, I like to just create the skeleton structure (and if you've started a react app before it should be pretty familiar).



    <!-- Folder Structure -->

root-folder/
    ├── public/
    │   ├── scripts/
    │   │   └── app.js
    │   └── index.html
    └── src
        └── app.js

Once that is done add your basic HTML page, my emmet creates this for me automatically if I start an empty HTML page with the character '!', but if you don't have the emmet plugin it should look something like this (get emmet too).



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>

There are two more things required in the HTML page to get React to run (ok so three), the script tags in the body, and the div attribute that acts as the injection point.

In the body add a div with an id attribute of "app", the two unpkg.com script links in Part 2 of the React instructions page, and finally a script tag with a source that points to the app.js in the scripts folder.

But before we run off, above the div with the id of 'app' and just for testing purposes add some text in that body so that we know everything is working when the page loads.

So your body should look like this...



<body>
    Test Text
    <div id="app"></div>
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
   <script src="/scripts/app.js"></script>
</body>

Head back to your command line and while ensuring you are pointing to the root folder, we want to kick-off our packages.

Now I am using Yarn in this instance, basically, as I have always used NPM I wanted to try something a bit different, but all commands can easily be replicated in NPM.



    $ yarn global add live-server

const postScript = (hol-up-a-min moment) => {
Yes, I am aware there is a live server extension in VS Code, but I am backing up and going manual right now. The point of manually creating what can be done in scaffolding is to get a better understanding of how things work at the root level.
return 'Back to the regular program'
}

After I install something with Yarn/NPM I always like to check installs properly with a package version check, for live-server it's



    $ live-server -v

This will give you the version number, or an error, and I'd rather locate the error now than have to debug and find it later.

Now to kick off live-server and see our HTML page simply run live-server and the target folder, in my case



    live-server public

This will find the index.html page and whatever you wrote in the body will display as text on the page.

SUCCESS, we have our live-server setup (you are now free to remove the Test Text from the page).

Babel + JSX

If you aren't aware of Babel or what it does, that's OK we're all here to learn (and tbh I only knew OF it before I went down this lesson too).

Babel is a JavaScript compiler that React uses to compile JSX down to browser-friendly JavaScript.

const postScript = (hol-up-a-min moment) => {
I am assuming you know what JSX is and I wasn't planning on covering that here, if not it's a JavaScript Syntax Extension that I like to call ReactScript it's a combination of JS+XML.
}

So let's add see what Babel does by adding some JSX, in the script/app.js file we need to add 3 things.

JSX
The document element: this is the div in our HTML page that react uses as the injection point.
ReactDOM.render(): is the method that takes our JSX code and the HTML injection point and creates the magic, more info can be found here.



    const template = (
    <div>
        <h1>React from Scratch</h1>
        <p>Thanks for reading my article</p>
    </div>
    );

    const appRoot = document.getElementById("app");

    ReactDOM.render(template, appRoot);

Making sure live-server is running, what happens without Babel?

This doesn't give us much of an explanation, but basically what's happening, is the browser is unable to decypher the JSX encryption.

So let's add Babel!



    $ yarn global add babel-cli

And check the install just to be sure



    $ babel --version

Next, the project needs to be initialised, so run the init command and cycle through the project initiation questions (I'm also assuming I don't need to explain this process).



    $ yarn init

    name (application name):
    version (1.0.0):
    description:
    entry point (index.js):
    repository URL:
    author:
    license (MIT):

This will generate your package.json file.

Then we need to install the two Babel packages that will convert the JSX

babel-preset-react: As the title suggests, this is the React specific extension.
babel-preset-env: env is the magic that manages which type of JavaScript the JSX gets compiled down to, so the magic basically.

Add these with:



    $ yarn add babel-preset-react babel-preset-env

Once you see that's completed your folder structure should now look like this.



root-folder/
    ├── node_modules
    ├── public/
    │   ├── scripts/
    │   │   └── app.js
    │   └── index.html
    ├── src
    │   └── app.js
    ├── package.json
    └── yarn.lock

Running the project

Finally, we need to invoke Babel.

Grab all the code that is in the scripts/app.js folder and move that to src/app.js, the reason for this is src/app.js is where we write all the JSX and the scripts/app.js folder is where Babel compiles the readable JavaScript to that gets injected into the HTML.

In a new Command Window pointed to the project root folder (leave live-server running in another), we need to invoke summon that Babel magic with 3 inputs (and one option to make your life easier)

The JSX file that needs to be read (src/app.js).
The out file where babel compiles the JS to (public/scripts/app.js).
The presets required (env + react).
A watch flag to refresh the page on each save (--watch)

These commands according to my file structure, would look like this:



    $ babel src/app.js --out-file=public/scripts/app.js --presets=env,react --watch

With this, we have now created the (basic) boilerplate of a React app, from here it's up to you to create and add the packages as you go along.

Well, I'll leave it there short and sweet!

Next steps will involve adding webpack later down the road and I'm sure there'll be a blog on that too!

Signing off for now...

Cooper 🍕 🍺 🍔 🍶

Building an A4 resume to add to your website (and making it printable)

🧸 🏳️‍🌈 cooper-codes 💻 🎮 — Tue, 18 Feb 2020 10:48:26 +0000

Hi, and welcome to my first ever blog post.

I'm Cooper, a developer from Melbourne that recently started looking for a new job, so while I am redesigning and building a new Portfolio Website I thought I'd share some knowledge.

One of the main goals was to build a resume into my website, but one that would be in the A4 format, making it easier for potential recruiters or employers to save as a PDF or print off (for those truly retro organisations).

TL;DR if you just want to see the code repo, or visit the published site it's here

I recently learned a bit of SASS so I've used that, nested styles alone worked wonders rather than having to class up every individual div, so SASS is bae 💁🏼‍♀️.

Once it was built I transposed it to my Svelte portfolio, I won't go into detail there but I will cover the Gotcha later on that tripped me up for a few hours.

First things first, you need to create the page template, in your HTML body create a container div (I called mine resumeCanvas, but you do you), in the SCSS we create a canvas to paint our masterpiece on.

So what's happening here?

Box-sizing - border-box we ensure everything stays within the chosen dimensions.

Margin - at 0 and auto sets everything to the center.

Padding - this one sets 0.3 of an inch between the border and the insides, you can add a bit more like maybe 0.5 but I ended up shortening it because I ran out of enough room in the end.

Width & Height - these are the important ones, I did a bit of research and got the Width & Height for an A4 page (ok there might be a slight discrepancy but it won't matter when we set print properties).

Background-color - this should be white, you could make this any colour you want but remember it should be made with printing in mind so try not to think dark mode here.

Box-shadow - this give a nice little grey outline on the webpage to differentiate itself from the background page.

grid me

Great! at this point, we have a nice little A4 sized page, now how do we fill it?

Well as we are using a fixed size that isn't designed to be responsive and we need a layout, a grid is the perfect solution...

Grid you say...

Think I just heard a collective sigh

Well, don't worry my friend because there is a superstar out there called Sarah Drasner (who also has an amazing portfolio), that created a grid template generator site just for us.

As we can see above, I went for the header for my name, a left panel for all the guts, and a right panel to display all the links (this I later changed to a set pixel length as I found things moved around as I sorted out the canvas width and height over the time of the project). But however you want to layout your project, this is how you do it.

Now go on and click that Please may I have some code button, and get that cheddar 🧀.

I went on and renamed parent to gridParent, div1 to titleHeader, div2 to leftSummary and div3 to rightInfo just to help myself from getting confused. Naming conventions and all that.

Pop that into your CSS/SCSS file and create those divs in the HTML file and you're all set up to fill your HTML file with your resume data.

This is the fun part 🙊 and I'll leave that part up to you.

I won't lie, that part takes some time, not just the words but also some styling, since I hate boring black and white documents I added in some rainbow interactive elements on hover, but these won't show when a document is printed out.

At this stage when you have your page generated and run your OS's print command you should have a perfectly A4 sized PDF/Print page.

And it was perfect, till I transposed it into my Svelte app, then I had all sorts of problems as it didn't just grab the desired div, it started cropping from the top left-hand corner of the page.

This is where I learned about the print media query, and this can be done two ways but the other was a lot more heavy-handed for what I was trying to achieve.

By adding the tag into your header you can create a whole different stylesheet, this would be good if you wanted to design a pretty website style resume and then have the alternate code in that style sheet that would only display when it was called to be printed off (and I'll explore this option later).



<link rel="stylesheet" type="text/css" href="print.css" media="print">

But since I just wanted to print it off as is we just add the @media print {} block in the section or CSS/SCSS file of the Svelte page, and target the parent div class (what I renamed resumeCanvas) and it ignores everything higher up the tree.

The other little gotcha I mentioned earlier was getting the formatting right once I transposed everything to my Svelte app, and thanks to another CSS superstar Rachel Andrew (website), I read that the page needs to be defined according to the dimensions we set in the Canvas, as demonstrated in the code below.

Setting @page { size: 8.5in 12in; } to match made it fit like a glove.

At this stage, I can't yet link the Svelte app as it's still under construction, but when it's ready it'll replace my current website, so maybe keep checking back.

If there are any questions, or if I could've done anything better, reach out to me.