Merge pull request #34 from 30-seconds/updated-frontmatter
Updated frontmatter
This commit is contained in:
Angelos Chalaris
GitHub
@ -2,11 +2,11 @@
|
||||
title: My amazing story
|
||||
shortTitle: Amazing story
|
||||
type: story
|
||||
tags: javascript,webdev
|
||||
tags: [javascript,webdev]
|
||||
author: chalarangelo
|
||||
cover: image
|
||||
excerpt: A short summary of your story up to 180 characters long.
|
||||
firstSeen: 2021-06-13T05:00:00-04:00
|
||||
dateModified: 2021-06-13T05:00:00-04:00
|
||||
---
|
||||
|
||||
Write your blog post here.
|
||||
|
||||
@ -2,13 +2,12 @@
|
||||
title: 10 must-have VS Code extensions for JavaScript developers
|
||||
shortTitle: Essential VS Code extensions
|
||||
type: story
|
||||
tags: devtools,vscode
|
||||
tags: [devtools,vscode]
|
||||
author: chalarangelo
|
||||
cover: computer-screens
|
||||
excerpt: VS Code is steadily gaining popularity among developers. Here are 10 essential extensions for JavaScript developers that aim to increase your productivity.
|
||||
unlisted: true
|
||||
firstSeen: 2019-12-23T10:41:56+02:00
|
||||
lastUpdated: 2021-06-12T19:30:41+03:00
|
||||
dateModified: 2021-06-12T19:30:41+03:00
|
||||
---
|
||||
|
||||
Developers will most likely argue for the rest of eternity about the most productive code editor and the best extensions. Here are my personal extension preferences for VS Code as a JavaScript developer:
|
||||
@ -2,12 +2,11 @@
|
||||
title: 25 CSS gradients for your next project
|
||||
shortTitle: CSS gradients
|
||||
type: cheatsheet
|
||||
tags: css,visual
|
||||
tags: [css,visual]
|
||||
author: chalarangelo
|
||||
cover: colors-mural
|
||||
excerpt: We hand picked 25 of our favorite CSS gradients from uiGradients for your next design. Get them now!
|
||||
firstSeen: 2021-01-08T22:30:37+02:00
|
||||
lastUpdated: 2021-06-12T19:30:41+03:00
|
||||
dateModified: 2021-06-12T19:30:41+03:00
|
||||
---
|
||||
|
||||
[uiGradients](https://uigradients.com/) has an amazing collection of ready-to-use CSS gradients for pretty much anything. I highly recommend checking out the full collection. Meantime, here are our top picks in case you're looking for some color:
|
||||
@ -2,12 +2,11 @@
|
||||
title: 4 JavaScript Array methods you must know
|
||||
shortTitle: Useful array methods
|
||||
type: story
|
||||
tags: javascript,array,cheatsheet
|
||||
tags: [javascript,array,cheatsheet]
|
||||
author: chalarangelo
|
||||
cover: arrays
|
||||
excerpt: JavaScript arrays have a very robust API offering a plethora of amazing tools. Learn the 4 must-know JavaScript array methods in this quick guide.
|
||||
firstSeen: 2020-08-03T21:37:03+03:00
|
||||
lastUpdated: 2021-06-12T19:30:41+03:00
|
||||
dateModified: 2021-06-12T19:30:41+03:00
|
||||
---
|
||||
|
||||
JavaScript arrays have a very robust API offering a plethora of amazing tools. Here are our top 4 JavaScript array methods every developer should know:
|
||||
@ -2,12 +2,11 @@
|
||||
title: 4 SEO tips for developers
|
||||
shortTitle: SEO tips
|
||||
type: story
|
||||
tags: seo,webdev
|
||||
tags: [seo,webdev]
|
||||
author: chalarangelo
|
||||
cover: sunrise-over-city
|
||||
excerpt: As time goes by, SEO is becoming increasingly relevant, but most web developers seem to have little experience with it. Here are 4 actionable SEO tips you can implement today.
|
||||
firstSeen: 2020-01-17T14:51:15+02:00
|
||||
lastUpdated: 2021-06-12T19:30:41+03:00
|
||||
dateModified: 2021-06-12T19:30:41+03:00
|
||||
---
|
||||
|
||||
SEO is becoming increasingly relevant as the internet keeps growing. While most web developers usually have little experience with SEO, it is not particularly difficult to handle some of the basics. Here are my top SEO tips for web developers:
|
||||
@ -1,13 +1,12 @@
|
||||
---
|
||||
title: 5 tips for better Pull Requests
|
||||
type: story
|
||||
tags: git,github,programming,webdev
|
||||
tags: [git,github,programming,webdev]
|
||||
author: chalarangelo
|
||||
cover: keyboard-tea
|
||||
excerpt: Writing good code is only part of the job. Here are 5 tips to improve your pull requests and help people review them.
|
||||
unlisted: true
|
||||
firstSeen: 2020-06-24T12:44:03+03:00
|
||||
lastUpdated: 2021-06-12T19:30:41+03:00
|
||||
dateModified: 2021-06-12T19:30:41+03:00
|
||||
---
|
||||
|
||||
Writing good code is only part of the job. Here are 5 tips to improve your pull requests and help people review them:
|
||||
@ -2,12 +2,11 @@
|
||||
title: 6 JavaScript Regular Expression features you can use today
|
||||
shortTitle: JavaScript Regular Expression tips
|
||||
type: story
|
||||
tags: javascript,string,regexp
|
||||
tags: [javascript,string,regexp]
|
||||
author: chalarangelo
|
||||
cover: taking-photos
|
||||
excerpt: Regular expressions, while very powerful, are notoriously hard to master. Start using them in your JavaScript code by understanding these 6 features.
|
||||
firstSeen: 2020-04-15T14:24:50+03:00
|
||||
lastUpdated: 2021-06-12T19:30:41+03:00
|
||||
dateModified: 2021-06-12T19:30:41+03:00
|
||||
---
|
||||
|
||||
Regular expressions, while very powerful, are notoriously hard to master. Here are 6 useful features that can help you start using them in your JavaScript projects:
|
||||
@ -1,11 +1,11 @@
|
||||
---
|
||||
title: 6 Python f-strings tips and tricks
|
||||
type: story
|
||||
tags: python,string
|
||||
tags: [python,string]
|
||||
author: chalarangelo
|
||||
cover: sea-view
|
||||
excerpt: Python's f-strings can do a lot more than you might expect. Learn a few useful tips and tricks in this quick guide.
|
||||
firstSeen: 2021-07-20T05:00:00-04:00
|
||||
dateModified: 2021-07-20T05:00:00-04:00
|
||||
---
|
||||
|
||||
Python's f-strings provide a more readable, concise and less error-prone way to format strings than traditional string formatting. They are packed with useful features that are sure to come in handy in day-to-day use. Let's take a look at some of them.
|
||||
@ -2,13 +2,12 @@
|
||||
title: 7 essential Chrome extensions for web developers
|
||||
shortTitle: Essential Chrome extensions
|
||||
type: story
|
||||
tags: devtools,webdev
|
||||
tags: [devtools,webdev]
|
||||
author: chalarangelo
|
||||
cover: computer-screens
|
||||
excerpt: Google Chrome's developer tools are nothing short of amazing. Here are 7 must-have extensions you can add to increase your productivity even further.
|
||||
unlisted: true
|
||||
firstSeen: 2020-03-18T12:37:31+02:00
|
||||
lastUpdated: 2021-06-12T19:30:41+03:00
|
||||
dateModified: 2021-06-12T19:30:41+03:00
|
||||
---
|
||||
|
||||
Google Chrome's developer tools are nothing short of amazing, but there are a few missing tools that can increase your productivity even further. Here are my personal favorite extensions that I use everyday:
|
||||
@ -2,12 +2,11 @@
|
||||
title: 8 tips for accessible websites
|
||||
shortTitle: Accessibility tips
|
||||
type: story
|
||||
tags: javascript,accessibility,webdev
|
||||
tags: [javascript,accessibility,webdev]
|
||||
author: chalarangelo
|
||||
cover: accessibility
|
||||
excerpt: Accessibility (a11y) can improve your website and attract new users. Learn how to get started with these 8 quick tips.
|
||||
firstSeen: 2020-05-20T14:10:13+03:00
|
||||
lastUpdated: 2021-06-12T19:30:41+03:00
|
||||
dateModified: 2021-06-12T19:30:41+03:00
|
||||
---
|
||||
|
||||
### Use semantic HTML
|
||||
@ -1,13 +1,12 @@
|
||||
---
|
||||
title: 8 tips for working from home
|
||||
type: story
|
||||
tags: career,programming,jobs,webdev
|
||||
tags: [career,programming,jobs,webdev]
|
||||
author: chalarangelo
|
||||
cover: kettle-laptop
|
||||
excerpt: Working from home seems like a great alternative to going to the office, but there are challenges that come with it that you need to overcome...
|
||||
unlisted: true
|
||||
firstSeen: 2020-03-12T22:14:41+02:00
|
||||
lastUpdated: 2021-06-12T19:30:41+03:00
|
||||
dateModified: 2021-06-12T19:30:41+03:00
|
||||
---
|
||||
|
||||
Working from home (also known as remote work) seems like a great alternative to going to the office every morning, but it comes with its own set of challenges that you need to overcome in order to stay healthy and productive. Here are my tips for achieving just that:
|
||||
@ -1,12 +1,11 @@
|
||||
---
|
||||
title: Asynchronous JavaScript Cheat Sheet
|
||||
type: cheatsheet
|
||||
tags: javascript,function,promise
|
||||
tags: [javascript,function,promise]
|
||||
author: chalarangelo
|
||||
cover: green-plant
|
||||
excerpt: Learn everything you need to know about promises and asynchronous JavaScript with this handy cheatsheet.
|
||||
firstSeen: 2020-08-18T23:05:52+03:00
|
||||
lastUpdated: 2021-06-12T19:30:41+03:00
|
||||
dateModified: 2021-06-12T19:30:41+03:00
|
||||
---
|
||||
|
||||
### Promise basics
|
||||
@ -2,11 +2,11 @@
|
||||
title: "Tip: A bash alias for copying from the web"
|
||||
shortTitle: Bash alias for copying from the web
|
||||
type: tip
|
||||
tags: git,configuration
|
||||
tags: [git,configuration]
|
||||
author: chalarangelo
|
||||
cover: capsule-coffee
|
||||
excerpt: Many online resources prefix their terminal commands with a dollar sign. Luckily, we've got a solution to this small annoyance.
|
||||
firstSeen: 2023-03-05T05:00:00-04:00
|
||||
dateModified: 2023-03-05T05:00:00-04:00
|
||||
---
|
||||
|
||||
If you've ever copied a terminal command from the web, chances are you've also copied the dollar sign (`$`) that precedes it. This is a small annoyance that many developers encounter almost daily, but it can be easily dealt with. All you need to do is add an `alias` for the dollar sign to your `.bashrc` or `.zshrc` file:
|
||||
@ -1,12 +1,11 @@
|
||||
---
|
||||
title: The benefits of writing
|
||||
type: story
|
||||
tags: career,webdev,programming,jobs
|
||||
tags: [career,webdev,programming,jobs]
|
||||
author: chalarangelo
|
||||
cover: laptop-view
|
||||
excerpt: Writing about a topic can often sound boring or worthless. But there are significant benefits to doing it from time to time.
|
||||
firstSeen: 2021-04-12T12:00:00+03:00
|
||||
lastUpdated: 2022-11-05T14:00:07+03:00
|
||||
dateModified: 2022-11-05T14:00:07+03:00
|
||||
---
|
||||
|
||||
I was recently tasked with writing a design document at work. What first seemed like a tiresome chore I had to endure turned out to be both enlightening and beneficial both to me and my team. This isn't just a case of making the best of a bad situation, but rather a case of rediscovering the reason behind why writing down your thoughts isn't an exercise in futility. Instead of boring you with a long-winded story about the task, I'll just present the takeaways and hopefully do some storytelling in the process. So why should you write then?
|
||||
@ -1,11 +1,11 @@
|
||||
---
|
||||
title: Big-O Cheat Sheet
|
||||
type: cheatsheet
|
||||
tags: javascript,algorithm
|
||||
tags: [javascript,algorithm]
|
||||
author: chalarangelo
|
||||
cover: light-ring
|
||||
excerpt: Learn everything you need to know about Big-O notation with this handy cheatsheet.
|
||||
firstSeen: 2023-01-08T05:00:00-04:00
|
||||
dateModified: 2023-01-08T05:00:00-04:00
|
||||
---
|
||||
|
||||
### Definition
|
||||
@ -1,12 +1,11 @@
|
||||
---
|
||||
title: Breaking React - a common pattern to avoid
|
||||
type: story
|
||||
tags: react,debugging
|
||||
tags: [react,debugging]
|
||||
author: chalarangelo
|
||||
cover: broken-screen
|
||||
excerpt: As powerful as React is, it is also quite fragile at places. Did you know that just a few lines are more than enough to break your entire React application?
|
||||
firstSeen: 2020-01-30T12:35:19+02:00
|
||||
lastUpdated: 2021-11-06T20:51:47+03:00
|
||||
dateModified: 2021-11-06T20:51:47+03:00
|
||||
---
|
||||
|
||||
I am by no means an expert React engineer, but I have a couple years of experience under my belt. React is a powerful library for building user interfaces, but it's also quite fragile at places. A common bug I have encountered is caused by **direct DOM manipulation in combination with React**. This is sort of an anti-pattern, as it can break your entire React application under the right circumstances and it's hard to debug.
|
||||
@ -2,12 +2,11 @@
|
||||
title: Code Anatomy - For loops, array reduce and method chaining
|
||||
shortTitle: For loops, array reduce and method chaining
|
||||
type: story
|
||||
tags: javascript,array,iterator
|
||||
tags: [javascript,array,iterator]
|
||||
author: chalarangelo
|
||||
cover: case-study
|
||||
excerpt: There are many ways to iterate and transform array data in JavaScript. Learn how each one works and where you should use them.
|
||||
firstSeen: 2020-05-19T14:27:18+03:00
|
||||
lastUpdated: 2021-06-12T19:30:41+03:00
|
||||
dateModified: 2021-06-12T19:30:41+03:00
|
||||
---
|
||||
|
||||
### For loops
|
||||
@ -2,12 +2,11 @@
|
||||
title: Code Anatomy - Optimizing recursive functions
|
||||
shortTitle: Optimizing recursive functions
|
||||
type: story
|
||||
tags: javascript,recursion,performance
|
||||
tags: [javascript,recursion,performance]
|
||||
author: chalarangelo
|
||||
cover: case-study
|
||||
excerpt: Recursive code has a tendency of being inefficient and can leave a lot of space for optimization. Learn a couple of tricks we use to speed up our recursive functions.
|
||||
firstSeen: 2020-05-12T21:57:09+03:00
|
||||
lastUpdated: 2021-06-12T19:30:41+03:00
|
||||
dateModified: 2021-06-12T19:30:41+03:00
|
||||
---
|
||||
|
||||
### Recursive functions
|
||||
@ -2,11 +2,10 @@
|
||||
title: Code Anatomy - Writing high performance Python code
|
||||
shortTitle: Performant Python code
|
||||
type: story
|
||||
tags: python,list,performance
|
||||
tags: [python,list,performance]
|
||||
cover: walking-on-top
|
||||
excerpt: Writing short, efficient Python code is not always straightforward. Read how we optimize our list snippets to increase performance using a couple of simple tricks.
|
||||
firstSeen: 2020-03-15T12:50:05+02:00
|
||||
lastUpdated: 2021-11-07T16:34:37+03:00
|
||||
dateModified: 2021-11-07T16:34:37+03:00
|
||||
---
|
||||
|
||||
Writing short and efficient Python code is not always easy or straightforward. However, it's often that we see a piece of code and we don't realize the thought process behind the way it was written. We will be taking a look at the [difference](/python/s/difference) snippet, which returns the difference between two iterables, in order to understand its structure.
|
||||
@ -1,11 +1,11 @@
|
||||
---
|
||||
title: Common regular expressions
|
||||
type: cheatsheet
|
||||
tags: javascript,string,regexp
|
||||
tags: [javascript,string,regexp]
|
||||
author: chalarangelo
|
||||
cover: rocky-beach
|
||||
excerpt: A collection of regular expressions that can be used to solve common problems.
|
||||
firstSeen: 2022-11-09T05:00:00-04:00
|
||||
dateModified: 2022-11-09T05:00:00-04:00
|
||||
---
|
||||
|
||||
### Exact string match
|
||||
@ -1,12 +1,11 @@
|
||||
---
|
||||
title: JavaScript console.log() tips & tricks
|
||||
type: story
|
||||
tags: javascript,browser,cheatsheet
|
||||
tags: [javascript,browser,cheatsheet]
|
||||
author: chalarangelo
|
||||
cover: terminal
|
||||
excerpt: Level up your JavaScript logging with these `console.log()` tips and tricks.
|
||||
firstSeen: 2021-02-25T11:00:00+02:00
|
||||
lastUpdated: 2021-06-12T19:30:41+03:00
|
||||
dateModified: 2021-06-12T19:30:41+03:00
|
||||
---
|
||||
|
||||
Everyone uses the JavaScript console for logging or debugging every once in a while. But there is a lot more to the [console](https://developer.mozilla.org/en-US/docs/Web/API/Console) object than `console.log()`.
|
||||
@ -2,12 +2,11 @@
|
||||
title: What is the difference between cookies, local storage, and session storage?
|
||||
shortTitle: Cookies, local storage, and session storage
|
||||
type: question
|
||||
tags: javascript,browser,webdev
|
||||
tags: [javascript,browser,webdev]
|
||||
author: chalarangelo
|
||||
cover: three-vases
|
||||
excerpt: Learn the difference between cookies, local storage and session storage and start using the correct option for your needs.
|
||||
firstSeen: 2020-08-18T13:02:24+03:00
|
||||
lastUpdated: 2021-06-12T19:30:41+03:00
|
||||
dateModified: 2021-06-12T19:30:41+03:00
|
||||
---
|
||||
|
||||
### Cookies
|
||||
@ -2,12 +2,11 @@
|
||||
title: How can I copy text to clipboard with JavaScript?
|
||||
shortTitle: Copy text to clipboard
|
||||
type: question
|
||||
tags: javascript,browser
|
||||
tags: [javascript,browser]
|
||||
author: chalarangelo
|
||||
cover: typing
|
||||
excerpt: Learn how to programmatically copy text to clipboard with a few lines of JavaScript and level up your web development skills.
|
||||
firstSeen: 2020-01-20T11:41:23+02:00
|
||||
lastUpdated: 2022-01-11T09:47:54+03:00
|
||||
dateModified: 2022-01-11T09:47:54+03:00
|
||||
---
|
||||
|
||||
### Asynchronous Clipboard API
|
||||
@ -2,11 +2,11 @@
|
||||
title: What is CORS?
|
||||
shortTitle: CORS explained
|
||||
type: question
|
||||
tags: javascript,browser,webdev
|
||||
tags: [javascript,browser,webdev]
|
||||
author: chalarangelo
|
||||
cover: chill-surfing
|
||||
excerpt: CORS (Cross-Origin Resource Sharing) trips up many developers, but it's pretty easy to wrap your head around.
|
||||
firstSeen: 2023-05-07T05:00:00-04:00
|
||||
dateModified: 2023-05-07T05:00:00-04:00
|
||||
---
|
||||
|
||||
When it comes to HTTP, an **origin** is defined by several different aspects of a URL. As mentioned in a [previous article](/articles/s/js-window-location-cheatsheet/), the origin is composed of the following:
|
||||
@ -2,12 +2,11 @@
|
||||
title: 4 ways to center content with CSS
|
||||
shortTitle: Centering content with CSS
|
||||
type: story
|
||||
tags: css,layout
|
||||
tags: [css,layout]
|
||||
author: chalarangelo
|
||||
cover: mountain-lake
|
||||
excerpt: Centering content with CSS might often feel tricky. Here are 4 easy tricks you can use in your code today.
|
||||
firstSeen: 2021-02-22T11:00:00+02:00
|
||||
lastUpdated: 2021-09-28T19:35:49+03:00
|
||||
dateModified: 2021-09-28T19:35:49+03:00
|
||||
---
|
||||
|
||||
### Flexbox
|
||||
@ -2,11 +2,11 @@
|
||||
title: "Tip: Use clamp() in CSS for responsive typography"
|
||||
shortTitle: CSS clamp()
|
||||
type: tip
|
||||
tags: css,visual
|
||||
tags: [css,visual]
|
||||
author: chalarangelo
|
||||
cover: strawberries
|
||||
excerpt: Implement responsive typography with the CSS clamp() function.
|
||||
firstSeen: 2022-12-28T05:00:00-04:00
|
||||
dateModified: 2022-12-28T05:00:00-04:00
|
||||
---
|
||||
|
||||
Responsive typography has been in fashion for a while now, but some developers find it hard to implement. This is usually due to confusing algebraic formulas or complex hacks. Luckily, CSS has introduced the `clamp()` function, which makes it easy to create responsive typography with a single line of code. All you need to do is set the minimum, maximum, and preferred value and the browser will do the rest.
|
||||
@ -2,11 +2,11 @@
|
||||
title: How do you review CSS code in Pull Requests?
|
||||
shortTitle: CSS code reviews
|
||||
type: story
|
||||
tags: css,webdev
|
||||
tags: [css,webdev]
|
||||
author: chalarangelo
|
||||
cover: green-css
|
||||
excerpt: Reviewing CSS code is a skill that takes time to master. Here are some tips from my personal experience to help you get started.
|
||||
firstSeen: 2023-05-21T05:00:00-04:00
|
||||
dateModified: 2023-05-21T05:00:00-04:00
|
||||
---
|
||||
|
||||
Reviewing CSS code is a bit different than reviewing JavaScript code. In fact, many developers pay little attention to CSS, which can lead to problems down the line. Yet, many developers don't know how to review CSS code properly. In this post, we'll go over some of the things you should look for when reviewing CSS code in Pull Requests.
|
||||
@ -1,11 +1,11 @@
|
||||
---
|
||||
title: The currentColor CSS keyword
|
||||
type: tip
|
||||
tags: css,visual
|
||||
tags: [css,visual]
|
||||
author: chalarangelo
|
||||
cover: picking-berries
|
||||
excerpt: The `currentColor` CSS keyword is a nifty alternative to custom properties for simple use cases.
|
||||
firstSeen: 2022-11-30T05:00:00-04:00
|
||||
dateModified: 2022-11-30T05:00:00-04:00
|
||||
---
|
||||
|
||||
Modern CSS supports custom properties, yet the `currentColor` keyword precedes them by a few years. Thus, you might still find it in the wild and it is worth knowing what it does and how it works.
|
||||
@ -2,12 +2,11 @@
|
||||
title: "Tip: CSS easing variables"
|
||||
shortTitle: CSS easing variables
|
||||
type: tip
|
||||
tags: css,animation
|
||||
tags: [css,animation]
|
||||
author: chalarangelo
|
||||
cover: curve
|
||||
excerpt: Learn how to use the `cubic-bezier()` class of easing functions and create beautiful animations that stand out.
|
||||
firstSeen: 2020-12-30T16:13:58+02:00
|
||||
lastUpdated: 2021-06-12T19:30:41+03:00
|
||||
dateModified: 2021-06-12T19:30:41+03:00
|
||||
---
|
||||
|
||||
Most web developers use the built-in `ease`, `ease-in`, `ease-out` or `ease-in-out` functions for most use-cases of `transition-timing-function` in their designs. While these are perfectly fine for everyday use, there's a far more powerful, yet intimidating option available, the [`bezier-curve()`](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function) function.
|
||||
@ -2,11 +2,11 @@
|
||||
title: How can I ensure the footer is always at the bottom of the page?
|
||||
shortTitle: Footer at the bottom
|
||||
type: question
|
||||
tags: css,layout
|
||||
tags: [css,layout]
|
||||
author: chalarangelo
|
||||
cover: flower-shape-sunset
|
||||
excerpt: Make sure the footer stays at the bottom of the page, instead of floating up when the content is too short.
|
||||
firstSeen: 2022-10-30T05:00:00-04:00
|
||||
dateModified: 2022-10-30T05:00:00-04:00
|
||||
---
|
||||
|
||||
Preventing the footer from floating up the page is important when trying to create a polished website. Pages with **short content** can run into this issue, but it's easy to fix with a few lines of CSS. Assuming your HTML looks something like the snippet below, here are two modern ways to ensure the footer is always at the bottom of the page:
|
||||
@ -2,11 +2,11 @@
|
||||
title: CSS inherited properties cheatsheet
|
||||
shortTitle: Inherited properties
|
||||
type: cheatsheet
|
||||
tags: css,layout
|
||||
tags: [css,layout]
|
||||
author: chalarangelo
|
||||
cover: half-trees
|
||||
excerpt: A quick reference for inherited CSS properties.
|
||||
firstSeen: 2022-11-20T05:00:00-04:00
|
||||
dateModified: 2022-11-20T05:00:00-04:00
|
||||
---
|
||||
|
||||
The [CSS specification](https://www.w3.org/TR/CSS21/propidx.html) clearly states which CSS properties are inherited but the related appendix is not the most user-friendly resource. Here's a quick reference of the inherited properties that you are most likely to run into:
|
||||
@ -2,11 +2,11 @@
|
||||
title: "Tip: Perfect nested border radius in CSS"
|
||||
shortTitle: Perfect nested border radius in CSS
|
||||
type: tip
|
||||
tags: css,visual
|
||||
tags: [css,visual]
|
||||
author: chalarangelo
|
||||
cover: rocky-beach-waves
|
||||
excerpt: Nesting elements with rounded borders can look very wrong if not done correctly. Here's a quick tip on how to do it right.
|
||||
firstSeen: 2022-04-03T05:00:00-04:00
|
||||
dateModified: 2022-04-03T05:00:00-04:00
|
||||
---
|
||||
|
||||
Nesting elements with rounded borders can look very wrong if not done correctly. Luckily, there's a simple math trick to make it look right. All you need to do is **calculate the border radius of one of the elements and the distance between them**. The border radius of the outer element should be equal to the sum of the border radius of the inner element and the distance between the two elements. This can be mathematically expressed as `innerRadius + distance = outerRadius` or more tersely `R1 + D = R2`.
|
||||
@ -2,12 +2,11 @@
|
||||
title: What are CSS pseudo-classes?
|
||||
shortTitle: CSS pseudo-classes
|
||||
type: question
|
||||
tags: css,webdev
|
||||
tags: [css,webdev]
|
||||
author: chalarangelo
|
||||
cover: orange-flower
|
||||
excerpt: Learn how to use CSS pseudo-classes to style an element based on changes to its state.
|
||||
firstSeen: 2020-08-18T19:56:12+03:00
|
||||
lastUpdated: 2021-11-07T16:34:37+03:00
|
||||
dateModified: 2021-11-07T16:34:37+03:00
|
||||
---
|
||||
|
||||
CSS pseudo-classes provide a way to style elements, based on changes to their state. For example, `:hover` can be used to apply additional styles to an element when the user's pointer hovers over it.
|
||||
@ -1,11 +1,11 @@
|
||||
---
|
||||
title: CSS Reset
|
||||
type: story
|
||||
tags: css,visual
|
||||
tags: [css,visual]
|
||||
author: chalarangelo
|
||||
cover: pink-flower-tree
|
||||
excerpt: A short, opinionated CSS reset to make your websites look great everywhere.
|
||||
firstSeen: 2022-10-16T05:00:00-04:00
|
||||
dateModified: 2022-10-16T05:00:00-04:00
|
||||
---
|
||||
|
||||
Browsers nowadays are much better at presenting HTML in a consistent manner, making CSS resets of the past largely unnecessary. However, **default browser styles are not particularly great** in most cases, which is why there are tons of CSS resets out there. Drawing inspiration from some of them, here's my opinionated CSS reset, along with an explanation of why I chose to include each rule.
|
||||
@ -2,11 +2,11 @@
|
||||
title: What's the difference between :root and html in CSS?
|
||||
shortTitle: :root vs html
|
||||
type: story
|
||||
tags: css,layout,selector
|
||||
tags: [css,layout,selector]
|
||||
author: chalarangelo
|
||||
cover: tree-roots
|
||||
excerpt: The CSS selectors used to target the root element of an HTML share some similarities, but they also have some differences.
|
||||
firstSeen: 2022-05-22T05:00:00-04:00
|
||||
dateModified: 2022-05-22T05:00:00-04:00
|
||||
---
|
||||
|
||||
CSS has two ways to target the root element of an HTML document - the `:root` pseudo-class and the `html` selector. While these are very similar to each other, they have a couple of differences you should know.
|
||||
@ -2,11 +2,11 @@
|
||||
title: "Tip: Select any link with CSS"
|
||||
shortTitle: "CSS :any-link pseudo-class"
|
||||
type: tip
|
||||
tags: css,visual,interactivity
|
||||
tags: [css,visual,interactivity]
|
||||
author: chalarangelo
|
||||
cover: round-leaves
|
||||
excerpt: You can use a CSS pseudo-class selector to style all links in a page, without worrying if they have been visited or not.
|
||||
firstSeen: 2022-03-06T05:00:00-04:00
|
||||
dateModified: 2022-03-06T05:00:00-04:00
|
||||
---
|
||||
|
||||
Styling links with CSS is considered straightforward, with most developers using the `:link` and `:visited` pseudo-classes. While this solution is very common, there's a less verbose alternative in the form of the [`:any-link`](https://developer.mozilla.org/en-US/docs/Web/CSS/:any-link) pseudo-class. This pseudo-class selects all links, regardless of whether they have been visited or not. Thus, it acts as a catch-all for all links on the page.
|
||||
@ -2,11 +2,11 @@
|
||||
title: "Tip: Style links without a class"
|
||||
shortTitle: Style default links
|
||||
type: tip
|
||||
tags: css,visual,interactivity
|
||||
tags: [css,visual,interactivity]
|
||||
author: chalarangelo
|
||||
cover: citrus-drink
|
||||
excerpt: A short summary of your story up to 180 characters long.
|
||||
firstSeen: 2022-11-23T05:00:00-04:00
|
||||
dateModified: 2022-11-23T05:00:00-04:00
|
||||
---
|
||||
|
||||
When styling injected or generated HTML content, you might not have access to the classes or IDs of the elements you want to style. This can become especially annoying when dealing with link elements. Luckily, you can use the `:not()` selector with an appropriate attribute selector to check for the absence of a class and style links accordingly.
|
||||
@ -2,11 +2,11 @@
|
||||
title: Why should line-height be unitless in CSS?
|
||||
shortTitle: Unitless line height
|
||||
type: tip
|
||||
tags: css,layout,visual
|
||||
tags: [css,layout,visual]
|
||||
author: chalarangelo
|
||||
cover: gold-typewriter
|
||||
excerpt: You might have heard that `line-height` should be unitless, but do you know why?
|
||||
firstSeen: 2022-11-27T05:00:00-04:00
|
||||
dateModified: 2022-11-27T05:00:00-04:00
|
||||
---
|
||||
|
||||
I've often heard that `line-height` should always be **unitless**. In my earlier coding years, I didn't question it much, but lately I've come to wonder why that is. In my mind `1.5` and `1.5em` should produce the same result, right? Turns out, they don't.
|
||||
@ -1,12 +1,11 @@
|
||||
---
|
||||
title: CSS units Cheat Sheet
|
||||
type: cheatsheet
|
||||
tags: css,layout,cheatsheet
|
||||
tags: [css,layout,cheatsheet]
|
||||
author: chalarangelo
|
||||
cover: measuring
|
||||
excerpt: Learn everything you need to know about CSS units with this handy cheatsheet.
|
||||
firstSeen: 2021-01-25T11:00:00+02:00
|
||||
lastUpdated: 2021-06-12T19:30:41+03:00
|
||||
dateModified: 2021-06-12T19:30:41+03:00
|
||||
---
|
||||
|
||||
- `px`: Absolute pixel value
|
||||
@ -2,12 +2,11 @@
|
||||
title: What are CSS variables and where can I use them?
|
||||
shortTitle: CSS variables
|
||||
type: question
|
||||
tags: css,visual,layout
|
||||
tags: [css,visual,layout]
|
||||
author: chalarangelo
|
||||
cover: css-variables
|
||||
excerpt: Learn how CSS custom properties (CSS variables) work and what you can use them for in your code and designs.
|
||||
firstSeen: 2020-03-09T19:39:30+02:00
|
||||
lastUpdated: 2021-09-28T19:52:58+03:00
|
||||
dateModified: 2021-09-28T19:52:58+03:00
|
||||
---
|
||||
|
||||
CSS variables (officially called CSS **custom properties**) behave much like variables in other programming languages. They allow you to define named variables that contain specific values that can be reused within the CSS document. As specified in the custom property notation, CSS variables are prefixed with two dashes (e.g. `--my-color: black`). To access them, you can use the `var()` function (e.g. `color: var(--my-color)`). CSS variables are exceptionally useful for **sharing styles** between different elements and components. Examples include but are not limited to vertical rhythm, typography variables and color palettes.
|
||||
@ -2,12 +2,11 @@
|
||||
title: "Tip: Customize the names of downloadable files"
|
||||
shortTitle: Customize the names of downloadable files
|
||||
type: tip
|
||||
tags: webdev,html,browser
|
||||
tags: [webdev,html,browser]
|
||||
author: chalarangelo
|
||||
cover: hard-disk
|
||||
excerpt: Learn what HTML5 attribute you can use to customize the names of your downloadable files with this quick tip.
|
||||
firstSeen: 2021-01-11T11:00:00+02:00
|
||||
lastUpdated: 2021-06-12T19:30:41+03:00
|
||||
dateModified: 2021-06-12T19:30:41+03:00
|
||||
---
|
||||
|
||||
HTML5 introduced a variety of convenient features that many of us use every day. As downloadable links aren't something I work with very often, I recently found out that you can use the `download` attribute on an `<a>` element for much more than just making it trigger a download. In fact, you can pass it a string value that will act as the name of the downloadable file, effectively allowing you to customize its name:
|
||||
@ -2,12 +2,11 @@
|
||||
title: How can I detect if Caps Lock is on with JavaScript?
|
||||
shortTitle: Detect Caps Lock
|
||||
type: question
|
||||
tags: javascript,browser,event
|
||||
tags: [javascript,browser,event]
|
||||
author: chalarangelo
|
||||
cover: keyboard
|
||||
excerpt: If you need to check if Caps Lock is on when the user is typing in the browser, JavaScript's got you covered.
|
||||
firstSeen: 2021-02-18T11:00:00+02:00
|
||||
lastUpdated: 2021-06-12T19:30:41+03:00
|
||||
dateModified: 2021-06-12T19:30:41+03:00
|
||||
---
|
||||
|
||||
Oftentimes, especially when creating password inputs, you need to check if the Caps Lock key is on and inform the user. You can do that using the [`KeyboardEvent.getModifierState()`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/getModifierState) method with a value of `'CapsLock'`. This means that you have to listen for a keyboard event on an element in order to check the state of the Caps Lock key:
|
||||
@ -1,11 +1,11 @@
|
||||
---
|
||||
title: DNS Record Basics
|
||||
type: cheatsheet
|
||||
tags: webdev,dns,server,cheatsheet
|
||||
tags: [webdev,dns,server,cheatsheet]
|
||||
author: chalarangelo
|
||||
cover: sparkles
|
||||
excerpt: DNS records may not be a thing you work too often with. Regardless, some basic knowledge can go a long way.
|
||||
firstSeen: 2022-01-09T05:00:00-04:00
|
||||
dateModified: 2022-01-09T05:00:00-04:00
|
||||
---
|
||||
|
||||
Most web developers go about their day-to-day without having to deal with DNS records most of the time. Regardless, knowing what DNS stands for and the types of DNS records are pretty useful.
|
||||
@ -1,11 +1,11 @@
|
||||
---
|
||||
title: Escaping tutorial hell
|
||||
type: story
|
||||
tags: career,webdev,programming,jobs
|
||||
tags: [career,webdev,programming,jobs]
|
||||
author: chalarangelo
|
||||
cover: campfire
|
||||
excerpt: Many beginners get stuck in tutorial hell without even realizing. Here are 4 simple ways to escape tutorial hell and get back to learning.
|
||||
firstSeen: 2022-05-26T05:00:00-04:00
|
||||
dateModified: 2022-05-26T05:00:00-04:00
|
||||
---
|
||||
|
||||
Tutorial hell refers to the stage in your learning journey, where you are following along with tutorials, not truly learning that much. Tutorials are by nature a curated experience. While that's not definitively bad, it's **not always the best way** to explore the landscape and familiarize with concepts and tools. Neither is it the best way to learn how to think for yourself. So how can you escape it?
|
||||
@ -2,12 +2,11 @@
|
||||
title: "Tip: Refactoring your for...in loops to avoid ESLint warnings"
|
||||
shortTitle: Refactoring for...in loops to avoid ESLint warnings
|
||||
type: tip
|
||||
tags: javascript,array,iterator,eslint
|
||||
tags: [javascript,array,iterator,eslint]
|
||||
author: chalarangelo
|
||||
cover: typing
|
||||
excerpt: ESLint is a very powerful tool that can save you a lot of headaches, but sometimes it gets in the way. Learn how to refactor code to get rid of a common warning.
|
||||
firstSeen: 2020-05-19T02:32:10+03:00
|
||||
lastUpdated: 2021-06-12T19:30:41+03:00
|
||||
dateModified: 2021-06-12T19:30:41+03:00
|
||||
---
|
||||
|
||||
ESLint is one of my tools of choice, but oftentimes it gets in the way of work, due to the way it prefers me to do things. One of the warnings I have seen more times than I care to admit is the following:
|
||||
@ -1,12 +1,11 @@
|
||||
---
|
||||
title: Flexbox Cheat Sheet
|
||||
type: cheatsheet
|
||||
tags: css,layout,flexbox,cheatsheet
|
||||
tags: [css,layout,flexbox,cheatsheet]
|
||||
author: chalarangelo
|
||||
cover: frames
|
||||
excerpt: Flexbox allows you to create fluid layouts easily. If you find yourself constantly looking up the syntax or how it work, this handy cheatsheet is all you need.
|
||||
firstSeen: 2020-05-02T00:21:49+03:00
|
||||
lastUpdated: 2021-06-12T19:30:41+03:00
|
||||
dateModified: 2021-06-12T19:30:41+03:00
|
||||
---
|
||||
|
||||
### Container
|
||||
@ -1,12 +1,11 @@
|
||||
---
|
||||
title: Git aliases
|
||||
type: cheatsheet
|
||||
tags: git,configuration,cheatsheet
|
||||
tags: [git,configuration,cheatsheet]
|
||||
author: chalarangelo
|
||||
cover: organizer
|
||||
excerpt: Increase your productivity by creating aliases for many common git operations.
|
||||
firstSeen: 2021-04-29T12:00:00+03:00
|
||||
lastUpdated: 2021-06-12T19:30:41+03:00
|
||||
dateModified: 2021-06-12T19:30:41+03:00
|
||||
---
|
||||
|
||||
### Creating aliases
|
||||
@ -2,12 +2,11 @@
|
||||
title: "Tip: Create a commit with a different date"
|
||||
shortTitle: Create a commit with a different date
|
||||
type: tip
|
||||
tags: git,commit
|
||||
tags: [git,commit]
|
||||
author: chalarangelo
|
||||
cover: ice
|
||||
excerpt: Ever needed to create a git commit with a different date? Here's a quick and easy way to do it.
|
||||
firstSeen: 2021-04-22T12:00:00+03:00
|
||||
lastUpdated: 2021-06-12T19:30:41+03:00
|
||||
dateModified: 2021-06-12T19:30:41+03:00
|
||||
---
|
||||
|
||||
Sometimes, you might run into a situation where you need to create a commit with a different date than the current one. Luckily, you can handle this using `GIT_AUTHOR_DATE` and `GIT_COMMITTER_DATE`:
|
||||
@ -2,11 +2,11 @@
|
||||
title: How does Git's fast-forward mode work?
|
||||
shortTitle: Git fast-forward
|
||||
type: question
|
||||
tags: git,branch
|
||||
tags: [git,branch]
|
||||
author: chalarangelo
|
||||
cover: boats
|
||||
excerpt: Merging a branch is a pretty common Git operation. Learn how fast-forward mode works and its benefits, so you can decide if it's a good fit for you and your team.
|
||||
firstSeen: 2021-07-15T05:00:00-04:00
|
||||
dateModified: 2021-07-15T05:00:00-04:00
|
||||
---
|
||||
|
||||
Merging a branch is one of the most common operations when working with Git. Depending on your team and projects you've been a part of, you might have heard of or even used Git's **fast-forward** mode when merging. Fast-forward mode is the default in Git, however GitHub will essentially override this by default and create a merge commit instead.
|
||||
@ -2,12 +2,11 @@
|
||||
title: "Tip: How to add multiple authors to a commit"
|
||||
shortTitle: Add multiple authors to a commit
|
||||
type: tip
|
||||
tags: git,github,programming,webdev
|
||||
tags: [git,github,programming,webdev]
|
||||
author: chalarangelo
|
||||
cover: book-chair
|
||||
excerpt: Learn how to add multiple authors to a git commit with this quick and easy tip.
|
||||
firstSeen: 2020-08-18T12:14:24+03:00
|
||||
lastUpdated: 2021-06-12T19:30:41+03:00
|
||||
dateModified: 2021-06-12T19:30:41+03:00
|
||||
---
|
||||
|
||||
You can add multiple authors to a git commit, by adding one or more `Co-authored-by` trailers to the commit's message:
|
||||
@ -2,11 +2,11 @@
|
||||
title: Recommended HTML head icon tags
|
||||
shortTitle: HTML favicons template
|
||||
type: story
|
||||
tags: webdev,html,browser
|
||||
tags: [webdev,html,browser]
|
||||
author: chalarangelo
|
||||
cover: boutique-home-office-3
|
||||
excerpt: Ensure your HTML documents have a proper favicon by including these lines in your `<head>` element.
|
||||
firstSeen: 2023-01-24T05:00:00-04:00
|
||||
dateModified: 2023-01-24T05:00:00-04:00
|
||||
---
|
||||
|
||||
Over the years, I've seen many different and often conflicting guidelines about favicons and which tags are essential. Nowadays, I think you can get away with a very **minimal set of meta tags** and tailor them to your needs as you go. Here's my recommendation for the bare minimum you should include in your `<head>` element:
|
||||
@ -2,11 +2,11 @@
|
||||
title: Recommended HTML head links
|
||||
shortTitle: HTML head links template
|
||||
type: story
|
||||
tags: webdev,html,browser
|
||||
tags: [webdev,html,browser]
|
||||
author: chalarangelo
|
||||
cover: boutique-home-office-4
|
||||
excerpt: Make your HTML documents more SEO-friendly by including these lines in your `<head>` element.
|
||||
firstSeen: 2023-01-26T05:00:00-04:00
|
||||
dateModified: 2023-01-26T05:00:00-04:00
|
||||
---
|
||||
|
||||
The `<head>` element of an HTML document is where you can include links to external resources such as CSS stylesheets and JavaScript files. Some `<link>` elements, however, are important for SEO and metadata purposes. Here's a list of a few really important ones I like to include:
|
||||
@ -2,11 +2,11 @@
|
||||
title: Recommended social tags for HTML head
|
||||
shortTitle: HTML social tags template
|
||||
type: story
|
||||
tags: webdev,html,browser
|
||||
tags: [webdev,html,browser]
|
||||
author: chalarangelo
|
||||
cover: boutique-home-office-2
|
||||
excerpt: Ensure your HTML documents can be shared on social media by including these lines in your `<head>` element.
|
||||
firstSeen: 2023-01-22T05:00:00-04:00
|
||||
dateModified: 2023-01-22T05:00:00-04:00
|
||||
---
|
||||
|
||||
Social media play an important role to any content's success. To ensure your content is properly shared on social media, you should include some essential tags in your `<head>` element:
|
||||
@ -2,11 +2,11 @@
|
||||
title: Recommended minimum HTML head
|
||||
shortTitle: HTML head template
|
||||
type: story
|
||||
tags: webdev,html,browser
|
||||
tags: [webdev,html,browser]
|
||||
author: chalarangelo
|
||||
cover: boutique-home-office-1
|
||||
excerpt: Ensure your HTML documents are properly structured by including these lines in your `<head>` element.
|
||||
firstSeen: 2023-01-18T05:00:00-04:00
|
||||
dateModified: 2023-01-18T05:00:00-04:00
|
||||
---
|
||||
|
||||
An essential part of an HTML document is the `<head>` element, which contains metadata about the document. Some vital information, such as the document's title and character encoding are stored in the `<head>` element. It's also where you can include links to external resources such as CSS stylesheets and JavaScript files.
|
||||
@ -2,12 +2,11 @@
|
||||
title: Common HTTP status codes Cheat Sheet
|
||||
shortTitle: HTTP status codes
|
||||
type: cheatsheet
|
||||
tags: webdev,http
|
||||
tags: [webdev,http]
|
||||
author: chalarangelo
|
||||
cover: lake-runner
|
||||
excerpt: Familiarize yourself with the most common HTTP status codes with this handy cheatsheet.
|
||||
firstSeen: 2021-05-20T12:00:00+03:00
|
||||
lastUpdated: 2021-06-12T19:30:41+03:00
|
||||
dateModified: 2021-06-12T19:30:41+03:00
|
||||
---
|
||||
|
||||
### 1xx - Informational
|
||||
@ -2,11 +2,11 @@
|
||||
title: How can I add a key-value pair to a JavaScript object?
|
||||
shortTitle: Add key-value pair to object
|
||||
type: question
|
||||
tags: javascript,object
|
||||
tags: [javascript,object]
|
||||
author: chalarangelo
|
||||
cover: pineapple-laptop
|
||||
excerpt: Adding a key-value pair to a JavaScript object is straightforward, yet there are multiple ways available to do so.
|
||||
firstSeen: 2022-07-21T05:00:00-04:00
|
||||
dateModified: 2022-07-21T05:00:00-04:00
|
||||
---
|
||||
|
||||
Adding a key-value pair to a JavaScript object is straightforward, yet there are multiple ways available to do so. While mostly similar, these approaches have some differences that you should be aware of.
|
||||
@ -2,12 +2,11 @@
|
||||
title: How do I compare two arrays in JavaScript?
|
||||
shortTitle: JavaScript array comparison
|
||||
type: question
|
||||
tags: javascript,array,comparison
|
||||
tags: [javascript,array,comparison]
|
||||
author: chalarangelo
|
||||
cover: coconuts
|
||||
excerpt: Learn how you can compare two arrays in JavaScript using various different techniques.
|
||||
firstSeen: 2020-08-07T14:23:14+03:00
|
||||
lastUpdated: 2021-09-27T16:36:32+03:00
|
||||
dateModified: 2021-09-27T16:36:32+03:00
|
||||
---
|
||||
|
||||
### Equality comparison
|
||||
@ -2,11 +2,11 @@
|
||||
title: How can I check if a JavaScript array includes a specific value?
|
||||
shortTitle: JavaScript array includes value
|
||||
type: question
|
||||
tags: javascript,array
|
||||
tags: [javascript,array]
|
||||
author: chalarangelo
|
||||
cover: bridge-drop
|
||||
excerpt: Checking if an array includes a specific value is pretty straightforward, except when it comes to objects.
|
||||
firstSeen: 2022-09-18T05:00:00-04:00
|
||||
dateModified: 2022-09-18T05:00:00-04:00
|
||||
---
|
||||
|
||||
### Primitive values
|
||||
@ -2,12 +2,11 @@
|
||||
title: Can I use an arrow function as the callback for an event listener in JavaScript?
|
||||
shortTitle: Arrow function as callback for event listener
|
||||
type: question
|
||||
tags: javascript,browser,event,function
|
||||
tags: [javascript,browser,event,function]
|
||||
author: chalarangelo
|
||||
cover: coffee-float
|
||||
excerpt: Learn the differences between JavaScript ES6 arrow functions and regular functions and how they affect event listener callbacks.
|
||||
firstSeen: 2020-08-04T15:29:43+03:00
|
||||
lastUpdated: 2021-06-12T19:30:41+03:00
|
||||
dateModified: 2021-06-12T19:30:41+03:00
|
||||
---
|
||||
|
||||
### Arrow functions
|
||||
@ -2,12 +2,11 @@
|
||||
title: Introduction to arrow functions in JavaScript
|
||||
shortTitle: Arrow functions introduction
|
||||
type: story
|
||||
tags: javascript,function
|
||||
tags: [javascript,function]
|
||||
author: chalarangelo
|
||||
cover: arrow-functions
|
||||
excerpt: JavaScript arrow functions are a very useful tool to learn and master. Here's a complete introduction to everything you need to know.
|
||||
firstSeen: 2021-04-08T12:00:00+03:00
|
||||
lastUpdated: 2021-06-12T19:30:41+03:00
|
||||
dateModified: 2021-06-12T19:30:41+03:00
|
||||
---
|
||||
|
||||
### Syntax
|
||||
@ -2,11 +2,11 @@
|
||||
title: What are the differences between arrow functions and regular functions in JavaScript?
|
||||
shortTitle: Arrow functions vs regular functions
|
||||
type: question
|
||||
tags: javascript,function
|
||||
tags: [javascript,function]
|
||||
author: chalarangelo
|
||||
cover: fallen-leaves
|
||||
excerpt: JavaScript's arrow functions are seemingly the same as regular functions, but there are some important differences you need to know.
|
||||
firstSeen: 2021-10-17T05:00:00-04:00
|
||||
dateModified: 2021-10-17T05:00:00-04:00
|
||||
---
|
||||
|
||||
JavaScript's arrow functions might seem the same as regular functions on the surface, but they have some very important differences:
|
||||
@ -2,12 +2,11 @@
|
||||
title: Asynchronous array loops in JavaScript
|
||||
shortTitle: Asynchronous array loops
|
||||
type: story
|
||||
tags: javascript,array,function,promise
|
||||
tags: [javascript,array,function,promise]
|
||||
author: chalarangelo
|
||||
cover: sunflowers
|
||||
excerpt: Asynchronously looping over arrays in JavaScript comes with a few caveats you should watch out for.
|
||||
firstSeen: 2021-05-17T12:00:00+03:00
|
||||
lastUpdated: 2021-06-12T19:30:41+03:00
|
||||
dateModified: 2021-06-12T19:30:41+03:00
|
||||
---
|
||||
|
||||
Asynchronous operations seem to trip up a lot of developers. This is especially true when combined with looping over arrays, as there are some caveats that come with each option available.
|
||||
@ -2,12 +2,11 @@
|
||||
title: How can I add a timeout to a promise in JavaScript?
|
||||
shortTitle: Promise timeout
|
||||
type: question
|
||||
tags: javascript,promise,timeout,class
|
||||
tags: [javascript,promise,timeout,class]
|
||||
author: chalarangelo
|
||||
cover: walking
|
||||
excerpt: Oftentimes you might need to add a timeout to a promise in JavaScript. Learn how to do this and more in this short guide.
|
||||
firstSeen: 2021-05-13T12:00:00+03:00
|
||||
lastUpdated: 2021-06-12T19:30:41+03:00
|
||||
dateModified: 2021-06-12T19:30:41+03:00
|
||||
---
|
||||
|
||||
Many times in the past I've found myself needing to add a timeout to a promise in JavaScript. `setTimeout()` is not exactly a perfect tool for the job, but it's easy enough to wrap it into a promise:
|
||||
@ -2,11 +2,11 @@
|
||||
title: How can I check for a blank value in JavaScript?
|
||||
shortTitle: Value is blank
|
||||
type: question
|
||||
tags: javascript,type
|
||||
tags: [javascript,type]
|
||||
author: chalarangelo
|
||||
cover: workspace-with-speaker
|
||||
excerpt: JavaScript doesn't have a built-in way to check if a value is blank, but it's easy to create one.
|
||||
firstSeen: 2022-09-25T05:00:00-04:00
|
||||
dateModified: 2022-09-25T05:00:00-04:00
|
||||
---
|
||||
|
||||
JavaScript doesn't have a built-in way to check if a value is blank, but it's easy to create one. Before we do, however, we should define the behavior of such a method. The inspiration for this comes from Rails' `blank?` method, but modified to fit JavaScript's needs.
|
||||
@ -2,12 +2,11 @@
|
||||
title: Where and how can I use the Boolean function in JavaScript?
|
||||
shortTitle: Boolean function use-cases
|
||||
type: question
|
||||
tags: javascript,function,type
|
||||
tags: [javascript,function,type]
|
||||
author: chalarangelo
|
||||
cover: rocky-lake
|
||||
excerpt: JavaScript's built-in Boolean function can be very useful for truth-checking data among other things. Learn how to use it and level up your code today.
|
||||
firstSeen: 2020-09-18T16:28:30+03:00
|
||||
lastUpdated: 2021-06-12T19:30:41+03:00
|
||||
dateModified: 2021-06-12T19:30:41+03:00
|
||||
---
|
||||
|
||||
JavaScript's built-in [`Boolean`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean) is one of those things I find myself suggesting in code reviews quite often as of late, so I thought I could share some tips about it with the world.
|
||||
@ -2,11 +2,11 @@
|
||||
title: Boolean traps and how to avoid them
|
||||
shortTitle: Boolean traps
|
||||
type: story
|
||||
tags: javascript,function,type,boolean
|
||||
tags: [javascript,function,type,boolean]
|
||||
author: chalarangelo
|
||||
cover: lighthouse
|
||||
excerpt: Boolean traps can cause readability and maintainability issues in your code. Learn what they are, how to spot and fix them in this article.
|
||||
firstSeen: 2021-07-11T05:00:00-04:00
|
||||
dateModified: 2021-07-11T05:00:00-04:00
|
||||
---
|
||||
|
||||
I recently came across the concept of **Boolean traps** and it instantly resonated with me due to the volume of Google searches I've performed because of it. In this article, I'll try to explain what it is, why it's somewhat of an anti-pattern, how to spot it in your code and ways to refactor around it.
|
||||
@ -2,11 +2,11 @@
|
||||
title: A cautionary tale about JavaScript callbacks
|
||||
shortTitle: Callback pitfalls
|
||||
type: story
|
||||
tags: javascript,function
|
||||
tags: [javascript,function]
|
||||
author: chalarangelo
|
||||
cover: rabbit-call
|
||||
excerpt: JavaScript callbacks are especially tricky when you're not careful. Take a deeper dive into potential issues and how to avoid them.
|
||||
firstSeen: 2021-07-01T05:00:00-04:00
|
||||
dateModified: 2021-07-01T05:00:00-04:00
|
||||
---
|
||||
|
||||
A piece of advice I've found myself repeating often as of late is this:
|
||||
@ -2,11 +2,11 @@
|
||||
title: How does JavaScript's prototypal inheritance differ from classical inheritance?
|
||||
shortTitle: Prototypal vs classical inheritance
|
||||
type: question
|
||||
tags: javascript,object,class
|
||||
tags: [javascript,object,class]
|
||||
author: chalarangelo
|
||||
cover: last-light
|
||||
excerpt: Understanding the difference between these two object-oriented programming paradigms is key to taking your skills to the next level.
|
||||
firstSeen: 2021-11-21T05:00:00-04:00
|
||||
dateModified: 2021-11-21T05:00:00-04:00
|
||||
---
|
||||
|
||||
### Object-oriented programming
|
||||
@ -2,12 +2,11 @@
|
||||
title: What are JavaScript closures?
|
||||
shortTitle: Closures introduction
|
||||
type: question
|
||||
tags: javascript,function,closure
|
||||
tags: [javascript,function,closure]
|
||||
author: chalarangelo
|
||||
cover: cherry-trees
|
||||
excerpt: Learn and understand closures, a core concept in JavaScript programming, and level up your code.
|
||||
firstSeen: 2020-08-04T12:40:08+03:00
|
||||
lastUpdated: 2021-06-12T19:30:41+03:00
|
||||
dateModified: 2021-06-12T19:30:41+03:00
|
||||
---
|
||||
|
||||
Closures are a JavaScript concept that comes up quite a lot, especially during interviews. While they sound confusing, they are not all that complicated and you have probably already used them in your code regardless of your expertise level. Let's start with what a closure is:
|
||||
@ -2,12 +2,11 @@
|
||||
title: How can I clone an array in JavaScript?
|
||||
shortTitle: Clone an array
|
||||
type: question
|
||||
tags: javascript,array
|
||||
tags: [javascript,array]
|
||||
author: chalarangelo
|
||||
cover: colorful-plastic
|
||||
excerpt: Pick up a few new tricks which you can use to clone arrays in JavaScript.
|
||||
firstSeen: 2021-03-15T11:00:00+02:00
|
||||
lastUpdated: 2021-06-12T19:30:41+03:00
|
||||
dateModified: 2021-06-12T19:30:41+03:00
|
||||
---
|
||||
|
||||
JavaScript provides quite a few ways to clone an array, most of which are pretty similar in terms of performance and results. Here's a quick rundown of some of the available options.
|
||||
@ -2,11 +2,11 @@
|
||||
title: How do I compare two dates in JavaScript?
|
||||
shortTitle: Date comparison
|
||||
type: question
|
||||
tags: javascript,date,comparison
|
||||
tags: [javascript,date,comparison]
|
||||
author: chalarangelo
|
||||
cover: pineapple-at-work
|
||||
excerpt: Learn how you can compare two dates in JavaScript using various different techniques.
|
||||
firstSeen: 2022-01-16T05:00:00-04:00
|
||||
dateModified: 2022-01-16T05:00:00-04:00
|
||||
---
|
||||
|
||||
### Equality comparison
|
||||
@ -2,12 +2,11 @@
|
||||
title: How can I deep freeze an object in JavaScript?
|
||||
shortTitle: Deep freeze object
|
||||
type: question
|
||||
tags: javascript,object
|
||||
tags: [javascript,object]
|
||||
author: chalarangelo
|
||||
cover: frozen-globe
|
||||
excerpt: Learn how mutability works in JavaScript, its applications to objects and how you can properly freeze them to make them constant.
|
||||
firstSeen: 2020-03-17T16:15:30+02:00
|
||||
lastUpdated: 2021-06-12T19:30:41+03:00
|
||||
dateModified: 2021-06-12T19:30:41+03:00
|
||||
---
|
||||
|
||||
Objects in JavaScript are mutable, regardless if you define them as `const` variables or not. In fact, using `const` when defining an object only prevents the variable from being reassigned. However, you can reassign the properties of a `const` object or array, like this:
|
||||
@ -2,12 +2,11 @@
|
||||
title: Where and how can I use the destructuring assignment syntax in JavaScript?
|
||||
shortTitle: Destructuring assignment introduction
|
||||
type: question
|
||||
tags: javascript,array,object
|
||||
tags: [javascript,array,object]
|
||||
author: chalarangelo
|
||||
cover: building-blocks
|
||||
excerpt: Learn the basics of the destructuring assignment syntax in JavaScript ES6 and improve your code with this easy guide.
|
||||
firstSeen: 2021-02-01T11:00:00+02:00
|
||||
lastUpdated: 2021-06-12T19:30:41+03:00
|
||||
dateModified: 2021-06-12T19:30:41+03:00
|
||||
---
|
||||
|
||||
The destructuring assignment syntax, first introduced in JavaScript ES6, allows the **unpacking of values** from arrays and objects into distinct variables. While it might seem intimidating at first, it's actually quite easy to learn and use. Let's break it down into easier to understand cases.
|
||||
@ -2,12 +2,11 @@
|
||||
title: How do I empty an array in JavaScript?
|
||||
shortTitle: Empty an array
|
||||
type: question
|
||||
tags: javascript,array
|
||||
tags: [javascript,array]
|
||||
author: chalarangelo
|
||||
cover: coconuts
|
||||
excerpt: You can use a lot of different techniques to empty an array in JavaScript. See which ones best suits your needs with this quick guide.
|
||||
firstSeen: 2021-03-08T11:00:00+02:00
|
||||
lastUpdated: 2021-06-12T19:30:41+03:00
|
||||
dateModified: 2021-06-12T19:30:41+03:00
|
||||
---
|
||||
|
||||
When working with JavaScript arrays, a pretty common question is how does one empty an array and remove all its elements. As it turns out, there are a few ways you can go about this, each one with its pros and cons.
|
||||
@ -2,12 +2,11 @@
|
||||
title: What is the difference between encodeURI() and encodeURIComponent() in JavaScript?
|
||||
shortTitle: encodeURI() vs encodeURIComponent()
|
||||
type: question
|
||||
tags: javascript,browser
|
||||
tags: [javascript,browser]
|
||||
author: chalarangelo
|
||||
cover: laptop-view
|
||||
excerpt: JavaScript provides two methods for encoding characters to URL-safe strings. Do you know when to use each one?
|
||||
firstSeen: 2021-01-07T10:41:38+02:00
|
||||
lastUpdated: 2021-06-12T19:30:41+03:00
|
||||
dateModified: 2021-06-12T19:30:41+03:00
|
||||
---
|
||||
|
||||
### encodeURIComponent()
|
||||
@ -2,12 +2,11 @@
|
||||
title: How can I define an enum in JavaScript?
|
||||
shortTitle: Enum implementation
|
||||
type: question
|
||||
tags: javascript,object,class,symbol,generator
|
||||
tags: [javascript,object,class,symbol,generator]
|
||||
author: chalarangelo
|
||||
cover: book-chair
|
||||
excerpt: Enums are part of TypeScript, but what about defining enums in plain old JavaScript? Here are a few way you can do that.
|
||||
firstSeen: 2021-05-24T12:00:00+03:00
|
||||
lastUpdated: 2021-06-12T19:30:41+03:00
|
||||
dateModified: 2021-06-12T19:30:41+03:00
|
||||
---
|
||||
|
||||
TypeScript's enums are a very convenient feature present in many other languages. JavaScript, however, does not have a similar concept at this time. But what JavaScript lacks in syntactic sugar it makes up for in terms of flexibility.
|
||||
@ -2,12 +2,11 @@
|
||||
title: What is the difference between JavaScript's equality operators?
|
||||
shortTitle: JavaScript equality operators
|
||||
type: question
|
||||
tags: javascript,type,comparison
|
||||
tags: [javascript,type,comparison]
|
||||
author: chalarangelo
|
||||
cover: beach-pineapple
|
||||
excerpt: Learn all you need to know about the differences between JavaScript's double equals and triple equals operators.
|
||||
firstSeen: 2020-08-06T19:52:30+03:00
|
||||
lastUpdated: 2021-06-12T19:30:41+03:00
|
||||
dateModified: 2021-06-12T19:30:41+03:00
|
||||
---
|
||||
|
||||
JavaScript provides two equality operators used for comparisons:
|
||||
@ -2,12 +2,11 @@
|
||||
title: Understanding event bubbling, capturing and delegation in JavaScript
|
||||
shortTitle: Event bubbling, capturing and delegation
|
||||
type: story
|
||||
tags: javascript,browser,event
|
||||
tags: [javascript,browser,event]
|
||||
author: chalarangelo
|
||||
cover: fishermen
|
||||
excerpt: Understand how events work in JavaScript and learn when to use event bubbling, event capturing and event delegation with this short guide.
|
||||
firstSeen: 2020-08-10T15:00:48+03:00
|
||||
lastUpdated: 2021-06-12T19:30:41+03:00
|
||||
dateModified: 2021-06-12T19:30:41+03:00
|
||||
---
|
||||
|
||||
### Event bubbling
|
||||
@ -2,11 +2,11 @@
|
||||
title: What is the Event Loop in JavaScript?
|
||||
shortTitle: Event loop explained
|
||||
type: question
|
||||
tags: javascript,browser,event
|
||||
tags: [javascript,browser,event]
|
||||
author: chalarangelo
|
||||
cover: tranquility
|
||||
excerpt: The Event Loop is a source of confusion for many developers, but it's a fundamental piece of the JavaScript engine.
|
||||
firstSeen: 2022-08-21T05:00:00-04:00
|
||||
dateModified: 2022-08-21T05:00:00-04:00
|
||||
---
|
||||
|
||||
The Event Loop is a source of confusion for many developers, but it's a fundamental piece of the JavaScript engine. It's what allows JavaScript to be single-threaded, yet able to execute in a non-blocking fashion. To understand the Event Loop, we first need to explain a few things about the JavaScript engine, such as the Call Stack, Tasks, Microtasks and their respective Queues. Let's break them down one by one.
|
||||
@ -2,11 +2,11 @@
|
||||
title: Are JavaScript closures inherently evil?
|
||||
shortTitle: Closures and hidden state
|
||||
type: story
|
||||
tags: javascript,function,closure
|
||||
tags: [javascript,function,closure]
|
||||
author: chalarangelo
|
||||
cover: silver-flat-screen
|
||||
excerpt: Closures are used frequently, yet often misunderstood. Understanding them in depth is crucial to be able to write clean, maintainable code.
|
||||
firstSeen: 2022-05-18T05:00:00-04:00
|
||||
dateModified: 2022-05-18T05:00:00-04:00
|
||||
---
|
||||
|
||||
JavaScript closures are used frequently, yet often misunderstood. Understanding them in depth is crucial to be able to write clean, maintainable and bug-free code. We previously discussed what they are and how they work.
|
||||
@ -2,11 +2,11 @@
|
||||
title: What is the difference between an expression and a statement in JavaScript?
|
||||
shortTitle: Expressions and statements
|
||||
type: question
|
||||
tags: javascript,type
|
||||
tags: [javascript,type]
|
||||
author: chalarangelo
|
||||
cover: forest-balcony
|
||||
excerpt: JavaScript distinguishes expressions and statements. Learn their differences in this short article.
|
||||
firstSeen: 2021-11-07T05:00:00-04:00
|
||||
dateModified: 2021-11-07T05:00:00-04:00
|
||||
---
|
||||
|
||||
JavaScript distinguishes expressions and statements. An **expression** is any valid unit of code that resolves to a value. A **statement** is a unit of code that performs an action. Some examples:
|
||||
@ -2,12 +2,11 @@
|
||||
title: What is the difference between JavaScript's for...in, for...of and forEach?
|
||||
shortTitle: JavaScript iteration methods comparison
|
||||
type: question
|
||||
tags: javascript,array,object,iterator
|
||||
tags: [javascript,array,object,iterator]
|
||||
author: chalarangelo
|
||||
cover: lake-loop
|
||||
excerpt: Learn the differences between the three most commonly used iteration methods offered by JavaScript, which often confuse beginners and veterans alike.
|
||||
firstSeen: 2020-01-20T10:12:31+02:00
|
||||
lastUpdated: 2021-06-12T19:30:41+03:00
|
||||
dateModified: 2021-06-12T19:30:41+03:00
|
||||
---
|
||||
|
||||
`for...in` is used to iterate over all enumerable properties of an object, including inherited enumerable properties. This iteration statement can be used with arrays strings or plain objects, but not with `Map` or `Set` objects.
|
||||
@ -2,12 +2,11 @@
|
||||
title: "Tip: Use JavaScript for loops if you need to break out early"
|
||||
shortTitle: For loops for early breaking
|
||||
type: tip
|
||||
tags: javascript,array,loop
|
||||
tags: [javascript,array,loop]
|
||||
author: chalarangelo
|
||||
cover: armchair
|
||||
excerpt: JavaScript provides a handful of ways to iterate over data. While array methods are usually preferred, there are cases where a `for` loop is actually the best option.
|
||||
firstSeen: 2021-05-27T12:00:00+03:00
|
||||
lastUpdated: 2021-06-12T19:30:41+03:00
|
||||
dateModified: 2021-06-12T19:30:41+03:00
|
||||
---
|
||||
|
||||
The usefulness of the humble `for` loop in modern JavaScript is rarely talked about. Apart from it being particularly useful in [asynchronous operation scenarios](/blog/s/javascript-async-array-loops), it can also make your code a lot more performant shall you need to break out of a loop early. Consider the following example:
|
||||
@ -2,12 +2,11 @@
|
||||
title: JavaScript function methods - call(), apply() and bind()
|
||||
shortTitle: Function methods - call(), apply() and bind()
|
||||
type: story
|
||||
tags: javascript,function
|
||||
tags: [javascript,function]
|
||||
author: chalarangelo
|
||||
cover: canoe
|
||||
excerpt: Learn everything you need to know about JavaScript's `Function.prototype.call()`, `Function.prototype.apply()` and `Function.prototype.bind()` with this short guide.
|
||||
firstSeen: 2020-11-06T13:37:10+02:00
|
||||
lastUpdated: 2021-06-12T19:30:41+03:00
|
||||
dateModified: 2021-06-12T19:30:41+03:00
|
||||
---
|
||||
|
||||
### Function.prototype.call()
|
||||
@ -2,12 +2,11 @@
|
||||
title: Understanding higher-order functions in JavaScript
|
||||
shortTitle: Higher-order functions
|
||||
type: story
|
||||
tags: javascript,function
|
||||
tags: [javascript,function]
|
||||
author: chalarangelo
|
||||
cover: rock-climbing
|
||||
excerpt: Learn everything you need to know about higher-order functions with this short guide and level up your programming skills.
|
||||
firstSeen: 2020-09-24T12:54:08+03:00
|
||||
lastUpdated: 2021-11-07T16:34:37+03:00
|
||||
dateModified: 2021-11-07T16:34:37+03:00
|
||||
---
|
||||
|
||||
Higher-order functions are **functions that operate on other functions**, either by accepting them as arguments or by returning them as their results. This allows us to create an abstraction layer over actions, not just values.
|
||||
@ -2,12 +2,11 @@
|
||||
title: What is an IIFE in JavaScript?
|
||||
shortTitle: IIFE introduction
|
||||
type: question
|
||||
tags: javascript,function
|
||||
tags: [javascript,function]
|
||||
author: chalarangelo
|
||||
cover: tropical-waterfall
|
||||
excerpt: An Immediately Invoked Function Expression (IIFE) is a JavaScript trick that trips up many developers. Here's what you need to know.
|
||||
firstSeen: 2021-06-12T19:30:41+03:00
|
||||
lastUpdated: 2021-06-14T12:00:00+03:00
|
||||
dateModified: 2021-06-14T12:00:00+03:00
|
||||
---
|
||||
|
||||
An **Immediately Invoked Function Expression** (IIFE for short) is a JavaScript function that is immediately invoked as soon as it's evaluated by the JavaScript runtime. Here's what it looks like alongside a roughly equivalent piece of code:
|
||||
@ -2,11 +2,11 @@
|
||||
title: "Tip: Get the index of an array item in a JavaScript for...of loop"
|
||||
shortTitle: Array index in for...of loops
|
||||
type: tip
|
||||
tags: javascript,array,iterator
|
||||
tags: [javascript,array,iterator]
|
||||
author: chalarangelo
|
||||
cover: cave-view
|
||||
excerpt: Did you know you can get the index of an array item in a JavaScript for...of loop? Learn how with this bite-sized tip.
|
||||
firstSeen: 2021-07-25T05:00:00-04:00
|
||||
dateModified: 2021-07-25T05:00:00-04:00
|
||||
---
|
||||
|
||||
JavaScript's `for...of` loops provide an easy way to iterate over all kinds of iterables from arrays and stings to `Map` and `Set` objects. One supposed limitation over other options (e.g. `Array.prototype.forEach()`) is that you only get the value of each item in the iterable. But that is not necessarily the case, as you can easily leverage `Array.prototype.entries()` to get both the index and value of each array item:
|
||||
@ -2,12 +2,11 @@
|
||||
title: How do I convert an iterable to an array in JavaScript?
|
||||
shortTitle: Iterable to array
|
||||
type: question
|
||||
tags: javascript,object,array,string
|
||||
tags: [javascript,object,array,string]
|
||||
author: chalarangelo
|
||||
cover: waves
|
||||
excerpt: Learn how to use the JavaScript ES6 spread syntax to converting iterables to arrays and level up your code today.
|
||||
firstSeen: 2020-08-04T14:18:09+03:00
|
||||
lastUpdated: 2021-06-12T19:30:41+03:00
|
||||
dateModified: 2021-06-12T19:30:41+03:00
|
||||
---
|
||||
|
||||
JavaScript ES6 introduced, among many other things, the [spread operator (`...`)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax), which allows an iterable to be expanded in places where zero or more arguments or elements are expected.
|
||||
@ -2,12 +2,11 @@
|
||||
title: What are JavaScript Iterators and where can I use them?
|
||||
shortTitle: JavaScript iterators introduction
|
||||
type: question
|
||||
tags: javascript,array,object,iterator
|
||||
tags: [javascript,array,object,iterator]
|
||||
author: chalarangelo
|
||||
cover: balloons
|
||||
excerpt: Learn how the new JavaScript ES6 Iterators work and how you can use them to level up your programming projects by understanding these short code examples.
|
||||
firstSeen: 2020-02-16T13:09:20+02:00
|
||||
lastUpdated: 2021-09-26T13:20:57+03:00
|
||||
dateModified: 2021-09-26T13:20:57+03:00
|
||||
---
|
||||
|
||||
JavaScript iterators were introduced in ES6 and they are used to loop over a sequence of values, usually some sort of collection. By definition, an iterator must implement a `next()` function, that returns an object in the form of `{ value, done }` where `value` is the next value in the iteration sequence and `done` is a boolean determining if the sequence has already been consumed.
|
||||
@ -2,11 +2,11 @@
|
||||
title: "Tip: Serialize specific properties from a JSON object"
|
||||
shortTitle: Selective property serialization
|
||||
type: tip
|
||||
tags: javascript,object,json
|
||||
tags: [javascript,object,json]
|
||||
author: chalarangelo
|
||||
cover: coffee-drip
|
||||
excerpt: Have you ever wanted to serialize an object but only include certain keys? Turns out JavaScript provides an easy way to do this!
|
||||
firstSeen: 2021-07-06T05:00:00-04:00
|
||||
dateModified: 2021-07-06T05:00:00-04:00
|
||||
---
|
||||
|
||||
The default behavior for `JSON.stringify()` is to pull all serializable properties from the given object. However, there are many scenarios where you might want to pick a specific subset of keys from an object. This problem is handled by the second argument of `JSON.stringify()` by passing it either an array of keys or a replacer function.
|
||||
@ -2,11 +2,10 @@
|
||||
title: How can I execute an event handler at most once?
|
||||
shortTitle: Execute event handler only once
|
||||
type: question
|
||||
tags: javascript,browser,event
|
||||
tags: [javascript,browser,event]
|
||||
cover: dog-waiting
|
||||
excerpt: Learn how to attach an event handler to events that is executed at most once in this JavaScript article.
|
||||
firstSeen: 2020-08-12T11:21:48+03:00
|
||||
lastUpdated: 2021-06-12T19:30:41+03:00
|
||||
dateModified: 2021-06-12T19:30:41+03:00
|
||||
---
|
||||
|
||||
### jQuery
|
||||
@ -2,12 +2,11 @@
|
||||
title: "Tip: Make any JavaScript value iterable"
|
||||
shortTitle: Make any value iterable
|
||||
type: tip
|
||||
tags: javascript,array,iterator,generator
|
||||
tags: [javascript,array,iterator,generator]
|
||||
author: chalarangelo
|
||||
cover: colorful-plastic
|
||||
excerpt: Did you know you can define an iterator for any JavaScript value? This quick tip will show you how.
|
||||
firstSeen: 2021-06-10T12:00:00+03:00
|
||||
lastUpdated: 2021-06-12T19:30:41+03:00
|
||||
dateModified: 2021-06-12T19:30:41+03:00
|
||||
---
|
||||
|
||||
JavaScript's `Symbol.iterator` is a very powerful tool that every web developer should learn how to use. It allows you to define and customize the way a value is iterated, effectively allowing you to make any value iterable. You can easily apply this knowledge to plain JavaScript objects and even classes.
|
||||
@ -2,12 +2,11 @@
|
||||
title: Where and how can I use memoization in JavaScript?
|
||||
shortTitle: Memoization introduction
|
||||
type: question
|
||||
tags: javascript,function,memoization
|
||||
tags: [javascript,function,memoization]
|
||||
author: chalarangelo
|
||||
cover: cherry-trees
|
||||
excerpt: Learn different ways to memoize function calls in JavaScript as well as when to use memoization to get the best performance results.
|
||||
firstSeen: 2020-02-27T16:23:25+02:00
|
||||
lastUpdated: 2021-11-07T16:34:37+03:00
|
||||
dateModified: 2021-11-07T16:34:37+03:00
|
||||
---
|
||||
|
||||
Memoization is a commonly used technique that can help speed up your code significantly. This technique relies on a **cache** to store results for previously completed units of work. The purpose of the cache is to **avoid performing the same work more than once**, speeding up subsequent calls of time-consuming functions. Based on this definition, we can easily extract some criteria that can help us decide when to use memoization in our code:
|
||||
@ -2,12 +2,11 @@
|
||||
title: How do I merge two arrays in JavaScript?
|
||||
shortTitle: Merge arrays
|
||||
type: question
|
||||
tags: javascript,array
|
||||
tags: [javascript,array]
|
||||
author: chalarangelo
|
||||
cover: arrays
|
||||
excerpt: Arrays are one of the most used data types in any programming language. Learn how to merge two arrays in JavaScript with this short guide.
|
||||
firstSeen: 2020-08-04T13:25:38+03:00
|
||||
lastUpdated: 2021-06-12T19:30:41+03:00
|
||||
dateModified: 2021-06-12T19:30:41+03:00
|
||||
---
|
||||
|
||||
### Spread operator
|
||||
@ -2,12 +2,11 @@
|
||||
title: How do I use JavaScript to modify the URL without reloading the page?
|
||||
shortTitle: Modify URL without reloading
|
||||
type: question
|
||||
tags: javascript,browser
|
||||
tags: [javascript,browser]
|
||||
author: chalarangelo
|
||||
cover: compass
|
||||
excerpt: Learn all of the options JavaScript provides for modifying the URL of the current page in the browser without reloading the page.
|
||||
firstSeen: 2020-03-27T13:48:27+02:00
|
||||
lastUpdated: 2021-09-27T16:47:49+03:00
|
||||
dateModified: 2021-09-27T16:47:49+03:00
|
||||
---
|
||||
|
||||
### Using the History API
|
||||
@ -1,12 +1,11 @@
|
||||
---
|
||||
title: JavaScript modules Cheat Sheet
|
||||
type: cheatsheet
|
||||
tags: javascript,cheatsheet
|
||||
tags: [javascript,cheatsheet]
|
||||
author: chalarangelo
|
||||
cover: mountain-lake-2
|
||||
excerpt: Learn everything you need to know about JavaScript modules with this handy cheatsheet.
|
||||
firstSeen: 2020-08-04T19:41:35+03:00
|
||||
lastUpdated: 2021-06-12T19:30:41+03:00
|
||||
dateModified: 2021-06-12T19:30:41+03:00
|
||||
---
|
||||
|
||||
### Named exports
|
||||
@ -2,12 +2,11 @@
|
||||
title: JavaScript naming conventions
|
||||
shortTitle: Naming conventions
|
||||
type: story
|
||||
tags: javascript,variable,cheatsheet
|
||||
tags: [javascript,variable,cheatsheet]
|
||||
author: chalarangelo
|
||||
cover: naming-conventions
|
||||
excerpt: Naming conventions, while not easy to enforce, make code easier to read and understand. Learn how to name your variables in JavaScript with this handy guide.
|
||||
firstSeen: 2020-05-20T02:32:10+03:00
|
||||
lastUpdated: 2021-06-12T19:30:41+03:00
|
||||
dateModified: 2021-06-12T19:30:41+03:00
|
||||
---
|
||||
|
||||
### Variables
|
||||
@ -2,12 +2,11 @@
|
||||
title: How can I use optional chaining and nullish coalescing in my JavaScript project?
|
||||
shortTitle: Optional chaining and nullish coalescing
|
||||
type: question
|
||||
tags: javascript,type
|
||||
tags: [javascript,type]
|
||||
author: chalarangelo
|
||||
cover: purple-leaves
|
||||
excerpt: JavaScript ES2020 introduced optional chaining and nullish coalescing among other features. Learn everything you need to know with this quick guide.
|
||||
firstSeen: 2020-08-19T15:37:22+03:00
|
||||
lastUpdated: 2021-06-12T19:30:41+03:00
|
||||
dateModified: 2021-06-12T19:30:41+03:00
|
||||
---
|
||||
|
||||
JavaScript ES2020 introduced some new features that help us write cleaner code. Let's take a quick look at two of them that aim to make working with objects and variables a lot easier.
|
||||
@ -2,11 +2,11 @@
|
||||
title: JavaScript's numeric separators explained
|
||||
shortTitle: Numeric separators explained
|
||||
type: story
|
||||
tags: javascript,math,type
|
||||
tags: [javascript,math,type]
|
||||
author: chalarangelo
|
||||
cover: coffee-drip
|
||||
excerpt: Numeric separators are a somewhat lesser-known JavaScript syntactic sugar that can make working with large constants a lot easier.
|
||||
firstSeen: 2021-06-27T05:00:00-04:00
|
||||
dateModified: 2021-06-27T05:00:00-04:00
|
||||
---
|
||||
|
||||
Numeric separators are a lesser-known JavaScript syntactic sugar that can make working with numeric constants a lot easier. The long and short of it is that you can add underscores (`_`) to numeric values to make them more readable.
|
||||
@ -2,12 +2,11 @@
|
||||
title: Can I use an object as an array without modifying it in JavaScript?
|
||||
shortTitle: Object as array
|
||||
type: question
|
||||
tags: javascript,object,array,proxy,iterator,pattern
|
||||
tags: [javascript,object,array,proxy,iterator,pattern]
|
||||
author: chalarangelo
|
||||
cover: birds
|
||||
excerpt: Learn how you can leverage the Proxy object to use a JavaScript object the same way as you would use a regular array.
|
||||
firstSeen: 2021-05-03T12:00:00+03:00
|
||||
lastUpdated: 2021-09-27T16:42:11+03:00
|
||||
dateModified: 2021-09-27T16:42:11+03:00
|
||||
---
|
||||
|
||||
The other day, I stumbled upon some code where I needed to handle an object as a regular array a few times. This was, of course, achievable using `Object.keys()`, `Object.values()` or `Object.entries()`, but it started getting verbose real quick.
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user