DEV Community: Greg Fletcher

What is Deno.js and why should you care?

Greg Fletcher — Tue, 05 May 2020 22:12:11 +0000

TL;DR

Deno was created by Ryan Dahl, the creator of Node.js.
Deno is secure by default. Without permission, it cannot access files, network, or the environment.
Deno has TypeScript built-in with no external configuration needed.
External packages are pulled in via urls (much like Go)
Deno is an anagram for Node and it's pronounced Deeno (long e).

Introduction

Deno.js is arriving its 1.0.0. release date on May 13th, 2020, so I decided I collate the top information about the project.

Let's start!

The Beginning

In 2018 Ryan Dahl did a talk at JSConf EU where he talked about his top 10 regrets with Node.js. His talk was excellent and you can watch it below.

In his talk, Ryan mentioned he had concerns with the node_module system and other legacy API's that will never change. He noted that JavaScript has changed a lot since Node.js came out and that he could see a way to make a better version of Node.js. He wanted it to be compatible with the browser AND the server environment. Security was also something that he wanted to focus on.

May 13th --> Release Date

A lot has happened since Ryan's talk at JSCONF 2018. Many people have joined the project, it already has 48k stars on Github, and the project is beginning to raise a lot of attention in the community prior to its official 1.0.0. release on May 13th.

Time will only tell whether Deno will continue to grow but if the initial reaction is anything to go by, it's very positive.

Top Syntax Features

Top Level Await

No more wrapper async functions. Just use top-level await syntax

const data = await fetch('someapi/data');

Import and URLs

You can use import and you don't need to NPM install all your packages. Much like GoLang, you can import from URLs.

import stuff from 'https://package/url'

TypeScript Built In

No need to set up TypeScript. It's all built-in. Just start writing your code!

Secure By Default

Deno has restricted access to files, the network, and the environment. This is a big difference to Node.js which has access immediately to everything.

ES6 and beyond

Unlike Node, Deno has the opportunity to incorporate modern JavaScript syntax which can remove the callback hell that Node can lead to.

Compatible with the Web

Deno's API is meant to be compatible with the web.

Web Assembly

Deno has support for wasm binaries.

There's more planned with Web Assembly so keep an eye on the project.

Interesting Resources

Creator Talks

Videos of Conference talks by Deno creator Ryan Dahl and fellow project contributors Kitson Kelly and Bert Belder.

Introductions from the Community

Jeff from Fireship does a short informative rundown of Deno (with super cool graphics).

Harry goes in-depth about Deno and what it could mean for the future of JavaScript. He has more great Deno tutorial videos that you should check out.

Articles

Ryan Dahl did an interview with the organizers of the HolyJS Conference. Read it here.

Summary

Deno is an exciting project that you should definitely check out!

I would like to be clear that this article isn't bashing on Node.js. Node.js is amazing, I love using it and will continue to. It's just nice to have a new and improved version out there for the future.

Let me know what you think of Deno. Are you excited, surprised, or horrified? Let me know in the comments!

Recreating Facebook's Content PlaceHolder

Greg Fletcher — Sat, 21 Mar 2020 22:02:51 +0000

Every day I challenge myself to do some kind of animation with CSS and sometimes I write about how I made it.

Today's Animation

Facebook is updating the look of their website and today I will be trying to replicate their new content loader.

Here's what it looks like.

I really like Facebook's version of a content loader since it just animates through the background color. This means it's hard to notice if the browser blocks and interrupts the animation. Not a big deal. Just a nice touch.

Normally you don't see the animation for long anyway since it disappears as soon as the content loads.

Here's the JSX

function FaceBookLoader() {
  return (
    <div className="FaceBookLoader">
      <Loader />
    </div>
  );
}

function Loader() {
  return (
    <div className="LoaderWrapper">
      <div className="Circle" />
      <div className="LineWrapper">
        <div className="LineTop" />
        <div className="LineBottom" />
      </div>
    </div>
  );
}

The CSS

:root {
  --color: #3e4042;
  --animation: colorChange 2s linear both infinite;
}

@keyframes colorChange {
      0% {
        background-color:#3e4042;
      }
      50% {
        background-color: #262729;
    }
    100% {
      background-color:#3e4042;
    }
}

.Circle {
  /*...*/
  background: var(--color);
  animation: var(--animation);
  /*...*/
}

.LineTop,
.LineBottom {
  /*...*/
  animation: var(--animation);
  background: var(--color);
  animation-delay: .2s;
  /*...*/
}

The main takeaway should be the animation of the background color. It's pretty simple. Just animate between the main color and a darker one. Also, I've added an animation delay on the two lines. That way, it flows a little better.

I hope you found it interesting! Thanks for reading!

How to Simplify Stateful CSS Styles

Greg Fletcher — Sat, 21 Mar 2020 16:48:57 +0000

Today, I'm going to present another way to organize stateful-styles. By stateful-styles, I mean the CSS styling that changes in response to your Application's State.

Reasons why I'm writing this

Recently my front end development code has become easier to read. Why? Because I've been using state machines and data attributes to help simplify the different states of my application.

Before I started using state machines and data attributes, I was hacking around with many kinds of unrelated states and quite often ended up with code that was hard to read. This made development difficult and discouraged my exploration of cool animations and styling. But now, because I use state machines, I always think about the different kinds of states that my application can exist in. As a result, I've seen a huge reduction in spaghetti (messy) code and complicated boolean logic in my applications.

I learned this style of programming from David Khourshid and Stephen Shaw. Two amazing developers who have an incredible YouTube channel called keyframers. Check them out!

I genuinely believe that state machines are a game-changer for UI development and I hope that I can encourage you to try them out yourself. I'll leave some important resources at the bottom of this article.

Now that's out of the way, let's start.

What Tools We'll Use

Data attributes
A state machine
React
SCSS (Sass)

Let's start by talking about data attributes.

Data Attributes

Data attributes are just attributes that you can put on an HTML element.
You can name a data attribute however you like, so long as it starts with the keyword data.

So why use data attributes? Data attributes make it easier to think about your styles in a stateful way. If the state changes, then the appropriate styling changes as well. If you combine this with a state machine, your code can become simpler because you're not relying on multiple, potentially conflicting, states.

That might seem a bit vague but it will become clearer as we go along.

Let's take a look at a data attribute and then how we would use it in our CSS.

<div data-view='on'>

<p class="Text">Some Text</p>

</div>

👆 The div above has a data attribute called data-view='on'. We can use this attribute in our CSS below 👇

.Text {
color: black;
}

[data-view='on'] { /* the styling below applies only when the data attribute exists */
.Text {
color: red;
}

Okay, let's unpack this quickly.

The [data-view='on'] is a CSS selector that only applies its styling if the data attribute (data-view) exists. If it does exist, then it takes precedence over the original color styling of black. If it does not exist, then the default black is applied instead.

What's important to note here is that we're moving into a direction where we can start to think about our Application's styling in a stateful way. This emphasis on statefulness will make it much easier to organize our CSS and Javascript.

Before we go any further, let's have a look at the example project that I made with data-attributes and a state machine. I replicated a Dribble project by Jaydeep Patel.

(click on the button to interact).

Okay, so this app has two states, on and off. That's it!

Let's take a look at the code.

First the JSX.

<div  data-view={state} className="App">
<div className="OnPage" />
<div className="OffPage" />
//...extra markup
</div>

Now the CSS.

:root {
  --transition:  transform .4s ease-in-out;  
}

/* default styles */
.OffPage {
  background: #050033;
  transform: translateX(100%);
  transition: var(--transition);
}
.OnPage {
  background: #1da34d;
  transform: translateX(-100%);
  transition: var(--transition);
}

/* data attribute styles */
[data-view="off"]{
  .OffPage{
    transform: none;
  }
}
[data-view="on"]{
  .OnPage{
    transform: none;
  }
}

We have default styling that transforms both OnPage and OffPage out of view using translateX.
Depending on the current state we apply a transform of none to OffPage and the OnPage classes. Because we have a default transition of .4s the element appears to slide in. It's important to note that these styles only appear if the correct data attribute exists.

This is really useful because now we can divide our CSS into two different states, making our styling much easier to organize.

Now, we need to switch between the on and off states, so let's take a look at the state machine.

State machines

I first heard about state machines from one of David Khourshid's tech talks. His approach was so wonderfully simple that I now try to apply state machines in all of my front end code! You can check out David's talk here.

I know that 'state machines' might sound scary to those of you who haven't heard of them before (they sounded scary to me at first!) but once you understand them you'll discover a wonderfully simple way of organizing state in your Applications.

Key State Machine Concepts

There are finite states in your application. No impossible or unthought-of states. This helps to reduce bugs.
Finite events that trigger state changes.
State machines make you explicitly think about your application state. It's either on or off.
There is an initial state.

David Khourshid has written more about this for his state machine library, XState. Check out XState's documentation.

Let's take a look at some state machine code.


const machine = {
  initialState: 'on',
  states: {
  on: 'off',
  off: 'on'
};
const [state, setState] = useState(machine.initialState);
const cycle = (state) => setState(machine.states[state]);
return <div data-view={state} className="App">
//...extra markup
<div onClick={() => cycle(state)} className="CircleContainer">
//...extra markup
</div>

That's all the logic we need for the App!

It might be a bit confusing still so I'll explain.

First, we create the machine which is just an object with 2 outer keys, initialState and states. States has two inner keys on and off. Both of which have the value of the next key.
Next, we create state and setState with useState whilst applying the initialState of on.
Then, we use the cycle function to cycle through the states on and off. This always returns the next state. For example, if the current state is on then it will return off. Then the cycle repeats.
Finally, we set data-view to the current state. Whenever that changes, our CSS will change accordingly!

Just to be clear, every single style change that you see occurs when the data-view attribute changes from 'on' to 'off'.

This makes the CSS easier to organize. Let's take a look at the text sliding up and down.

.OnText, .OffText {
  font-size: 5rem;
  color: white;
  overflow: hidden;
  span {
    transition: transform .4s ease-in-out;
  }
}

.OnText {

  span {
    display: block;
    transform: translateY(100%);
  }
}
.OffText {

  span {
    display: block;
    transform: translateY(-100%);
  }
}

[data-view="on"]{
  .OnText {
    span {
      transform: none;
    }
  }
}

[data-view="off"]{
  .OffText {
    span {
      transform: none;
    }
  }
}

All of the style changes you see come from [data-view="on"] and [data-view="off"].

What's also nice is that the state machine doesn't require tricky booleans in the JSX. The only thing we change is the value of data-view. It's either 'on' or 'off'. I think that this greatly simplifies things.

Let's see that again.

<div data-view={state} className="App">

Some of you might be thinking that you could have achieved this same effect by using classes and swapping them out. That's true. But I find matching a state machine with data attributes much simpler. Maybe it's personal taste, maybe not. Either way, I encourage you to try it out in your next side project!

Let's take another look at the App. I recommend forking it and experimenting by changing the styles underneath the data attributes. See if you can come up with something different! Feel free to post a link to your version in the comments!

Recap

State machines and data attributes might seem tricky at first but in reality, they can simplify development by dividing our styling into separate states.

To illustrate this we saw an example App where every style change was related to the 'on' and 'off' states. We utilized data attributes in the CSS to apply stateful styles and set up the logic in the JSX with a simple state machine object and useState.

Finally, I'd encourage you to do some research into state machines and data attributes. I've listed some resources below!

Thanks for reading!

Resources

State machines information:
XState

Data attributes:
KeyFramers

Top Front-End Development YouTube Channels

Greg Fletcher — Wed, 18 Mar 2020 18:19:02 +0000

There are a lot of coding YouTube channels out there for learning front-end development, but since there are so many, it's hard to know where to start. So, to help the confused, I've decided to list some of my favourite channels and write a short summary on why I enjoy watching them.

This is not an exhaustive list, and I may add some more later. But for now these are some of my top six and I hope that you learn a lot from them.

The Coding Train

If you love everything programming then this is the channel for you. Daniel Shiffman never fails to entertain with his fun loving attitude. His approach to programming is fun and approachable. So, when I'm looking to learn more about animating or even some machine learning, this is my favourite channel. Choo choo!

Low Level Javascript

This is a gem of a channel. Serious programming topics are broken down and explained with some really elegant code. It's all low level stuff but you never feel like you're being overwhelmed. So, if you want to get excited about building parsers or virtual machines with Javascript then this is the channel for you.

LayoutLand

Do you want to learn how to use CSS Grid and also understand why front-end development was in desparate need of it? If so, then watch Jen Simmons's LayoutLand. It's the best series out there on the why and how of CSS Grid. You'll learn pretty quickly that CSS grid is extremly powerful for making beautiful, unique web designs that aren't just based on 12 column grids.

Leigh Halliday

Leigh has incredibly high quality React tutorials. If you're looking for great examples for solving real world problems with React, then definitely head to his channel. Don't let the shortness of his tutorials trick you into thinking that there isn't much detail. They're filled to the brim with great code and you'll learn heaps without being overwhelmed.

Ben Award

Ben has a range of great videos, with many of them revolving around React based technologies. All his videos are informative and you're bound to learn something new each time. He's pretty clued in to the programming world as well, so you're bound to learn about current best practices and good computer science concepts.

Keyframers

As Stephen and David like to say, they are animation amigos, boolean buddies, and keyframe companions. In short, they are really into animation on the web. They mainly use just HTML, CSS and (sometimes) a little bit of Javascript. Honestly, this is the best channel out there for animation on the web. Each week they choose an animation on Dribble and attempt to replicate it in code for the web. So if you want to learn animation then you've got to check out their channel. I've learnt heaps from their videos and I really appreciate how they take you through their process step by step. Coding is about problem solving and it's inspirational to see how great programmers like them tackle each project.

What are some of your favourite coding channels? Feel free to let me know in the comments.

Happy learning!

Daily animation: Button Swipe

Greg Fletcher — Tue, 17 Mar 2020 13:05:11 +0000

Recently, I was on the Half-Life Alyx website and came across an interesting button animation. As you hover over the button the background comes across from the left and fills the button whilst changing the text's colour. The background is also slightly skewed, which is a nice touch. I've seen this type of button animation before but I've never actually done it myself. So I thought it would be fun to make my own version.

Here are the styles.

.Button {
outline: none;
border: 2px solid #2d4059;
font-size: 1.4rem;
padding: .7em 1.2em;
background: transparent;
color: white;
overflow: hidden;
z-index: 1;
font-weight: bold;
box-shadow: 8px 8px #2d4059;
cursor: pointer;
transition: color 150ms linear;

&:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 140%;
  height: 105%;
  background: white;
  transform: skew(-33deg, 0) translateX(-110%);
  transition: transform 150ms linear;
  z-index: -1;
  }

  &:hover {
    color: #2d4059;
    transition: color 150ms linear;
    &:before {
      transform: skew(-33deg, 0) translateX(-10%);
      transition: transform .25s linear;

    }
  }
}

Breakdown

The z-index is very important here because we don't want the pseudo-element to cover the button text. To solve that problem we set the pseudo-element ::before to a lower z-index than the button.
We're also skewing the background so that it has a sharp edge as it comes into view.
Next, we set the transition to start when the button has an on:hover event. Here we just translate the ::before element to -10% (which fills the background) and change the button text to a darker colour (so it can stand out from the white background).

If you're interested in seeing the original button animation, you can check out the Half-Life Alyx website.

And that's it! Hope you enjoyed it!

Make a Cool Typing Bubble Loader

Greg Fletcher — Sat, 14 Mar 2020 17:31:03 +0000

Loaders are extremely useful for informing a user that something is happening. The alternative to using loaders is just hoping that the user understands that they need to wait. Often, this just leads to the user becoming frustrated or, even worse, leaving the application. Obviously, we don't want this, instead, it's better to incorporate a visual loader in your application to improve the user experience.

Now, let's get to coding a bubble loader. We'll take inspiration from the Facebook Messenger typing loader. This comes up every time your friend is typing a message. It's a great way to let users know that they're getting a reply. It's all visual and everyone understands what it is.

What we'll be using

React
CSS Variables
KeyFrames

Here's what our loader will look like at the end.

Diving into the code

Let's start with the jsx markup.

function Messenger() {
  return (
    <div className="Messenger">
      <Loader />
    </div>
  );
}

function Loader() {
  let dots = Array(3).fill(3);

  return (
    <div className="Wrapper">
      <div className="Loader">
        {dots.map((_, i) => (
          <div style={{ "--i": i }} className="Dot" key={i} />
        ))}
      </div>
      <div className="Background" />
    </div>
  );
}

The Messenger component will just act as the wrapper. We'll use it to set the background color for the page and to align the Loader in the center.

In the Loader, we'll put three divs, each with their own CSS variable --i. We'll use this variable for setting the animation-delay.

We also have a Background div but I'll explain more about that later.

The main take away is that we can set the CSS variable to the index of the item. That's going to make our animation super easy to make! 🥳

Now to the CSS

.Messenger {
  height: 100%;
  width: 100%;
  background: #F9B5AC;
  display: flex;
  justify-content: center;
  align-items: center;
}

.Loader {
  height:80px;
  width: 200px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  border-top-left-radius: 3px;
  border-top-right-radius: 40px;
  border-bottom-right-radius: 40px;
  border-bottom-left-radius: 40px;
  z-index: 3;
  background: #9DBF9E;
  cursor: pointer;
}

These are the basic styles and are self-explanatory.

Animation time! 🥳🥳

@keyframes move {

    0% {
      transform: translateY(0%);
    }
    25% {
      transform: translateY(-40%)

    }
    50% {
      transform: translateY(-80%)
    }
    75% {
      transform: translateY(10%);
    }
    100% {
      transform: translateY(0%);
    }
  }

.Dot {
  transform: none;
  animation: whoop 1s linear infinite forwards;
  animation-delay: calc(var(--i) * .2s);
  width: 20px;
  height: 20px;
  background: #EE7674;
  border-radius: 50%;
  z-index: 1;
}

As you can see, the keyframes define our animation. Next, we just apply an animation-delay by multiply the variable --i times .2s. This gives us the awesome effect of each dot moving after the other.

Let's take a look at the CSS variable again.

dots.map((_, i) => <div style={{ "--i": i }} className="Dot" key={i} />)

As you can see, we're applying the index of the array to the CSS variable.

Next, in the CSS we just multiply the variable times .2s and the result is each dot moving one after the other!

.Dot {
/*...*/
  animation-delay: calc(var(--i) * .2s);
/*...*/
}

But wait, there's more!

Remember that Background div? Well, we can use it to be the box shadow of the loader. Then on:hover we add a transform of translate in the loader. That way we can hover over the loader and the Background will remain in place. This gives us a cool hover effect!

.Loader {
/*...*/
transition: transform .3s ease-in-out; 
&:hover {
transform: translate(10px, 10px);
 }
/*...*/
}
.Background {
position: absolute;
height:80px;
width: 200px;
top: 0;
border-top-left-radius: 3px;
border-top-right-radius: 40px;
border-bottom-right-radius: 40px;
border-bottom-left-radius: 40px;
box-shadow: 10px 10px .07rem rgba(rgb(69, 107, 129),  .7);
z-index: 1; 
}

Try it out by hovering your mouse over the loader 😇

So that's it! I hope you learned something!

Extra resources:

I learned the CSS variable trick from the fantastic youtube channel keyframers. They're focused on making performant CSS animations that are easy to understand. Check them out!

Instant Arrays, Javascript

Greg Fletcher — Fri, 13 Mar 2020 23:58:26 +0000

Here's a cool way to quickly make arrays in Javascript.

let array = Array(10).fill()

This creates an array with ten slots in it. I usually find this useful if I need to quickly iterate over a list in React. For me, this is a nice quick way to check if my styling is working. For example, what if we wanted to know what a component would look like with 10 list items compared to 20.

Example below

const List = () => <div>{Array(10).fill().map((_, i) => <p key={i}>Text</p>)}</div>;

What's great about this is that I just change one number and get an entirely different numbered array. No need to manually type out the array yourself.

Sometimes though it's also useful to have an ordered array. This is also quite easy to achieve.

let array = Array(5).fill().map((_, index) => index +1); // 1,2,3,4,5

Here we're just using the index of the array and returning it after adding 1. This gives us an array with five elements ranging from 1 to 5

If we didn't need an ordered array we could just provide .fill an argument and fill the entire array with that value.

let array = Array(100).fill(2); // [2,2,2,2,2...etc]

So there we have it, I hope that you learned something from this article. I love learning new coding tricks so definitely let me know if you have anything cool to share in the comments!

CSS Snippet: ::first-letter

Greg Fletcher — Thu, 13 Feb 2020 20:45:54 +0000

Textual design?

Text in design patterns doesn't seem to come up much on the web. I mean, sure it's talked about but it doesn't seem as exciting to talk about as perhaps CSS Grid or Flexbox etc. To me, this is a shame because we read text all the time, so it makes sense to try new ways of displaying text.

I was struck by some of Jen Simmons' talks on css and subsequently I went on a journey of discovery in css. And...I found out A LOT, but today I'm only going to quickly talk about styling first-letter. It's a good feature to try out since it has major support in browsers (about 97% at the time of writing this article).

First Letter Styling

Let's start with a basic sentence with no styling. (as seen below)

So how can we safely spice this up? Well, I suggest that we use ::first-letter (see below)

::first-letter

The great thing with first letter is that we can easily change the element's first-letter's color and size (for example) without worring about browser compatibility since it is supported by 97% of browsers (about the same as browser support for flexbox). And as you can see below. The effect can drastically change the plain design into something much more eye-catching.

p::first-letter {
        color: tomato;
        font-size: 3rem;
      }

Whilst that might not seem life changing, it is something I think we should be experimenting with more often. I know I will be.

Okay, that's it from me today. I know it was super short, but I just wanted to share the knowledge about first-letter styling. The rest is up to you!