teleren/devto huggingface dataset:
Latest Newsletter: Make Things, Take Notes, Profit (Issue #128)
Tags: javascript, tech, webdev, discuss
Published: 2023-08-19 08:09:20

---
title: Latest Newsletter: Make Things, Take Notes, Profit (Issue #128)
published: true
description: This week is a celebration of makers, builders, creators of all types and the cultures that surround this amazing activity that keeps the world a fascinating place.
tags: javascript, tech, webdev, discuss
---

Make Things, Take Notes, Profit (Issue #128)

This week is a celebration of makers, builders, creators of all types and the cultures that surround this amazing activity that keeps the world a fascinating place.

https://markjgsmith.substack.com/p/mark-smiths-newsletter-19-08-2023

Would love to hear any comments and feedback you have.

[@markjgsmith](https://twitter.com/markjgsmith)
How to Use Angular to Build Dynamic Web Applications
Published: 2023-08-19 07:52:58

## Introduction
Angular is a JavaScript framework that can be used to build dynamic web applications. Angular is based on the Model-View-Controller (MVC) pattern, which makes it easy to create applications that are well-organized and easy to maintain.

In this article, we will discuss how to use Angular to build dynamic web applications. We will cover topics such as:

1. Creating Angular components
2. Binding data to components
3. Using Angular directives
4. Creating Angular services

## Creating Angular Components
Angular components are the building blocks of Angular applications. Components are responsible for rendering the UI of an application and handling user interaction.

To create an Angular component, you need to create a TypeScript class that extends the @Component decorator. The @Component decorator takes a number of properties, including the component's name, template, and styleUrls.

Here is an example of an Angular component:
```
@Component({
  selector: 'my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})

export class MyComponent {
  title = 'My Component';
}
```

## Binding Data to Components
Angular components can bind data to their templates using the @Input decorator. The @Input decorator takes a property name, which is used to bind the data to the component's template.

Here is an example of how to bind data to a component:

```
@Component({
  selector: 'my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})

export class MyComponent {
  @Input() title = 'My Component';
}
```

## Using Angular Directives
Angular directives are custom HTML elements that can be used to add functionality to an Angular application. Directives can be used to do things like bind data to elements, create reusable components, and handle user interaction.

Here is an example of an Angular directive:

```
@Directive({
  selector: '[myDirective]'
})

export class MyDirective {
  constructor() { }
   
  link(element: ElementRef, attr: Attr) {
    element.textContent = 'My Directive';
  }
}
```

## Creating Angular Services
Angular services are classes that can be used to share data and functionality across an Angular application. Services can be injected into components, which allows components to access the data and functionality that is provided by the service.

Here is an example of an Angular service:

```
export class MyService {
  constructor() { }
  
  getTitle() {
    return 'My Title';
  }
}
```

## Conclusion
By following these tips, you can use Angular to build dynamic web applications. Angular is a powerful framework that can be used to create complex and interactive applications.
Simplified Job Application Automation With Javascript
Tags: javascript, webdev, automation, tutorial
Published: 2023-08-19 07:14:24

Are you tired of spending countless hours applying for jobs on online portals? 🕒💼 Say goodbye to manual clicking with our latest video tutorial on browser automation! 🚀✨ Learn how to harness the power of the browser console to streamline your job application process. Our step-by-step guide will walk you through automating the entire process, from navigating job listings to clicking that 'Apply' button. 🎯📋

We are going to write a javascript function that will run in an interval of 300 ms and automatically click on the "Apply" button of the job card.

```js
function applyNow() {
  const btns = document.querySelectorAll("button");
  for (const btn of btns) {
    if (btn.textContent.trim() === "Apply") {
      btn.click();
    }
  }
}

setInterval(() => applyNow(), 300);
``` 

Click on the below thumbnail to watch complete video.
[![Youtube Video](https://i9.ytimg.com/vi_webp/8NhBDk3mn4k/mqdefault.webp?sqp=CPDQgacG&rs=AOn4CLC0MsPzR6gwhANjwqxXtskTLPlenA)](https://www.youtube.com/watch?v=8NhBDk3mn4k)
What Was Your Nobel Prize Moment?
Tags: discuss, watercooler
Published: 2023-08-19 07:00:00

_We're going back to coding school with Nostalgia Bytes this week! Don't forget your TI calculators, Trapper Keepers, Lisa Frank folders, and USB drives. Each decade has its own story to tell. So get ready to relive the past and share your nostalgic memories with fellow developers!_

🏆 Which coding challenge or puzzle felt like winning the Nobel Prize for developers when you finally cracked it?

Follow the DEVteam for more discussions and online camaraderie!

{% embed [https://dev.to/devteam](https://dev.to/devteam) %}
How to Add Color to Old Black and White Movies and Images | using DeOldify
Tags: python, computervision
Published: 2023-08-19 06:57:23

🎥 Colorizing the Past: Transforming Black and White Movies and Images with DeOldify 🎨
Have you ever wondered what your favorite classic movies would look like in color? In this tutorial, we're learn a simple process of colorization using the powerful DeOldify library. 
🚀 Key Highlights:
•	🌈 Discover the DeOldify library and its capabilities for colorization.
•	🖌️ Learn the installation process and environment setup for smooth colorization.
•	📸 Transform static black and white images into stunning, lifelike visuals.
•	🎬 Dive into video colorization, turning old film footage into colorful masterpieces.


If you are interested in learning modern Computer Vision course with deep dive with TensorFlow , Keras and Pytorch , you can find it here  : http://bit.ly/3HeDy1V

I actually recommend this book for deep learning based on Tensorflow and Keras : https://amzn.to/3STWZ2N

check out our video here: https://youtu.be/3sygSmIgGKs

You can find the code in the video description.

Enjoy,
Eran

#Filmcolorization #DeOldify #Colorrestoration #Videocolorization #Pythoncolorization #Classicmovierestoration, #DeOldifyTutorial #Python #Opencv
How to automatically Backup Mac Mail?
Tags: macmail, backup, macos
Published: 2023-08-19 06:56:18

You need a good professional tool for this and this tool can be good only if it is user friendly. A professional tool will safely **backup your mailbox automatically** while preventing any data corruption and file changes. You should avoid free tools at all costs if you don't want to compromise the security of your files and your device. 

## Some qualities of good [Mac mail backup and restore tool](https://www.mailbackupx.com/how-to-backup-apple-mac-mail-mails-on-mac/)

## These are some of the features you need to look out for when selecting a mail backup and recovery tool-

●	Security- this should be top notch. If a tool has double layered encryption, go for it. Prefer a tool with offline mode of operation.

●	Step by step process- this is important to keep the task easy and comprehensive for a user. Simple instructions should be there and the steps should be lag free.

●	Automatic file scanning- without this feature, it would be so difficult and time consuming to find a folder or email while backing up or during recovery. 

●	Hierarchy preservation- you need the copies to be like the original files and in the same order. This is why this feature is so important so that you don't have to sort your folders later on. 

●	Export feature- it will be rare for this feature to exist in the same tool but look for it when you want a complete backup solution.

●	Multi platform compatibility- this is another important and practical feature to look for. You need a tool with wider application. 

●	Smart backup and resume- you cannot predict interruptions but you can deal with them with tools which have such features.

## How do I import my email in Mac Mail?

Is your **backup in a Mac** compatible format? Or is it in a different format? You have to convert it to Mac compatible format first. In both cases, you can actually find a professional tool which has backup as well as import features. Although this may seem far fetched to users who are so used to getting average tools, such tools exist. 

Want a perfect backup as well as an import tool? Here it is. 
The best example of this type of advanced tool which combines different functions is Mail backup X. It can backup, restore, as well as import your backups on Mac and to Mac. This tool is compatible with a wide range of formats and email services.  
This tool has all the features of a good professional backup solution which have been discussed above. It has many others like data compression, round the clock support, integrated FTP server, PDF archiving, etc. 

This is the major plus point of this backup Mac email tool
This tool is compatible for Windows as well as Mac devices and it is suitable for all users regardless of their skills or experience. You can start using this tool right away as its usage does not require a learning period. Its interface, security, and affordability make it a true value backup and recovery tool for all. Try it now.
Why choose ReactJS for web development
Tags: react, javascript, webdev, programming
Published: 2023-08-19 06:52:00

Yesterday I had a Call with one Client. 📞

His current website is in PHP and he wants to convert it to ReactJS.

He asked me, "Why should I covert?"

I gave him some major points and he is IMPRESSED by the Power of ReactJS.

Here are the BENEFITS that you also want to know

---


### 1. Enhanced User Experience 💼 



React.js crafts dynamic, interactive user interfaces.

Your app will respond swiftly, creating seamless experiences that keep users engaged.

---


### 2. Performance Boost ⚡️

React.js' virtual DOM optimizes rendering, reducing page reloads.

Your app becomes faster and smoother, delighting users with quick responses. 

---

### 3. Single Page Application (SPA) Magic 📃

Transform your app into a SPA!

Users navigate without full page reloads, enjoying smoother transitions and a more app-like experience.

---

### 4. Reusable Components 🔄

React.js excels in modular design.

Build reusable components that save development time and ensure consistent design across your app. 


---

### 5. Strong Community Support 🌟

React.js boasts a vast community of developers, providing a treasure trove of resources, libraries, and solutions to help you conquer challenges.

---

---

### Support US 

Don't miss the amazing video we've embedded in this post! Click the play button to be inspired

{% youtube  o_qSMI8hwCo %}

---
---


### 6. SEO-Friendly Apps 🌐

React.js can be used on the server-side (with Next.js).

This means search engines can crawl and index your app effectively, boosting discoverability.


---

### 7. Easier Maintenance 🛠️

React.js encourages clean code and clear structure.

Updates and changes become less daunting, ensuring your app stays modern and adaptable.

---

### 8.Testing Simplicity 🧪 


React.js' components are easy to test in isolation.

This ensures stability, making your app less error-prone and more robust.

---

### 9. Insightful Debugging 🚑

React Developer Tools offer insightful debugging capabilities.

Identifying issues and bottlenecks becomes a breeze, saving time and frustration.

---

### 10. Design Freedom 🖌️

React.js separates UI components and logic.

This empowers designers to focus on aesthetics, while developers handle functionality, leading to a harmonious workflow.



![React js](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oznhljtzazrp1bwd6mue.png)


---

Thank you for giving your valuable time!

If you found these helpful, share them with your mates.

---

---

 

### Latest Post

{% link https://dev.to/jon_snow789/awesome-list-of-free-css-generator-293k %}

---
---


Thanks for Reading ❤️! Check my website [Demo coding](https://democoding.in/) for updates about my latest CSS Animation, CSS Tools, and some cool web dev tips. Let's be friends!

Don't forget to subscribe to our channel : [Demo code](https://www.youtube.com/@democode)
My first contribution got accepted
Tags: webdev, opensource, contribution, techtalks
Published: 2023-08-19 06:47:58


![First Contribution](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rni1rln3hhnufzp5arjt.jpeg)

Commencing my venture into the realm of open-source contribution, I am filled with enthusiasm regarding my initial achievements. I am gratified to extend my support to fellow users within the @linkfree @eddiejaoude  repository by offering my assistance and expertise.
Frontier Airlines Flight Change Policy
Tags: frontier, airlines, flight, change
Published: 2023-08-19 06:26:22

If you're planning to travel with Frontier Airlines and are concerned about potential changes to your itinerary, it's important to understand Frontier Airlines' Flight Change Policy. Travel plans can often be unpredictable, and having the flexibility to make changes can make your journey much smoother. In this comprehensive guide, we'll walk you through everything you need to know about Frontier Airlines'[Frontier Flight Change Policy](https://www.airlinesreservation247.com/frontier-airlines-flight-change-policy.php), from the rules and fees to the process of making changes. Let's dive in!
Perbedaan perintah RUN dan CMD di dalam Docker
Tags: docker, containers, run, cmd
Published: 2023-08-19 06:23:43

Dua perintah penting dalam Docker yang kadang bikin bingung: `RUN` dan `CMD`. Saya akan menjelaskan apa artinya dan kapan kita pakai yang mana.

**1. `RUN`:**
Ini kayak perintah yang dilakukan saat kita sedang bikin Docker image. Jadi, bayangin lagi kita lagi masak resep itu. Nah, dalam langkah-langkah bikin, kita bisa kasih perintah `RUN` buat melakukan hal-hal seperti nyiapin bahan-bahan dan semacamnya. Biasanya, ini digunakan buat menginstal hal-hal yang diperlukan sama aplikasi kita.

Misalnya, kita bisa bilang begini di "resep" Docker kita:
```Dockerfile
RUN apt-get update && apt-get install -y curl
```
Nah, pas kita lagi "masak", perintah ini bakal dijalankan buat ngasih tahu Docker "Hei, pasangin 'curl' dong!".

**2. `CMD`:**
Ini lebih kayak perintah "default" buat menjalankan aplikasi kita dalam container. Ini kayak aturan mainnya. Saat kita menjalankan kontainer, perintah dalam `CMD` bakal otomatis berjalan. Jadi, ini semacam kasih tahu Docker, "Hei, kalau kontainer ini dihidupin, jalankan ini ya!"

Contoh yang simple:
```Dockerfile
CMD ["npm", "start"]
```
Nah, kalau kita menjalankan kontainer ini, otomatis aplikasinya bakal jalan dengan perintah `npm start`.

Tapi, ada juga cara lain buat tulis perintah `CMD`. Kita bisa juga pakai yang bentuk "shell":
```Dockerfile
CMD npm start
```
Artinya sama aja, cuma ini kayak lagi ngomong ke shell "Hei, jalanin `npm start` ya!". Yang ini sering dipakai kalau kita mau pake sintaks shell, misalnya pakai titik koma atau variabel lingkungan.

**Singkatnya**:
- `RUN` dipakai buat jalanin perintah pas lagi bikin Docker image.
- `CMD` dipakai buat tentuin perintah bawaan pas kita menjalankan kontainer.
- Perintah di `RUN` dieksekusi waktu membuat Docker image, kayak masak-masak. Perintah di `CMD` dieksekusi waktu kontainer hidup.
- `RUN` bantu buat bikin, sedangkan `CMD` terkait sama cara aplikasi jalan di dalam kontainer.

Nah, kira-kira begitulah. Jadi, `RUN` itu kayak masak, sedangkan `CMD` itu kayak peraturan main aplikasi di kontainer.
Node js api rate limit
Tags: node, api
Published: 2023-08-19 06:05:03

Here we learn **How node js api rate limiting**
First you need to install `npm i ioredis` this package

COnfigure redis client
```
const Redis = require('ioredis');
const redis = new Redis(); // You might need to configure this properly

async function incr(key) {
  return await redis.incr(key);
}

async function expire(key, seconds) {
  return await redis.expire(key, seconds);
}

async function ttl(key) {
  return await redis.ttl(key);
}

module.exports = {
  incr,
  expire,
  ttl
};
```
Make a generic rate limiter function
```
const redis = require('./redis-client');
function rateLimiter = ({secondWindow, allowdHits}) {
    return  async function (req, res, next) {
        // we use client ip as redis key here

        const ip = req.headers['x-forworded-for'] || 
         req.connection.remoteAddress || req.ip
        // if you use express use `req.ip` to get client ip

        const requests = await redis.incr(ip);
        let ttl;
        if(requests === 1) {
           await redis.expire(ip, secondWindow);
           ttl = secondWindow;
        }else {
              ttl = await redis.ttl(ip);
        }
        if(requests > allowdHits) {
           return res.status(503).json({
                response: 'error',
                callsInMinute: requests,
                ttl
           })
        } else {
               req.requests = requests;
               req.ttl = ttl;
               next();
         }
    }
}
```
How to use it.
```
app.post('/api/login', rateLimiter({secondWindow: 5, 
    allowdHits: 3}), async(req, res) => {
    return res.json({
        response: 'ok',
        callsInMinute: req.requests,
        ttl: req.ttl
    })
})

app.post('/api/checkout', rateLimiter({secondWindow: 12, 
    allowdHits: 7}), async(req, res) => {
    return res.json({
        response: 'ok',
        callsInMinute: req.requests,
        ttl: req.ttl
    })
})
```
Redux: in my own words
Tags: webdev, beginners, react, redux
Published: 2023-08-02 15:26:26

Redux was a really challenging topic for me to pick up. But I was able to find my way around it after I made a lot of research, shout out to my teammates for always answering my darning questions. This is just a quick overview of what I was able to learn.

Redux is a predictable state container designed to help you write JavaScript apps that behave consistently across client, server, and native environments and are easy to test. It allows for centralization where the general state of your app is stored in a particular place and every component has access to it and takes whatever they need to update their content.

Furthermore, when using Redux you’re not allowed to make changes directly to the central state (store) and I’ll talk about that soon but before that here are some terminologies that are used when configuring Redux.

- **Actions:** Actions are specific rules that should happen when an event handler is triggered. For example, click events, change events, etc.

- **Dispatch:**This is what carries the actions from where they are defined and to the reducer.

- **Reducers:** Reducers are what make the changes in the general state. Remember we’re not allowed to directly make changes to the state. Actions are dispatched and sent to the reducers and from there the state is changed.

- **State:** This is the general state that holds all the values that we intend to make use of.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7qq5jb04rje942uy0ivn.gif)
Workflow of Redux
Source: [Redux Official Documentation](https://d33wubrfki0l68.cloudfront.net/01cc198232551a7e180f4e9e327b5ab22d9d14e7/b33f4/assets/images/reduxdataflowdiagram-49fa8c3968371d9ef6f2a1486bd40a26.gif)

Let's take a look at the image above, the flow starts from when the initial State is plugged into the UI. On the UI, an event is triggered by clicking on the Deposit button, that button is fed into the Dispatch and it triggers an action to be dispatched that goes to the Reducer. The Reducer is where the major decisions of altering the state are made and the result of that is what mutates the state to effect the new changes.

Although Redux solves a lot of problems in state management, it still has lots of setbacks such as too much boilerplate code just to effect a little change on the state and render that on the UI. So a new standard of adding Redux to your project was introduced where we make use of Redux Toolkit. This comes with all the packages needed to set up Redux in any project and we also don’t need to add too much boilerplate code to set up Redux but the general principle explained earlier is still the same.

This principle was tough to grasp at first because it was a new concept, but I had to learn it as fast as I could so I could implement it into the project we were working on. But it was worth it!

I wrote this article in August 2022, but I didn't post it publicly. I hope this helps someone.
Task 1
Published: 2023-08-19 06:02:15

**What is software testing? what do we need to know about software testing? what is the relevance of software testing?**

**_Software testing: _**
The method of verifying and validating whether the developed application/software is right and working properly, which also meets the requirements of the client is called software testing

**_Things to know about software testing:_**
1. Software testing is done to make the end product error free, user-friendly, improves the product quality and easy maintenance after the deployment
2. Proper testcase should be designed.
3. The input which we gave should display the expected output (according to the client's requirement).
4. Bugs should be captured at the initial stage and should be tracked using any bug tracker tools like JIRA, Bugzilla etc.,

_**Relevance of software testing:**_
To identify the issues and get it fixed before the deployment of the product to the client. Also to prevent any major the issues during the maintenance phase of the project.