Help Shorten your CSS Selectors With :where() & :is()

What is :is & :where?

:is() and :where() are both pseudo-class functions that can help shorten and stop repetition in creating your selectors. They both take an array of arguments of selectors (ids, classes, tags, etc…) and selects any element that can be selected in that list.

This may not make much sense on how this can help us write shorter selectors so let's try using :where() and :is().

How to use :is & :where?

:where() can help us turn something like this

.btn span > a:hover,
#header span > a:hover,
#footer span > a:hover {
...
}

into something like this

:where(.btn, #header, #footer) span > a:hover { 
...
}

Honeyminer & My Experience Using It

Bitcoin at beach header image
Bitcoin at beach header image

What Is Honeyminer?

Honeyminer is a super easy to use bitcoin mining software that allows anyone with a computer to start mining. A group of crypto enthusiasts created Honeyminer with the aim of allowing anyone to take part in the crypto mining revolution using their own personal computer.

Honeyminer gives anyone easy access to sophisticated mining software. Imagine earning meaningful passive income just by having your computer turned on, all while taking part in the blockchain revolution. — Honeyminer team

It only takes about a minute to sign up, download the app and start mining cryptocurrency.

Click here to get Honeyminer now

My Experience Using Honeyminer

I…


Hello everyone, this will be a quick article, so I got bored and created this simple web application to build a very big console log (but it won't be Massive without your help).

I made this in about a day so it most likely has some bugs this is just a silly project to see how big of a console log we can make.

This web app was built using

  • node.js
  • react
  • express.js

How To Contribute To the log

All you need to start is a GitHub account. Goto https://worlds-biggest-console-log.herokuapp.com/ and click the contribute button then all there is left to do is make a post


AnimXYZ worlds first composable CSS animation toolkit
AnimXYZ worlds first composable CSS animation toolkit

What is AnimXYZ?

AnimXYZ is a CSS Animation library for creating custom CSS animations for your website. What makes AnimXYZ so good is that it is composable this means you can combine and mix different animations to create your own highly customizable CSS animations without having to write a single keyframe or as the creators of AnimXYZ say

“Making an animation is as simple as describing it in words”

For example, you can create an animation that fades, scales up and moves up with AnimXYZ by writing xyz="fade big up". AnimXYZ also comes in a small package size 2.68kB for the base functionalities…


Phosphor Icons — A Flexible Icon Libary

What Is Phosphor Icons?

Phosphor Icons is a great icon library, with 588 icons and 6 icon variations providing you with a total of 3,529 icons! To make this even better its all 100% free.

Phosphor is a flexible icon family for interfaces, diagrams, presentations — whatever, really.

Icon Variations

Phosphor Icons has six variations

  • Thin
  • Light
  • Regular
  • Bold
  • Fill
  • Duotone

While most icon libraries will make you pay for different variations Phosphor Icons provide them for free.

What do these variations do?

Thin, light, regular & bold are all the stroke weights of the icons these are all pretty self-explanatory but the two variations you may have some questions about…


Creating Custom Directives in Nuxt.js
Creating Custom Directives in Nuxt.js
Nuxt — Creating Custom Directives For Static & SRR Sites

What Are Directives? Why Are They Useful?

Custom directives are a way of making our code reusable similar to mixins but instead of reusing component functionalities, directives let us create single methods that are reusable these custom directives are great for DOM access/manipulation. Vue comes with a few default directives that you are guaranteed to have seen/used before like v-model, v-bind & v-show. It's a lot easier to understand once we see some examples of what we can do with custom directives.

Vue also allows you to register your own custom directives, where would custom directives would still be useful? …

Fletcher Rippon

Hello, I’m Fletcher, I am a passionate full-stack website developer from Melbourne Australia that loves working with all things JavaScript related.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store