Update some pieces

This commit is contained in:
Angelos Chalaris
2023-05-21 16:12:35 +03:00
parent 0c90a6a2bf
commit 165b765809
6 changed files with 20 additions and 17 deletions

View File

@ -1,19 +1,19 @@
---
title: "Tip: A bash alias for copying from the web"
title: "Tip: A bash alias for copying commands from the web"
shortTitle: Bash alias for copying from the web
type: tip
language: git
tags: [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.
excerpt: Learn how to eliminate the annoyance of copying dollar signs ($) along with terminal commands from the web with a simple bash alias.
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:
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:
```shell
alias '$'=''
```
But what about variables? Aren't these prefixed with a dollar sign? This alias won't break your scripts, as aliases replace only the first word of each simple command. Simply put, the only dollar sign that will be replaced is the one at the beginning of the line.
But what about variables? Aren't these prefixed with a dollar sign? This bash alias won't break your scripts, as aliases replace only the first word of each simple command. Simply put, the only dollar sign that will be replaced is the one at the **beginning of the line**.

View File

@ -1,10 +1,11 @@
---
title: DNS Record Basics
title: A beginner's guide to DNS records
shortTitle: DNS Record Basics
type: 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.
excerpt: DNS records may not be something you work with frequently, but having a basic understanding can be highly beneficial.
dateModified: 2022-01-09T05:00:00-04:00
---

View File

@ -6,16 +6,18 @@ language: html
tags: [image]
author: chalarangelo
cover: bridge
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.
excerpt: Discover how to improve your website's performance by implementing lazy loading for images using a native HTML attribute.
dateModified: 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.
In today's digital landscape, images play a pivotal role in capturing users' attention and conveying information. However, their impact on a webpage's **load time** can be significant, leading to suboptimal user experiences and lower search engine rankings. This makes **image optimization** a crucial part of any website's performance optimization strategy.
This exact behavior is already part of the HTML standard in the form of the `loading` attribute. All you have to do to reap its benefits is add `loading="lazy"` to any images you want to add lazy loading to:
The most common technique for optimizing images is that of **lazy loading**. This usually comes in the form of delaying loading images outside the initial viewport until they are close to being scrolled into view. By deferring the loading of images until they're about to be needed, lazy loading optimizes page performance and ensures a seamless browsing experience.
Fortunately, the HTML standard already includes a built-in solution to effortlessly achieve lazy loading, the `loading` attribute. By simply adding `loading="lazy"` to the desired images, you unlock the power of lazy loading and allow browsers to optimize resource allocation and loading priorities.
```html
<img src="/img/duck.png" alt="A rubber duck" loading="lazy" />
```
**Caveat:** At the time of writing, the `loading` attribute is supported in most modern browsers, except for Safari, but not in legacy browsers, such as IE. On that note, lazy loading can be seen as a progressive enhancement for browsers that support it, so it's still worth adding for any users that can benefit from it.
**Note on browser compatibility:** At the time of writing, the `loading` attribute is supported in most modern browsers, except for Safari, but not in legacy browsers, such as IE. On that note, lazy loading can be seen as a progressive enhancement for browsers that support it, so it's still worth adding for any users that can benefit from it.

View File

@ -6,7 +6,7 @@ language: javascript
tags: [string,regexp]
author: chalarangelo
cover: taking-photos
excerpt: Regular expressions are very powerful, but hard to master. Understand these features and start using them in your JavaScript code.
excerpt: Learn how to effectively use JavaScript regular expressions with these 6 powerful features.
dateModified: 2021-06-12T19:30:41+03:00
---

View File

@ -1,18 +1,18 @@
---
title: Typechecking objects with Proxy in JavaScript
shortTitle: Object typechecking with Proxy
shortTitle: Object type checking with Proxy
type: story
language: javascript
tags: [object,type,proxy]
author: chalarangelo
cover: customs
excerpt: A simple way to typecheck objects at runtime using the Proxy object.
excerpt: Learn how to type check objects at runtime using the powerful Proxy object in JavaScript.
dateModified: 2023-04-23T05:00:00-04:00
---
A while back, I was working on a project where some objects had **rigid structure requirements**. As I was really not in the mood to use TypeScript, I decided to create a typechecking mechanism for objects using the `Proxy` object.
Drawing inspiration from React's `PropTypes`, I created a handful of **type checking functions** for the most common types.
Drawing inspiration from React's `PropTypes`, I created a handful of **typechecking functions** for the most common types.
```js
const bool = v => typeof v === 'boolean';
@ -91,4 +91,4 @@ proxiedObj.birthday = null;
proxiedObj.whatever = 'something';
```
As you can see, `createShapeCheckerProxy` can be used with a plain object to create a reusable function that wraps an object with a typechecking `Proxy`. The defined `types` are used to typecheck individual properties and could be extended to support more complex types and special rules. Overall, this can be a pretty useful tool for **typechecking objects at runtime**, without having to use TypeScript or similar tools.
As you can see, `createShapeCheckerProxy` can be used with a plain object to create a reusable function that wraps an object with a type checking `Proxy`. The defined `types` are used to typecheck individual properties and could be extended to support more complex types and special rules. Overall, this can be a pretty useful tool for **typechecking objects at runtime**, without having to use TypeScript or similar tools.

View File

@ -6,13 +6,13 @@ language: javascript
tags: [type,variable]
author: chalarangelo
cover: boat-port
excerpt: Hoisting comes up a lot during JavaScript interviews. It's a concept that can require some getting used to, so read our guide to learn more.
excerpt: Hoisting comes up a lot during JavaScript interviews. It's a concept that may require some getting used to, so read our guide to learn more.
dateModified: 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**.
Note that only declarations are hoisted, not initializations, meaning that if a variable is declared and initialized after using it, its value will not be initialized. This is an oversimplification of the situation, so let's take a look at the different cases:
It's essential to note that only declarations are hoisted, while initializations are not. This means that if you declare and initialize a variable after using it, its value will not be initialized. However, this is a simplified explanation, so let's take a look at the various scenarios:
### function