Search
Collective #523
10.6.2019
Function-based Component API in Vue * Brutalist HTML quine * The Anatomy of a Jellyfish * freemium.cc
Collective #523 was written by Pedro Botelho and published on Codrops
10 React Challenges (Beginner): Recreate Layout with Components
5.6.2019
Components are the building blocks of React Applications, and each is a JavaScript function. These components comprise of Parent and Child components.
Data is passed from parent to child thr
Create a Custom useFetch() React Hook
5.6.2019
A custom hook is a JavaScript function with a unique naming convention that requires -
the function name to start with use and
the function may call other Hooks
A Practical Use Case for Vue Render Functions: Building a Design System Typography Grid
30.5.2019
This post covers how I built a typography grid for a design system using Vue render functions. Here’s the demo and the code. I used render functions because they allow you to create HTML with a greater level of control than regular Vue templates, yet surprisingly I couldn’t find very much when...
JavaScript Detect Async Function
29.4.2019
JavaScript async/await has changed the landscape of how we code. We’re no longer stuck in callback or then hell, and our code can feel more “top down” again. Async functions require the following syntax: async function myFunction() { } To use await with a function, the function...
That Time I Tried Browsing the Web Without CSS
24.4.2019
CSS is what gives every website its design. Websites sure aren’t very fun and friendly without it! I’ve read about somebody going a week without JavaScript and how the experience resulted in websites that were faster, though certain aspects of them would not function as expected.
But CSS. Turning...
The Circle of a React Lifecycle
23.4.2019
A React component goes through different phases as it lives in an application, though it might not be evident that anything is happening behind the scenes.
Those phases are:
mounting
updating
unmounting
error handling
There are methods in each of these phases that make it possible to perform...
Tabs: It’s Complicated™
19.4.2019
I've said before one quick and powerful thing you can learn as a front-end developer just getting starting with JavaScript is changing classes.
const button = document.querySelector(".my-button");
const element = document.querySelector(".content");
button.addEventListener("click", function()...
Faking env() to Use it Now
18.4.2019
There is already an env() function in CSS, but it kinda came out of nowhere as an Apple thing for dealing with "The Notch" but it has made it's way to be a draft spec. The point will be for UAs or authors to declare variables that cannot be changed. Global const for CSS, sorta.
That spec doesn't...
An Illustrated (and Musical) Guide to Map, Reduce, and Filter Array Methods
26.3.2019
Map, reduce, and filter are three very useful array methods in JavaScript that give developers a ton of power in a short amount of space. Let’s jump right into how you can leverage (and remember how to use!) these super handy methods.
Array.map()
Array.map() updates each individual value in...
7 things you should know when getting started with Serverless APIs
14.3.2019
I want you to take a second and think about Twitter, and think about it in terms of scale. Twitter has 326 million users. Collectively, we create ~6,000 tweets every second. Every minute, that’s 360,000 tweets created. That sums up to nearly 200 billion tweets a year. Now, what if the creators...
The Ultimate Guide to JavaScript Algorithms: Implementing a Custom Filter
13.3.2019
In JavaScript, the .filter() function is often used to loop through an array and extract the elements that pass a certain condition specified in a callback function.
Ever wonder
Styling Based on Scroll Position
7.3.2019
Rik Schennink documents a system for being able to write CSS selectors that style a page when it has scrolled to a certain point. If you're like me, you're already on the lookout for document.addEventListener('scroll' ... and being terrified about performance. Rik gets to that right away by both...
A Crypto Derivatives Primer
15.2.2019
Learn about crypto derivatives, risk management and the solutions they offer. From the CMC editorial desk: With increasing interest in crypto derivatives and the function they serve in managing risk, what must you know about them? We asked LXDX, and […]
The post A Crypto Derivatives Primer...
JavaScript Glossary: Array .forEach() Method
8.2.2019
Basics
The forEach() method takes a function that performs an action on each of the elements in this array.
[1, 2, 3, 4, 5].forEach(functio
Using the Little-Known CSS element() Function to Create a Minimap Navigator
5.2.2019
W3C’s CSS Working Group often gives us brilliant CSS features to experiment with. Sometimes we come across something so cool that sticks a grin on our face, but it vanishes right away because we think, “that’s great, but what do I do with it?” The element() function was like that for me. It’s a...
Collective #481
7.1.2019
SVG Gradient Map Filter * Fancy Function Parameters * Algorithms * Tap to Dismiss * WebsiteVoice
Collective #481 was written by Pedro Botelho and published on Codrops
Digital Gold: A Game-Changer for Traditional and Digital Currencies
4.1.2019
Disruption of the global monetary order Trust in currencies is vital for the global economy to function. In the past, when metal money was prevalent, people exchanged gold and silver coins because they were inherently valuable. By contrast, today’s paper […]
The post Digital Gold:...
Ease-y Breezy: A Primer on Easing Functions
18.12.2018
During the past few months, I’ve been actively teaching myself how to draw and animate SVG shapes. I’ve been using CSS transitions, as well as tools like D3.js, react-motion and GSAP, to create my animations.
One thing about animations in general and the documentation these and other animation...
Reversing an Easing Curve
17.12.2018
Let’s take a look at a carousel I worked on where items slide in and out of view with CSS animations. To get each item to slide in and out of view nicely I used a cubic-bezier for the animation-timing-function property, instead of using a standard easing keyword.
See the Pen Carousel with reversed...