teleren/devto huggingface dataset:
Power Up Your Angular App with Progressive Web Apps (PWAs)
Tags: webdev, javascript, angular, pwa
Published: 2023-01-30 10:07:07



As a web developer, you are always looking for ways to improve the user experience and performance of your applications. One solution that has gained popularity in recent years is Progressive Web Apps (PWAs). PWAs are web applications that use modern web technologies to provide a native-like experience on the web. In this article, we will discuss how you can power up your Angular app with PWAs.

What are PWAs?

PWAs are web applications that use modern web technologies, such as service workers and web manifests, to provide a native-like experience on the web. PWAs can be installed on a user's device, just like a native app, and can be launched from the home screen. PWAs can also work offline, providing users with a seamless experience even when there is no internet connection.

Why use PWAs with Angular?

Angular is a popular framework for building web applications. By combining Angular with PWAs, you can create fast, offline-capable, and installable web applications that provide a native-like experience to users. This can lead to improved user engagement and retention, as well as increased conversions and revenue.

How to add PWA to your Angular app?

Adding a PWA to your Angular app is relatively straightforward, and can be done with the help of Angular CLI and the @angular/pwa package. Here's a step-by-step guide on how to do it:

Install Angular CLI: If you haven't already installed Angular CLI, do so by running the following command: npm install -g @angular/cli.

Create a new Angular project: Run the following command to create a new Angular project: ng new my-app.

Install the @angular/pwa package: Run the following command to install the @angular/pwa package: npm install @angular/pwa.

Add the PWA module to your app: Open the app.module.ts file and add the following import statement: import { BrowserModule } from '@angular/platform-browser';.

Add the Service Worker: Run the following command to add a service worker to your app: ng add @angular/pwa.

Build and serve your app: Run the following command to build and serve your app: ng serve.

That's it! Your Angular app is now a PWA. You can test it by visiting the app in a browser and checking the "Add to Home Screen" option.

Conclusion

PWAs are a powerful way to improve the user experience and performance of your Angular applications. By combining Angular with PWAs, you can create fast, offline-capable, and installable web applications that provide a native-like experience to users. With the help of Angular CLI and the @angular/pwa package, adding a PWA to your Angular app is relatively straightforward. So, what are you waiting for? Power up your Angular app with PWAs today!
CHALLENGE: Describe AI in five words or less.
Tags: discuss, ai, watercooler
Published: 2023-01-30 10:06:00

---
title: CHALLENGE: Describe AI in five words or less. 
published: true
description: 
tags: discuss, AI, watercooler
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4dhbcpr384yfrtg2halz.png
# Use a ratio of 100:42 for best results.
published_at: 2023-01-30 10:06 +0000
---

We thought it'd be fun to end the month with a challenge. If you have the best answer, we'll send you some Deepgram swag!
Unlocking the Power of I/O Systems: A Guide to Understanding Input and Output Operations
Tags: computerscience
Published: 2023-01-30 10:00:00

Input and Output (I/O) operations are a fundamental aspect of computing, allowing programs to interact with the outside world. Understanding I/O systems is crucial for building robust, efficient, and user-friendly software. In this article, we'll explore the importance of I/O systems, how they affect other areas of computer science, and what they are.

---

First, let's talk about why I/O systems are important. I/O operations allow programs to read data from and write data to external devices such as keyboard, mouse, storage, network, and display. This enables programs to receive input from users, read and write data to files, and communicate with other devices and systems. Without I/O operations, programs would be limited to performing calculations on data that is hardcoded into the program, making it impossible to interact with the outside world.

I/O systems also play a crucial role in the performance of a system. I/O operations are often slower than operations that are performed solely in memory, so the way I/O operations are performed can have a significant impact on the performance of a system. For example, reading large amounts of data from a hard drive is much slower than reading the same amount of data from memory. Therefore, understanding I/O systems is crucial for designing high-performance systems.

In addition to its importance for individual programs, I/O systems also affect other areas of computer science. For example, it is a key aspect of operating system design, as the operating system is responsible for managing I/O operations and ensuring that they are performed efficiently. I/O systems also play a crucial role in distributed systems, where multiple machines work together to perform a task, and in the design of embedded systems, where real-time requirements and limited resources make efficient I/O operations critical.

So, what are I/O systems? I/O systems are the mechanisms and techniques used by a computer system to perform input and output operations. This includes the hardware devices and software that enable the transfer of data between the system's memory and external devices, such as keyboard, mouse, storage, network, and display.

---

In conclusion, I/O systems are a fundamental aspect of computing, allowing programs to interact with the outside world. Understanding I/O systems is crucial for building robust, efficient, and user-friendly software. I/O operations allow programs to read data from and write data to external devices such as keyboard, mouse, storage, network, and display. This enables programs to receive input from users, read and write data to files, and communicate with other devices and systems. I/O systems also play a crucial role in the performance of a system, and it is a key aspect of operating system design and distributed systems. Mastering the art of I/O systems can unlock the full potential of our computer systems and ensure optimal performance and user experience.
No One Will Tell You the Top 4 Benefits of Writing Assignments
Tags: academic, writings, assignment
Published: 2023-01-30 09:56:19


![4 Benefits of Writing Assignments](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lal0wsdmqbb9dts1tfl3.png)
These are the top four benefits of writing assignments in the best way possible. It will help scholars understand that writing these academic tasks will help them understand the primary focal points should be and how they can benefit from doing so. 


https://at.tumblr.com/martin-fincher/no-one-will-tell-you-the-top-4-benefits-of-writing/cdw6xnjbymtr
Reset Gallery selection in PowerApps
Tags: powerfuldevs, powerplatform, powerapps
Published: 2023-01-30 09:49:52

Once an item is selected in a PowerApps gallery, the `Selected `property is set.

When navigating to other screens, the `Selected `property will still stay, unless it is explicitly reset or another value is selected.

To reset, we could use 

> 
`Reset({gallery name})`

From what I encountered, sometimes however this alone will not work.

If this happens, check the `Default` property of your Gallery and ensure the value is set to `{}` instead of `empty`

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dmn9ng8j9xctf4m5cae5.png)

On further reading on the official [site](https://learn.microsoft.com/en-us/power-apps/maker/canvas-apps/controls/control-gallery#related-functions), Powerapps will default the gallery selection to the first item of the list or `Default` property value.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lwirdsj2kfdgflca7odf.png)
Today I completed 2022 Solutions on Leetcode🥳🥳🥳
Tags: leetcode, challenge, chiki1601, beginners
Published: 2023-01-30 09:41:54


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9rzkom627mw2i4wf4vi7.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mjnfuaquvcp956mohluk.png)
Analyze and Compare images using Amazon Rekognition
Tags: aws, cloud, awscommunity, 100daysofcloud
Published: 2023-01-30 09:31:53

[30/100] #100DaysOfCloud Today, I learned how to analyze and compare images using Amazon Rekognition.

Amazon Rekognition makes it easy to add image and video analysis to your applications. You just provide an image or video to the Amazon Rekognition API, and the service can identify objects, people, text, scenes, and activities. It can detect any inappropriate content as well. Amazon Rekognition also provides highly accurate facial analysis, face comparison, and face search capabilities. You can detect, analyze, and compare faces for a wide variety of use cases, including user verification, cataloging, people counting, and public safety.

<u>Features :</u>
- Content moderation
 - Detect potentially unsafe, inappropriate, or unwanted content across images and videos.
- Face compare and search
 - Determine the similarity of a face against another picture or from your private image repository.
- Face detection and analysis
 - Detect faces appearing in images and videos and recognize attributes such as open eyes, glasses, and facial hair for each.
- Labels
 - Detect objects, scenes, activities, landmarks, dominant colors, and image quality.
- Custom labels
 - Detect custom objects such as brand logos using automated machine learning (AutoML) to train your models with as few as 10 images.
- Text detection
 - Extract skewed and distorted text from images and videos of street signs, social media posts, and product packaging.
- Celebrity recognition
 - Identify well-known people to catalog photos and footage for media, marketing, and advertising.
- Video segment detection
 - Detect key segments in videos, such as black frames, start or end credits, slates, color bars, and shots.
- Streaming Video Events detection
 - Detect objects such as packages, pets, or people in real-time from live video streams.
- Send connected home smart alerts
 - Deliver timely and actionable alerts when a desired object is detected in your live video streams. Create home automation experiences such as automatically turning on the light when a person is detected.

You can try do it by yourself by following the steps from the link below: [GitHub](https://github.com/aaditunni/100DaysOfCloud/blob/main/Journey/030/Readme.md)
Test Your JavaScript Knowledge with These 12 Basic Quizzes!
Tags: webdev, javascript, beginners, programming
Published: 2023-01-30 09:31:36

Do you know JavaScript? If yes, how well are you familiar with JavaScript? In this article, we will go through some common JavaScript questions. Try them out to see your level of familiarity with JavaScript 😎

1. Variables
    - What is the differences between `var`, `let` and `const`?
    - How to compare two values? What is the difference `==`, `===` and `Object.is`?
2. Data types
    - What are data types in JavaScript?
    - What is the difference between Map and Object?
3. Array
    - What is the difference between `slice`, `split` and `splice`?
4. Object
    - What is `this`? What is the difference between `call`, `apply` and `bind`?
    - Can you explain how `new` operator work?
5. Function
    - What is arrow function?
    - What is IIFE (Immediately invoked function expression)?
6. Class
    - What is the difference between class and constructor in JavaScript?
7. Closures
    - What is closure?
8. Prototypes
    - What is prototypes?
    - What is prototypal inheritance?
9. Scope
    - What is scope in JavaScript?
10. Hoisting
    - What is Hoisting?
11. Promise/Async await
    - What is Promise?
    - What is `Promise.race` and `Promise.all`?
12. ES6+
    - What is destructuring in JavaScript and how does it work in ES6?
    - Are you aware of the latest updates and features in the latest ES version?

### If you're unable to answer it effectively, these helpful links may assist you in finding the solution.

- [ExplainThis](https://www.explainthis.io/)
- [JavaScript Info](https://javascript.info/)
- [MDN](https://developer.mozilla.org/en-US/)
- [You Don't Know JS](https://github.com/getify/You-Dont-Know-JS)

---
Thanks for reading.

If you like the content, check out the free frontend interview prep resources my friends and I curated at [explainthis.io](https://www.explainthis.io/).

I have got frontend engineer offers from both startup and FAANG companies. I would like to help as many people as possible to land a job. If you have any questions regarding to frontend engineering or frontend interview. Feel free to reach out to me at hello@explainthis.io
Just Launched Dyte on Product Hunt
Tags: webdev, javascript, programming, showdev
Published: 2023-01-30 09:28:42

### What is Dyte?

Dyte is a live video calling SDK that lets you embed completely customizable and branded live video conferencing right in your product within minutes.

## The Problem:

Back in 2020, while being stuck in the pandemic, we all had to shift to virtual meetings. Not only was it tiring to keep juggling between tabs and links; but for a business like ed-tech, it also created unnecessary friction for the user. Once a user clicks on the meeting link, they leave the platform with no visibility of their actions and behaviours.
Most of the video SDKs that already existed in the market either had a tightly coupled UI that provided close to no customizability or were so complex to implement that it was as good as building it from scratch.

## The Solution:

This is when we decided to build Dyte. We wanted to create something that could be integrated with 0 hassle while also being completely customizable to fit into your product. 

## Dyte’s Key Features:

- **Customise your meetings end-to-end:** From your meeting UI to the levels of user access you give your users, you can customise everything. Pick and choose every element of your call UI from our design library called [“UI Kits”](https://docs.dyte.io/ui-kit/) or build your own UI from scratch with the video infra being powered by our [“Core SDKs”](https://docs.dyte.io/web-core/quickstart).
- **Ease of Integration:** Dyte is so easy to implement that we have had customers go live in a day. Our in-depth [documentation](https://docs.dyte.io/) will help you navigate Dyte without any hiccups no matter which framework you use.
- **Plug-ins:** Our out-of-the-box plugins such as whiteboard, polls, chat, code editor etc. help you create interactive and collaborative spaces that keep your team engaged!
- **Analytics:** Our [developer portal](https://dev.dyte.io/) brings everything you need in one place. With GUI based configs and controls it also provides you with a granular view of all your meeting and user data.
- **More than video calls:** With Dyte you can seamlessly switch to webinars or breakout rooms whenever required. You can also record and store your video meetings in a single place for easier access.
- **Support:** We provide 24*7 support either through dedicated slack channels or through our [community](https://community.dyte.io) so you never find yourself stuck.



We are live on Product Hunt today! Check us out right now: 

Thank you and I look forward to your comments and feedback! 🙇

https://dyte.io/ph
Thiết kế nội thất ở Rạch Giá
Published: 2023-01-30 09:25:48

SOHO - Đơn vị [thiết kế thi công nội thất ở rạch giá](https://www.noithatsoho.com/blog/kien-thuc-2/don-vi-thiet-ke-noi-that-o-rach-gia-tot-nhat-2023-2) uy tín, bên cạnh đó chúng tôi còn cung cấp các dòng nội thất cổ điển giá rẻ, giúp khách hàng làm nội bật lên căn nhà của mình một cách tuyệt vời nhất.
🏬 Showroom : 800 Nguyễn Trung Trực, An Hòa, Rạch Giá, Kiên Giang.
🛠 Xưởng : 23 Phạm Đức Sơn, P16, Q8.
Hotline : 0947771758
React States works by Reference
Tags: react, reactnative, webdev, javascript
Published: 2023-01-30 09:12:59

Today I learned something cool in React. I was trying to update a post in the list of Posts ( State ) but even after changing the element's key value, it wasn't reflecting in UI ( but showing updated data in the console log. I spent hours trying to figure out why it is happening and according to JS, I was doing the right array manipulation.

So I did some research and a GitHub thread finally guided me to the right track, comes out that the React States are used by references not by value.

"React compares by reference, in the setState(newState) call, you are just setting the state to the same list. Changing the contents of the list doesn't change the reference to the list. When the next state is the same as the old state, React bails out on doing any work.
One quick thing you can do is slice the array like this:

const newData = oldData.slice(0);
newData[0] = 'something'
setState(newData);
"

[GitHub Thread](https://github.com/vercel/next.js/discussions/32802#discussioncomment-2652014)


Here slice() returns a new array based on the given condition, so it breaks the state reference and creates a new array reference. Now React will take the new array as a different entity and will update the state.

React is a beautiful thing ❤️
Creating an application using Ruby & React
Tags: ruby, react, webdev, javascript
Published: 2023-01-30 09:09:05

My partner and I created an application that allows you to view a list of dad jokes that come from the database created using Ruby. I started by forking, then cloning the repository given to me by Flatiron's phase 3 project module which included a majority of the gems required for the project. I had to create 3 models, 2 having a 1-to-many relationship and the other one belonging to those 2 models. I started off creating models for all 3 of them (user, comment, joke) and using Active Record on all of them which had relationships through their hasmany relationships. 
**_joke.rb_**

```
class Joke < ActiveRecord::Base
   has_many :comments,
   has_many :users, through: :comments
```
**_comment.rb_**
```
class Comment < ActiveRecord::Base
   belongs_to :joke 
   belongs_to :user
```
**_user.rb_**

```
has_many :comments 
has_many :jokes, through: :comments
```
After that I decided to create seeds for each model to show some data in the seeds.rb file. I decided to implement faker into the model to make some random information to use. 
**_seeds.rb_**

```
require 'faker' 
I18n.reload! 
#reset seeds file 
User.destroy_all
Comment.destroy_all
Joke.destroy_all 

#create 20 random usernames
20.times do 
   User.create(username: Faker::Name.name, password: 'password')
end

#create 80 random comments
80.times do 
   Comment.create( 
      comment: Faker::Lorem.paragraph(sentence_count: 3)
      rating: Faker::Number.between(from: 0, to: 5),
      joke_id: Faker::Number.between(from: 0, to: 108)

#99 lines of dad jokes 🥴
(insert 99 lines of dad jokes here)
```
After that I had to create migrations for each model that I created in the terminal so that I could create tables for each model.
`$bundle exec rake db:migrate db:seed`
After that I noticed application controller had sinatra base inherited into it so I inherited that into my jokes controller where I had all of my crud operations.

```

```
We struggled a lot on the react portion of the project where we had to create Comment.js, ErrorPage.js, JokesList.js, JokesForm.js, Login.js, NavBar.js, Search.js, SingleJoke.js all having their own functions inside of the code to essentially be exported into App.js and having App.js exported into index.js. We start by rendering the  Jokes onto JokesList which allows us to render the database of jokes onto the main page. We also have buttons implemented that allows us delete the jokes from the page and if you click on a joke, you can edit the joke. 
```
const editJoke = (id, newJoke) => { 
   fetch(`${API}/jokes/${id}`, { 
      method: "PATCH",
      headers: { 
         "Content-Type": "application/json",
      }, 
      body: JSON.stringify({
         joke: newJoke
      }),
   })
};
```
Delete the joke. 

```
const handleTrash = (someName) => {
   fetch(`${API}/jokes/${someName.id}`, {
      method: "DELETE"
   }) 
   const newJoke = jokes.filter 
```
SRE book notes: Emergency Response
Tags: sre, books, emergency
Published: 2023-01-30 08:56:18

These are the notes from [Chapter 13: Emergency Response](https://sre.google/sre-book/emergency-response/) from the book [Site Reliability Engineering, How Google Runs Production Systems](https://sre.google/sre-book/table-of-contents/).

This is a post of a series. The previous post can be seen here:

{% embed https://dev.to/bitmaybewise/sre-book-notes-effective-troubleshooting-2a74 %}

In this chapter there were 3 case studies, highlighting real outages that happened within Google’s infrastructure, and the processes taken to remediate and fix the problems. 

---

> Things break; that’s life.

> First of all, don’t panic!

> If you feel overwhelmed, pull in more people.

---

> Because we hadn’t tested our rollback procedures in a test environment, these procedures were flawed, which lengthened the outage. We now require thorough testing of rollback procedures before such large-scale tests.

The moral of the story: always test your rollback and backup recovery procedures folks. Until you have tested your rollback, there’s no rollback.

---

> Time and experience have shown that systems will not only break, but will break in ways that one could never previously imagine. One of the greatest lessons Google has learned is that a solution exists, even if it may not be obvious, especially to the person whose pager is screaming. If you can’t think of a solution, cast your net farther. Involve more of your teammates, seek help, do whatever you have to do, but do it quickly. The highest priority is to resolve the issue at hand quickly. Oftentimes, the person with the most state is the one whose actions somehow triggered the event. Utilize that person.

---

> There is no better way to learn than to document what has broken in the past. History is about learning from everyone’s mistakes. Be thorough, be honest, but most of all, ask hard questions.

> Ensure that everyone within the company can learn what you have learned by publishing and organizing postmortems.

> Once you have a solid track record for learning from past outages, see what you can do to prevent future ones.

---

> Ask the Big, Even Improbable, Questions: What If…?

---

> When it comes to failures, theory and reality are two very different realms. Until your system has actually failed, you don’t truly know how that system, its dependent systems, or your users will react.

---

If you liked this post, consider subscribing to my newsletter [Bit Maybe Wise](http://bitmaybewise.com/).

You can also follow me on [Twitter](https://twitter.com/bitmaybewise) and [Mastodon](https://mastodon.online/@bitmaybewise).

---

Photo by [Jason Leung](https://unsplash.com/es/@ninjason) on Unsplash