teleren/devto huggingface dataset:
Small Wins - A Seamless Bug Fix
Tags: promiseall, vuedevtools, vue, buefy
Published: 2022-03-04 21:08:32

So I was having an issue where my app wouldn't load once the user logged in.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vndemsiqjp8cwcyk32m4.gif)
 
The new "Timeline View" in Vuex Dev Tools was a huge help in dialing-in on where the problem was. I've been using it all week and it's incredibly well-built.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vj3nrezyijldqwrm9xxe.gif)
 
I initially thought that the route was being loaded before the `AppConfig` and `UserConfig` had a chance to be pulled from firebase. Looking at the code, I realized that I wasn't even pulling them from Firebase at all 😅 More specifically, I pulled the config in on the initial page load, but not when the user logged in.

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

I really love the first time I'm able to implement a piece of knowledge seamlessly. In this case, it was the `Promise.all` function. In this case, I wait for both `fetchAppConfig` and `fetchUserConfig` to load before updating the router:

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

note: `ToastError` and `ToastNotifications` are just wrappers for [Buefy component](https://buefy.org/documentation/toast)

I also made sure to notify the user before calling the promises. It could take a second to load the database and it might confuse users if there's no response on the page to clicking "Log In" button.  
 
Final solution looks and feels great 😊

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qmkdsghfy07c3wzi04de.gif)
It's Starting...Again.
Tags: beginners, devops
Published: 2022-03-04 21:04:50

I've officially restarted my learning journey in the world of programming and DevOps. After two years of studying Python off and on and getting my introductory AWS certification (Certified Cloud Practitioner), it felt like I needed to push myself to get to the next level. I chose the [cloud resume challenge](https://cloudresumechallenge.dev/docs/the-challenge/aws/) to get some practical experience using what little I know so far. It's hard, fun, and is really forcing me to understand the breadth of skills I need to succeed in a DevOps role. I'm about a month in and still going strong. Stay tuned for my next post where I catch you up to where I am now in the challenge.
[Azure Trial Hackathon Submission Post Placeholder Title]
Tags: azuretrialhack
Published: 2022-03-04 21:02:18

[Instructions]: # (To submit to the Microsoft Azure Trial Hackathon on DEV, please fill out all sections.)


### Overview of My Submission
[Note]: # (Please make sure the project links to the appropriate GitHub repository, and includes the [Apache-2 permissive license](https://www.apache.org/licenses/LICENSE-2.0)  and README.)


### Submission Category: 

[Note]: # (AI Aces, Computing Captains, Low-Code Legends, Java Jackpot, or Wacky Wildcards:)


### Link to Code on GitHub

[Note]: # (Our markdown editor supports pretty embeds. Try this syntax: `{% github link_to_your_repo %}` to share a GitHub repository)
[Note]: # (Your repository must include a README)
[Note]: # (You must use and list a permissive license for your code: MIT, Apache-2)


### Additional Resources / Info

[Note:] # Screenshots/demo videos are encouraged!

[Note]: # (Be sure to include the DEV usernames of your collaborators, if any. Prizes for winning projects with multiple collaborators will be sent to the person who posts this submission and they will distribute the prize evenly. DEV will not split prizes as per our rules)

[Reminder]: # (Submissions are due on March 8, 2022 @ 11:59 PM UTC)
XCP-ng/XenServer install additional package like nload, htop, iftop etc
Tags: xcpng, xenserver, tutorial
Published: 2022-03-04 20:50:35

If you want to install additional package from `epel` repositories, then suffix `--enablerepo=epel` to your `yum` command.

Examples:
```
yum install nload --enablerepo=epel
```

```
yum install iftop --enablerepo=epel
```
Mac code - run on Windows
Published: 2022-03-04 20:49:19

I have a react-native app that was originally coded on a Mac machine.  When trying to run this code on windows there are an immense number of errors thrown, and it won't run (obviously). 

As this is just 'code', I'm wondering what possible issues might be causing this code ( which does run on the Mac, and is in production ) to fail when using VS Code on Windows. All packages from the original Mac code have been successfully installed.

I can post the list of errors if anyone feels a need to look at them as I cannot make much sense of them.

Thanks in advance. Any suggestions are much appreciated.
Socket.IO
Published: 2022-03-04 20:35:56

One of the most popular technologies for building a real-time chat is Socket.IO which provides a bidirectional communication channel between a client and a server.

## Socket.IO consists of:
1. a Node.js server: Source | API
2. a JavaScript client library for the browser (which can be also run from Node.js): Source | API
It has two parts: a client-side library that runs in the browser, and a server-side library for Node.js.
## How does Socket.IO Work?
The main idea behind Socket.IO is that you can send and receive any events you want, with any data you want. Sockets have traditionally been the solution around which most real-time chat systems are architected, providing a bi-directional communication channel between a client and a server. The server can push messages to clients. Whenever you write a chat message, the idea is that the server will get it and push it to all other connected clients. It works on every platform, browser or device, focusing equally on reliability and speed. Socket.IO is built on top of the WebSockets API and Node.js. It is one of the most depended upon library on npm (Node Package Manager).

## Principle Of Work:
The bidirectional channel between the Socket.IO server (Node.js) and the Socket.IO client (browser, Node.js, or another programming language) is established with a WebSocket connection whenever possible, and will use HTTP long-polling as fallback.
The Socket.IO codebase is split into two distinct layers:
the low-level plumbing: what we call Engine.IO, the engine inside Socket.IO
the high-level API: Socket.IO itself.
##
we have explored, Socket.IO is a great tool for developers wanting to set up bi-directional socket connections between client and server. This makes simple applications such as live chat much simpler to implement. Socket.IO makes many things easier and provides fallbacks for unsupported clients, but has its own trade-offs.
Redux
Published: 2022-03-04 20:23:36

## Definition of Redux
Redux is an open-source javascript library. Redux is for managing and centralizing application state. Most commonly libraries such as React or Angular are used redux for building user interfaces. Redux is a predictable state container for javascript apps. It is Similar to Facebook's Flux architecture that was created by Dan Abramov and Andrew Clark. It can run in different environments such as client, server, and native, and are easy to test. We can use redux with react or any library. It allows React components to read data from a Redux Store, and dispatch Actions to the Store to update data.

 

## Main part of Redux
Life of the redux are :-
1) Action that stores different kinds of function those we
need.
2) Reducer that calls function from the action according to
conditional statement.
3) Store that store full functionalities.

 

## Use of Redux
Redux can be used as a data store for any UI layer. It can be used with any UI layer or framework, including React, Angular, Vue, Ember, and vanilla JS. It is used for STATE MANAGEMENT, Fetching And Storing Data, Assigning Data To UI Elements, Changing Data, UNDO, REDO,COLLABORATIVE ENVIRONMENT , OPTIMISTIC UI,PERSISTING AND BOOTING UP FROM STATE, REALLY EXTENSIBLE SYSTEMS, TIME-TRAVEL DEBUGGING, AUTOMATED BUG REPORTS, Downsides Of Redux, STEEP LEARNING CURVE,“BOILERPLATE” CODE, PERFORMANCE PENALTY.

In a word , Redux can work with any front-end frameworks, such as Angular, Ember.js or even jQuery, or even vanilla javascript.
TIL Presence Validation on Boolean Column
Tags: rails, todayilearned, webdev
Published: 2022-03-04 20:21:58

Hello, I am Carlos Augusto de Medeiros Filho. This is a short post on what I learned today about rails model validations. I usually write those posts to my future self and to consolidate the knowledge in my brain. I hope you find it useful.

## The standard way of validating the presence

Rails give us a way to validate the presence of the model attributes.

For instance, imagine we have a User model with a column named `age`. We want to raise an error every time we try to save an instance of `User` in the database before sending the query.

One way to do it would be:

```ruby
class User < ApplicationRecord
  validates :age, presence: true
end
```

Rails checks the presence/absence of the property by using the `#blank?` method.
However, the way this method handles boolean values may be a little bit misleading. See below:

```ruby
false.blank? # => true
```

## Solution
A possible solution would be that instead of checking the presence per se, we could check if the value is one of the values we pass in as a list, in this case `[true, false]`.

Imagine that our `User` has a column that defines if that user is an admin or not named `is_admin`. We can check the presence, or the inclusion of the value of this property is true or false, meaning that we can't have a `nil` value for `is_admin`.

```ruby
class User < ApplicationRecord
  validates :is_admin, inclusion: { in: [ true, false ] }
end
```
Interview Topics for a JS Full Stack Engineer in 2022 💻
Tags: javascript, node, react, software
Published: 2022-03-04 20:18:58

Hello 👋 Rockstars 🎸, so lately i have been job hunting 👨🏻‍🎓 and i am mostly these days preparing for the job interviews and therefore i created a list of interview subjects that are mostly likely to be in an interview for the role of Full Stack developer (JS). These questions are what i have came across mostly in my interviews so therefore i decided to write about it. 

When I talk about Full-Stack engineer (JS), I am most likely to be talking about the stack that includes: ✅
- Javascript 
- React
- Node Js
- CI/CD
- Software engineering concepts

So Let's get into it. 

- Micro Services 
- Monolithic
- Server-less
- Event-Driven architecture
- Message Driven architecture
- Procedural Programming 
- Functional Programming
- Object-Oriented Programing
- OOPS
- Inheritance
- Polymorphism
- Abstraction
- Encapsulation


Node JS

- What type of frameworks are commonly used
- What is Rest API
- What is GraphQL
- How is GraphQL and Rest API is different
- What is Node Js
- How is Node Js different from the javascript that is being used in browsers.
- Can we make node Js multi-threaded 
- How do you scale a node Js application 
- What is clustering in Node Js 
- What is HTTPS servers
- What is express
- What are the middlewares in the express application
- A Use case for middleware in the express application 
- response Status codes we commonly used group 100, group 200, group 300, group 400, group 500
- Testing with Jest
- Unit Testing
- What are containers
- What is Docker
- what is K8S
- How do you handle authentication
- How you handle OAuth2
- What is JWT
- How do you validate JWT
- Where do you usually validate JWT

React Js

- What is React
- What is Hooks
- Name commonly-used Hooks
- What is State
- What is Props
- Difference Between States and props
- Can we change states directly
- What is server-side rendering
- What is client-side rendering
- How is client-side and server-side rendering different
- What are HOC
- What is Redux
- What is a store in redux
- What are actions in redux
- What are reducers in redux
- What are the effects in SAGA
- What are generator function
- How is a generator function different then the normal function
- Commonly used reserved keyword of a generator function

Javascript

- Define Event Loop
- What is javascript
- How does Javascript handle concurrency 
- What are callbacks
- What are Closures
- What is debouncing and throttling

- What is Babel 
- What is Webpack

- What is Integration Testing
- What is acceptance testing
- What is system testing

- What is MongoDB
- What is Redis
- What is micro front-end
- Pros and cons of micro front-end

- What is CI 
- What is CD
- What is a pipeline


Above are some of the topics that i feel like are very likely to be in an interview question. I will keep on updating the list. If you want to show some support or stay upto date with what i am doing you can follow me on my linkedIn. 

Anyways thank you for being here. hope you have a wonderful day.

([Raja Osama](https://rajaosama.me/))
Bits of myself
Published: 2022-03-04 19:57:52

Hi! Everyone my name is Haruna Benjamin and I am a code newbie here, I've had this account for a while or so but haven't made any use of it(my perfect excuse was I wasn't sure what I was going for in tech. Haha) but I'm on the right track now and I'll be publishing my journey here as I dive deep into the word of techy stuff, curious huh? Well stick with me and lough yourselves out watching a newbie stumble and rise,oooo!!! Almost forgot, my hobbies include watching cartoons and learning creative design, UI/UX and listening to music. Well that's all for now but greater and much better things a waits......
Redux Toolkit-A standard way to write redux
Tags: react, redux, reduxtoolkit, javascript
Published: 2022-03-04 19:48:32

**What is Redux Toolkit?**
Redux Toolkit is the new reliable way to consist of Redux into your project. It attempts to resolve a number of the common issues developers expressed in using the original Redux package. along with an excessive amount of setup, too complex, and desiring too many addon applications to function. With the toolkit, there may be much less configuration and a lot more work is performed under the hood and middlewares had been included with async thunks. while the original Redux package become very unopinionated and allowed you to choose which packages you desired to use with it, the new Redux Toolkit is opinionated as it comes with those packages out of the sector. you can consider Redux Toolkit as the Create React App for Redux as it comes with matters that will help get you started faster.

**API  includes Redux Toolkit**

**configureStore():** wraps createStore to provide simplified configuration options and good defaults. it could automatically integrate your slice reducers, provides something Redux middleware you supply, consists of redux-thunk by default, and enables the use of the Redux DevTools Extension.

**createReducer():** Reducer support directly mapping specific action types to case reducer function that will update the state when that action is dispatched.

**createAction():** Based on given action type string it generates a action creator function.This function has its own toString() method so that it can be used as a type constant.

**createSlice():** createSlice is a higher-order function that accepts an initial state, an object full reducer function, and a slice name. it automatically generates action creators and action types that correspond to the reducers and state.

**createAsyncThunk:** Accepts an action type string and a function that returns a promise, and generates a thunk that dispatches pending/fulfilled/rejected action types based on that promise.

**createEntityAdapter:** Generates a set of reusable reducers and selectors to manage normalized data in the store.

**createSelector():** Selectors typically expect the Redux state object as an argument, while slice reducers only have access to a specific subset of the entire Redux state.
5 HTML Features You Should Know
Tags: webdev, programming, html, css
Published: 2022-03-04 16:26:20

We deal with a variety of technologies, frameworks, and programming languages as web developers. While learning HTML, CSS, and JS is simple, mastering each of them is difficult.
Even though there are numerous advantages to knowing more about HTML's features, it is sometimes disregarded. You can save a lot of time by using HTML features rather than creating them from scratch. Furthermore, your markup will be considerably cleaner and more user-friendly.
So let's look at five HTML features you've probably never heard of before! I hope this article will help you a lot!.

## 1. Input Suggestions
The html 
```
<datalist>
```
 element contains a set  of 
```
<options>
```
elements that represent the recommended options availabe to choose from within other controls.

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

## 2. Details Discloure
The html 
```
<details>
```
element creates a discloure widget in which information is visible only when the widgets is toggled into an "open" state.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lpakhz7xi6ahw15pf830.PNG)
## 3. The Base Element
The html 
```
<base>
```
element specifies the base URL to use for all relative URLs in a document.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kcvwjrt0l84ta4ciz8rs.PNG)
In this example I am setting base Url to https://i.pravatar.cc and target to blank. The images are loading taking into account that base URL + their respective src attribute. The anchor elements are redirecting to the base URL + the href attribute.

## 4. Lazy Loading Images And Iframes
You can add the loading attribute and set its value to lazy to defer the loading of both images and iframes until they become visible in the browser.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5il6909e1tif84tlchpu.PNG)

## 5. The Picture Element
The html 
```
<picture>
```
element contains zero or more
```
<source>
```
elements and one
```
<img>
```
element to offer alternative versions of an image for different display/device scenarios.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uuk9nzydge6yxexwcru8.PNG)
In the above example if the browser width is atleast 800px then either head.jpg or head2x-jpg is used, depending on the device resolution. If the browser is between 450px and 800px then either head-small-2x.jpg is used again depending on the device resolution.

I hope this article will help you a lot 😅.
Redux Toolkit
Published: 2022-03-04 19:45:42

## Introduction
In redux, all state are in a central position so it is easy to manage the state and easier to understand when, where, why, and how the state in  application is being updated

## Create a Redux Store
Redux store is a container that holds application's global state
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j923b095haqe9hb8pooo.PNG)


## Provide the Redux Store to React

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

## Create a Redux State Slice

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

## Add Slice Reducers to the Store

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/72dxkbv3gjq95y80lzzw.PNG)

## Use Redux State and Actions in React Components

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zl7r4khtndoyl0c1yaao.PNG)
Redux toolkit
Tags: redux, react, javascript, beginners
Published: 2022-03-04 19:45:42

**Redux Toolkit**

Redux Toolkit is basically a technique that is used to roll out a Redux-based solution.  it implements some design patterns which can help us to write fewer code and organize it effectively. Global state was such a large thing that every piece of data, UI change, every button state and so on ended up in the Redux store. By using redux, no more props drilling was needed.

**What problems will be solved by using redux?**

- One of the biggest gripes with Redux improvement turned into the want to put in a number of applications depending on what we want to do, like when going from consumer state to also dealing with server nation, middleware and thunk become required, in the Toolkit we can have the entirety that we want.

- In Redux many boilerplate code become required to do simple such things as having statuses for load or error, however RTK query is a bundle protected within the Toolkit so that it will introduce more or much less the equal magic as react-query and all that boilerplate code will be tons decreased.

So Redux Toolkit is an abstraction and opinionated version of the commonplace Redux that tries to standardize the manner we manage nations with Redux.

**Purpose**
The Redux Toolkit bundle is intended to be the same old manner to write down Redux good judgment. We can't solve each use case, but within the spirit of create-react-app and apollo-increase, we are able to try to provide a few equipment that abstract over the setup system and deal with the maximum not unusual use cases, in addition to encompass a few useful utilities to be able to allow the person simplify their software code. We will use the Redux Toolkit to provide sensible middleware and defaults, make our reducers more readable, cut up aside the ones massive reducer switch statements, and handle async operations comfortably.