teleren/devto huggingface dataset:
Angular: Where does the term 'directive' come from?
Tags: angular, todayisearched, javascript, html
Published: 2021-11-20 14:14:04

I'm trying to understand the Angular terms and philosophy. One of the most basic building blocks of Angular seems to be a `directive`.
As a non-native English speaker, I don't find this term intuitive, but rather abstract. So what's up with this term?

The Angular glossary says that "A [`directive` is a] class that can modify the structure of the DOM or modify attributes in the DOM and component data model".
Ok, it got something to do with changing the DOM. But still, why 'directive'?
It got something to do with 'direction'?😄

Seems VueJS also has the concept of `directive`.
VueJS docs: "If you have not used AngularJS before, you probably don’t know what a directive is. Essentially, a `directive` is some special token in the markup that tells the library to do something to a DOM element."

This includes a reference to the AngularJS framework, and, yes, it seems AngularJS also has this term.

AngularJS docs:  "At a high level, `directives` are markers on a DOM element (such as an attribute, element name, comment or CSS class) that tell AngularJS's HTML compiler ($compile) to attach a specified behavior to that DOM element (e.g. via event listeners), or even to transform the DOM element and its children."

Ok, so it seems that the term originally comes from AngularJS, and Angular and VueJS just inherited it.

I guess, in Layman terms, a `directive` is a way of "*teaching the HTML to do new tricks*" (not mine). 
But still... why `directive`?

Still not sure, maybe the creators thought of this term because a `directive` it's like **commanding (giving directives/instructions/orders)** to a static technology (HTML) in order to make it smarter.
5 good posts in "Living with Kubernetes" 
Tags: kubernetes, aws, tutorial, devops
Published: 2021-11-20 15:28:21

Thanks a lot to AWS Justin Garrison for this good series of "Living with Kubernetes" ! Recommend read and understand more in kubernetes API versioning, Upgrade strategies, Multi-cluster management (suggest to read new EKS connector [Link] (https://docs.aws.amazon.com/eks/latest/userguide/eks-connector.html) too), how to debug cluster and workloads/pods ! 

5 good posts below: 
1. API Lifecycles and You
[Link] (https://thenewstack.io/living-with-kubernetes-api-lifecycles-and-you/)
2. Cluster Upgrades
[Link] (https://thenewstack.io/living-with-kubernetes-cluster-upgrades/)
3. Multicluster Management
[Link] (https://thenewstack.io/living-with-kubernetes-multicluster-management/)
4. Debug Clusters in 8 Commands
[Link] (https://thenewstack.io/living-with-kubernetes-debug-clusters-in-8-commands/)
5. 12 Commands to Debug Your Workloads
[Link] (https://thenewstack.io/living-with-kubernetes-12-commands-to-debug-your-workloads/)

e.g. part 1:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/if9s2t2itr8xp07corvp.jpg)

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

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

part 5:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8wejvjcsk2p9j7hba22m.jpg)
Simple to Complex Roadmap for Full-stack development (JavaScript Specific)
Published: 2021-11-20 15:53:17

# Simple to Complex Roadmap for Full-stack development (JavaScript Specific)

HTML > CSS > JavaScript > ES6 > React > Node.js > Express > MongoDB > MySQL > Github > Deployment

**Do you want to go advanced?**

RESTful API > Payment Gateways (Stripe & Paypal) > Firebase > GraphQL > Headless CMS > Next.js (SSR, ISR, SSG)

**Do you still want to learn ? here some more**

Command Line > React Native > Web Sockets (Socket.io) > Redis > NGINX > Serverless > Docker > AWS

**Is that's not enough for you? you are the champ, there are some extras for you.**

1. Blockchain (DApps)
2. Augmented Reality
3. WebRTC
4. IoT
5. Streams
6. Electron.js
7. Maps, Geocoding and Geofencing

There are many many more to learn but I think this is enough for this post, Keep learning, Keep improving, and do remember one thing never ever stop learning because there's always **"One more thing" to learn.**
Weekend with Azure
Tags: cloud, azure, cloudcomputing
Published: 2021-11-22 11:10:40

Hi everyone,
I am Mayank Gupta, a second-year student at Vellore Institute of Technology, Chennai, India, pursuing Bachelor of Technology in Computer Science. I have a zeal to work and learn new skills everyday with dedication, enthusiasm & passion, and aim to create difference in community as much as I can.

I recently attended a webinar by @kunalKushwaha, notes of which have already been uploaded on my twitter handle 

You can have a look at that...was really an amazing session. This only ignited my interest towards cloud computing, which motivated me to learn more about the subject.
After lot of research I found that cloud computing is something that I was looking for, all my first year!

I've decided to dedicate my weekends to cloud computing.

Now I know you all will be thinking why am I giving introduction in a blog...actually this blog is the announcement to the future streak

from now I'll be learning cloud computing with Azure as my main cloud service, 

### Why have I chosen Azure? 
This topic already has a lot of content floating on the web, I don't want to jump into the fight 
All the platforms are great, just being a student we should start with anyone which you like and feel is going to boom in the future_ I am going with Azure you can choose yours

### Announcement
Every weekend I'll be learning a new topic which will cover training of Azure and will be posting my notes with the learning and key concepts.

### Target 
 Microsoft Azure Administrator Certification [AZ-104]
![Microsoft Azure Administrator Certification [AZ-104]](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oin4mcx0pai8p3bc86ha.png)

**Do add your suggestions in the comment section**
---
Having Troubles Setting Up Webpack in React ?
Published: 2021-11-21 00:52:56

If you are following the great tutor Shaun Wassell tutorial on Linkedin on "Building Modern Projects With React" and you are having issues setting up your webpack to work correctly, you may wish to use the configuration below.Please bear in mind that the tech world is an ever evolving world, if later in the future, this solution does not work, kindly do a research and upload for the community as well. You may not need this in you day to day react project, but this will give you an indepth knowledge of 

const path = require("path");
const webpack = require("webpack");

module.exports = {
  entry: "./src/index.js",
  mode: "development",
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /(node_modules)/,
        loader: "babel-loader",
        options: {
          presets: ["@babel/env"],
        },
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
  resolve: {
    extensions: ["*", ".js", ".jsx"],
  },
  output: {
    path: path.resolve(__dirname, "dist/"),
    publicPath: "/dist/",
    filename: "bundle.js",
  },
  devServer: {
    static: {
      directory: path.join(__dirname, "public/"),
    },
    port: 3000,
    devMiddleware: {
      publicPath: "https://localhost:3000/dist/",
    },
    hot: "only",
  },
};

The above configuration got my project running after I uninstalled and re-installed the css loader. Here is the command. $ npm remove css-loader && npm install --save-dev css-loader

The attached image was the initial error I was getting while running the code.

Have all the fun you can.
Reviewing Others Pull Requests
Published: 2021-11-21 04:09:46

# PR1: [Show feeds count on status dashboard](https://github.com/Seneca-CDOT/telescope/pull/2471)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/63ptdb94d7nb26m14oyk.png)

Dustin and I worked the same issue, but it split into 2 small issues. For his part, he did a great job, but in my PR, I got a recommendation to change the files structure. I also told Dustin about it in his PR. 

# PR2: [create github actions for deployment](https://github.com/Seneca-ICTOER/IPC144/pull/48)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tjow4nz9m3ngd9crswm9.png)

I recommend the owner of this PR to extend the node-version to older version. This is because not all of us have updated Node to 16.0. So this might be an issue for them and they might run into error when they push or send a PR.
8 Programmer Life Lessons They Don’t Teach You At School
Tags: programming, beginners
Published: 2021-11-21 13:31:37

Some things you don’t learn at school. These lessons come right from the work floor; I learned them the hard way!

[Read the full article for free on Medium using this link](https://medium.com/pythonland/8-programmer-life-lessons-they-dont-teach-you-at-school-dc8049f3e9e8?sk=73ac18dc9052e8f1cfb85e548b1a8594)
Level up your GitHub with GitHub Actions and Kubernetes, with Sr. Principle Dev from Red Hat
Tags: devops, github, docker, kubernetes
Published: 2021-11-22 03:26:03

# Watch Senior Principle Developer Karan Singh talk about the recipe to level up your software skills at Git Commit Show LIVE with Q&A!

**_Automate your workflow from idea to production._** This is the tagline of GitHub Actions, with an increasing complexity in software toolchain, GitHub Action's Pipeline has helped a lot in automating a lot of stuff... It makes it easy to automate all your software workflows, now with world-class CI/CD. Build, test, and deploy your code right from GitHub. Make code reviews, branch management, and issue triaging work the way you want.

We bring an expert in this field from an Amazing Open Source organization, "Red Hat" to come up with an amazing masterclass session on GitHub Actions and DevOps. Where you can watch as well as have a live chat, face-to-face with the author to ask questions as well. 

Join Git Commit Show for ✳**FREE**❇ here: [_Link_](http://push.gitcommit.show/) 

Karan Singh is a **Senior Principal Architect & Developer Evangelist at Red Hat**. In his role, Karan focuses on architecting and developing cloud-native composable solutions on Kubernetes. Part of his responsibilities is to enable developers and builders with rapidly changing cloud-native technologies. 

He holds a strong background in infrastructure, SRE, DevOps, data services, and data analytics and is also specialized in designing and building scalable and cloud-native distributed & event-driven systems while believing that better software deserves better architecture. 

He is also a published author, a frequent speaker at conferences, and an avid blogger at https://ksingh7.medium.com.

![Git Commit Show Masterclass](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8agzn6mb9kzx04u190tz.png)
Join Git Commit Show for ✳**FREE**❇ here: [_Link_](http://push.gitcommit.show/) 

Also we have a Discord Server: [_Link_](https://discord.gg/JFWP8c2gPG)
When Are You Ready To Freelance?
Tags: freelance, career
Published: 2021-11-23 00:09:21

Many people dream of the freedom being a freelancer brings. However, it can be a difficult journey, especially if you aren't ready for it.

How do you know if you are ready?

**1. Do you have the experience and can work on your own?**

Clients expect freelancers to be able to hit the ground running, so make sure you know your job well enough to work on your own.

**2. Do you have a portfolio?**

Clients need proof you can complete the job. Having a portfolio also helps you answer #1 correctly.

**3. Are you able to manage yourself?**

Freelancers need excellent time and project management skills. You won't have the structure a typical job provides to help keep you accountable.

**4. Are your people and communication skills strong?**

You will need to market and sell yourself, solve disagreements, and handle all communications yourself.

**5. Do you have a plan to get clients and get paid?**

Before starting, you need to know how you are going to make money. Decide if you will use a freelance marketplace, referral, cold calls/emails, etc.

**6. Are you ready to deal with the up and downs?**

Freelancing can be fantastic, but it can also be stressful. Like any job, there will be bad days and good days. You may have to be ready to deal with a drop in income at times too.

The great thing about freelancing is all the skills you need; you can learn and practice until you are ready to jump into the freelancing pool.
code every day with me
Tags: javascript, programming, 100daysofcode, algorithms
Published: 2021-11-23 01:33:29

##--DAY 26--
Hi, I am going to make #100DaysOfCode Challenge. Everyday I will try solve 1 problem from leetcode or hackerrank. Hope you can go with me until end.
**Now let's solve problem today:**
Problem: Isomorphic Strings
Detail: [here](https://leetcode.com/problems/reverse-vowels-of-a-string/)
My solution (javascript):
```js
var reverseVowels = function(s) {
    s=s.split('');
    let vowel = ['a','e','i','o','u','A','E','I','O','U'];
    let i=0,j=s.length-1;
    while(i<j){
        if(!vowel.includes(s[i])) i++;
        else if(!vowel.includes(s[j])) j--;
        if(vowel.includes(s[i])&&vowel.includes(s[j])){
            [s[i],s[j]]=[s[j],s[i]];
            i++;
            j--;
        }
    }
    return s.join('');
};
```
-->*If you have better solution or any question, please comment below. I will appreciate.*
What is dev.to for?
Tags: watercooler, discuss, beginners
Published: 2021-11-23 03:01:48

Lately there has been an influx of certain kinds of posts on dev.to that we should probably talk about: 

## Uneducated opinion pieces

Before I describe what kind of articles I am referring to, let's first clarify what dev.to enabled and what - in my opinion - should not be jeopardized: The absence of gate-keeping, which destroyed the vibe of many other platforms, communities, etc.

However, this inclusiveness has particular dangers that have met a threshold recently. What I am referring to are posts that seem to be driven by a "learn by explaining it" approach and that are often simply too dangerous to leave uncommented. Way too often a mode of speech is used that would lead the beginner to believe that an expert is sharing advice while completely wrong or misleading statements are picked up and quoted. This has become so bad that I find people citing these sources and therefore unwillingly propagate misinformation similar to the false-news phenomenon in the political realm. Additionally, these articles tend to state opinion as fact. In my opinion, it is relatively easy to avoid mixing opinion with facts through language in our field as we only apply established technology.

## So what's the call to action?

The question is what this community should do to avoid becoming a heap of nonsense or half-truths rather than a source of actual knowledge, given the understandable fact that many learners aren't able to distinguish between transfer of knowledge and confident nonsense. 

Are you expecting the same, or is this observation based on my personal feed? Thoughts?
Sharing Secret Environment Variables with SvelteKit and Vercel
Tags: vercel, svelte, sveltekit, ssr
Published: 2021-11-23 03:40:53

If you deploy with Vercel, you know how easy it is to to work with. Sometimes you want to hide certain environment variables from your users. In this example, I am going to use the Firebase Api keys, although they do not necessarily need to be secured.

## Step 1

- Create `.env` file at the root of your sveltekit project

## Step 2

- Add this file `.env` to your `.gitignore` file

## Step 3

- Add the environment variables you want to secure to the file with the `VITE_` prefix.

SvelteKit with vite imports the [dotenv](https://kit.svelte.dev/faq#env-vars) package under the hood.

Example `.env` file:
```typescript
VITE_FIREBASE_APIKEY="----"
VITE_FIREBASE_AUTH_DOMAIN="---"
VITE_FIREBASE_PROJECT_ID="---"
VITE_FIREBASE_STORAGE_BUCKET="---"
VITE_FIREBASE_MESSAGING_SENDER_ID="---"
VITE_FIREBASE_APP_ID="---"
VITE_FIREBASE_MEASUREMENT_ID="---"
VITE_DGRAPH_ENDPOINT="---"
```
## Step 4
- Create your configuration file.

Example: `src/config.ts`
```typescript
let process: any;

const p = process?.env ? process.env : import.meta.env;

export const dgraph_config = p.VITE_DGRAPH_ENDPOINT;
export const firebase_config = {
    "apiKey": p.VITE_FIREBASE_APIKEY,
    "authDomain": p.VITE_FIREBASE_AUTH_DOMAIN,
    "projectId": p.VITE_FIREBASE_PROJECT_ID,
    "storageBucket": p.VITE_FIREBASE_STORAGE_BUCKET,
    "messagingSenderId": p.VITE_FIREBASE_MESSAGING_SENDER_ID,
    "appId": p.VITE_FIREBASE_MEASUREMENT_ID,
    "measurementId": p.VITE_DGRAPH_ENDPOINT
};
```

- SvelteKit uses `import.meta.env.VITE_YOUR_VARIABLE` as a way to automatically import any file with `.env`.

- Vercel uses `process.env.YOUR_VARIABLE` to import the environments.

- You don't need the `VITE_` prefix in Vercel, I just kept it for consistency.

## Step 5 - Typescript Users

- If you use typescript (why you wouldn't is beyond me) and you get a type error with `import.meta.env`, add this to `tsconfig.json`:

```typescript
{
    "compilerOptions": {
        ...
        "types": [
            "vite/client"
        ]
```

## Step 6 - Vercel

- Add your equivalent variables to your Vercel Project under Settings --> Environment Variables:

![Vercel Environment](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j19btxvi8x4c8p8us47r.png)

## Step 7

Finally, import the code in any file you want to use it in:

```typescript
import { firebase_config } from '../config';
```

Note: If you want to test production and dev versions on your local machine, you could also use `dev` to detect which mode you're in:

```typescript
import { dev } from '$app/env';
```

Hope this helps someone,

J
40% OFF for 4 months - Cloudways Black Friday 2021 Offer
Tags: webdev, blackfriday, discount, hosting
Published: 2021-11-23 05:32:49

---
title: 40% OFF for 4 months - Cloudways Black Friday 2021 Offer
published: true
description: This BLACK FRIDAY, Cloudways is offering 40% OFF for 4 months on all managed cloud hosting plans. Just use the coupon code while signing up, and enjoy hassle free hosting.
Offered Deal: 40% OFF for 4 months
Coupon Code: BFCM2021
Validity: 23rd November to 1st December 2021

tags: #webdev, #blackfriday, #discount #hosting
---

This BLACK FRIDAY, Cloudways is offering 40% off for 4 months on all managed cloud hosting plans. Just use the coupon code while signing up, and enjoy hassle free hosting.

Offered Deal: **40% OFF for 4 months**
Coupon Code: **BFCM2021**
Validity: 23rd November to 1st December 2021

<a href="https://www.cloudways.com/en/">**40% OFF for 4 months - Cloudways Black Friday 2021 Offer**</a>

[Deal Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ey3wg03x4zzucxmfuph4.jpg)
---
Cloud Orchestration 101 | A Complete Guide for Beginners
Tags: testing, cloud
Published: 2021-11-23 08:02:32

"The reasoning for why the cloud computing market is making its way to reach a monumental value of $623B by 2023 is simple – it’s the innovation that comes with it.

From unlimited data storage, disaster recovery, to nationwide networking abilities that cloud computing services bring, small start-ups or enterprise-scale firms can now rethink about the traditional means IT resources management."
Continue reading: https://www.katalon.com/resources-center/blog/cloud-orchestration/
Use sanitizers to avoid Redux Devtools crash
Tags: react, redux, devtools, frontend
Published: 2021-11-24 16:43:42

---
title: Use sanitizers to avoid Redux Devtools crash
published: true
description: Use actionSanitizer and stateSanitizer to avoid Redux Devtools crash because of excessive use of memory
tags: React, Redux, devtools, frontend
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bqwqyinbftdu1hfqxgv1.jpg
---

Recently I was having a lot of trouble using Redux Devtools in a project, it was interesting that I could access the tools in most of the views but for one particular section the extension stop being responsive and after some minutes it crashed.

## The problem

I started debugging and find out that we were saving a few problematic things into the store. The idea is to have things that are easy to serialize, it is not a rule but there are good reasons for that, the main one being that often you want to persist and restore state. I found that there were some functions and recursive structures (circular references) and those were obviously hard to serialize.

I was seriously considering a refactor, but fortunately I found the [troubleshooting section](https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/Troubleshooting.md#excessive-use-of-memory-and-cpu) in the redux-devtools-extension repository and it sent me to the [`actionSanitizer` and `stateSanitizer` API](https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/API/Arguments.md#actionsanitizer--statesanitizer) description. Probably a refactor should still be considered, but this little thing saved me plenty of time and pain.

## The solution

The idea here is that actions and states can be replaced by something else manually, so it does not fix the serialization problem at all, and won't solve an app performance problem if it exists, but it will stop that part of the state being analyzed by the Redux Devtools so it can run as smoothly as expected.

I don't know about the internals of the extension but when you think about it, it makes a lot of sense, time traveling needs to move from one state to the other and the only way to do it is to have a representation of that state and the extension was having a hard time trying to get that snapshot. 

## References

- [Redux Devtools' Troubleshooting](https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/Troubleshooting.md#excessive-use-of-memory-and-cpu)
- [Redux Devtools' `actionSanitizer` and `stateSanitizer` API](https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/API/Arguments.md#actionsanitizer--statesanitizer)

-----

If you enjoy this post please consider following me and dropping a line here or in Twitter.
10 Awesome JavaScript One-Liners
Tags: javascript, computerscience, softwaredevelopment, programming
Published: 2021-11-24 04:17:00

---
title: 10 Awesome JavaScript One-Liners
published: true
date: 2021-11-16 13:01:25 UTC
tags: javascript,computerscience,softwaredevelopment,programming
canonical_url: https://javascript.plainenglish.io/10-awesome-javascript-one-liners-e294b8dbd9cd
---

[![](https://cdn-images-1.medium.com/max/2600/0*muBRcTTLYAB84suk)](https://javascript.plainenglish.io/10-awesome-javascript-one-liners-e294b8dbd9cd?source=rss-5e600d697a10------2)

Highly effective one-liners in JavaScript that you should know.

[Continue reading on JavaScript in Plain English »](https://javascript.plainenglish.io/10-awesome-javascript-one-liners-e294b8dbd9cd?source=rss-5e600d697a10------2)

---

Follow me on [Twitter](https://twitter.com/harendraverma2)