Merge pull request #16 from 30-seconds/redate
This commit is contained in:
Angelos Chalaris
GitHub
14
.github/config.yml
vendored
14
.github/config.yml
vendored
@ -1,14 +0,0 @@
|
||||
# Configuration for request-info - https://github.com/behaviorbot/request-info
|
||||
|
||||
# *Required* Comment to reply with
|
||||
requestInfoReplyComment: >
|
||||
We would appreciate it if you could provide us with some more information about this issue/PR!
|
||||
|
||||
# *OPTIONAL* default titles to check against for lack of descriptiveness
|
||||
# MUST BE ALL LOWERCASE
|
||||
requestInfoDefaultTitles:
|
||||
- update readme.md
|
||||
- updates
|
||||
|
||||
# *OPTIONAL* Label to be added to Issues and Pull Requests with insufficient information given
|
||||
requestInfoLabelToAdd: needs-more-info
|
||||
35
.github/lock.yml
vendored
35
.github/lock.yml
vendored
@ -1,35 +0,0 @@
|
||||
# Configuration for Lock Threads - https://github.com/dessant/lock-threads
|
||||
|
||||
# Number of days of inactivity before a closed issue or pull request is locked
|
||||
daysUntilLock: 60
|
||||
|
||||
# Skip issues and pull requests created before a given timestamp. Timestamp must
|
||||
# follow ISO 8601 (`YYYY-MM-DD`). Set to `false` to disable
|
||||
skipCreatedBefore: false
|
||||
|
||||
# Issues and pull requests with these labels will be ignored. Set to `[]` to disable
|
||||
exemptLabels: []
|
||||
|
||||
# Label to add before locking, such as `outdated`. Set to `false` to disable
|
||||
lockLabel: false
|
||||
|
||||
# Comment to post before locking. Set to `false` to disable
|
||||
lockComment: false
|
||||
|
||||
# Assign `resolved` as the reason for locking. Set to `false` to disable
|
||||
setLockReason: true
|
||||
|
||||
# Limit to only `issues` or `pulls`
|
||||
# only: issues
|
||||
|
||||
# Optionally, specify configuration settings just for `issues` or `pulls`
|
||||
# issues:
|
||||
# exemptLabels:
|
||||
# - help-wanted
|
||||
# lockLabel: outdated
|
||||
|
||||
# pulls:
|
||||
# daysUntilLock: 30
|
||||
|
||||
# Repository to extend settings from
|
||||
# _extends: repo
|
||||
18
.github/stale.yml
vendored
18
.github/stale.yml
vendored
@ -1,18 +0,0 @@
|
||||
# Number of days of inactivity before an issue becomes stale
|
||||
daysUntilStale: 21
|
||||
# Number of days of inactivity before a stale issue is closed
|
||||
daysUntilClose: 7
|
||||
# Issues with these labels will never be considered stale
|
||||
exemptLabels:
|
||||
- not-stale
|
||||
- pinned
|
||||
- security
|
||||
# Label to use when marking an issue as stale
|
||||
staleLabel: false
|
||||
# Comment to post when marking an issue as stale. Set to `false` to disable
|
||||
markComment: >
|
||||
This issue has been automatically marked as stale because it has not had
|
||||
recent activity. It will be closed if no further activity occurs. Thank you
|
||||
for your contributions.
|
||||
# Comment to post when closing a stale issue. Set to `false` to disable
|
||||
closeComment: false
|
||||
@ -2,20 +2,10 @@
|
||||
|
||||
**30 seconds of code** is powered by the community, so feel free to contribute in any way you can to help us!
|
||||
|
||||
## Tools
|
||||
|
||||
Before you begin contributing, you should install the integration-tools globally on your machine:
|
||||
|
||||
```sh
|
||||
npm install -g @30-seconds/integration-tools
|
||||
```
|
||||
|
||||
This will allow you to use our customized tools for all of our content repositories.
|
||||
|
||||
## How you can help
|
||||
|
||||
- Submit pull requests with new snippets (see guidelines below) or snippet updates (tags, descriptions, explanations, typos, examples, code improvements).
|
||||
- Open issues for things you want to see added, modified, discuss ideas or help out with existing issues.
|
||||
- Open issues for things you want to see added, modified, discuss ideas or help out with existing issues.
|
||||
|
||||
## Ground rules
|
||||
|
||||
@ -23,30 +13,28 @@ Breaking any of these rules will result in your pull request being closed. Pleas
|
||||
|
||||
- **Always be polite and respectful to others** and try to follow the advice of the moderators/collaborators/owners.
|
||||
- **Only modify snippet files**, never modify the generated files in the `blog_data` directory, except for the `blog_authors.json` file.
|
||||
- **Use the integration tools commands** to generate new snippets, ensuring they have the correct name and are in the correct location.
|
||||
- **Use the snippet template** to create new snippets, ensure they have the correct name and are in the correct location.
|
||||
- **Follow snippet format exactly**, otherwise your snippets will not be recognized correctly by the tools responsible for publishing them on the website. This includes such things as spacing and empty lines - if you accidentally make a mistake, consult the repository's [snippet template](snippet-template.md).
|
||||
- **Snippets should solve real-world problems**, no matter how simple and should be abstract enough to be applied to different scenarios.
|
||||
|
||||
## Snippet creation
|
||||
|
||||
After installing the integration tools, you can run the following command:
|
||||
In order to create a new snippet, you should follow the steps below:
|
||||
|
||||
```sh
|
||||
create-new-snippet <my-snippet-name>
|
||||
```
|
||||
|
||||
Replace `<my-snippet-name>` with the name of the snippet you are adding.
|
||||
- Crate a copy of the [snippet template](snippet-template.md) in the `blog_posts` directory.
|
||||
- Change the name of the newly created file to the name of your snippet.
|
||||
- Edit the file, adding your snippet based on the guidelines.
|
||||
|
||||
## Snippet guidelines
|
||||
|
||||
- Snippets must have all their frontmatter sections (title, tags etc.) filled.
|
||||
- Snippet filenames must roughly correspond to the snippet title and be in `kebab-case`.
|
||||
- Snippet types must be one of the following: `story`, `list` or `question`.
|
||||
- Snippet titles must be short enough and correspond to the type of the snippet. Titles for each type must follow the format of previous snippets (e.g. `The trickiest thing about X` for a story, `X things that are awesome` for a list, `How do I do X in Y?` for a question).
|
||||
- Snippet types must be one of the following: `story`, `list` or `question`.
|
||||
- Snippet types must be one of the following: `story`, `list`, `tip`, `cheatsheet` or `question`.
|
||||
- Snippet tags must be comma-separated. You are allowed to specify a single language tag (e.g. `react` or `javascript`), preferably as the first tag.
|
||||
- Snippets must have their `firstSeen` dates formatted using [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601).
|
||||
- Snippet authors must be comma-separated and should be added in JSON format as seen in `blog_data/blog_authors.json`.
|
||||
- Snippet covers must be added inside the `blog_images` directory and have the exact same name as the snippet filename. Snippet covers must be Unsplash images of appropriate theme and content and must be credited accordingly at the end of the snippet.
|
||||
- Snippet covers must be added inside the `blog_images` directory and have the exact same name as the snippet filename. Snippet covers must be Unsplash images of appropriate theme and content and their links must be provided as part of the PR, so that they can be added to the appropriate collection.
|
||||
- Snippet excerpts must be a very short description of the snippet's content, up to 180 characters in length. The excerpt must contain some of the main keywords and a general intro to the snippet, as it will be used for social sharing and previewing the snippet itself.
|
||||
- Snippets that are of the `list` type must be written as such, check previously submitted snippets for more details.
|
||||
- Snippet code and examples must be enclosed in appropriate, language-tagged blocks, be short and use modern techniques and features. Also make sure to test your code before submitting. Always use soft tabs (2 spaces), never hard tabs.
|
||||
|
||||
24
README.md
24
README.md
@ -1,25 +1,25 @@
|
||||
[](https://30secondsofcode.org/blog/p/1)
|
||||
|
||||
# 30 seconds blog
|
||||
# 30 seconds of code
|
||||
|
||||
> The official 30-seconds blog
|
||||
> Code articles for all your development needs
|
||||
|
||||
* Visit [our website](https://30secondsofcode.org) to view our snippet collection and blog.
|
||||
* Use the [Search page](https://30secondsofcode.org/search) to find snippets and blog posts that suit your needs. You can search by pretty much anything. Just start typing a term and see what comes up.
|
||||
* Browse the [Blog](https://30secondsofcode.org/blog/p/1) to see all the blog posts we have published.
|
||||
* Click on each blog post card to view the whole blog post.
|
||||
* Visit [our website](https://30secondsofcode.org) to view our snippet and article collections.
|
||||
* Use the [Search page](https://30secondsofcode.org/search) to find snippets and articles that suit your needs. You can search by pretty much anything. Just start typing a term and see what comes up.
|
||||
* Browse the [Articles collection](https://30secondsofcode.org/articles/p/1) to see all the articles we have published.
|
||||
* Click on each article card to view the whole article.
|
||||
* If you like the project, give it a star. It means a lot to the people maintaining it.
|
||||
|
||||
## Want to contribute?
|
||||
|
||||
* If you want to help us improve, take a minute to read the [Contribution Guidelines](/CONTRIBUTING.md) first.
|
||||
* Use the [Blog Post Template](/snippet-template.md) to add new blog posts to the collection.
|
||||
* If you find a problem with a specific blog post, please [open an issue](https://github.com/30-seconds/30-seconds-blog/issues/new).
|
||||
* Use the [Article Template](/snippet-template.md) to add new articles to the collection.
|
||||
* If you find a problem with a specific article, please [open an issue](https://github.com/30-seconds/30-seconds-blog/issues/new).
|
||||
* If you find a problem with the website, please [report it in the web repository](https://github.com/30-seconds/30-seconds-web/issues/new).
|
||||
|
||||
## Credits & Sponsors
|
||||
## Credits
|
||||
|
||||
* This repository is maintained by the [30-seconds organization on GitHub](https://github.com/30-seconds).
|
||||
* This repository is maintained by the [30 seconds of code organization on GitHub](https://github.com/30-seconds).
|
||||
* All snippets are licensed under the CC0-1.0 License, unless explicitly stated otherwise.
|
||||
* Logos, names and trademarks are not to be used without the explicit consent of the maintainers or owners of the 30 seconds GitHub organization.
|
||||
* Our website is powered by [Netlify](https://www.netlify.com/), [Gatsby](https://www.gatsbyjs.org/), [Travis CI](https://travis-ci.com/) & [GitHub](https://github.com/).
|
||||
* Logos, names and trademarks are not to be used without the explicit consent of the owners of the 30 seconds of code GitHub organization.
|
||||
* Our website is powered by [Netlify](https://www.netlify.com/), [Next.js](https://nextjs.org/) & [GitHub](https://github.com/).
|
||||
|
||||
@ -5,6 +5,8 @@ tags: devtools,vscode
|
||||
authors: chalarangelo
|
||||
cover: blog_images/computer-screens.jpg
|
||||
excerpt: VS Code is steadily gaining popularity among developers. Here are 10 essential extensions for JavaScript developers that aim to increase your productivity.
|
||||
firstSeen: 2019-12-23T10:41:56+02:00
|
||||
lastUpdated: 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:
|
||||
|
||||
@ -5,6 +5,8 @@ tags: css,visual
|
||||
authors: chalarangelo
|
||||
cover: blog_images/colors-mural.jpg
|
||||
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
|
||||
---
|
||||
|
||||
[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:
|
||||
|
||||
@ -5,6 +5,8 @@ tags: javascript,array,cheatsheet
|
||||
authors: chalarangelo
|
||||
cover: blog_images/arrays.jpg
|
||||
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
|
||||
---
|
||||
|
||||
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:
|
||||
|
||||
@ -5,6 +5,8 @@ tags: seo,webdev
|
||||
authors: chalarangelo
|
||||
cover: blog_images/sunrise-over-city.jpg
|
||||
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
|
||||
---
|
||||
|
||||
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:
|
||||
|
||||
@ -6,6 +6,8 @@ authors: chalarangelo
|
||||
cover: blog_images/keyboard-tea.jpg
|
||||
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
|
||||
---
|
||||
|
||||
Writing good code is only part of the job. Here are 5 tips to improve your pull requests and help people review them:
|
||||
|
||||
@ -5,6 +5,8 @@ tags: javascript,string,regexp
|
||||
authors: chalarangelo
|
||||
cover: blog_images/taking-photos.jpg
|
||||
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
|
||||
---
|
||||
|
||||
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:
|
||||
|
||||
@ -6,6 +6,8 @@ authors: fejes713
|
||||
cover: blog_images/golden-gate-bridge.jpg
|
||||
excerpt: Many developers find onboarding experience worrisome. Here are 6 helpful tips to make your onboarding experience a pleasant one.
|
||||
unlisted: true
|
||||
firstSeen: 2020-05-03T16:00:59+03:00
|
||||
lastUpdated: 2021-06-12T19:30:41+03:00
|
||||
---
|
||||
|
||||
Many developers find onboarding experience worrisome. Here are 6 helpful tips to make your onboarding experience a pleasant one:
|
||||
|
||||
@ -5,6 +5,8 @@ tags: devtools,webdev
|
||||
authors: chalarangelo
|
||||
cover: blog_images/computer-screens.jpg
|
||||
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.
|
||||
firstSeen: 2020-03-18T12:37:31+02:00
|
||||
lastUpdated: 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:
|
||||
|
||||
@ -5,6 +5,8 @@ tags: javascript,accessibility,webdev
|
||||
authors: chalarangelo
|
||||
cover: blog_images/accessibility.jpg
|
||||
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
|
||||
---
|
||||
|
||||
1. Use semantic HTML
|
||||
|
||||
@ -6,6 +6,8 @@ authors: chalarangelo
|
||||
cover: blog_images/kettle-laptop.jpg
|
||||
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
|
||||
---
|
||||
|
||||
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:
|
||||
|
||||
@ -5,6 +5,8 @@ tags: javascript,function,promise
|
||||
authors: chalarangelo
|
||||
cover: blog_images/green-plant.jpg
|
||||
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
|
||||
---
|
||||
|
||||
### Promise basics
|
||||
|
||||
@ -5,6 +5,8 @@ tags: career,webdev,programming,jobs
|
||||
authors: chalarangelo
|
||||
cover: blog_images/laptop-view.jpg
|
||||
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: 2021-06-12T19:30:41+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 excerise 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?
|
||||
|
||||
@ -5,6 +5,8 @@ tags: react,debugging
|
||||
authors: chalarangelo
|
||||
cover: blog_images/broken-screen.jpg
|
||||
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-06-12T19:30:41+03:00
|
||||
---
|
||||
|
||||
I am by no means an expert React engineer, but I have a couple years of experience under my belt. While React is an extremely powerful library for building user interfaces, it is also quite fragile at places. A very common bug I have encountered is caused by direct DOM manipulation in combination with React. This is not exactly an anti-pattern, but under the right circumstances it can break your entire React application and might be hard to debug.
|
||||
|
||||
@ -5,6 +5,8 @@ tags: javascript,array,object,iterator
|
||||
authors: chalarangelo
|
||||
cover: blog_images/case-study.jpg
|
||||
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
|
||||
---
|
||||
|
||||
### For loops
|
||||
|
||||
@ -5,6 +5,8 @@ tags: javascript,recursion,performance
|
||||
authors: chalarangelo
|
||||
cover: blog_images/case-study.jpg
|
||||
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
|
||||
---
|
||||
|
||||
### Recursive functions
|
||||
|
||||
@ -5,6 +5,8 @@ tags: python,list,performance
|
||||
authors: maciv,chalarangelo
|
||||
cover: blog_images/walking-on-top.jpg
|
||||
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-06-12T19:30:41+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.
|
||||
|
||||
@ -5,6 +5,8 @@ tags: javascript,browser,cheatsheet
|
||||
authors: chalarangelo
|
||||
cover: blog_images/terminal.jpg
|
||||
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
|
||||
---
|
||||
|
||||
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()`.
|
||||
|
||||
@ -5,6 +5,8 @@ tags: javascript,browser,webdev
|
||||
authors: chalarangelo
|
||||
cover: blog_images/three-vases.jpg
|
||||
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
|
||||
---
|
||||
|
||||
### Cookies
|
||||
|
||||
@ -5,6 +5,8 @@ tags: javascript,browser
|
||||
authors: chalarangelo
|
||||
cover: blog_images/typing.jpg
|
||||
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: 2021-06-12T19:30:41+03:00
|
||||
---
|
||||
|
||||
### Core functionality
|
||||
|
||||
@ -5,6 +5,8 @@ tags: css,layout
|
||||
authors: chalarangelo
|
||||
cover: blog_images/mountain-lake.jpg
|
||||
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-06-12T19:30:41+03:00
|
||||
---
|
||||
|
||||
### Flexbox
|
||||
|
||||
@ -5,6 +5,8 @@ tags: css,animation
|
||||
authors: chalarangelo
|
||||
cover: blog_images/curve.jpg
|
||||
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
|
||||
---
|
||||
|
||||
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.
|
||||
|
||||
@ -5,6 +5,8 @@ tags: css,webdev
|
||||
authors: chalarangelo
|
||||
cover: blog_images/orange-flower.jpg
|
||||
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-06-12T19:30:41+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.
|
||||
|
||||
@ -5,6 +5,8 @@ tags: css,layout,cheatsheet
|
||||
authors: chalarangelo
|
||||
cover: blog_images/measuring.jpg
|
||||
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
|
||||
---
|
||||
|
||||
- `px`: Absolute pixel value
|
||||
|
||||
@ -5,6 +5,8 @@ tags: css,visual,layout
|
||||
authors: chalarangelo
|
||||
cover: blog_images/css-variables.jpg
|
||||
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-06-12T19:30:41+03:00
|
||||
---
|
||||
|
||||
CSS variables (officially called CSS custom properties) behave much like variables in other languages, allowing you to define named variables that contain specific values to be reused within the CSS document. They are defined using the custom property notation, which always start with two dashes (e.g. `--my-color: black;`) and are accessed using the `var()` function (e.g. `color: var(--my-color);`). Custom properties are exceptionally useful for sharing styles between different elements and components (e.g. vertical rhythm, typography variables, color palettes etc.).
|
||||
|
||||
@ -5,6 +5,8 @@ tags: webdev,html,browser
|
||||
authors: chalarangelo
|
||||
cover: blog_images/hard-disk.jpg
|
||||
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
|
||||
---
|
||||
|
||||
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:
|
||||
|
||||
@ -5,6 +5,8 @@ tags: javascript,browser,event
|
||||
authors: chalarangelo
|
||||
cover: blog_images/keyboard.jpg
|
||||
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
|
||||
---
|
||||
|
||||
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:
|
||||
|
||||
@ -5,6 +5,8 @@ tags: javascript,array,iterator,eslint
|
||||
authors: chalarangelo
|
||||
cover: blog_images/typing.jpg
|
||||
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
|
||||
---
|
||||
|
||||
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:
|
||||
|
||||
@ -5,6 +5,8 @@ tags: css,layout,flexbox,cheatsheet
|
||||
authors: chalarangelo
|
||||
cover: blog_images/frames.jpg
|
||||
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
|
||||
---
|
||||
|
||||
### Container
|
||||
|
||||
@ -5,6 +5,8 @@ tags: git,configuration,cheatsheet
|
||||
authors: chalarangelo
|
||||
cover: blog_images/organizer.jpg
|
||||
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
|
||||
---
|
||||
|
||||
### Creating aliases
|
||||
|
||||
@ -5,6 +5,8 @@ tags: git,commit
|
||||
authors: chalarangelo
|
||||
cover: blog_images/ice.jpg
|
||||
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
|
||||
---
|
||||
|
||||
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`:
|
||||
|
||||
@ -5,6 +5,8 @@ tags: git,github,programming,webdev
|
||||
authors: chalarangelo
|
||||
cover: blog_images/book-chair.jpg
|
||||
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
|
||||
---
|
||||
|
||||
You can add multiple authors to a git commit, by adding one or more `Co-authored-by` trailers to the commit's message:
|
||||
|
||||
@ -5,6 +5,8 @@ tags: webdev,http
|
||||
authors: chalarangelo
|
||||
cover: blog_images/lake-runner.jpg
|
||||
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
|
||||
---
|
||||
|
||||
### 1xx - Informational
|
||||
|
||||
@ -5,6 +5,8 @@ tags: javascript,array,comparison
|
||||
authors: chalarangelo
|
||||
cover: blog_images/coconuts.jpg
|
||||
excerpt: Learn how you can compare two arrays in JavaScript using various different techniques.
|
||||
firstSeen: 2020-08-07T14:23:14+03:00
|
||||
lastUpdated: 2021-06-12T19:30:41+03:00
|
||||
---
|
||||
|
||||
### Equality comparison
|
||||
|
||||
@ -5,6 +5,8 @@ tags: javascript,browser,event,function
|
||||
authors: chalarangelo
|
||||
cover: blog_images/arrow-functions.jpg
|
||||
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
|
||||
---
|
||||
|
||||
### Arrow functions
|
||||
|
||||
@ -5,6 +5,8 @@ tags: javascript,function
|
||||
authors: chalarangelo
|
||||
cover: blog_images/arrow-functions.jpg
|
||||
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
|
||||
---
|
||||
|
||||
### Syntax
|
||||
|
||||
@ -5,6 +5,8 @@ tags: javascript,array,function,promise
|
||||
authors: chalarangelo
|
||||
cover: blog_images/sunflowers.jpg
|
||||
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
|
||||
---
|
||||
|
||||
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.
|
||||
|
||||
@ -5,6 +5,8 @@ tags: javascript,promise,timeout,class
|
||||
authors: chalarangelo
|
||||
cover: blog_images/walking.jpg
|
||||
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
|
||||
---
|
||||
|
||||
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:
|
||||
|
||||
@ -5,6 +5,8 @@ tags: javascript,function,type
|
||||
authors: chalarangelo
|
||||
cover: blog_images/rocky-lake.jpg
|
||||
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
|
||||
---
|
||||
|
||||
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.
|
||||
|
||||
@ -5,6 +5,8 @@ tags: javascript,function,closure
|
||||
authors: chalarangelo
|
||||
cover: blog_images/cherry-trees.jpg
|
||||
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
|
||||
---
|
||||
|
||||
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:
|
||||
|
||||
@ -5,6 +5,8 @@ tags: javascript,array
|
||||
authors: chalarangelo
|
||||
cover: blog_images/colorful-plastic.jpg
|
||||
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
|
||||
---
|
||||
|
||||
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.
|
||||
|
||||
@ -5,6 +5,8 @@ tags: javascript,object
|
||||
authors: chalarangelo
|
||||
cover: blog_images/frozen-globe.jpg
|
||||
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
|
||||
---
|
||||
|
||||
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:
|
||||
|
||||
@ -5,6 +5,8 @@ tags: javascript,array,object
|
||||
authors: chalarangelo
|
||||
cover: blog_images/building-blocks.jpg
|
||||
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
|
||||
---
|
||||
|
||||
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.
|
||||
|
||||
@ -5,6 +5,8 @@ tags: javascript,array
|
||||
authors: chalarangelo
|
||||
cover: blog_images/coconuts.jpg
|
||||
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
|
||||
---
|
||||
|
||||
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.
|
||||
|
||||
@ -5,6 +5,8 @@ tags: javascript,browser
|
||||
authors: chalarangelo
|
||||
cover: blog_images/laptop-view.jpg
|
||||
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
|
||||
---
|
||||
|
||||
### encodeURIComponent()
|
||||
|
||||
@ -5,6 +5,8 @@ tags: javascript,object,class,symbol,generator
|
||||
authors: chalarangelo
|
||||
cover: blog_images/book-chair.jpg
|
||||
excerpt: Enums are part of TypeScript, but what about defininf 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
|
||||
---
|
||||
|
||||
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.
|
||||
|
||||
@ -5,6 +5,8 @@ tags: javascript,type,comparison
|
||||
authors: chalarangelo
|
||||
cover: blog_images/beach-pineapple.jpg
|
||||
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
|
||||
---
|
||||
|
||||
JavaScript provides two equality operators used for comparisons:
|
||||
|
||||
@ -5,6 +5,8 @@ tags: javascript,browser,event
|
||||
authors: chalarangelo
|
||||
cover: blog_images/fishermen.jpg
|
||||
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
|
||||
---
|
||||
|
||||
### Event bubbling
|
||||
|
||||
@ -5,6 +5,8 @@ tags: javascript,array,object,iterator
|
||||
authors: chalarangelo
|
||||
cover: blog_images/lake-loop.jpg
|
||||
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
|
||||
---
|
||||
|
||||
`for...in` is used to iterate over all enumerable properties of an object, including inherited enumerable properties.
|
||||
|
||||
@ -5,6 +5,8 @@ tags: javascript,array,loop
|
||||
authors: chalarangelo
|
||||
cover: blog_images/armchair.jpg
|
||||
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
|
||||
---
|
||||
|
||||
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:
|
||||
|
||||
@ -5,6 +5,8 @@ tags: javascript,function
|
||||
authors: chalarangelo
|
||||
cover: blog_images/canoe.jpg
|
||||
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
|
||||
---
|
||||
|
||||
### Function.prototype.call()
|
||||
|
||||
@ -5,6 +5,8 @@ tags: javascript,function
|
||||
authors: chalarangelo
|
||||
cover: blog_images/rock-climbing.jpg
|
||||
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-06-12T19:30:41+03:00
|
||||
---
|
||||
|
||||
Higher-order functions are functions that operate on other functions, either by taking them as arguments or by returning them as their results. This allows us to create an abstraction layer over actions, not just values.
|
||||
|
||||
@ -5,6 +5,8 @@ tags: javascript,function
|
||||
authors: chalarangelo
|
||||
cover: blog_images/tropical-waterfall.jpg
|
||||
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-14T12:00:00+03:00
|
||||
lastUpdated: 2021-06-12T19:30:41+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:
|
||||
|
||||
@ -5,6 +5,8 @@ tags: javascript,object,array,string
|
||||
authors: chalarangelo
|
||||
cover: blog_images/waves.jpg
|
||||
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
|
||||
---
|
||||
|
||||
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.
|
||||
|
||||
@ -5,6 +5,8 @@ tags: javascript,array,object,iterator
|
||||
authors: chalarangelo
|
||||
cover: blog_images/balloons.jpg
|
||||
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-06-12T19:30:41+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.
|
||||
|
||||
@ -5,6 +5,8 @@ tags: javascript,browser,event
|
||||
authors: maciv
|
||||
cover: blog_images/dog-waiting.jpg
|
||||
excerpt: Learn how to attach an event handler to events that is executed at most once in this JavaScript blog post.
|
||||
firstSeen: 2020-08-12T11:21:48+03:00
|
||||
lastUpdated: 2021-06-12T19:30:41+03:00
|
||||
---
|
||||
|
||||
### jQuery
|
||||
|
||||
@ -5,6 +5,8 @@ tags: javascript,array,iterator,generator
|
||||
authors: chalarangelo
|
||||
cover: blog_images/colorful-plastic.jpg
|
||||
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
|
||||
---
|
||||
|
||||
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.
|
||||
|
||||
@ -5,6 +5,8 @@ tags: javascript,function,memoization
|
||||
authors: chalarangelo
|
||||
cover: blog_images/cherry-trees.jpg
|
||||
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-06-12T19:30:41+03:00
|
||||
---
|
||||
|
||||
Memoization is a commonly used technique that you can use to speed up your code significantly. It uses a cache to store results, so that subsequent calls of time-consuming functions do not perform the same work another time. Based on this definition, we can easily extract some criteria that can help us decide when to use memoization in our code:
|
||||
|
||||
@ -5,6 +5,8 @@ tags: javascript,array
|
||||
authors: chalarangelo
|
||||
cover: blog_images/arrays.jpg
|
||||
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
|
||||
---
|
||||
|
||||
### Spread operator
|
||||
|
||||
@ -5,6 +5,8 @@ tags: javascript,browser
|
||||
authors: chalarangelo
|
||||
cover: blog_images/compass.jpg
|
||||
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-06-12T19:30:41+03:00
|
||||
---
|
||||
|
||||
### Using the History API
|
||||
|
||||
@ -5,6 +5,8 @@ tags: javascript,cheatsheet
|
||||
authors: chalarangelo
|
||||
cover: blog_images/mountain-lake-2.jpg
|
||||
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
|
||||
---
|
||||
|
||||
### Named exports
|
||||
|
||||
@ -5,6 +5,8 @@ tags: javascript,variable,cheatsheet
|
||||
authors: chalarangelo
|
||||
cover: blog_images/naming-conventions.jpg
|
||||
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
|
||||
---
|
||||
|
||||
### Variables
|
||||
|
||||
@ -5,6 +5,8 @@ tags: javascript,type
|
||||
authors: chalarangelo
|
||||
cover: blog_images/purple-leaves.jpg
|
||||
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
|
||||
---
|
||||
|
||||
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.
|
||||
|
||||
@ -5,6 +5,8 @@ tags: javascript,object,array,proxy,iterator,pattern
|
||||
authors: chalarangelo
|
||||
cover: blog_images/birds.jpg
|
||||
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-06-12T19:30:41+03:00
|
||||
---
|
||||
|
||||
While messing around with some code the other day, I stumbled upon a case where I received an object, the values of which I needed to repeatedly handle as a regular array. This was, of course, achievable using `Object.keys()`, `Object.values()` or `Object.entries()`, but it started getting verbose real quick.
|
||||
|
||||
@ -5,6 +5,8 @@ tags: javascript,object,type
|
||||
authors: chalarangelo
|
||||
cover: blog_images/rocky-mountains.jpg
|
||||
excerpt: "`Object.is()` and the triple equals operator (`===`) can both be used for equality checking in JavaScript, but when should you use each one?"
|
||||
firstSeen: 2021-03-04T11:00:00+02:00
|
||||
lastUpdated: 2021-06-12T19:30:41+03:00
|
||||
---
|
||||
|
||||
If you want to check equality in JavaScript, there are two comparison operators, which are explained in depth in a previous [article](/blog/s/javascript-equality).
|
||||
|
||||
@ -5,6 +5,8 @@ tags: javascript,string
|
||||
authors: chalarangelo
|
||||
cover: blog_images/glass-blowing.jpg
|
||||
excerpt: Strings in JavaScript can be escaped in various ways. But what if you need to prevent a string from being escaped? Here's a handy trick for that.
|
||||
firstSeen: 2021-06-17T12:00:00+03:00
|
||||
lastUpdated: 2021-06-12T19:30:41+03:00
|
||||
---
|
||||
|
||||
By default, when JavaScript sees an escape character (`\`), it will escape the character after it. However, there are cases where you might not want this behavior (e.g. when you want to store a Windows path as a string). For these cases, you can use a template literal and the `String.raw()` tag function:
|
||||
|
||||
@ -5,6 +5,8 @@ tags: javascript,type
|
||||
authors: chalarangelo
|
||||
cover: blog_images/wooden-bowl.jpg
|
||||
excerpt: JavaScript's `instanceof` operator can't be used with primitive values, but there are a couple of simple tricks that you can leverage to your advantage.
|
||||
firstSeen: 2021-03-25T11:00:00+02:00
|
||||
lastUpdated: 2021-06-12T19:30:41+03:00
|
||||
---
|
||||
|
||||
JavaScript provides two operators for typechecking:
|
||||
|
||||
@ -5,6 +5,8 @@ tags: javascript,function,promise
|
||||
authors: chalarangelo
|
||||
cover: blog_images/blue-sunrise.jpg
|
||||
excerpt: Messing up the order of chained `then` and `catch` methods in JavaScript promises can result in all sorts of problems. Here's a short primer on the subject.
|
||||
firstSeen: 2021-04-26T12:00:00+03:00
|
||||
lastUpdated: 2021-06-12T19:30:41+03:00
|
||||
---
|
||||
|
||||
Many if not most promise-related headaches come from incorrectly ordered `Promise.prototype.then()` and `Promise.prototype.catch()` methods. The order in which these methods are chained to a promise can lead to very different behaviors. Let's take a look at a very simple example:
|
||||
|
||||
@ -5,6 +5,8 @@ tags: javascript,function,promise
|
||||
authors: chalarangelo
|
||||
cover: blog_images/blue-sunrise.jpg
|
||||
excerpt: On the surface, a JavaScript promise's `then` and `finally` methods seem very similar. But there are a few important differences you need to keep in mind.
|
||||
firstSeen: 2021-03-18T11:00:00+02:00
|
||||
lastUpdated: 2021-06-12T19:30:41+03:00
|
||||
---
|
||||
|
||||
On the surface, `Promise.prototype.then()` and `Promise.prototype.finally` seem very similar. But there are a few important differences you need to keep in mind.
|
||||
|
||||
@ -5,6 +5,8 @@ tags: javascript,browser
|
||||
authors: chalarangelo
|
||||
cover: blog_images/pineapple-at-work.jpg
|
||||
excerpt: Ever wanted to create your own jquery-like query selector shorthand? Here's how!
|
||||
firstSeen: 2021-02-08T11:00:00+02:00
|
||||
lastUpdated: 2021-06-12T19:30:41+03:00
|
||||
---
|
||||
|
||||
Most of us are familiar with jquery and probably quite a few of us are familiar with the Chrome console's `$` and `$$` shorthands for query selectors. I recently figured out a way to replicate these shorthands in my code, using `Document.querySelector()`, `Document.querySelectorAll()` and `Function.prototype.bind()`. Here's how to do it, just make sure you don't mix them up with jquery if you are still using it:
|
||||
|
||||
@ -5,6 +5,8 @@ tags: javascript,function,array
|
||||
authors: chalarangelo
|
||||
cover: blog_images/generator.jpg
|
||||
excerpt: Learn how to use JavaScript ES6 generators and iterators to iterate over ranges of numbers.
|
||||
firstSeen: 2020-08-04T16:28:16+03:00
|
||||
lastUpdated: 2021-06-12T19:30:41+03:00
|
||||
---
|
||||
|
||||
### Generator functions
|
||||
|
||||
@ -5,6 +5,8 @@ tags: javascript,object
|
||||
authors: chalarangelo
|
||||
cover: blog_images/brown-bird.jpg
|
||||
excerpt: Ever wanted to delete a property from a JavaScript object? Here are a few way you can accomplish that.
|
||||
firstSeen: 2021-03-22T11:00:00+02:00
|
||||
lastUpdated: 2021-06-12T19:30:41+03:00
|
||||
---
|
||||
|
||||
When working with objects in JavaScript, you might come across situations where a property should be completely removed from an object. To accomplish that, there a few options you have at your disposal:
|
||||
|
||||
@ -5,6 +5,8 @@ tags: javascript,function,class,object
|
||||
authors: chalarangelo
|
||||
cover: blog_images/architectural.jpg
|
||||
excerpt: The constructor is arguably the most crucial part of any JavaScript class, which is why you might want to take a closer look at what they return.
|
||||
firstSeen: 2020-09-30T19:35:32+03:00
|
||||
lastUpdated: 2021-06-12T19:30:41+03:00
|
||||
---
|
||||
|
||||
The `constructor` method is a special method of a class for creating and initializing an object of that class. However, there is a little bit of magic involved around it, especially when it comes to its return value. This magic is nothing really complicated, but it seems to often confuse developers.
|
||||
|
||||
@ -5,6 +5,8 @@ tags: javascript,object
|
||||
authors: chalarangelo
|
||||
cover: blog_images/pagodas.jpg
|
||||
excerpt: Learn how JavaScript handles mutable data, such as objects and arrays, and understand how shallow cloning and deep cloning work.
|
||||
firstSeen: 2020-04-14T16:19:56+03:00
|
||||
lastUpdated: 2021-06-12T19:30:41+03:00
|
||||
---
|
||||
|
||||
JavaScript's primitive data types, such as numbers, strings, null, undefined and booleans are immutable, meaning their value cannot change once created. However, objects and arrays are mutable, allowing their value to be altered after creation. What this means in practice is that primitives are passed by value, whereas objects and arrays are passed by reference. Consider the following example:
|
||||
|
||||
@ -5,6 +5,8 @@ tags: javascript,object,function,proxy,pattern
|
||||
authors: chalarangelo
|
||||
cover: blog_images/obelisk.jpg
|
||||
excerpt: Learn how to implement a singleton, a commonly used software design pattern, in JavaScript using the Proxy object.
|
||||
firstSeen: 2020-02-25T16:02:03+02:00
|
||||
lastUpdated: 2021-06-12T19:30:41+03:00
|
||||
---
|
||||
|
||||
A singleton is an object-oriented software design pattern which ensures a given class is only ever instantiated once and can be quite useful in many different situations, such as creating global objects and components shared across an application. While JavaScript supports object-oriented programming, it doesn't seem to provide many simple options to implement this pattern.
|
||||
|
||||
@ -5,6 +5,8 @@ tags: javascript,date,promise
|
||||
authors: chalarangelo
|
||||
cover: blog_images/sleepy-cat.jpg
|
||||
excerpt: Learn all the different ways you can implement a `sleep()` function in JavaScript.
|
||||
firstSeen: 2020-08-04T20:08:54+03:00
|
||||
lastUpdated: 2021-06-12T19:30:41+03:00
|
||||
---
|
||||
|
||||
JavaScript does not come with a `sleep()` function out of the box and that is probably a good idea considering the environments where it runs and the trouble such a function could cause if used incorrectly. The closest equivalent of such a function is `setTimeout`, however there are other, less common ways to implement a function that will freeze the current thread for a specified amount of time.
|
||||
|
||||
@ -5,6 +5,8 @@ tags: javascript,array,function
|
||||
authors: chalarangelo
|
||||
cover: blog_images/antelope.jpg
|
||||
excerpt: JavaScript ES6 introduced us to several powerful features, such as the spread and rest syntax. Learn everything you need to know in this quick guide.
|
||||
firstSeen: 2021-02-15T11:00:00+02:00
|
||||
lastUpdated: 2021-06-12T19:30:41+03:00
|
||||
---
|
||||
|
||||
### Spread syntax
|
||||
|
||||
@ -5,6 +5,8 @@ tags: javascript,browser
|
||||
authors: chalarangelo
|
||||
cover: blog_images/armchair.jpg
|
||||
excerpt: Increase your JavaScript code's performance when working with the DOM by leveraging this simple trick.
|
||||
firstSeen: 2020-11-20T09:18:55+02:00
|
||||
lastUpdated: 2021-06-12T19:30:41+03:00
|
||||
---
|
||||
|
||||
DOM operations, including accessing the DOM, are generally slow. This is usually not a problem until you have to perform many DOM operations and your JavaScript application's performance starts to suffer. A very quick trick to increase performance is to store DOM elements or their values in local variables if you plan to access them multiple times.
|
||||
|
||||
@ -5,6 +5,8 @@ tags: javascript,array,variables
|
||||
authors: chalarangelo
|
||||
cover: blog_images/mountain-lake-2.jpg
|
||||
excerpt: Learn how to swap the values of two variables in JavaScript using a single line of ES6 code.
|
||||
firstSeen: 2020-04-27T14:12:51+03:00
|
||||
lastUpdated: 2021-06-12T19:30:41+03:00
|
||||
---
|
||||
|
||||
In the past, swapping the values of two variables in JavaScript required an intermediate variable to store one of the values while swapping, which would result in something similar to this:
|
||||
|
||||
@ -5,6 +5,8 @@ tags: javascript,object
|
||||
authors: chalarangelo
|
||||
cover: blog_images/rocky-lake.jpg
|
||||
excerpt: JavaScript's `switch` statement often feels hard to remember and a little bit out of place. Maybe it's time to use object literals, instead.
|
||||
firstSeen: 2021-04-01T12:00:00+03:00
|
||||
lastUpdated: 2021-06-12T19:30:41+03:00
|
||||
---
|
||||
|
||||
JavaScript's `switch` statement is one of the few things I find hard to remember the syntax for (so glad VS Code has autocomplete). It also feels a little bit out of place syntactically, as it's the only thing that doesn't use curly braces and you need to remember to `break` for every `case`. Moreover, its performance is less than stellar as its control flow is procedural.
|
||||
|
||||
@ -5,6 +5,8 @@ tags: javascript,browser,security
|
||||
authors: chalarangelo
|
||||
cover: blog_images/laptop-with-code.jpg
|
||||
excerpt: Opening a link in a new tab comes with a security vulnerability that you may not be aware of. Protect your users with this simple trick.
|
||||
firstSeen: 2020-11-20T09:19:07+02:00
|
||||
lastUpdated: 2021-06-12T19:30:41+03:00
|
||||
---
|
||||
|
||||
Oftentimes, when linking to an external resource from our websites, we use `target="_blank"` to open the linked page in a new tab or window. But there is a security risk we should be aware of. The new tab gains limited access to the linking page (i.e. our website) via `window.opener`, which it can then use to alter the linking page's URL via `window.opener.location` (this is known as tabnabbing).
|
||||
|
||||
@ -5,6 +5,8 @@ tags: javascript,condition
|
||||
authors: maciv
|
||||
cover: blog_images/red-succulent.jpg
|
||||
excerpt: Learn everything you need to know about the conditional (ternary) operator and how to use it in JavaScript.
|
||||
firstSeen: 2020-09-01T01:53:34+03:00
|
||||
lastUpdated: 2021-06-12T19:30:41+03:00
|
||||
---
|
||||
|
||||
JavaScript's ternary operator (`?:`), also called the conditional operator, is used to replace a conditional statement, most commonly an assignment. For example:
|
||||
|
||||
@ -5,6 +5,8 @@ tags: javascript,function,object
|
||||
authors: chalarangelo
|
||||
cover: blog_images/u-got-this.jpg
|
||||
excerpt: JavaScript's `this` keyword is a source of confusion for many beginners and veterans alike. Learn how it works in different scenarios and start using it correctly.
|
||||
firstSeen: 2020-05-03T15:31:25+03:00
|
||||
lastUpdated: 2021-06-12T19:30:41+03:00
|
||||
---
|
||||
|
||||
### What is `this`?
|
||||
|
||||
@ -5,6 +5,8 @@ tags: javascript,type
|
||||
authors: chalarangelo
|
||||
cover: blog_images/river-houses.jpg
|
||||
excerpt: JavaScript has three different empty states for variables. Learn their differences and how you can check for each one.
|
||||
firstSeen: 2021-03-29T12:00:00+03:00
|
||||
lastUpdated: 2021-06-12T19:30:41+03:00
|
||||
---
|
||||
|
||||
### undeclared
|
||||
|
||||
@ -5,6 +5,8 @@ tags: javascript,browser,input
|
||||
authors: chalarangelo
|
||||
cover: blog_images/mac-and-coffee.jpg
|
||||
excerpt: Ever wanted to get the value of an HTML input element as a number? Learn an easy way to do it with this handy trick.
|
||||
firstSeen: 2020-11-20T09:19:24+02:00
|
||||
lastUpdated: 2021-06-12T19:30:41+03:00
|
||||
---
|
||||
|
||||
Most of the time, when accessing the value of an `HTMLInputElement` in an event listener, we use something along the lines of `e.target.value`. This is fine in most cases, but when we want the numeric value of an input field, we have to parse it and check if the value is actually valid etc. That can get very annoying, especially when working with larger forms that have many input fields.
|
||||
|
||||
@ -5,6 +5,8 @@ tags: javascript,type,variable
|
||||
authors: chalarangelo
|
||||
cover: blog_images/boat-port.jpg
|
||||
excerpt: One of the most commonly asked JavaScript interview questions is about hoisting. It's also a concept that might require some getting used to, so read our guide to learn more.
|
||||
firstSeen: 2020-09-22T23:28:14+03:00
|
||||
lastUpdated: 2021-06-12T19:30:41+03:00
|
||||
---
|
||||
|
||||
Before your JavaScript code is executed, it is first parsed and compiled. During the _compile_ phase, variable and function declarations are put into memory, which is called **hoisting**.
|
||||
|
||||
@ -5,6 +5,8 @@ tags: javascript,type,variable
|
||||
authors: chalarangelo
|
||||
cover: blog_images/periscope.jpg
|
||||
excerpt: JavaScript developers often get confused by JavaScript's variables and scope. Here's a quick guide to understanding and remembering everything related to these concepts.
|
||||
firstSeen: 2020-05-18T22:28:17+03:00
|
||||
lastUpdated: 2021-06-12T19:30:41+03:00
|
||||
---
|
||||
|
||||
I have seen many developers - my younger self included - struggle with JavaScript's variables and scopes, even if they have some experience with coding and/or the language itself. While there are dozens of great articles on this subject, I found it somewhat difficult to memorize or understand the way these concepts work when I was starting out, so here's a short and simple breakdown that might help you as much as it helped me.
|
||||
|
||||
@ -5,6 +5,8 @@ tags: javascript,browser,accessibility
|
||||
authors: chalarangelo
|
||||
cover: blog_images/white-flower.jpg
|
||||
excerpt: There are various ways to create an empty link, but some options are more appropriate than others. Learn the best way to handle empty links with this quick tip.
|
||||
firstSeen: 2020-11-15T11:46:42+02:00
|
||||
lastUpdated: 2021-06-12T19:30:41+03:00
|
||||
---
|
||||
|
||||
There are various ways to create an empty link, but some options are more appropriate than others. One of the most common debates about it is if one should use `href=""`, `href="#"` or `href="javascript:void(0)"`.
|
||||
|
||||
@ -5,6 +5,8 @@ tags: javascript,array,math
|
||||
authors: chalarangelo
|
||||
cover: blog_images/little-tree.jpg
|
||||
excerpt: When working with numeric arrays in JavaScript, you might find yourself in need of finding the minimum or maximum value. Here's a quick and easy way to do it.
|
||||
firstSeen: 2021-03-01T11:00:00+02:00
|
||||
lastUpdated: 2021-06-12T19:30:41+03:00
|
||||
---
|
||||
|
||||
When working with numeric arrays in JavaScript, you might find yourself in need of finding the minimum or maximum value. Luckily, JavaScript's `Math` built-in object has got you covered. You can simply use `Math.min()` or `Math.max()` combined with the spread operator (`...`), as both functions accept any number of arguments.
|
||||
|
||||
@ -5,6 +5,8 @@ tags: javascript,array
|
||||
authors: maciv,chalarangelo
|
||||
cover: blog_images/apples.jpg
|
||||
excerpt: Learn how to quickly write code to sort JavaScript arrays with this handy one-liner.
|
||||
firstSeen: 2021-01-04T11:00:00+02:00
|
||||
lastUpdated: 2021-06-12T19:30:41+03:00
|
||||
---
|
||||
|
||||
When sorting an array of primitive values (e.g. strings or numbers), you'll often see a lot of code that looks like this:
|
||||
|
||||
@ -5,6 +5,8 @@ tags: javascript,array
|
||||
authors: chalarangelo
|
||||
cover: blog_images/architectural.jpg
|
||||
excerpt: Easily remove duplicates from a JavaScript array using the built-in `Set` object.
|
||||
firstSeen: 2021-02-11T11:00:00+02:00
|
||||
lastUpdated: 2021-06-12T19:30:41+03:00
|
||||
---
|
||||
|
||||
Removing duplicates from an array in JavaScript can be done in a variety of ways, such as using `Array.prototype.reduce()`, `Array.prototype.filter()` or even a simple `for` loop. But there's an easier alternative. JavaScript's built-in [`Set`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set) object is described as a collection of values, where each value may occur only once. A `Set` object is also iterable, making it easily convertible to an array using the spread (`...`) operator.
|
||||
|
||||
@ -5,6 +5,8 @@ tags: webdev,html,image
|
||||
authors: chalarangelo
|
||||
cover: blog_images/bridge.jpg
|
||||
excerpt: Did you know you can use a native HTML attribute to add lazy load to images? Learn all you need to know with this quick tip.
|
||||
firstSeen: 2021-05-31T12:00:00+03:00
|
||||
lastUpdated: 2021-06-12T19:30:41+03:00
|
||||
---
|
||||
|
||||
Images are nowadays a crucial part of any webpage, but, as with most things, they come at a cost. Images are usually a major percentage of a page's load, which is why they make for a great candidate for optimization. The most common technique is that of lazy loading, usually in the form of delaying loading images outside the initial viewport until they are close to being scrolled into view.
|
||||
|
||||
@ -5,6 +5,8 @@ tags: javascript,node,debugging
|
||||
authors: chalarangelo
|
||||
cover: blog_images/bug.jpg
|
||||
excerpt: Did you know you can use Chrome Developer Tools to debug your Node.js code? Find out how in this short guide.
|
||||
firstSeen: 2020-07-15T16:10:13+03:00
|
||||
lastUpdated: 2021-06-12T19:30:41+03:00
|
||||
---
|
||||
|
||||
Node.js can be debugged using Chrome Developer Tools since `v6.3.0`. Here's a quick guide on how to do this:
|
||||
|
||||
@ -5,6 +5,8 @@ tags: webdev
|
||||
authors: chalarangelo
|
||||
cover: blog_images/padlocks.jpg
|
||||
excerpt: Use the HTML `autocomplete` attribute to create more secure and accessible password fields.
|
||||
firstSeen: 2021-05-10T12:00:00+03:00
|
||||
lastUpdated: 2021-06-12T19:30:41+03:00
|
||||
---
|
||||
|
||||
The HTML `autocomplete` attribute provides a wide variety of options for `<input>` fields. One of these is the `new-password` value, which can be used when the user is asked to create a new password (e.g. signup or reset password forms). This value ensures that the browser will not accidentally fill in an existing password, while it also allows the browser to suggest a secure password:
|
||||
|
||||
@ -5,6 +5,8 @@ tags: css,interactivity,visual,animation
|
||||
authors: chalarangelo
|
||||
cover: blog_images/perfect-timing.jpg
|
||||
excerpt: Learn how to make your CSS transitions feel perfect when users interact with elements on the page with this simple tip.
|
||||
firstSeen: 2020-12-30T11:00:00+02:00
|
||||
lastUpdated: 2021-06-12T19:30:41+03:00
|
||||
---
|
||||
|
||||
We have all experienced a website interaction that feels sluggish or otherwise off on account of poor transition or animation duration and timing. However, there is a very simple "golden rule" to help you avoid this poor user experience, called **Doherty Threshold:**
|
||||
|
||||
@ -5,6 +5,8 @@ tags: webdev,html,browser
|
||||
authors: chalarangelo
|
||||
cover: blog_images/playing-fetch.jpg
|
||||
excerpt: Resource prefetching is a great technique to improve perceived page speed on your website and one that requires little to no effort. Learn how to use it today.
|
||||
firstSeen: 2020-06-20T13:41:31+03:00
|
||||
lastUpdated: 2021-06-12T19:30:41+03:00
|
||||
---
|
||||
|
||||
Resource prefetching is a great technique to improve perceived page speed on your website and provide a better user experience, without a lot of effort. Prefetching happens in the browser as soon as it is idle, meaning it will not slow down the initial load, but rather utilize idle time to fetch and cache resources that might be useful later on.
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user