Forem: nervewax

Cards Against Pandemic

nervewax — Wed, 13 Jan 2021 00:00:00 +0000

Cards Against Pandemic - GitHub Repo

An online / web version of Cards Against Humanity, built in desperate times.

I built this so I could play Cards Against while on video call with friends during the COVID-19 lockdown. This was mainly because the other versions out there felt a bit hard to use, and I thought it could be fun to have a go myself.

I got the game into a just about playable state, played a bunch of games with friends, but then haven’t worked on it since. ¯\_(ツ)_/¯ It does work though!

If you do come across this and want to raise issues or even better a PR, please do so. 🙏

🕹 Current barely playable version (on glitch.me)
🐙 GitHub Repo
💾 Built using vue.js and socket.io.
🃏 Cards json sourced from JSON Against Humanity

Web Design Pick ‘n’ Mix 05

nervewax — Mon, 09 Mar 2020 00:10:00 +0000

So it’s been a long while since my last Pick ‘n’ Mix… this one has been in my drafts for ages, so I thought I’d write it up now that I’ve collected a good amount of stuff.

The image this time is the amazing photography of Paweł Czerwiński over on Unsplash.

Design

Figma - A web app, for design and prototyping. Besides using this for web design, it’s also a really good free alternative for something like Illustrator or Sketch.

Even if you’re not really into design, Steve Schoger’s Refactoring UI videos are great. His CSS Day 2019 talk was also a good one.

Front end

cssstats.com - A great little tool for scanning and fixing up your CSS.

micormodal and microtip - Two handy JS libs built by the same people, that take care of modals and tooltips. Both are lightweight, accessible and unopinionated style-wise, what more could you want?

picsum.photos - Lorem ipsum… but for photos. This pulls photos from Unsplash and allows different sizes to be defined in the url. Really handy for quickly building out any html that includes an image.

CSSBattle - A CSS battleground, with challenges to recreate designs in CSS with as little code as possible.

Rellax - A lightweight, vanilla JS parallax library. This lib was so easy to use, I dropped in on my blog billboards within a couple of minutes of learning it existed!

Scroll behaviour smooth - Smooth scrolling now built into CSS. scroll-behavior: smooth;

Using outline with a negative outline-offset, you can emulate collapsing borders for responsive Flexbox layouts. No breakpoints. pic.twitter.com/UGybVsh3jB

— overflow: heydon (@heydonworks) August 16, 2017

free-for.dev - Loads of links to free dev stuff.

Other

Notion - A note taking web app, that includes things like Trello style boards, knowledge bases and wikis. I used it a bit, and it seems really good for a digital notes tool. Although I’m actually just using good old notebooks myself ✍️

expodal - The Most Explosive Modal on the Web. 💥

Disabling the native mobile keyboard

nervewax — Sat, 31 Aug 2019 23:00:00 +0000

Sometimes it’s a good idea to go against native mobile UI and opt for a more consistent custom experience. You can find a good example of this in practice over on expedia.co.uk, where they’re using a custom datepicker for date input.

On mobile however, the native keyboard would normally get in the way when focusing on the input, so here’s a quick tip for preventing that from happening.

Mobile detection

Firstly, we need to figure out if the user is on a mobile or not. This can be tricky, since many devices report this info differently.

I found this answer on stackoverflow which seems like a fairly comprehensive list of all known mobile user agents.

We can set up an isMobile boolean as false, then change it to true if any of the user agent strings match.

let isMobile = false;

if (
    /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(
        navigator.userAgent
    ) ||
    /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(
        navigator.userAgent.substr(0, 4)
    )
) {
    isMobile = true;
}

Native keyboard prevention

Once we’ve determined that the device is mobile, the next step is to prevent the native keyboard from opening.

I found a good way to do this by tricking the browser using the readonly input attribute. We’ll then hook up our input to the isMobile variable and that’s it!

document.querySelector('input').readOnly = isMobile;

This also means the input can still be populated with js, but clicking on it will not trigger the keyboard.

Uses Pages & #uses

nervewax — Fri, 02 Aug 2019 14:33:58 +0000

I saw @nikoheikkila 's post the other day about the /uses page, which reminded me, I wanted to make my own after seeing the idea by @wesbos a while back.

Whilst making my own page, it was fun looking through all the other /uses pages over on Wes' awesome-uses repo. I then tried searching dev.to for more examples, but not much turned up. So for that reason, I'm making the #uses tag. (sort of like the dev.to equivalent of /r/battlestations right?)

So hopefully now, anyone else sharing info or photos of their setup can easily find others too. Oh and here's my own /uses page:

nervewax.com/uses

#uses

One command deploy with GitHub Pages

nervewax — Thu, 01 Aug 2019 23:00:00 +0000

Cover image by the magnificent Andre Wallin

One of the caveats of GitHub Pages is that it won’t automatically build your site if you’re not using the GitHub Pages Jekyll gem. On top of this, you can’t use any Jekyll plugins that aren’t supported by GitHub Pages.

That being said, GitHub will deploy compiled code for you, either from the /docs folder, a gh-pages branch or from the master branch. [ref]

The solution I’m using right now means still I’m able to run my build process locally and auto-deploy with a single command.

So for this to work, I’ve set up two branches for my site:

master contains my Jekyll compiled _site/ folder, which GitHub will deploy each time it’s pushed.
- .nojekyll should be added to this branch so GitHub doesn’t attempt to compile it.
sources contains the full repo, with the Jekyll source files.
- This method could work with any static site generator.
- _site/ should be added to the .gitignore on this branch, so you don’t commit the changes in there.

I’ve written a simple npm shell script that runs with npm deploy, which is essentially an alias for the following string of commands:

bundle exec jekyll build &&
cd _site/ &&
git add . &&
timestamp=$(date \"+%s\") &&
git commit -m \"automated deployment $timestamp\" &&
git push origin master &&
cd ..

Each time I want to deploy:

The jekyll build command compiles and builds my static site inside the _site/ folder.
We then change directories to _site/, which has a .git config, set to the master branch of the repo.
The script then commits all changes (+ timestamp), pushes master and returns to my source folder.

That’s it! So now, once I’ve made changes to my site or content, I can still have my site built and deployed with a single command.

Automating RTL CSS

nervewax — Sat, 20 Jul 2019 15:00:00 +0000

When a site needs right-to-left (RTL) support for languages such as Arabic, Urdu or Hebrew, the general rule is all styles should be “mirrored”, so the page flow matches the experience in left-to-right (LTR).

At first this can seem like a daunting task, since all CSS specific to left or right needs to be swapped, along with the entire layout of the page.

The best place to start is by adding dir="rtl" to the opening <html> tag at the top of your markup. This indicates to the browser that the text flow should be presented the opposite way.

Automation

Enter CSSJanus, an npm package based on a project originally made by google, designed to automate the conversion of LTR CSS to RTL.

CSSJanus is a CSS parser utility designed to aid the conversion of a website’s layout from LTR to RTL. […] CSSJanus will change most of the obvious CSS property names and their values as well as some not-so-obvious ones.

– Google Code Archive - CSSJanus

In order to make use of the package, I put together a simple node script and hooked it into my npm scripts workflow.

In my npm scripts compiler post, I covered the basic idea of using minimal single-use scripts in sequence to automate stuff. To get this script in place, it was just a case of adding the custom script to the end of the main build script.

For reference, here’s the node script I made for the job:

// Dependencies.
const fs = require('fs');
const path = require('path');
const cssjanus = require('./node_modules/cssjanus');

// Source the ltr stylesheet.
const ltrCss = fs.readFileSync(path.resolve(__dirname, './style.css'), 'utf8')

// Run CSSJanus.
const rtlCss = cssjanus.transform( ltrCss );

// Output rtl css file.
fs.writeFile("./rtl.css", rtlCss, function(err) {
    if(err) {
        return console.log(err);
    }
    console.log("RTL CSS generated.");
});

Manual tweaks

I found CSSJanus did the trick for most styles, however in some situations a default opposite was needed, so when cssjanus did it’s thing that style could be swapped.

For example, if something is being set with absolute positioning left: 10px, then setting right: auto in the same selector allows for the styles to be swapped automagically.

If the styles are in plain css, the built in /* @noflip */ flag can be used to have a style ignored by CSSJanus. This is detailed on the npm package readme.

In some cases, an extra little hack can be used by making use of dir property. It’s specificity will be higher, making it easy to override other styles.

[dir='rtl'] {
    float: left;
}

NPM Scripts as a Build Tool

nervewax — Sun, 09 Jun 2019 16:00:00 +0000

Build tools are great for helping devs save time by automating tasks. In this post, I’ll explain how I’m using npm scripts as a build tool, by directly running packages, rather than going via something like Grunt, Gulp, Webpack, Parcel etc.

For those already familiar with the tools mentioned above, I hope this offers a simpler alternative. Those who’ve not used build tools before, this could be an easy entry point, since a lot can be achieved with even just a basic understanding.

What’s npm?

Node Package Manager is a software registry, that many developers use to download their favourite packages and tools, usually via the npm Command Line Interface.

To use npm, install Node.js on your machine, then you’ll have access to the npm cli in your shell by typing npm.

Also, see “Downloading and installing Node.js and npm”.

Scripts example

Once you have npm on your machine, add a package.json file to your project root or run npm init. This file contains info about your project, packages you’ve added and any scripts defined, amongst other things. A basic package.json will look something like this:

{
  "name": "test-project",
  "version": "1.0.0",
  "scripts": {
    "test": "echo \"Test works!\""
  }
}

Under “scripts” is where all our npm scripts are defined. Running npm test inside the directory with this package.json will return Test works! in the shell, try it for yourself!

npm as a build tool

Using npm scripts, we can put together more complex tasks, similar to the ones you might find in other build tools. Then, with the help of some utility packages, we can have the tasks run in sequence or parallel and trigger when changes are made to specific files.

Over on GitHub, I’ve created a repo with my own package.json that contains scripts which form a basic build process.

In this file, I’ve added tasks like build, clean and watch, which run other subtasks grouped via their keyword. For example watch:* refers to all tasks starting with watch:. Using these tasks, this tool accomplishes the following:

Compiles sass files into CSS files.
Minifies CSS and JS files.
Compresses images and SVG files, ready for a live site.
Runs the above tasks after saving changes and refreshes the browser.

github.com/nervewax/npm-compiler

If you want to get started with npm scripts yourself, try downloading the repo and running some of the tasks included. Once you’re more familiar with those, you can assemble your own build process to fit your needs.

Below I’ve made a list of the packages found in my repo and what they do. Each of these packages has its own instructions, found in the readme of the corresponding linked npm page.

Utilities

mkdirp - makes a directory and any sub-directories, which is useful for when you need to create folder structures.

onchange - watches files and then runs a task when anything is added, changed or deleted.

npm-run-all - lets you run multiple tasks in sequence or parallel to each other.

rimraf - runs the remove command recursively, including read only files.

livereload - refreshes your browser when it detects changes.

CSS

node-sass - compiles scss files into css.

postcss-cli - After running the above, PostCSS can then be used to run a few more tasks, they are the following:

autoprefixer - automatically adds vendor prefixes to any styles that need them, in order to work in different browsers. Such as the -webkit- or -ms- prefixes.

pixrem - provides a px fallback for rem units.

cssnano - compresses css files.

JS

terser - compresses js files.

rollup - is not actually included in my repo! But it’s an alternative to dealing with js that also handles es6 modules, so I’ll certainly be looking into using this myself.

Other stuff

html-minifier - compresses HTML files.

imagemin-cli - reduces image file size. Although this can be time consuming, so this is a candidate for removal.

svgo - optimises and reduces the file size of SVGs.

That's all folks

Hopefully, if you’ve read this, you’ll have a little more insight into what npm scripts can do. Maybe this has also convinced you to switch over from one of the more complex build tools?

Either way, thanks for reading, if you have any questions, I’d be happy to help if I can. 👋

Atom Tips 🌶

nervewax — Tue, 07 May 2019 14:37:19 +0000

This article was originally posted 16th Sep 2018 at nervewax.com/atom-tips

I use Github's text editor Atom pretty much every day, so I thought maybe I should write up some tips for anyone who's just started with it, or even those thinking about switching to it.

Powerful Keys

Command Palette

Cmd+Shift+P This one is possibly the most useful, it brings up the atom Command Palette. It's best described by Atom themselves in the Flight Manual:

This search-driven menu can do just about any major task that is possible in Atom. Instead of clicking around all the application menus to look for something, you can press Cmd+Shift+P and search for the command.

Fuzzy Finder

Cmd+P When you have a crazy big project, this helps you quickly find and open a file. It uses "fuzzy" search, so the results can match any part of the search query. It also skips git ignored files by default, which is cool.

Find & Replace

Cmd+F / Cmd+Shift+F Atom's shortcuts for this familiar function have two flavours. The former will just search within the current tab, but by holding shift too, you're able to search the entire open project.

In addition to this, you can provide a third parameter in the form of a file pattern, so entering *.html will search only HTML files etc. There's also a Regex toggle... but let's not go down that rabbit hole.

Packages

There are currently nearly 8000 atom packages available right now, so it can be hard finding the ones that are actually useful. I'll keep it brief, here's my favourite packages:

Emmet

emmet You might be familiar with this one, since it's available in a few other text editors. Basically, it lets you change code like this:

ul.list>li.list__item*5>a.list__link

into this:

<ul class="list">
  <li class="list__item"><a href="" class="list__link"></a></li>
  <li class="list__item"><a href="" class="list__link"></a></li>
  <li class="list__item"><a href="" class="list__link"></a></li>
  <li class="list__item"><a href="" class="list__link"></a></li>
  <li class="list__item"><a href="" class="list__link"></a></li>
</ul>

Great for quickly preparing markup, it feels so slow when coding without it now! 🐌

Tree View Git Status

tree-view-git-status does exactly what it says on the tin, it adds the current git branch and status to your tree view. Even though Atom has recently included this info in the bottom right status area, I feel like the colouring and text provided right there in tree-view is still pretty handy.

Pigments

pigments applies the colour value of a colour as the background for that text in the editor. Sort of like this: rgb(25, 187, 134) - So yep, really handy for visualising what you're doing without switching to browser.

File Icons

file-icons just swaps out the default file icon for a little icon representing the file type. Surprisingly useful

Atom Alignment

atom-alignment is simple, but so useful. It's just a keyboard shortcut that lets you quickly align all your variable definitions. This saves you a bit of effort aligning them yourself, but also you get a little feeling of satisfaction seeing everything line up nicely. 🤓

Atom Shell Commands

This is a neat feature, if you're regularly switching between your editor and terminal, install atom shell commands and you can use atom . to open your cwd in atom. Do atom -h to see all the other available commands 👌

Atom package manager will also let you install packages with apm install [package], which is handy for quickly getting set up on a new machine too.

The Holy Grail 🍹

Saving the best til last, Atom v1.18 introduced my new favourite feature, the Git/Github Tab.

This side panel gives you a visual view of the current state of your local git branch. From here, you can easily navigate changes, resolve merge conflicts, pull/push and much more!

I'll not go on about it too much, but this feature improved my workflow a fair bit, so I'd certainly recommend Atom for this alone.

So now you're a true Atom wizard! 🧙 Let me know what you couldn't code without!

Moving from Ghost to Jekyll

nervewax — Sun, 09 Sep 2018 16:00:00 +0000

Every so often I like to redo my site, while experimenting with something new. In the past i’ve used Tumblr, WordPress and Ghost, but this time i’m trying out Jekyll.

Jekyll is a fairly well established static site generator, and it’s been really fun learning something new. I’m also a big fan of how neat and minimal the process has been building my site around it. I started out by watching this video, which is a nice introduction to the basics of Jekyll.

Converting my content

Transitioning from ghost to Jekyll was surprisingly easy. I used a program called jekyll_post_importer to convert my content from the ghost backup file to Jekyll’s markdown files.

After that, there was a little manual work needed to make sure all the images and tags worked ok. Luckily I’ve not written that much actual content!

Where are my tag pages??

So moving over from Ghost and Wordpress, I expected Jekyll to have some kind of tag structure, which it does… however Jekyll taxonomies don’t actually come with their own pages as you would expect.

In order to generate tag archive pages in the same way you’d get with a traditional blog CMS, something extra is needed.

While searching, I found this blog, which I couldn’t quite get working, but reassured me it’s possible. I then checked out this Jekyll plugin, and that pretty much solved the problem with only a little tweaking. 🙌

So as you can see, i’ve got a page for each of my tags, and even managed to get it to pull the most recent post’s image using a bit of good old interpolation.

So that’s it!

It’s not the CMS for everyone, but so far i’m liking it and it certainly does the job. Bonus points for fulfilling my developer need for a performant and lean codebase.

It’s also nice to be writing this directly in Atom too, now to figure out the best way to push this to live… 👋

Forem: nervewax

Cards Against Pandemic

Web Design Pick ‘n’ Mix 05

Design

Front end

Other

Disabling the native mobile keyboard

Mobile detection

Native keyboard prevention

Uses Pages & #uses

One command deploy with GitHub Pages

Further reading

Automating RTL CSS

Automation

Manual tweaks

Further reading

NPM Scripts as a Build Tool

What’s npm?

Scripts example

npm as a build tool

Utilities

CSS

JS

Other stuff

That's all folks

Further reading

Atom Tips 🌶

Powerful Keys

Command Palette

Fuzzy Finder

Find & Replace

Packages

Emmet

Tree View Git Status

Pigments

File Icons

Atom Alignment

Atom Shell Commands

The Holy Grail 🍹

Moving from Ghost to Jekyll

Converting my content

Where are my tag pages??

Related content

So that’s it!