dev.to
1. Safe Data Fetching in Modern JavaScript
Fetch - the wrong way
fetch in JavaScript is awesome.
But, you may have something like this sprinkled throughout your code:
const res = await fetch('/user')
const user = await res.json()
While nice and simple, this code has a number of issues.
You could say “oh, yeah, handle errors”, and rewrite it like this:
try {
const res = await fetch('/user')
const user = await res.json()
} catch (err) {
// Handle the error
}
That is an improvement, certainly, but still has issues.
Here, we’re a…
#javascript #webdev #typescript
2. Text to speech tutorial using RxJS and Angular
Introduction
This is day 23 of Wes Bos's JavaScript 30 challenge and I am going to use RxJS and Angular to create an English text to speech tutorial. The Web Speech API provides interfaces to make speech request and turn text into speech according to the selected voice.
In this blog post, I describe how to use RxJS fromEvent to listen to change event of input controls and update the properties of SpeechSynthesisUtterance object. SpeechSynthesisUtterance interface creates a speech request and c…
#typescript #angular #tutorial #rxjs
3. Affiliate Tracking System for Networks — Part 1
Today I started to building the backend. As technologies I will use NodeJS. I will use the express server and MongoDB as database.
My first function is like this, after affiliate click the link that is generated on the dashboard, should redirect him to relevant offer. Meantime the data also should stored on the database. For example the User agent, OS, Browser …etc must be stored on the database. This will later used to the generate the reports. And when we redirecting the user to the relevant…
#buldingpublic #webdev #javascript #beginners
1. Safe Data Fetching in Modern JavaScript
Fetch - the wrong way
fetch in JavaScript is awesome.
But, you may have something like this sprinkled throughout your code:
const res = await fetch('/user')
const user = await res.json()
While nice and simple, this code has a number of issues.
You could say “oh, yeah, handle errors”, and rewrite it like this:
try {
const res = await fetch('/user')
const user = await res.json()
} catch (err) {
// Handle the error
}
That is an improvement, certainly, but still has issues.
Here, we’re a…
#javascript #webdev #typescript
2. Text to speech tutorial using RxJS and Angular
Introduction
This is day 23 of Wes Bos's JavaScript 30 challenge and I am going to use RxJS and Angular to create an English text to speech tutorial. The Web Speech API provides interfaces to make speech request and turn text into speech according to the selected voice.
In this blog post, I describe how to use RxJS fromEvent to listen to change event of input controls and update the properties of SpeechSynthesisUtterance object. SpeechSynthesisUtterance interface creates a speech request and c…
#typescript #angular #tutorial #rxjs
3. Affiliate Tracking System for Networks — Part 1
Today I started to building the backend. As technologies I will use NodeJS. I will use the express server and MongoDB as database.
My first function is like this, after affiliate click the link that is generated on the dashboard, should redirect him to relevant offer. Meantime the data also should stored on the database. For example the User agent, OS, Browser …etc must be stored on the database. This will later used to the generate the reports. And when we redirecting the user to the relevant…
#buldingpublic #webdev #javascript #beginners
dev.to
1. JavaScript Closures
JavaScript function closures are a powerful feature that allows you to create private variables and methods within a function.
This can be useful for encapsulating logic, data, and behavior, and preventing them from being accessed or modified by external code.
A closure is created when a function is defined inside another function. The inner function has access to the variables and parameters of the outer function, even after the outer function has returned.
Here is an example of a closure in…
#javascript #webdev #programming #closure
2. Follow along link highlighter using RxJS and Angular
Introduction
This is day 22 of Wes Bos's JavaScript 30 challenge and I am going to use RxJS and Angular to create a highlighter that follows a link when cursor hovers it. The follow along link highlighter updates CSS width, height and transform when mouseenter event occurs on the links of Angular components.
In this blog post, I describe how to use RxJS fromEvent to listen to mouseenter event of anchor elements and update the BehaviorSubject in Highlighter service. Angular components observe t…
#angular #typescript #tutorial #rxjs
3. Generate AI Art with GitHub Codespaces
From code to art to essays, generative AI is all the rage in the developer community. I personally try to get caught up in every new tech trend. The industry moves fast, and it’s sometimes overwhelming, so I prefer to get an overview of the trend so that I understand how it works, but I don’t have to switch all my tooling every few months. However, GitHub Copilot and AI-generated art intrigue me so much. I can spend all day experimenting with tools like DALL-E and Hey, GitHub, a voice-activated …
#github #tutorial #cloud #ai
1. JavaScript Closures
JavaScript function closures are a powerful feature that allows you to create private variables and methods within a function.
This can be useful for encapsulating logic, data, and behavior, and preventing them from being accessed or modified by external code.
A closure is created when a function is defined inside another function. The inner function has access to the variables and parameters of the outer function, even after the outer function has returned.
Here is an example of a closure in…
#javascript #webdev #programming #closure
2. Follow along link highlighter using RxJS and Angular
Introduction
This is day 22 of Wes Bos's JavaScript 30 challenge and I am going to use RxJS and Angular to create a highlighter that follows a link when cursor hovers it. The follow along link highlighter updates CSS width, height and transform when mouseenter event occurs on the links of Angular components.
In this blog post, I describe how to use RxJS fromEvent to listen to mouseenter event of anchor elements and update the BehaviorSubject in Highlighter service. Angular components observe t…
#angular #typescript #tutorial #rxjs
3. Generate AI Art with GitHub Codespaces
From code to art to essays, generative AI is all the rage in the developer community. I personally try to get caught up in every new tech trend. The industry moves fast, and it’s sometimes overwhelming, so I prefer to get an overview of the trend so that I understand how it works, but I don’t have to switch all my tooling every few months. However, GitHub Copilot and AI-generated art intrigue me so much. I can spend all day experimenting with tools like DALL-E and Hey, GitHub, a voice-activated …
#github #tutorial #cloud #ai
dev.to
1. 12 OS concepts you must master to ace your next DevOps Interview
Having a deep understanding of the underlying operating system concepts is quite essential in DevOps field. From file systems to process management, these concepts will help you demonstrate your expertise and ace your next interview.
1. Networking:
Computer networking refers to interconnected computing devices that exchange data and share resources with each other. Begin by studying OSI Model. It will help you understand linked topics.
2. POSIX Basics:
It is a family of standards for maint…
#devops #devjournal #interview #developers
2. How to publish data on-chain with Chainlink?
TL;DR:
All that you need to fetch a response from an API endpoint and publish it on-chain using Chainlink.
Recipe
How does it work?
Q. How do you read off-chain data on-chain?
A. Write it to a state variable on-chain!
Here is the workflow:
In the smart contract, you'll need to:
Specify the validator contract address, (Chainlink's) LINK token contract address, and a jobId.
Construct your API call in the Chainlink request object.
Store the data in the callback function--after the validato…
#solidity #chainlink #web3 #api
3. The New NgRx
In recent months, NgRx, the popular state management library for Angular, has received several significant updates in regards to its API and the way it works. In this atrticle, we will explore what changed, and how this affects the way we use NgRx in our applications.
Main changes are as follows:
Standalone APIs
Action groups
Features
Extra selectors on features
Functional effects
Let's dive deeper into each of these updates:
Standalone APIs
From Angular 14, standalone components are a thi…
#angular #ngrx #typescript #rxjs
1. 12 OS concepts you must master to ace your next DevOps Interview
Having a deep understanding of the underlying operating system concepts is quite essential in DevOps field. From file systems to process management, these concepts will help you demonstrate your expertise and ace your next interview.
1. Networking:
Computer networking refers to interconnected computing devices that exchange data and share resources with each other. Begin by studying OSI Model. It will help you understand linked topics.
2. POSIX Basics:
It is a family of standards for maint…
#devops #devjournal #interview #developers
2. How to publish data on-chain with Chainlink?
TL;DR:
All that you need to fetch a response from an API endpoint and publish it on-chain using Chainlink.
Recipe
How does it work?
Q. How do you read off-chain data on-chain?
A. Write it to a state variable on-chain!
Here is the workflow:
In the smart contract, you'll need to:
Specify the validator contract address, (Chainlink's) LINK token contract address, and a jobId.
Construct your API call in the Chainlink request object.
Store the data in the callback function--after the validato…
#solidity #chainlink #web3 #api
3. The New NgRx
In recent months, NgRx, the popular state management library for Angular, has received several significant updates in regards to its API and the way it works. In this atrticle, we will explore what changed, and how this affects the way we use NgRx in our applications.
Main changes are as follows:
Standalone APIs
Action groups
Features
Extra selectors on features
Functional effects
Let's dive deeper into each of these updates:
Standalone APIs
From Angular 14, standalone components are a thi…
#angular #ngrx #typescript #rxjs
dev.to
Angular RxJS Unsubscriber
Unsubscriber Unsubscriber for RxJS subscription to unsubscribe. In Angular, we commonly...
#angular #unsubsriber #rxjs #rxjsunsubscriber
Angular RxJS Unsubscriber
Unsubscriber Unsubscriber for RxJS subscription to unsubscribe. In Angular, we commonly...
#angular #unsubsriber #rxjs #rxjsunsubscriber
dev.to
RxJS 7 #2 - Observables
Here are my detailed notes from the fantastic course created by Jurek Wozniak, called RxJS 7 and...
#rxjs #angular #webdev #javascript
RxJS 7 #2 - Observables
Here are my detailed notes from the fantastic course created by Jurek Wozniak, called RxJS 7 and...
#rxjs #angular #webdev #javascript
dev.to
RxJS 7 - Pipeable Operators
Here are my detailed notes from the fantastic course created by Jurek Wozniak, called RxJS 7 and...
#webdev #javascript #rxjs #angular
RxJS 7 - Pipeable Operators
Here are my detailed notes from the fantastic course created by Jurek Wozniak, called RxJS 7 and...
#webdev #javascript #rxjs #angular
dev.to
RxJS 7 - Subjects
Here are my detailed notes from the fantastic course created by Jurek Wozniak, called RxJS 7 and...
#webdev #javascript #rxjs #angular
RxJS 7 - Subjects
Here are my detailed notes from the fantastic course created by Jurek Wozniak, called RxJS 7 and...
#webdev #javascript #rxjs #angular
dev.to
Operadores básicos en RXJS
Un operador es una función que se usa en un observable y controla y emite solo la información que nos...
#rxjs #spanish #javascript #webdev
Operadores básicos en RXJS
Un operador es una función que se usa en un observable y controla y emite solo la información que nos...
#rxjs #spanish #javascript #webdev
dev.to
Operadores no tan comunes de Rxjs
Después de dar un vistazo a los operadores comunes en Rxjs, esta vez es el turno de algunos...
#javascript #rxjs #spanish #webdev
Operadores no tan comunes de Rxjs
Después de dar un vistazo a los operadores comunes en Rxjs, esta vez es el turno de algunos...
#javascript #rxjs #spanish #webdev
dev.to
Managing array of observables
Rxjs is an open-source library use to handle streams of events. It's a very powerful tool but it has...
#angular #rxjs
Managing array of observables
Rxjs is an open-source library use to handle streams of events. It's a very powerful tool but it has...
#angular #rxjs