DEV Community: Carl Saunders

🧠 Level Up Your CSS Flexbox Skills with Fun Games 🎮

Carl Saunders — Wed, 28 Jun 2023 14:36:00 +0000

CSS Flexbox can pose a challenge for developers looking to enhance their layout skills, regardless of their experience level. This was particularly evident for me as I delved into Flexbox while working on a React Native project.

Traditional learning methods may not always offer the most engaging or effective way to master this concept. However, there is a fun and interactive way to master CSS Flexbox, Games! 🎮

Below is a selection of websites that offer games specifically designed to teach and reinforce your understanding of CSS Flexbox concepts. So let's dive in and level up your skills! 🇱🇻🇱⬆️

Flexbox Froggy

Flexbox Froggy is an excellent starting point for beginners. The game presents a series of challenges where you need to position the frogs using CSS Flexbox properties. Each level introduces new concepts and gradually increases in difficulty. You'll learn about aligning items, ordering, and distributing space. The game provides a visual representation of the flex container and its items, making it easy to understand and apply Flexbox principles.

Play Flexbox Froggy

Flexbox Defense

Flexbox Defense combines the excitement of tower defense games with CSS Flexbox learning. In this game, you defend your castle by strategically placing towers along a path using Flexbox properties. Each tower represents a flex item, and you must position them correctly to repel the attacking enemies. Flexbox Defense reinforces your understanding of Flexbox by challenging you to think about layout and alignment in a dynamic and engaging way.

Play Flexbox Defense

CSS Diner

Although not exclusively focused on Flexbox, CSS Diner is a game worth mentioning for its coverage of CSS layout in general. Through a series of restaurant-themed challenges, you'll learn CSS selectors, properties, and, of course, Flexbox. The game provides a hands-on experience for manipulating HTML elements' styles and is an excellent resource to solidify your understanding of Flexbox alongside other CSS layout techniques.

Play CSS Diner

Other Flexbox Resources

In addition to the CSS Flexbox games mentioned above, here are some additional resources to further support your learning journey.

Final Thought 🤔

Remember learning CSS Flexbox doesn't have to be boring or overwhelming. These games provide an interactive and enjoyable way to grasp the Flexbox concepts and apply them practically. Whether you prefer visual challenges, tower defense battles or coding puzzles, there's a game out there to suit your learning style. Embrace the gamified approach, have fun, and watch your CSS Flexbox skills soar to next level.

Working with GeoJSON 🗺️ and VS Code

Carl Saunders — Mon, 20 Apr 2020 11:09:37 +0000

I've been working on a project that uses GeoJSON to display geographical points on a interactive map. Whilst working with the .geojson files I noticed that VS Code was not validating the JSON or providing the usual IntelliSense when typing.

GeoJSON is a format for encoding a variety of geographic data structures.
- https://geojson.org/

This is because VS Code does not know how to validate the JSON and the JSON Schema for this file extension has not been registered.

So how do we fix this? The below steps can be used to configure VS Code with any JSON Schema for a file extension.

Add the JSON Schema

First we need to open VS Code, once you've opened VS Code we need to edit the settings.json file. To open the Settings editor use the following VS Code menu command:

On Windows/Linux - File > Preferences > Settings
On macOS - Code > Preferences > Settings

Note: You can also open the Settings editor from the Command Palette (Ctrl+Shift+P) with Preferences: Open Settings or use the keyboard shortcut (Ctrl+, for Windows and ⌘+, for macOS).

In the Settings editor type JSON: Schemas and click the link Edit in settings.json in the filtered results panel.

Using the above approach will open the Settings editor with the "json.schemas" array expanded. Now all we have to do is insert the correct JSON Schema as an entry within this array.

The first thing we need to do is setup the file extension VS Code will used to validate. As the common file extension for GeoJSON is .geojson, we can use a fileMatch property (which expects an array of file extensions) with the value of ["*.geojson"]. The next property is the url, which indicates where the JSON Schema is located. VS Code will download this file and then validate the JSON against this schema.

Luckily for us GeoJSON is a standard and it already has a defined JSON Schema and can be found at the following URL:

http://json.schemastore.org/geojson

So the final JSON for defining the GeoJSON JSON Schema will look something like the below.

"json.schemas": [
    {
      "fileMatch": [
        ".geojson"
      ],
      "url": "http://json.schemastore.org/geojson"
    }
  ]

Save the file and your GeoJSON will now be validate using the JSON Schema specified.

Invalid GeoJSON validated via JSON Schema in VS Code

If you visit http://schemastore.org you will notice many more JSON Schemas, so if you find VS Code does not support a JSON file your using regularly then you can use the above steps to add support along with the JSON Schema from the http://schemastore.org or your own.

Resources

Easter Egg 🐇🥚 Hunt Anyone? - Add ASCII Art to the console log

Carl Saunders — Wed, 08 Apr 2020 19:01:31 +0000

As Easter is upon us and we're all trying to bring some happiness in these hard times. Why not add an Easter Egg 🐇🥚 to your website or client websites?

TLDR; - It's quick and easy, just generate the ASCII art and use console.log.

DEV Easter Egg

Did you know that dev.to has this Easter Egg?

If you've ever opened the development tools of your favourite browser (F12) when visiting the dev.to website you probably all ready seen the ASCII art displayed in the console logs.

-oooooooo/-      .+ooooooooo:  +ooo+        oooo/
+MMMMMMMMMMm+   -NMMMMMMMMMMs  +MMMM:      /MMMM/
+MMMNyyydMMMMy  /MMMMyyyyyyy/   mMMMd      mMMMd
+MMMm    :MMMM. /MMMN           /MMMM/    /MMMM:
+MMMm    .MMMM- /MMMN            dMMMm    mMMMh
+MMMm    .MMMM- /MMMMyyyy+       :MMMM/  +MMMM-
+MMMm    .MMMM- /MMMMMMMMy        hMMMm  NMMMy
+MMMm    .MMMM- /MMMMoooo:        -MMMM+oMMMM-
+MMMm    .MMMM- /MMMN              yMMMmNMMMy
+MMMm    +MMMM. /MMMN              .MMMMMMMM.
+MMMMdddNMMMMo  /MMMMddddddd+       sMMMMMMs
+MMMMMMMMMNh:   .mMMMMMMMMMMs        yMMMMs
.///////:-        -/////////-         .::.

Output on the console log with dev tools opened when visiting dev.to.

And thought that looks awesome.

How Do I Add That To My Site?

First we need a way to convert text to ASCII art, I've used the following npm package figlet-cli, which can be executed on the command line.

Note: Other packages or applications are available.

https://www.npmjs.com/package/figlet-cli

npx figlet-cli "Raven Code"

Note: Used npx to install as we don't need as a global package.

This will generate the following output using the default font.

  ____                          ____          _      
 |  _ \ __ ___   _____ _ __    / ___|___   __| | ___
 | |_) / _` \ \ / / _ \ '_ \  | |   / _ \ / _` |/ _ \
 |  _ < (_| |\ V /  __/ | | | | |__| (_) | (_| |  __/
 |_| \_\__,_| \_/ \___|_| |_|  \____\___/ \__,_|\___|

Now to output this to the console we have to escape the special characters using a \ (backslash) and terminating each line with \n\ (a new line \n and the backlash to indicate the string spans multiple lines).

console.log(
      "     ____                          ____          _\n\
    |  _ \\ __ ___   _____ _ __    / ___|___   __| | ___\n\
    | |_) / _` \\ \\ / / _ \\ '_ \\  | |   / _ \\ / _` |/ _ \\\n\
    |  _ < (_| |\\ V /  __/ | | | | |__| (_) | (_| |  __/\n\
    |_| \\_\\__,_| \\_/ \\___|_| |_|  \\____\\___/ \\__,_|\\___|"
    )

Note: Could use `Template Literals` in ES6 as this supports multiline strings and you wouldn't need the \n\ syntax.

Change The Font

The figlet-cli package supports other command line parameters, one of those being the -f flag. Specifying this option determines the font used to generate the ASCII art.

To see the list of fonts supported use the following command:

npx figlet-cli -l

To use a font called ANSI Shadow, use the following command:

npx figlet-cli -f "ANSI Shadow" "Raven Code"

This will generate the following output using the ANSI Shadow font.

██████╗  █████╗ ██╗   ██╗███████╗███╗   ██╗     ██████╗ ██████╗ ██████╗ ███████╗
██╔══██╗██╔══██╗██║   ██║██╔════╝████╗  ██║    ██╔════╝██╔═══██╗██╔══██╗██╔════╝
██████╔╝███████║██║   ██║█████╗  ██╔██╗ ██║    ██║     ██║   ██║██║  ██║█████╗
██╔══██╗██╔══██║╚██╗ ██╔╝██╔══╝  ██║╚██╗██║    ██║     ██║   ██║██║  ██║██╔══╝
██║  ██║██║  ██║ ╚████╔╝ ███████╗██║ ╚████║    ╚██████╗╚██████╔╝██████╔╝███████╗

So what are you waiting for get creative!

Extra Creative

If you want to go the extra mile and convert an image to ASCII art than look at the ascii-art npm package.

https://www.npmjs.com/package/ascii-art

Again this can be installed via npx using the following command:

npx ascii-art image path/to/image.png

Note: This package also supports generating text to ASCII art. However, the font support seem to be limited.

You could use this to generate ASCII art for your logo and output this on the console.log.

The Easter Egg Hunt 🐇🥚🔍

Let's do a virtual Easter Egg Hunt and hunt down those websites that have an Easter Egg, list the best in the comments below. So get hunting!

Resources

https://dev.to
https://www.npmjs.com/package/figlet-cli
https://github.com/khrome/ascii-art

Switch Off Hyper-V on Boot in Windows

Carl Saunders — Fri, 13 Mar 2020 19:05:09 +0000

As you may or may not know Hyper-V on Windows hijacks the Hypervisor and you can't have two Hypervisors running at the same.

We could use Window's Add/Remove features to turn the Hyper-V support off and back on, but that's a lot of hassle.

Luckily we can update the boot entry, which can be configured to switch off the hypervisor (at launch). But instead of updating the existing boot entry, we can go one better and create another boot entry. This will then trigger a prompt for the boot option at startup.

bcdedit /copy {current} /d "No Hyper V"

cmd syntax

Make sure you run the commands as Administrator, otherwise you'll get the "Access is denied" error.

Or run the following if using PowerShell.

bcdedit --% /copy {current} /d "No Hyper V"

PowerShell syntax

Once the boot entry has been successfully copied the GUID will be displayed in the output. You'll need to copy this ID and use it in the next command. E.g.

C:\>bcdedit --% /copy {current} /d "No Hyper V"
The entry was successfully copied to {a10f071b-5711-4d5d-b7a9-9b0a4957d6fb}.

Next step is to set the hypervisorlaunchtype to the value off.

bcdedit /set {a10f071b-5711-4d5d-b7a9-9b0a4957d6fb} hypervisorlaunchtype off

cmd syntax

Remember to replace the GUID with the id returned from the copy command.

Or run the following if using PowerShell.

bcdedit --% /set {a10f071b-5711-4d5d-b7a9-9b0a4957d6fb} hypervisorlaunchtype off

PowerShell syntax

Restart your machine and you should now be prompted to select your operating system. Either:

Windows 10
No Hyper V

Select No Hyper V and you can now be sure that the Hypervisor is no longer hijacked by Hyper-V.

Import SVG Directly as a ReactComponent

Carl Saunders — Thu, 05 Mar 2020 13:34:16 +0000

I've been working on a React project that uses custom SVG icons and needed a nice way to import these icons. Since I'm using create-react-app, I've been able to import SVGs as React components.

import React from 'react';
import { ReactComponent as Icon } from './icon.svg';

<Icon />

Note: This feature is only available with react-script@2.0.0 and higher, and react@16.3.0 and higher.

Hey presto!🎉

I can now access them as a normal React component, which saves me hassle.

You can also add props to the React component, just like you would normally. E.g.

import React from 'react';
import { ReactComponent as DevIcon} from './dev-brands.svg';
import './App.css';

export const App = () => <DevIcon title="DEV Icon" className="icon" />;

App.jsx - Code to import SVG as React Component

.icon {
  height: 24px;
  width: 24px;
}

App.css - CSS for the svg icon

<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="dev" class="svg-inline--fa fa-dev fa-w-14" role="img" viewBox="0 0 448 512">
  <path fill="currentColor" d="M120.12 208.29c-3.88-2.9-7.77-4.35-11.65-4.35H91.03v104.47h17.45c3.88 0 7.77-1.45 11.65-4.35 3.88-2.9 5.82-7.25 5.82-13.06v-69.65c-.01-5.8-1.96-10.16-5.83-13.06zM404.1 32H43.9C19.7 32 .06 51.59 0 75.8v360.4C.06 460.41 19.7 480 43.9 480h360.2c24.21 0 43.84-19.59 43.9-43.8V75.8c-.06-24.21-19.7-43.8-43.9-43.8zM154.2 291.19c0 18.81-11.61 47.31-48.36 47.25h-46.4V172.98h47.38c35.44 0 47.36 28.46 47.37 47.28l.01 70.93zm100.68-88.66H201.6v38.42h32.57v29.57H201.6v38.41h53.29v29.57h-62.18c-11.16.29-20.44-8.53-20.72-19.69V193.7c-.27-11.15 8.56-20.41 19.71-20.69h63.19l-.01 29.52zm103.64 115.29c-13.2 30.75-36.85 24.63-47.44 0l-38.53-144.8h32.57l29.71 113.72 29.57-113.72h32.58l-38.46 144.8z"/>
</svg>

dev-brands.svg - Dev Icon from FontAwesome

Resources

Create React App Adding SVGs
Font Awesome Dev Icon

Add Destroy Script 🔥💻 To package.json

Carl Saunders — Tue, 25 Feb 2020 09:55:34 +0000

On rare occasions I find myself having to clean my development environment (i.e. delete the following folders - node_modules, build, coverage, etc). As this could include multiple folders, I decided the best approach was to create a script. I also hate typing the same commands over and over again, save those fingers!🖐️

I wanted a cross platform approach (works on both Linux and Windows), rimraf is the ideal candidate as it's an npm package that deletes folders recursively and works cross platform.

Why make the solution cross platform? So all developers that collaborate on the code base can benefit.

Now we could install rimraf globally, but we can't guarantee that another developer has this installed, which will result in the script failing when executed.

A cleaner approach is to have the dependency installed as a dev dependency. However, this will cause issues as rimraf will try to delete the node_modules folder where rimraf is currently executing from. Hence it would try and delete itself and fail.

So to resolve this issue, we can execute rimraf when we need to run it (one-off invocation without local installation) via the npx command. The npx command was introduced with npm 5.2.0 and later.

The Destroy Script 🔥

Below is an example of the destroy script, this will delete the node_modules, build and coverage folders and all their contents.

{
  "scripts": {
    "destroy": "npx rimraf node_modules build coverage",
  }
}

Execute Destroy Script

The destroy script can be executed either by using npm or yarn.

npm run destroy

yarn destroy

Make VS Code Your Default Git Editor 📝

Carl Saunders — Tue, 18 Feb 2020 22:54:06 +0000

Recently I've found myself using the git command git commit --amend to change typos in my commit messages. By default the GNU nano text editor is used, which for me isn't a great experience and was starting to BUG me!

GNU nano editor is used by default to change git commit message

I use VS Code daily and as I'm typing the git command in the built-in VS Code terminal, naturally I want to edit the commit message using the same editor. Well luckily you can configure this with a one liner.

Default VS Code As The Git Editor (Globally)

Type the following in the command prompt / bash shell.

git config --global core.editor "code --wait"

Or, alternatively if you don't like typing too much then use.

git config --global core.editor "code -w"

Note: The --wait or -w flag is crucial without this git won't know the editing has completed and in turn won't finish executing the git command.

See It Working!

Below is a gif showing VS Code as the default editor for git.

Working example of VS Code as the default git editor

Default VS Code As The Git Editor (Local Repo)

But wait there's more, if you don't want the change to happen globally you can set it locally for a git repository by using the flag --local.

git config --local core.editor "code -w"

Revert Back To GNU nano (or default)

And if you prefer GNU nano and want to reset this to the default git editor, then run the following command.

git config --global --unset core.editor

Note: If you set the editor locally and you want to reset then replace the --global flag with the --local flag instead.

Simple HTML - Click To Call (tel: schema) 🖱️📞

Carl Saunders — Mon, 10 Feb 2020 18:45:49 +0000

Make your website even more accessible when dealing with telephone numbers by allowing the user to click your number to make a call.

TL;DR

Wrap the telephone number in an anchor tag <a></a>
Prefix the telephone number in the href attribute with the tel: schema
Make sure the telephone number uses the international dialling format

Note: This takes seconds to implement, so there's no excuse not to do it!

Problem

You want to talk with a real human to discuss a problem and you visit the website's "Contact Us" page to get the telephone number, you now have to copy the number from the website into your phone and then press the dial button.

Arrrrgggh, it shouldn't be this hard!

Those websites not in the know have the telephone number contained in the following HTML markup.

<span>+44 (0)20 7946 0123</span>

Note: The number above is a fictitious, so it'll fail to connect. Fictitious numbers are used in movies, television programs, etc. You can find out more about fictitious numbers on Wikipedia.

Solution (tel: Schema)

What is the tel: schema, its a URI schema for telephone numbers. Browsers are able to parse these values and understand that they should be treated as a telephone number.

HTML has built-in support for Click to Call, by wrapping the telephone number in an anchor link and using the tel: schema. E.g.

<a href="tel:+44-207-946-0123" title="Click to Call">+44 (0)20 7946 0123</a>

Note: Be a good citizen and use the international telephone dialling format to make sure the call is always connected, irrespective of where the caller is located.

There's no excuse not to implement this 5 seconds fix, we owe it to our users.✅

What Happens

Depending on whether you visit the website with a mobile device or desktop changes the behaviour of the link.

Mobile Devices

Pressing the telephone number will now open the device's default dialler app with the telephone number already inserted, user only has to press the dial button.

Click To Call On Android Phone

Desktop

This will depend on the browser used to navigate the website, but most modern browsers will prompt the user to make a call using their phone or pick an application.

Google Chrome Make A Call Prompt

Try It Out

Below is an example of how the telephone number will appear when visiting the website. Again this is a fictitious number so the call won't be connected, but should allow you to view the UX.

+44 (0)20 7946 0123

Credits

Cover Image: Photo by James Sutton on Unsplash

🙏 Please Add .gitattributes To Your Git Repository

Carl Saunders — Mon, 03 Feb 2020 14:39:44 +0000

What Is .gitattributes?

The .gitattributes file allows you to specify the files and paths attributes that should be used by git when performing git actions, such as git commit, etc.

In other words git automatically saves the file according to the attributes specified, every time a file is created or saved.

One of these attributes is the eol (end of line) and is used to configure the line endings for a file. This article will now dive deeper into how to configure the line endings, so every developer uses the same value when using different machines / OSes across the repository.

Why .gitattributes (Developers At War ⚔️)?

Not all developers are the same, just because you develop on a Windows machine using Visual Studio Code, don't expect the next pull request to have been implemented using the same dev environment (MacOS machine using Sublime Text 2).

As mentioned above the developers are using different OSes (Windows and MacOS) the default for the line ending will differ. On the Windows machine the default for the line ending is a Carriage Return Line Feed (CRLF), whereas on Linux/MacOS it's a Line Feed (LF).

To the naked eye the content will look the same, so why should we bother???

Well, if you have prettier enabled and the endOfLine property is set to lf.



{
  "endOfLine": "lf"
}

On the Windows machine the developer will encounter linting issues from prettier, like those below.

Code File With Prettier Linting Errors

This is where .gitattributes comes to the rescue and saves the day 🦸!

New Repository (Repo)

To add the .gitattributes to the repo first you need to create a file called .gitattributes into the root folder for the repo.

Below is an example of the contents for the .gitattributes file.



*.js    eol=lf
*.jsx   eol=lf
*.json  eol=lf

Commit this file to the repo and push your changes to the server.



git add .
git commit -m "Added .gitattributes to repo"
git push

Now when anyone gets the code from the repo the default correct line ending will be used automatically via git, when creating and modifying the files.

Add to Existing Git Repository (Repo)

Follow the steps mentioned in the New Repository (Repo) steps to create the .gitattributes file. Once the file has been pushed to the git server then make sure that your local repo is clean and has nothing to commit. Use git status to determine whether your repo is clean.



git status

Note: If you still have files to push or commit, please make sure that these actions are performed or the files are stashed before you perform the next commands.

GitAttributes Reset



git rm --cached -r .
git reset --hard

The above commands will now update the files for the repo using the newly defined line ending as specified in the .gitattributes.

Any changes or new changes will automatically use the line endings specified for that file type.

Next step is to inform any team mate or collaborator, to run the GitAttributes Reset commands.

Now prettier won't complain about CR and all developers can now live in peace! ☮️

Code File With No Prettier Linting Errors

💻💨 Quick TypeScript - Make Object Literal Properties Read-only

Carl Saunders — Wed, 29 Jan 2020 22:47:11 +0000

Have you ever found yourself declaring a variable (for an object literal) using the const keyword and then assume those properties within that variable were read-only?

const person = {
  firstName: 'Carl',
  lastName: 'Saunders'
};

In the above example most developers would assume the firstName and lastName properties cannot be changed and are read only. WRONG!

The below code is perfectly valid and can lead to bugs and these won't be caught until your code is production.

person.firstName = 'Joe'; // valid assignment, even though const was used
person.lastName = 'Bloggs'; // valid assignment, even though const was used

Const Assertions (as const keyword)

TypeScript has built-in support for guarding against this and can be achieved by using the const assertions. Behind the scenes TypeScript is converting all those properties defined on the object literal into read-only versions.

const person = {
  firstName: 'Carl',
  lastName: 'Saunders'
} as const;

Now if we tried to assign firstName property a new value the compiler would report the following error.

Cannot assign to 'firstName' because it is a read-only property.

Note: The const assertion as const feature is supported in TypeScript 3.4+. Also only works when you haven't already typed the object.

More Info

TypeScript Docs - Const Assertions

💨Super Quick CSS: Smooth Scrolling

Carl Saunders — Wed, 22 Jan 2020 19:30:01 +0000

Transform Your Website's UX With This One Liner

html {
  scroll-behavior: smooth;
}

If like me you've got a single page website and your using bookmarks (anchors tags that reference an element by id), allowing user to navigate to different sections of the website. Then you need to add this CSS property scroll-behavior: smooth;, which will smoothly scroll the page content into view.

Working Example

Below the CodePen demonstrates the smooth scrolling of the content when you click one of the navigation links.

Demo

Before - Without Smooth Scrolling

After - With Smooth Scrolling

Things To Note

The scroll-behavior property doesn't seem to work on the body element, so best to add it to the html element.

This property isn't currently support by all browsers, but this shouldn't stop you using it as it won't break and defaults to the standard behavior.

https://caniuse.com/#feat=mdn-css_properties_scroll-behavior

Pair Programming & Dyslexic? Visual Studio Code Font Switcher to the Rescue

Carl Saunders — Mon, 01 Jul 2019 16:05:28 +0000

I've been using the OpenDyslexic font in VS Code (see my other post on Have Dylexia? Make Coding Easier In Visual Studio Code) and recently I've been doing some pair programming. However, my colleagues don't appreciate the font and find it hard to read when driving on my machine. So I was going to write a handy VS Code extension, but turns out that someone (Evan Buss) already beat me to it.

Font Switcher - Helps when using the OpenDyslexic font and having to pair program on your machine, can quickly switch back and forth between fonts.