teleren/devto huggingface dataset:
Sharpen Your Skills with Front-end mentor
Tags: html, css, frontend
Published: 2021-03-14 18:30:50


So you want to sharpen your skills and do real-world projects, that show what you can do and what you are capable of then [Front-end mentor](https://www.frontendmentor.io/challenges) is what you need.

Each project includes designs (mobile & desktop), project content(text & images), a style guide, and a project brief.
And you can choose the difficulty level of the challenge.

Once you pick a project you will be able to download everything and get started right away.

**Remember Practice makes Perfect**

**Good Luck**
Principles and Philosophies Part 1
Tags: programming, testing
Published: 2021-03-14 18:28:44

I started my career about 9 years ago, the sole Web UI automation developer, using Selenium (Java), automating tests for insurance forms of a homeowners insurance company. I lucked out in that I was given the time to read, think, and experiment to come up with principles and philosophies that have held true to this day.

# EVERYTHING IS A TRADEOFF/BEST PRACTICES CAN BE RELATIVE
Understanding what your tradeoffs are will go a long way to knowing how/why you're using the right tool for the job as well as identifying when a better tool can be used. Also understanding when to use Best Practices and **the reason** for when you should not means you truly understand what you're trying to solve with your programming. 
I believe these points are extremely important to being a good problem solver/developer. 

# Tests should be **READABLE**
The easier it is to read a test, the faster and easier it is to understand what a test is doing, if you ever need to. This is helped by many things, but **Encapsulation** in particular helps with hiding technical details behind easy to understand names. Behavior Driven Development (BDD), in my opinion, seems to be the current epitome of creating readable tests, but there are tradeoffs and stipulations that I don't think many really take into consideration, and it ends up being more trouble than it's worth. In any case, the concept of Page Objects[[1]](https://martinfowler.com/bliki/PageObject.html)[[2]](https://www.selenium.dev/documentation/en/guidelines_and_recommendations/page_object_models/) is encapsulation for UI components and their functionality that can be tremendously expanded on. This and more is used in order to write **readable** tests, the benefits are immediate and can be read for themselves.

# Tests should be **EFFICIENT**
From a Selenium/Appium perspective, this means avoid using sleeps (without an explicit and detailed explanation for why you need to) and Implicit Waits, which applies an unecessary blanket wait for elements to appear, unless you're dealing with a strictly static website. Referring to the my first principle, there are certainly times when you would use these things, but they're usually used as a way to slow down automation indiscriminately and without understanding, which makes your tests very inefficient.

I hope to make this a series of posts to finally write these thoughts down.
various posters about .Net
Published: 2021-03-14 17:38:48

<sub>Photo by <a href="https://unsplash.com/@thoutbox">Yonghyun Lee</a> on <a href="/s/photos/poster">Unsplash</a>
  </sub>

[here](https://goodies.dotnetos.org/) is the link to various posters (async / deadlock, debugger, memory, .NET Garbage Collections) about .Net .

Hope this helps !
Test-Driven Development or Test-Driven Design?
Tags: tdd, programming
Published: 2021-03-14 16:49:00

We all know that TDD means “Test-Driven Development” but I think of TDD more as a design tool than a testing tool.

That’s why I call it “Test-Driven Design”.

Imagine that you want to implement a software component to evaluate a mathematical expression. I’ll assume a class, but it could be anything (a function, etc.).

I would write a test first (in pseudocode, the specific language is not important here):

```
ExpressionEvaluatorTest:
    shouldEvaluateExpression():
        expressionEvaluator = ExpressionEvaluator()
        value = expressionEvaluator.evaluate(“-(3-2)/4^-2”)
        assert value == -16
```

This would be the very starting point for the creation of all the sub-components required to accomplish this task. 

Writing the code for `ExpressionEvaluator.evaluate()` would reveal the need for an `ExpressionParsingStrategyFactory` class that would `build()` an instance of an `ExpressionParsingStrategy` class, which would `execute()` on the expression and generate an instance of an `ExpressionParseTree` class, whose `evaluate()` method would return the final value:

```
ExpressionEvaluator:
    evaluate(expression):
        parsingStrategy = ExpressionParsingStrategyFactory.build(SHIFT_REDUCE_PS)
        parseTree = parsingStrategy.parse(expression)
        return parseTree.evaluate()
```

Each class should be in turn TD-designed, so `ExpressionParsingStrategyFactoryTest` would drive the design of the `ExpressionParsingStrategyFactory` class, which would reveal the need for a `ShiftReduceParsingStrategyTest`, which would drive the design of a `ShiftReduceParsingStrategy` class, which would lead to an `ExpressionTokenAnalyserTest`, which would drive the design of the `ExpressionTokenAnalyser` class, which would make the class `ExpressionToken` emerge, whose design would be driven by `ExpressionTokenTest`.

So TDD is really a way of discovering the various components required by our code, and *only those* components. This enforces the *S*, the *I*, and the *D* principles in [SOLID]( https://en.m.wikipedia.org/wiki/SOLID) and leads to a better modularization than classic code-first methods.
JavaScript Array Methods Cheat Sheet with brief explanation.
Tags: javascript, beginners, programming
Published: 2021-03-14 16:40:32

Today I'll share some important array methods cheat sheet along with short summary which will tell you main usage of the particular method.

*Lets Start!*

### ⚡ `concat()`,`copyWithin()`,`every()`,`fill()` Methods
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n8ppau182b6hpsh5q643.png)

---

### ⚡ `filter()`,`find()`,`findIndex()`,`forEach()` Methods
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pj8ie0803jd5j0tenc5r.png)

---

### ⚡ `reduce()`,`join()`,`includes()`,`some()` Methods
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l156274cynz942jsj7le.png)

---

### ⚡ `reverse()`,`push()`,`pop()`,`unshfit()`,`shift()` Methods
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gpedazomy07ek5raofl6.png)

---

### ⚡ `slice()`,`splice()`,`sort()`,`flat()` Methods
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v7o2d6ry4g14m1uzsnaq.png)

---

[Get the source code](https://github.com/RakibRahman/JavaScript/blob/master/array-methods.js) || [Download The CheatSheet](https://drive.google.com/file/d/1WJ9sKUm-MGxBetbJGqq-hfW_xfRu9Hpi/view?usp=sharing)

Thanks for reading this article.Stay tuned and keep coding!
Talk Less, Listen More
Tags: culture, listening, empathy, engineer
Published: 2021-03-14 16:33:25

---
title: Talk Less, Listen More
published: true
description: Level up as an engineer
tags: culture, listening, empathy, engineer
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jhv3yavdq443gyvr63nw.jpg
series: How To Level Up as an Engineer
---

When you are in conversation with someone, are you usually eager to respond, or do you wait and listen to _understand_?


If you want to be a good communicator, it is important that you understand the value of **active listening**. Active listening allows for:
- more trust
- faster conflict resolution
- improved productivity

The act of [active listening](https://en.wikipedia.org/wiki/Active_listening) doesn't only involve knowing what a person has said, but also observing non-verbal cues like body language and behavior.

### Things to avoid
There are a few things you should avoid as an active listener: rehearsing, filtering, and problem solving.

#### Rehearsing
When you are focused on rehearsing, you are focused more on responding than listening. This can be counterproductive because you may not fully address what a person has said. 


#### Filtering
When you are filtering, you are only listening for what you want to hear. This can be counterproductive because you can be limiting the potential for bonding in a conversation.


#### Problem Solving
When you are problem solving, you are trying to give advice or feedback. This is counterproductive because you may be emphasizing solutions over a person's feelings.

Try this in the next one on one you have and let me know what you think.
AI powered surveillance for businesses
Published: 2021-03-14 16:23:14

❓ Problem:
A business needs a security camera, but is low on server capacity. Thatswhy the business can not store videos 24/7.

💡 Solution:
Using Machine Learning, we can tell the camera when it has objects in view and use a lightweight backend to store the timestamps and also the type of objects which where detected.

Find out more here: https://github.com/MarcoSteinke/survAPI-Surveillance-Camera-Analysis
Getting started with create-react-app for Beginners
Tags: react, ui, design, webdev
Published: 2021-03-14 16:21:46

Hello there, my name is Ghameerah McCullers & I'm Software Developer here to talk with you today about what it's like starting your first React application.

For starters, you should check out the official documentation on React's website (https://reactjs.org/docs/getting-started.html). This site has a really great guide on how getting started with React works.

Also, to get your feet wet, you should play around with the Tic Tac Toe tutorial providing by the official React website (https://reactjs.org/tutorial/tutorial.html). Building this mini-project should give you hands-on experience with the tool.

I would also suggest reading the Thinking in React blog post (https://reactjs.org/docs/thinking-in-react.html) in order to get more familiar with the concepts of React.

In order to play around with the tool, you'll need to create your first application. This can be accomplished by simply running this command in your single-application project directory:
```
npx create-react-app <cool-app-name>
```

Notice, you can name your application WHATEVER you like, it's your prerogative. Just be mindful about your naming, you'll want your project name to be related to the purpose of your app.

As a good developer, we want to make sure we have the most up-to-date tools. Set up your development environment so that you can use the latest JavaScript features and optimize your application. You'll need to have Node >= 10.16 and npm >= 5.6 on your machine. NPM & Nodejs (Node) can be downloaded on your machine using the following website for reference: https://www.npmjs.com/get-npm.

Once you have created your project, move into the folder to see the application run on your local machine. In your terminal type the following:
```
cd <cool-app-name>
npm start
```

I hope the article was helpful for React beginners, if you have any questions reach out to me via LinkedIn or Twitter. Happy Coding!
Next Level Portfolio Landing Page Design - HTML & TailwindCSS
Tags: html, css, tailwindcss, webdev
Published: 2021-03-14 16:16:42

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5g5r0g0uvhx56vtohyz0.png)

####Hello Dear Developers,
Welcome to another new post on TailwindCSS, so in this post, we are gone be discuss how to create a **next-level portfolio landing page UI Design with HTML & TailwindCSS** & also little **CSS Animations** as well. for the creation of this landing page, we use both Flexbox & Grid UI Layout as well so stay tuned.

#####Outline :
0:00​ : Intro
0:11​ : Result
1:11​ : Logo
2:33​ : Background Image Make over
3:41​ : Menu bar
6:00​ : Background Text Make over
9:27​ : CSS Animations

If you want to see/catch the step by tutorial, please check out the below-given tutorial to understand things step by step!

{% youtube eMK2CBCFFYw %}
Use Resource Bundles Now -- A Static Web Server
Tags: resourcebundles
Published: 2021-03-14 15:32:28

[Resource Bundles](https://github.com/WICG/resource-bundles) is a new proposal regarding the problem of nested resource loading on the web. HTTP/2 Server Push previously tried to solve the problem without success; Resource Bundles is the next iteration of the attempt to push the web to the era of native ES Modules.

In the Resource Bundles era, bundlers like webpack would emit a Resource Bundle instead of a big JavaScript file. Browsers would natively understand Resource Bundles.

A resource bundle is simply a set of multiple resources. A resource is a pair of raw payload and all HTTP headers for that payload, identified by URLs. In addition to a resource bundle, bundlers would also emit a “manifest”, a dependency graph between resources in the resource bundle. Thanks to this, browsers can download all the resources needed by one request.

By browsers natively understanding Resource Bundles, efficient caching of resources is enabled too. Browsers can choose to request a subset of whole resource bundle, only requesting ones that aren't cached yet. The server that serves resource bundles would also support subsetting.

Although Resource Bundles are in its very early stage and few of its details are decided, you can try using Resource Bundles now. The author created a tools for parsing and serializing Resource Bundles based on the current draft of the proposal, as well as a CLI for inspecting and creating Resource Bundles and a static server for serving resources from a Resource Bundle.

The last one, static server, is actually going aside from the main purpose of Resource Bundles, and is described as “[other uses](https://github.com/WICG/resource-bundles/blob/main/other-uses.md)” in the proposal. As resource bundles already include HTTP headers for each resource, configuring a static web server would be made extremely easy with Resource Bundles. This means that, in a future, bundler config would include HTTP headers for generated resources.

Finally, you can try that static server now! Try [@resourcebundles/static-server](https://github.com/uhyo/resourcebundles/tree/master/packages/static-server).

*Disclaimer: this work is totally unofficial.*
Why learn Python as a DevOps Engineer? 🤔
Tags: python, devops, beginners, automation
Published: 2021-03-14 15:09:16

I saw a lot of messages and questions about **why a DevOps Engineer needs to know Python**. It seems there are only vague answers to that on the internet so with the below video I want to **give you clear answers** to the following questions:

1. Why is Python so popular in general?
2. Why is Python so demanded in DevOps?
3. What is Python used for in DevOps? Giving you specific use cases
4. How much Programming and Python knowledge you need as a DevOps Engineer?
5. How to get started with Python?

Watch the full video here 🤓
{% youtube 6u5NE1GiQDk %}

-----------------
**Like, share and follow me** 😍 for more content:
- [Private FB group](https://www.facebook.com/groups/techworldwithnana)
- [Twitter](https://twitter.com/Njuchi_)
- [YouTube](https://www.youtube.com/channel/UCdngmbVKX1Tgre699-XLlUA?sub_confirmation=1)
- [Instagram](https://www.instagram.com/techworld_with_nana/)
- [LinkedIn](linkedin.com/in/nana-janashia)
CSS variable chapter four "Theming" 💄
Tags: todayilearned, css, codenewbie, tutorial
Published: 2021-03-14 15:07:10

Happy Sunday 🏊‍♂️👙 dear folks,

Hope you are enjoying and learning something in your journey(life)

In the last DEV post, we have learned about "local variables of CSS" 

{% link https://dev.to/atulcodex/chapter-three-css-local-variable-1jkl %}

And in this post, we are going to learn about theming option in the CSS variable 🌼

Theming is a use case if you don't know much about theming don't sweat it and let me explain to you by these two examples.

first example: Click on the image given below and press the gear button and choose any color

[![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wsxv9f5oainb8or5zqp3.png)](http://shreethemes.in/bizzcane/)

After selecting the color you can see that the main color or entire website changed. It's a very small example of theming, 

Second example: on this DEV community we have dark mode and white mode it's also called theming.

I hope now you can understand the theming feature and now imagine you have a grid of cards and some cards are different from others and you want to highlight them in this case also we can use theming feature.

![righttt](https://media.giphy.com/media/3o6gb2QV3meosD8jkI/giphy.gif)

To understand it we have to look at this codepen project 👇

{% codepen https://codepen.io/atulcodex/pen/LYbaZgW %}

Now we have this HTML code for our cards

```
<div class="item">
       <h1>project a</h1>
       <button>learn more</button>
</div>
```

to highlight our card I'm going to add one more class to our cards named "featured" like this

```
<div class="item featured">
        <h1>project a</h1>
        <button>learn more</button>
</div>
```

And now we have to [override the existing color values](https://dev.to/atulcodex/chapter-two-how-to-override-css-variable-5djd) for our item card like this

```
.featured
{
  --yellow: #0097e6;
  --red: #ffffff;
}
```

To visualize the magic see this codepen project

{% codepen https://codepen.io/atulcodex/pen/OJbqXGB %}

Ok, that's it for this DEV post and in the next DEV post, we will learn about "how to change variable values with javascript" in the CSS variable series.

If you have any questions or doubts about CSS theming you can comment below, maybe we can learn something new from your doubts.
Angular 12 beta preview arrives
Tags: javascript, angular, programming
Published: 2021-03-14 14:33:50

Angular 12, a planned upgrade to Google’s popular TypeScript-based web framework, has moved into a beta stage, with a preliminary release now available.

Some of the features in the beta include:

-   Implementing the [`appendAll()` method on `HttpParams`](https://github.com/angular/angular/pull/20930).
-   For forms, [min and max validators](https://github.com/angular/angular/pull/39063) are being introduced.
-   Exporting of a list of [HTTP status codes](https://github.com/angular/angular/pull/23548).
-   Addition of a feature to the [Angular Language Service that enables accessing the locations for components that use a template file](https://github.com/angular/angular/pull/40655).
-   The addition of [diagnostics to suggest turning on strictTemplates](https://github.com/angular/angular/pull/40423), providing a way for the language server to retrieve compiler options diagnostics.
-   A [patch adding an API to retrieve the template type check block](https://github.com/angular/angular/pull/39974) for a template, if any, at a file location, and selection of the TS node in the TCB corresponding to the template node at which the request for a TCB was made. This will help with debugging.
-   The addition of [command for getting components for a template file](https://github.com/angular/angular/pull/40655), for the language service.

[A full list of changes](https://github.com/angular/angular/blob/master/CHANGELOG.md) can be found on GitHub.
Yes! Programmatically Generate Images with CSS Painting API
Tags: css, programming, layout, api
Published: 2021-03-14 14:24:27

If you need a geometric image in your application, you don’t have to include it as an asset anymore. You can programmatically generate geometric images on the fly using the CSS Painting API.

Check out what this [API](https://blog.bitsrc.io/programmatically-generate-images-with-css-painting-api-3b1a860dae3b) is and how to generate an image using it.
Right Resources to Master JavaScript
Tags: webdev, javascript, programming, 100daysofcode
Published: 2021-03-14 14:21:35

Well Okay so there is no good place to start learning JavaScript I will try to keep this post updated let's dive in

1] Learn How JavaScript and browser Works resource will be 
"Namaste JavaScript Series" from YouTube by Akshay Saini [link](https://youtube.com/playlist?list=PLlasXeu85E9cQ32gLCvAvr9vNaUccPVNP)

Watch the whole series because it is the simplest explanation.

2] Now Go to [FreeCodeCamp](https://freecodecamp.org/) Complete " JavaScript Algorithms and Data-Structures " Section. It is the Best Place to Practice your JavaScript skills + you will get a CERTIFICATION.

3] Now You are Good ( 6/10 ) in JavaScript and you can easily get a job at this point (Junior). 

4] Go to MDN Docs [MDNDocs](https://developer.mozilla.org/en-US/docs/Web/JavaScript) Complete " Intermediate " and " Advanced " Section. You will be ( 8/10 ) in JavaScript.

5] Finally Go to [FreeCodeCamp](https://www.freecodecamp.org/learn/coding-interview-prep/) but this time Complete " Coding Interview Preparation" 

Now you are ( 9 / 10 ) in JavaScript and have the ability to build anything. 
 
6] If you feeling overwhelming WATCH "JS Conf" Videos on YouTube

Another thing Practise Practise and Practise 

I am on Step 4 right now. Anyone who wants to join this path Join The [slack Channel](https://join.slack.com/t/slack-er16758/shared_invite/zt-nnif2icl-F98k48FMlunsI2CgHaaWaA). 

NOTE: This channel will be only to discuss what we learned so for so we will complete this journey because often times we decide to do something but we never complete

<a href="https://www.buymeacoffee.com/pawandeore" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-green.png" alt="Buy Me A Coffee" style="height: 20px!important;width:80px!important;" ></a>


My Profile : [pawan deore](https://pavandeore.github.io)
Infrastructure Access for Feature teams?
Published: 2021-03-14 14:20:40

When it comes to access, a recent trend observed is having a self-serve tooling platforms for engineering and non-tech teams. This is to facilitate debugging during production issues, run background jobs or sometimes take a database backup by the said teams themselves and/or compliment the SRE teams.

Now, [IAM - Identity Access Management](https://digitalguardian.com/blog/what-identity-and-access-management-iam) was spawned with similar problem statements in mind and apparently proves useful. But while managing its infrastructure at scale (_think of orgs with 250+ people across development, product, data-science, design etc.._), it can be a constant hassle. This not only slows down genuine feature building but can cause friction among teams if there's too little or too much process around it.

![great-power-great-response](https://media.giphy.com/media/10KIsXhwdoerHW/giphy.gif)

While most people are careful with their privilege when it comes to production but it's only a matter of time before one right command on the wrong environment (_unintentional or not_) can cause all sorts of panic, ad-hoc debugging and restoration to fix arising outages.

There are concepts like [least privilege, single sign-ons, SSH keys, and RBAC](https://www.okta.com/resources/whitepaper/the-8-principles-of-modern-infrastructure-access) that are battle tested and newer ones like [Zerotrust](https://www.cloudflare.com/learning/security/glossary/what-is-zero-trust) that might end up creating more problems than they solve, if used incorrectly. On the other hand, denying access proves to be counter productive since teams need to rely on others to get vital information  they could've obtained themselves.

Therefore the million dollar question that comes up is:

---

**How do you think Dev/Design/Product Teams should access the Infrastructure?**