teleren/devto huggingface dataset:
5 reasons I am passionate about coding
Tags: webdev, discuss, computerscience, career
Published: 2022-11-17 22:04:36

## Reason #1: I love to code because it is usable art.

Just like architecture, which is an art used by people daily and affects their everyday life, so is code. You can create something and people interact with, use, touch and work with. That is an amazing feeling.

## Reason #2: I love to code because it is a team effort.

Since code is a usable art, a whole team of people are connected to the practice. From the client to the account managers, and including the business people, finance, the support team, QA team, designers, product managers and project managers.

Code touches every single person in the organization and makes a difference to every single user that touches it (for good or bad).

## Reason #3: I love to code since it makes a difference in peoples’ lives.

When I manage to build something that saves people time and prevents them from doing tedious tasks, I know that I am making a difference in that person’s life. They now have more time to be with their kids, more time to think up ideas (something computers cannot) and more time to connect to people.

## Reason #4: I love to code because if I can think it, I can make it a reality.

In programming if you can consistently create a logic that interacts with the other parts of the computer and other applications you can make it happen. All you need to do after you thought it up is actually write it and presto a new thing is created into the world. That really feels like being a wizard.

Unlike physics where physical restraints are in everything you do, there are no limitations in coding besides your ability to think of a logically consistent solution. When writing an application you do not need to think about the strength of the material, what will happen when there is wear and tear or how you will reach an element to fix it 3 years down the road. It is virtual in a good sense and everything that comes with it.

## Reason #5: I love to code because it is fun.

The sense of accomplishment when solving a really complicated problem cannot be beat! It just feels as if you have been at the best party in town.

## Success intersects passion

I would love to hear from others on why they love coding! Please leave your reason/reasons in the comments. Cheers!
Meta tags para utilizar em seu site
Tags: webdev, programming, frontend, metatags
Published: 2022-11-17 21:07:19

Meta tags são elementos em HTML que ajudam a informar aos mecanismos de pesquisa o que se trata uma página da web. Em outras palavras, elas fornecem dados em códigos fonte, como o título de um conteúdo ou uma breve descrição de página de um site e blog.

Pré-set de meta tags para utilizar em seu site: 

```
<!-- Primary Meta Tags -->
<title>Meta Tags — Preview, Edit and Generate</title>
<meta name="title" content="Meta Tags — Preview, Edit and Generate">
<meta name="description" content="With Meta Tags you can edit and experiment with your content then preview how your webpage will look on Google, Facebook, Twitter and more!">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://metatags.io/">
<meta property="og:title" content="Meta Tags — Preview, Edit and Generate">
<meta property="og:description" content="With Meta Tags you can edit and experiment with your content then preview how your webpage will look on Google, Facebook, Twitter and more!">
<meta property="og:image" content="https://metatags.io/assets/meta-tags-16a33a6a8531e519cc0936fbba0ad904e52d35f34a46c97a2c9f6f7dd7d336f2.png">
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://metatags.io/">
<meta property="twitter:title" content="Meta Tags — Preview, Edit and Generate">
<meta property="twitter:description" content="With Meta Tags you can edit and experiment with your content then preview how your webpage will look on Google, Facebook, Twitter and more!">
<meta property="twitter:image" content="https://metatags.io/assets/meta-tags-16a33a6a8531e519cc0936fbba0ad904e52d35f34a46c97a2c9f6f7dd7d336f2.png">
```




"fontes https://metatags.io/"

Espero que tenha ajudado!:) Deixo aqui meu [linkedin](https://www.linkedin.com/in/stefany-repetcki/) e [github](github.com/StefanyRepetcki) ❤️
Web Developer Salary
Published: 2022-11-17 20:47:40

[Senior web developer salary](https://kodershive.com/senior-web-developer-salary-in-the-us-a-closer-look-into-the-job-market/) is one of the most searched online terms in the United States. The reason behind this fact is that college graduates want to get an estimate of how much they will be able to earn as web developers after they have gained some decent hands-on experience.

Just enrolled in a web development course? Or are you planning to? Interested in Senior Web Developer Salary? Or how much do senior web developers earn in the US? This guide will help you. Let's start the discussion.

The US Bureau of Labor Statistics (BLS) reports that the median annual income for web developers was $77,030 in May 2021. According to really.com, a senior web developer can earn an average of $99,989 per year as of September 2022. It becomes $7,079 per month, $1,829 per week, or $42.90 per hour. As for the average annual income, it ranges between $69,936 and $142,956.

Glassdoor is another leading platform that conducts frequent analysis to present the latest salary scale updates of various professionals working for a wide range of departments across the globe. According to the platform, the median salary for senior web developers is $127,520, which is higher than Actual.com and Zip Recruiter's survey. Most salaries are between $96,000 and $182,000.
Visit our site: [Koders Hive](https://kodershive.com/)
A Deep Dive Into the Foundation Of Linux
Tags: operatingsystems, linux, opensource, hacking
Published: 2022-11-18 04:22:42

---
title: A Deep Dive Into the Foundation Of Linux
published: true
date: 2022-11-17 20:20:56 UTC
tags: operatingsystems,linux,opensource,hacking
canonical_url: https://medium.com/the-gray-area/a-deep-dive-into-the-foundation-of-linux-66cb977f615d
---

[![](https://cdn-images-1.medium.com/max/2600/0*c75QZp96zCJrDzOC)](https://medium.com/the-gray-area/a-deep-dive-into-the-foundation-of-linux-66cb977f615d?source=rss-79a7fbf51e21------2)

TL;DR- An in-depth article exploring Linux. We’ll be looking at core concepts and functionalities, it’s origin, and it’s applications.

[Continue reading on The Gray Area »](https://medium.com/the-gray-area/a-deep-dive-into-the-foundation-of-linux-66cb977f615d?source=rss-79a7fbf51e21------2)
Responsive Navbar
Tags: codepen, css, html, javascript
Published: 2022-11-17 20:17:25

OnlineITtuts teaches some awesome stuff on their youtube-channel.
I've built some works to study and learn how other guys do simple coding.  
In this lesson they teach how to make a responsive navbar with CSS, HTML and Javascript. Pretty cool simple to do. On Codepen I've saved this work.  
First step: building the navbar  
Second step: style the navbar  
Third step: do some responsive stuff  
Fourth step: toggle horizontal navbar to mobile navbar with Vanilla JS  
{% codepen https://codepen.io/berecont/pen/MWXEyNX %}
React .diff algo!
Tags: react, webdev, javascript, programming
Published: 2022-11-17 20:06:46

.diff(diffing)algorithm in React
it compares the old DOM to NEW.

We all know Reacts is fast as it uses Virtual DOM Tree
React uses the Reconciliation algorithm to compare the previous TREE to the new TREE, but the TC will be in O(n^3), so react uses some heuristics to make it in O(n)

-> Two assumptions:
1) Different elements produce different trees
React will parse the tree using, for a node of tree, if the element type is changed, (for example from ‘section’ to ‘div’). React will destroy all the sub-tree under that element and will reconstruct it from scratch.

2)The developer can hint at what elements will remain stable across renders with a key prop. (This is why React is always warning us to include keys in our props).
OpenPGP identity proof
Published: 2022-11-17 20:04:42

---
title: OpenPGP identity proof
published: true
description: 
tags: 
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2022-11-17 20:01 +0000
---

This is an OpenPGP proof that connects [my OpenPGP key](https://keyoxide.org/84BF523F3F3EFA760C3E2C0C0C1A484B87269CD7) to [this dev.to account](https://dev.to/piraces). For details check out [https://keyoxide.org/guides/openpgp-proofs](https://keyoxide.org/guides/openpgp-proofs)

[Verifying my OpenPGP key: openpgp4fpr:84BF523F3F3EFA760C3E2C0C0C1A484B87269CD7]
Your SEO in danger - Angular Universal ignores errors in your app 🚨
Tags: ssr, angular, nguniversal, seo
Published: 2022-11-17 19:47:08

**By default, all http errors from backend endpoints or runtime errors happening asynchronously in your SSR app are ignored by the Angular Universal Express engine. ExpressJS always returns to a client a "success" response (with a http status `200`) with whatever HTML got eventually rendered, regardless any runtime errors. 
Obviously http errors from backend endpoints may result in missing the crucial data to be displayed in final HTML output. Or a runtime error in a component’s logic might cause rendering incorrectly a part of the page. Because Angular Universal Express ignores such errors, the malformed HTML result sent to the client may be eventually indexed by Google, harming your SEO.**

The only exception are unsuccessful [`APP_INITIALIZER`](https://angular.io/api/core/APP_INITIALIZER) hooks (returning a rejected Promise or errored RxJs stream) and errors in a synchronous bootstrap of the root component - which really interrupt the rendering. Such an error from `APP_INITIALIZER` (or from constructor of the root component) is thrown up to the ExpressJS server. This by default causes sending to a client a raw error’s stacktrace along with the http status `500`.

For more, see a minimal reproduction repo:
- with Angular 14 https://github.com/Platonn/angular-universal-14-error-handling-default
- with Angular 16 https://github.com/Platonn/angular-ssr-error-handling__ng16-1

 
_Disclaimer: this article refers to Angular in version 14.2. The next versions may differ in behavior._

**UPDATE 2023 July**: I've created a feature request in the Angular repo for propagating asynchronous errors in SSR: https://github.com/angular/angular/issues/50829

**UPDATE 2024 May**: The Angular Team started working on this issue in the PR https://github.com/angular/angular/pull/55787
Flask & Stripe eCommerce - Deploy LIVE on Render
Tags: webdev, stripe, flask, ecommerce
Published: 2022-11-17 19:23:11

---
title: Flask & Stripe eCommerce - Deploy LIVE on Render
published: true
description: Create a simple eCommerce powered by Flask & Stripe and later Go LIVE on Render in just a few minutes.
tags: webdev, stripe, flask, ecommerce
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w996yblafijrydxw4xau.jpg
canonical_url: https://blog.appseed.us/flask-stripe-deploy-live-on-render/
---
Hello Coders!

The video mentioned in this article explains how to start a `simple eCommerce` solution powered by [Flask & Stripe](https://github.com/app-generator/ecommerce-flask-stripe) in a local environment and **GO LIVE on Render** using the [Visual Deployer](https://appseed.us/go-live/). The project used in this demonstration is saved on GitHub under the MIT License (commercial, eLearning usage allowed). *Thanks for reading!*

> Resources used in this material:

- 👉 [Flask & Stripe eCommerce](https://github.com/app-generator/ecommerce-flask-stripe) - `free product` used in the DEMO
- 👉 [Render API Wrapper](https://github.com/app-generator/deploy-automation-render) - `free library` used for deployments
- 🚀 [LIVE Deployer](https://appseed.us/go-live/) - service available for `PRO Users`

{% embed https://www.youtube.com/watch?v=iXjmWUNbTjA %}

---

## VIDEO Transcript

- ✅ Access the [eCommerce Sample](https://github.com/app-generator/ecommerce-flask-stripe)
- ✅ `Create a new project`
- ✅ `Download` the sources locally
- ✅ `Start` the project `in Docker`
- ✅ Access the [LIVE Deployer](https://appseed.us/go-live/) tool
- ✅ Explain the Deployment Concept
- ✅ `Deploy` the sample with `Drag & Drop`
- ✅ Access the **Render** Dashboard
- ✅ Visualize the compilation build
- ✅ Access the LIVE DEMO 

![LIVE Deployer - Drag & Drop Service](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h2ljnn7cylvw8i64joo1.png)

---

> `Thanks for reading!` For more resources, please access:

- 🚀 Free [support](https://appseed.us/support/) provided by AppSeed (email & Discord)
- 👉 More [free apps](https://appseed.us/apps/open-source/) crafted in Flask, Django, and [React](https://appseed.us/apps/react/)
CONTINUOUS DEPLOYMENT of my FULLSTACK Firebase / Angular app 👍
Tags: angular, firebase, github, deployment
Published: 2022-11-17 19:12:34


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

I have built several Angular apps but I have been continuously procrastinating when it comes to deploying them.

To be completely honest - deployment makes me nervous...

It is not a flawless process, there are usually at least few things that can go wrong, and when I am not sure of what I am doing - I just worry about - messing up my app...

So I started with something relatively simple -
deploying an Angular & Firebase app with GitHub Actions.

Yes, I wanted to automate a new deployment on every push,
since I am never completely done with adding features to my apps.

More about the App:

Name - Collab Match
Frontend - Angular
Backend & Hosting - Firebase
Deployment - GitHub Actions
link to live app - [Collab Match](https://collab-match.web.app)

Resources:
[](url)Zoaib Khan's YT videos on how to store user data from Firebase Authentication to Cloud Firestore using @angular/fire were a great help

-- I have been advised on sharing the process of building the entire app, and not just the final stage, but I am still not completely comfortable with doing that and also - it is hard to find the time.

Remember I am working full time, after work I am continuing building a personal project app, this is already so so tiring and not easy to keep up with...
And to add on top of that - creating a post about every single thing that I did, ( considering that those posts are not going to be just simple function declarations or reshared few liner tips ) - that really becomes a lot...

But I will try...
BOXCODING
Tags: webdev, html, css, javascript
Published: 2022-11-17 19:09:17

BoxCoding is a website where we share free resources about web design and development to inspire design-focused frontend developers and to improve your coding skills.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/251vqs9wdos5lyn8mo2a.jpg)
[https://www.avabucks.it/](https://www.avabucks.it/)
No more tables for email
Tags: design, email, code
Published: 2022-11-17 18:51:35

---
title: No more tables for email
published: true
description: An approach to eliminating the need for using tables for design structure.
tags: design, email, code
# cover_image: https://blocksedit.com/content-code/img/no-tables-for-outlook.png
# Use a ratio of 100:42 for best results.
# published_at: 2022-11-17 18:47 +0000
---

Table layouts in email lead to a number of rendering and accessibility issues, so the less we use them the better. Outlook for Windows is the only reason we even need to use tables anymore and it's now at just around five percent of email clients used.

So here’s an approach to not having to use tables for structure that's worth considering: use divs for structure only, and don’t do anything for Outlook, letting multi-column div layouts turn into single-column layouts in Outlook. Essentially making the Outlook version look similar to what you might do for a mobile version of a design.

###[More details on the approach] (https://blocksedit.com/content-code/no-more-tables-for-email/)
MongoDB Atlas Hackathon 2022 on DEV (Think outside the JS box - FARM stack)
Tags: atlashackathon22, farmstack, mongodb, thinkoutsidethejsbox
Published: 2022-11-17 18:46:54

## What I built
Garbage Bin Filled Up Level Detector using FARM stack

![What I built](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zs6kl6letkcwx603uehn.png)

### Category Submission: Think Outside the JS Box


### App Link
Fully functioning App : http://13.229.182.57/
App UI only : https://joyful-druid-3d8eff.netlify.app/

### Screenshots

![App](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oze13tagpt191fo8wv1v.png)

![filled 25%](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pp4z8ywiekmlidv4evkt.png)

![Filled 50%](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c8k33632j1ie2cafv5kq.png)

![Filled 75%](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/68na67p1tojo5vgytvj9.png)

![Filled 100%](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ondn6l466uuv37bad7ki.png)

### Description
This app shows the level filled in a garbage bin, if the bins are full the cleaning crew can clean up the garbage bins. This app increases the efficiency of the cleaning crew by preventing them from checking unfilled bins and reduces time wastage. This app is designed to be used by people that have less or none technical knowledge, so the bin adding process have been added to the main page itself. So anyone can easily add a new bin and start using the system straignt away. In the hardware side, all they have to do is replace the current bin lid with a lid that have all the hardware that need to measure and send data to the database.

### Link to Source Code
https://github.com/JosephLahiru/GarbageLevelDetector.git

### Permissive License
MIT License 

## Background
(What made you decide to build this particular app? What inspired you?)
In my University, there are alot of garbage cans that needs to clean up every day, each and every one of them are categorized into plastic, food waste and paper(digestive) items. the pastic ones does not get filled easily, aslo they does not any bad smell like food waste bins. So they do not need to be cleaned every day. So I made this app to indicate to the cleaning crew, what bins should be cleaned off and what is their filled level.

### How I built it
(How did you utilize MongoDB Atlas? Did you learn something new along the way? Pick up a new skill?)
I used raspberry pi zero w with 4 untrasonic sensors on top of the garbage bin's cap, they measure the garbage filled level and send the data directly to the mongodb, and the web app takes that data from mongodb and preview those data. I learned ReactJS from this project and how to handle mongodb requests and python. Also I learned the FARM stack.
Technical sophistication(2)-Psuedocode(1)
Tags: webdev, beginners, programming, tutorial
Published: 2022-11-17 18:32:07

In our journey to technical sophistication, let's talk about one of the most underestimated and under-utilized tool within the tech community-**Pseudocode**.

What is pseudocode? How does it add to technical sophistication? What are its benefits? This article and the next sets to explain all that. Keep your tea in hand and read.

FreeCodeCamp refers to pseudocode as 'fake code'. Here is the best way to explain what that means:
Computer languauges are written by humans but require syntaxes and rules that must be strictly adhered to for a successful compilation. Humans do not naturally read in computer languages and often make mistakes in following this strict rules. Hence the thought; How can human-techies, write a program that is similar to computer language, flexible and easy to understand? Pseudocode came to save the day. Psuedocode cannot be understood by the computer though.

In very formal terms, Psuedocode is a detailed yet readable description of what a computer program or algorithm must do, expressed in a formally-styled natural languauge rather than in a programming language.

## Rules for writing in pseudocode

1. Capitalize the initial word.
2. Make one statement per line.
3. Indentation is very neccessary to show hierarchy.
4. Keep it simple, short and readable.
5. write in the naming format not in computer language format.
6. End multiline structures using END keywords.

## Steps to follow when solving a problem in pseudocode

1. Understand the question: This is the most important part of the process, if the question is understood, half of the problem is solved and you are ready to take up the challenge.
2. Break the problem down: Smaller tasks help to get the work done. The more smaller tasks you solve, the closer you are to the full solution.
3. Understand what the function does: The work of a function is to accept data as input, work on it with steps and return output. The more functions you study, the easier it gets.
4. Indicate what you need to solve the problem.
5. Document the high-level solution: This is an excellent way to walk it out.
6. Evaluate and indicate the outcome.
7. Detail the step for executing the solution.

Congratulations! You are a step closer to being a sophisticated techie.

In the next article, we will get our hands on real life examples and the benefits of Pseudocode with links to practice section. See you there!
Typing Function Components with Children
Tags: typescript, react
Published: 2022-11-17 18:15:56

Typing **[Function Components](https://reactjs.org/docs/components-and-props.html#function-and-class-components)** while using `children` has changed since React 18+. 

Previous to React 18, `FC` included `children`. 

Now, the types for `FC` do _not_ include `children`.

```ts
// @types/react
type FC<P = {}> = FunctionComponent<P>;

interface FunctionComponent<P = {}> {
  (props: P, context?: any): ReactElement<any, any> | null;
  propTypes?: WeakValidationMap<P> | undefined;
  contextTypes?: ValidationMap<any> | undefined;
  defaultProps?: Partial<P> | undefined;
  displayName?: string | undefined;
}
```

Instead, one can use `PropsWithChilden` as a shortcut to specifying `children` type for your Function.

```ts
// @types/react
type PropsWithChildren<P = unknown> = P & { children?: ReactNode | undefined };
```
## Examples

```react
import { FC, PropsWithChildren, ReactNode } from 'react';

// Arrow function: explicitly typing children
type PropsA = {
  children: ReactNode;
};
export const A = ({ children }: PropsA): JSX.Element => <>{children}</>;

// Arrow function (shortcut)
type PropsB = FC<PropsWithChildren<Record<string, unknown>>>;
export const B: PropsB = ({ children }) => <>{children}</>;

// Named function (explicitly)
type PropsC = {
  children: ReactNode;
};
export function C({ children }: PropsC): JSX.Element {
  return <>{children}</>;
}

// Named function (shortcut)
export function D({
  children,
}: PropsWithChildren<Record<string, unknown>>): JSX.Element {
  return <>{children}</>;
}

```