teleren/devto huggingface dataset:
CSSBattle | #9 Tesseract
Tags: css, cssbattle, challenge, tesseract
Published: 2022-03-01 18:20:24

Welcome to CSSBattle Challenges!

In this short article, I go through my solution for [CSSBattle - #9 Tesseract](https://cssbattle.dev/play/9) challenge. Please refer to the code snippet below to get a better insight into my thought processes and the implementation detail.

---

> #### Challenge:

![Tesseract Challenge](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1atzsphntt544rxgbihe.png)

---

> #### Solution:

```html
<div class="container">
  <div class="outer-rect"></div>
  <div class="outer-transparent-square"></div>
  <div class="inner-fill-square"></div>
  <div class="inner-circle"></div>
</div>

<style>
  * {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
  }
  .container {
    width: 100%;
    height: 100%;
    background: #222730;
    position: relative;
  }
  .outer-rect,
  .outer-transparent-square,
  .inner-fill-square,
  .inner-circle {
    top: 50%;
    left: 50%;
    position: absolute;
  }
  .outer-rect {
    width: 100%;
    height: 150px;
    background: #4caab3;
    transform: translate(-50%, -50%);
  }
  .outer-transparent-square {
    width: 250px;
    height: 250px;
    background: #222730;
    transform: translate(-50%, -50%) rotate(45deg);
  }
  .inner-fill-square {
    width: 150px;
    height: 150px;
    background: #4caab3;
    transform: translate(-50%, -50%) rotate(45deg);
  }
  .inner-circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #393e46;
    transform: translate(-50%, -50%);
  }
</style>
```

---

> #### Key Takeaway(s):
- using relative and absolute positioning to create relationships between parent and children elements

As always, I welcome any feedback or questions regarding the implementation detail of the challenge. Otherwise, I hope this was useful!
Reliability Best Practices - AWS Well-Architected Framework Study Guide
Published: 2022-03-01 18:04:44

[Return to Well-Architected Framework Guide](https://dev.to/aidutcher/aws-well-architected-framework-study-guide-introduction-fjg)

[**Foundations**](https://docs.aws.amazon.com/wellarchitected/latest/framework/rel-found.html)
- Foundational requirements are those whose scope extends beyond a single workload or project
- It’s the responsibility of AWS to satisfy the requirement for sufficient networking and compute capacity
- Service quotas (aka service limits) exist to prevent accidentally provisioning more resources than needed and to limit request rates on API operations to protect services from abuse
- Monitor and manage these quotas for all workload environments
- Ask:
     - How do you manage service quotas and constraints?
     - How do you plan your network topology?

[**Workload Architecture**](https://docs.aws.amazon.com/wellarchitected/latest/framework/rel-workload-arch.html)
- SDKs take the complexity out of coding by providing language-specific APIs for AWS services
- Distributed systems rely on communications networks to interconnect components, such as servers or services
- Workload must operate reliably despite data loss or latency in these networks
- Components must operate in a way that does not negatively impact other components
- Ask:
     - How do you design your workload service architecture?
     - How do you design interactions in a distributed system to prevent failures?
     - How do you design interactions in a distributed system to mitigate or withstand failures?

[**Change Management**](https://docs.aws.amazon.com/wellarchitected/latest/framework/rel-chg-mgmt.html)
- Anticipate and accommodate changes to achieve reliable operation
- Changes include those imposed on your workload (i.e. spikes in demand) and those from within (i.e. feature deployments and security patches)
- Monitor the behavior of a workload and automate the response to KPIs
- Ask:
     - How do you monitor workload resources?
     - How do you design your workload to adapt to changes in demand?
     - How do you implement change?

[**Failure Management**](https://docs.aws.amazon.com/wellarchitected/latest/framework/rel-failmgmt.html)
- Be aware of failures as they occur and take action to avoid impact on availability
- Take advantage of automation to react to monitoring data
- Regularly back up your data and test your backup files
- Test failure response on a regular schedule and ensure that such testing is also triggered after significant workload changes
- Actively track KPIs, as well as the recovery time objective (RTO) and recovery point objective (RPO)
- Ask:
     - How do you back up data?
     - How do you use fault isolation to protect your workload?
     - How do you design your workload to withstand component failures?
     - How do you test reliability?
     - How do you plan for disaster recovery (DR)?

[Return to Well-Architected Framework Guide](https://dev.to/aidutcher/aws-well-architected-framework-study-guide-introduction-fjg)
Practices of the Python Pro - Book Review
Tags: python, beginners
Published: 2022-03-01 18:04:12

## The Book:  

[Practices of the Python Pro](https://www.manning.com/books/practices-of-the-python-pro) By Dane Hillard

## Short Summary:

"Practices of the Python Pro" is a book to teach developers about better software practices. The title is a bit misleading because it suggests that the book is about writing better Python code; it's actually about good Software practices and uses Python as the medium. The book has three main parts and a fourth closing part. The first part is about why designing software matters - basically an argument for why someone needs to learn the material in the book. The second talks broadly about the concepts, and the third goes into detail. The book ends with suggestions to the reader about where to go next.

## What I liked:

I thought the book was great. As I said, the title is a bit misleading, but the material is excellent. I liked the concepts the second part covers, including separation of concerns, abstraction, and encapsulation, designing for high performance (speed testing), and different types of testing (such as unit versus integration). The third part was also noteworthy- it talks about how to improve your code and gets into more specific problems.

## What I disliked:

The one problem with the book is the title. It should be named "Best Software Development Practices with examples in Python."  
The title should emphasize that it's more about software development and uses Python as its learning tool. 

## Review round-up:

The material is vital for Python developers, and even as an intermediate developer myself, it helped reinforce many other concepts I've learned elsewhere. I appreciate that it's not at all complex to understand. It's a book that was missing in the Python community. Many second/intermediate Python books give you particular use cases, but this book gives you a view above that and helps organize and think about your software as a whole. I can see myself re-reading this book in the future.

## Rating:
9/10 Python Snakes
Reliability Design Principles and Definition - AWS Well-Architected Framework Study Guide
Published: 2022-03-01 17:47:11

[Return to Well-Architected Framework Guide](https://dev.to/aidutcher/aws-well-architected-framework-study-guide-introduction-fjg)

[**Reliability**](https://docs.aws.amazon.com/wellarchitected/latest/framework/reliability.html)
- Workload performs its intended function correctly and consistently when it’s expected to
- Includes the ability to operate and test the workload through its total lifecycle

[**Design Principles**](https://docs.aws.amazon.com/wellarchitected/latest/framework/rel-dp.html)
- Automatically recover from failure
- Test recovery procedures
- Scale horizontally to increase aggregate workload availability
- Stop guessing capacity
- Manage change in automation

[**Definition**](https://docs.aws.amazon.com/wellarchitected/latest/framework/rel-def.html)
- Four best practice areas:
     - Foundations
     - Workload Architecture
     - Change Management
     - Failure Management

[Return to Well-Architected Framework Guide](https://dev.to/aidutcher/aws-well-architected-framework-study-guide-introduction-fjg)
🐛 Angular (ng), Nrwl (nx) Workspace Debugging
Tags: debug, angular, monorepo, nx
Published: 2022-03-01 17:36:19

## How to debug your angular application inside of an Nx workspace

The `launch.json` file takes a `configurations` array of json object configurations. 

- The first config is a reusable configuration we will keep hidden. This is done by adding the `presentation` option with a property of `hidden` set to `true`.

- The following two (2) configs are app specific. For demonstration purposes I've used simplified app names but, hopefully, you can see where to replace the kebab cased name in the `command` property and the capitalized variant in the `name` property. 

---


`launch.json`:
```json
{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome Debugger",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceFolder}",
      "presentation": {
        "hidden": true
      }
    },
    {
      "command": "ng serve --project app-one",
      "name": "Debug App One",
      "cwd": "${workspaceFolder}",
      "request": "launch",
      "type": "node-terminal",
      "serverReadyAction": {
        "action": "startDebugging",
        "name": "Launch Chrome Debugger",
        "pattern": "listening on localhost:4200"
      }
    },
    {
      "command": "ng serve -- --project app-two",
      "name": "Debug App Two",
      "cwd": "${workspaceFolder}",
      "request": "launch",
      "type": "node-terminal",
      "serverReadyAction": {
        "action": "startDebugging",
        "name": "Launch Chrome Debugger",
        "pattern": "listening on localhost:4200"
      }
    },
  ]
}
```

![Debug Panel Screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i0jiedji54x38vgci1kq.png)
 
After clicking start on `App One` or `App Two` the serve command will begin compiling your code as usual. Once it is done  compiling it will signal a ready action to launch the chrome debugger.
CISC Ve RISC Mimarisi Farkları
Tags: programming, beginners, architecture, tutorial
Published: 2022-03-01 17:34:37

Bu 2 birim, verilen farklı komutlara göre cpu’nun mimari konfigürasyonlarıdır.

## CISC:

• Donanıma önem verir.
• Çok saat döngülü karmaşık komutlar içerir.
• Bellekten belleğe: _**LOAD**_ ve _**STORE**_ komutlarda birleştirilmiştir.
• Küçük kod boyutları, saniyede yüksek çevrim sayısı.
• Karmaşık komutların depolanması için transistörler kullanılır.

## RISC:
• Yazılıma önem verir.
• Tek saat döngülü indirgenmiş komutlar içerir.
• Kaydediciden kaydediciye: _**LOAD**_ ve _**STORE**_, ayrı komutlardır.
• Saniyede düşük çevrim sayısı, büyük kod boyutları.
• Bellek kaydedicilerinde daha çok transistör harcar.
How to Generate License Key with Node.js
Tags: licensekey, javascript, node, express
Published: 2022-03-01 17:30:20

This post will help you to generate License keys with Node.js

I'll walk you through step by step process

Create a directory 
```
mkdir license-key
```

cd into the Directory
```
cd license-key
```

Initiate Yarn
```
yarn init -y
```

Install the required dependency
```
yarn add @mcnaveen/license-gen
```

Create a new file called `index.js` and paste the below code.
```javascript
const licenseGen = require("@mcnaveen/license-gen")

const key = licenseGen(32)
console.log(key)
```

Now Save the File
Then Run `node index.js`
You'll get the license key in console like below

```
TPL5-IAQV-TUCR-8N7A-AQBW-EFSQ-HLK7-BND6
```

You can alter the license key as per your need.

If you want more characters, change the value from `32` to something else.

Or if you need pair of 8 values with the same 32 characters modify the code like this.

```javascript
const licenseGen = require("@mcnaveen/license-gen")

const key = licenseGen(32, 8)
console.log(key)
```

Then you'll get the output like this

```
BONP7PMW-2T4CTB58-9EOJT7CU-Q72TVKGL
```

> This module as supports ES6 imports

If you like this post leave a heart, or Bookmark it for later.

Please comment your thoughts

---

Links:
- Module Link: https://www.npmjs.com/package/@mcnaveen/license-gen
- Example Repo (ES6): https://github.com/mcnaveen/license-gen-example
Webinar at 2pm EST tomorrow: 'Ephemeral Environments: Why & How?'
Tags: devops, programming, productivity, news
Published: 2022-03-01 17:27:38

[Click here to register and reserve your spot](https://zoom.us/webinar/register/5416452246916/WN_0cQ03PYaTAyDV5JApKooZg)

** Discover**
• Why teams are moving from long-lived to ephemeral environments
• Common problems teams face in adoption
Some of web dev resources for beginners
Tags: javascript, webdev, beginners, programming
Published: 2022-03-01 17:20:36

[50 days of js](https://codedamn.com/50-days-of-js)
[Css tricks](https://css-tricks.com/)
[React resources](https://reactresources.com/)
[codewars](https://www.codewars.com/)
[cs50](https://cs50.harvard.edu/college/2022/spring/)

Enjoyy
How do we measure performance of a website
Tags: javascript, performance, react, webdev
Published: 2022-03-01 17:16:03

### What's web performance: 
Web performance is a term describing how fast a website is.

### Why does performance matters:
Google ranks the websites based on their performance but the most important reason is the real users, whereas it lets them to have a good experience when they work with our websites. Imagine if they like to ride a Bugatti Veyron EB or an slow old car. 🚗 😃

###How do we measure performance ? 
There are different tools that can be categorized in these two list:

####1. browsers tools

- **Lighthouse**
It gives you the results and matrices to make the improvements 
It gives you opportunities and diagnosis 

- **Network Tab**
Run network and disable cache and check times and waterfall for all requests 

- **Perfomance Tab** 
start profiling and check all things in detail,


####2. Hosted third-party tools

- **PageSpeed insights (Google)**
it's like lighthouse but it doesn't run on your local machine, so it will check the matrices from google servers

- **Webpagetest.org**
- **GTMetrics (actually lighthouse)**


###Standard performance measurements
There are couple of important measurements that you can find or different tools to check the performance of your website.

- **First paint**
The time it takes before the user sees changes happening in the browser.

- **LCP (Largest Contentful Paint)**
The time takes before the user sees the content

- **FMP (First Meaningful Paint)**
The time takes before the user sees content that is actually meaningful.

- **TTI (Time to Interactive)**
The time it takes before the content has finished loading and the UI can be interacted with.


Thanks for reading, I will complete this post gradually

ref: 
[https://www.linkedin.com/learning/developing-for-web-performance/what-is-web-performance-and-optimization](https://www.linkedin.com/learning/developing-for-web-performance/what-is-web-performance-and-optimization)
CSSBattle | #8 Forking Crazy
Tags: css, cssbattle, challenge, forkingcrazy
Published: 2022-03-01 17:02:01

Welcome to CSSBattle Challenges!

In this short article, I go through my solution for [CSSBattle - #8 Forking Crazy](https://cssbattle.dev/play/8) challenge. Please refer to the code snippet below to get a better insight into my thought processes and the implementation detail.

---

> #### Challenge:

![Forking Crazy Challenge](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s2wxsussm6pg1esjkpsr.png)

---

> #### Solution:

```html
<div class="container">
  <div class="fork">
    <div class="springs">
      <div class="spring fill"></div>
      <div class="spring transparent"></div>
      <div class="spring fill"></div>
      <div class="spring transparent"></div>
      <div class="spring fill"></div>
      <div class="spring transparent"></div>
      <div class="spring fill"></div>
    </div>
    <div class="circular-depth"></div>
    <div class="bottom-handle"></div>
  </div>
</div>

<style>
  * {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
  }
  .container {
    width: 100%;
    height: 100%;
    background: #6592cf;
    display: flex;
    justify-content: center;
    align-items: end;
  }
  .fork {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .bottom-handle {
    width: 20px;
    height: 55px;
    background: #060f55;
    z-index: 1;
  }
  .circular-depth {
    width: 140px;
    height: 100px;
    background: #060f55;
    border-bottom-left-radius: 150px;
    border-bottom-right-radius: 150px;
    transform: translateY(5px);
    z-index: 2;
  }
  .springs {
    width: 140px;
    height: 110px;
    display: flex;
    transform: translateY(15px);
    z-index: 3;
  }
  .spring {
    flex-grow: 1;
  }
  .fill {
    background: #060f55;
    border-radius: calc(140px / 7);
  }
  .transparent {
    background: #6592cf;
    border-radius: calc(140px / 7);
  }
</style>
```

---

> #### Key Takeaway(s):
- tinkering with border-radius properties to create semi-circles
- using z-index to control element overlaps

As always, I welcome any feedback or questions regarding the implementation detail of the challenge. Otherwise, I hope this was useful!
Day-34 Training At Ryaz
Tags: webdev, beginners, node
Published: 2022-03-01 16:57:04

Date:1/03/2022
Day:Tuesday

Today, I started at about 10:50 am . As I was done with unto 4th module and I was to start with module 5 so today I started with module 5 and in this module the instructor have finished with restful api's so he started with more advanced topics of express like middleware, how to construct custom middlewares ,third party middleware, and various things about environments and also told how to integrate our mongoose data base with our app and then explained about authentication of our user as our main aim is to build a course CRUD app which will include user and as well as host user would take course so, to enhance this feature of user we need authentication so, that when user would only able to access the course and not able to create or delete cources. this would create good and easy hierarchy and would ease the use of user as well as host.
json()-> to parse the body of requests with a JSON urlencoded()->to parse the body of requests with url encoded payload ,static()->to serve static files. these were some of middlewares told by the host and after this I am left over with one part of this module i.e structuring and restructuring the app. so this way today I got to learn and enhance my knowledge .
Kebiasaan Baru Perawatan Mobil Yang Wajib Dilakukan
Tags: bengkelmobilmedan, bengkelmobil, servicemobil, servicemobilmedan
Published: 2022-03-01 16:55:16


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m97mryoy845ycvwt0o14.jpg)
Bagi Sebagian masyarakat mungkin merawat mobil sama saja dengan merawat anak sendiri dimana tentu saja hal ini mengharuskan kita untun mengeluarkan beberapa budget sehingga menjadi momok bagi beberapa orang padahal apabila kita mengetahui hal-hal apa saja yang dapat dilakukan maka perawatan pada mobil itu sebenarnya merupakan hal yang sangat sederhana untuk kita lakukan. Beberapa diantaranya merupakan kebiasaan kita sehari-hari ketika sedang berkendara, selain itu juga kita dapat melakukan perawatan dirumah saja. Berikut ini beberapa hal yang bisa kita lakukan dalam merawat mobil kita adalah :

**Melakukan Service Secara Berkala**
Seiring bertambahnya umur penggunaan mobil maka kita juga harus semakin rajin dalam melakukan Service Mobil dimana kita juga cukup mempercayakan mobil kita kepada terpercaya seperti bengkel mobil untuk melakukan perawatan serta service mobil secara berkala. Jangan sampai kita menunda-nunda untuk melakukan karena dengan melakukan kita juga dapat mengetahui masalah-masalah apa saja yang terdapat pada komponen mobil kita sebelum akhirnya komponen tersebut ikut merusak komponen lainnya.

**Tidak sembarangan membawa mobil**
Kebiasaan baru yang dapat kita terapkan untuk merawat mobil adalah dengan tidak sembarangan ataupun tidak membawa mobil secara ugal-ugalan karena selain membahayakan nyawa pengemudi juga dapat membuat komponen mobil menjadi lebih cepat rusak. Pelajarilah hal-hal apa saja yang boleh serta tidak boleh kita lakukan dalam merawat mobil seperti tidak langsung mengemudikan mobil ketika dipagi hari namun kita wajib memanaskan mesin mobil terlebih dahulu agar oli yang berada didalam mesin mobil dapat membaur dengan merata.

**Rajin membersihkan mobil**
Perawatan yang wajib kita lakukan adalah dengan membersihkan mobil baik bagian luar mobil maupun bagian dalam mobil serta tidak menumpukan sampah-sampah pada bagian dalam mobil. Karena sampah-sampah sisa makanan yang ada didalam mobil dapat memancing berbagai hewan kedalam mobil kita seperti kecoa, tikus dan lain sebagainya tentu saja hewan ini dapat merusak mobil kita. Contohnya tikus yang dapat memotong kabel-kabel yang ada didalam mesin mobil dan dapat membuat system kelistrikan pada mobil menjadi koslet dan terbakar.
The story of Visual Studio (that no one asked for)
Tags: webdev, programming, javascript, vscode
Published: 2022-03-01 16:53:53

> *Shared from yesterday's issue of our [Bytes Newsletter](https://bytes.dev). Check it out if you like nice things.*

Visual Studio is about to [turn 25](https://visualstudio.microsoft.com/), and like many of us, it was a late bloomer. 

Back in 1997, it started out as a collection of three separate IDE's for Visual Basic, Visual C++, and Visual FoxPro (no relation to Starfox, I checked). And they all came on separate CD's, which you had to _buy from a store_ 🤮. In the '90s, "stealing software" meant setting up a heist at your local Circuit City like Mark Wahlberg in [The Italian Job](https://youtu.be/thjtHfVkPAU?t=104). It's called The Dark Ages™️ for a reason.

In 2002, we got Visual Studio .NET edition, which came with a brand new programming language called C#. That fun little bonus feature was created by Anders Hejlsberg, who went on to create TypeScript a decade later 🐐.
 
And so it went for the next ~18 years. Along the way, Visual Studio was able to ditch the CD's, but the software itself remained pretty bloated and relatively unpopular. VS finally got its ✨glow-up✨ in 2015 when it came out with VS*Code* -- the powerful text editor we all know and (mostly) love, with TypeScript as the key ingredient.

Fast forward to today, and VSCode is used by over 70% of web developers and literally [writes our code](https://copilot.github.com/) for us now. The Visual Studio IDE is still around too, but it's mostly used by .NET developers to do whatever it is they do.

__Bottom Line:__ None of this is that relevant to me personally, since I write all my code in the Apple Notes app right after I finish sketching it out on a whiteboard -- but I guess it's cool if you're into text editors.
Study Guides and Reference Materials
Published: 2022-03-01 16:52:32

**<u>Azure</u>**

- [Azure DevOps AZ-400 Study Guide](https://dev.to/aidutcher/azure-devops-az-400-study-guide-exam-guide-outline-17dm)
- [DP-203: Data Engineering on Microsoft Azure - Study Guide](https://dev.to/aidutcher/dp-203-data-engineering-on-microsoft-azure-study-guide-5h63)

**<u>AWS</u>**

- [AWS Certified Cloud Practitioner Exam Study Guide (2022)](https://dev.to/aidutcher/aws-certified-cloud-practitioner-study-guide-exam-guide-outline-233o)
- [AWS Well-Architected Framework Study Guide (2022)](https://dev.to/aidutcher/aws-well-architected-framework-study-guide-introduction-fjg)

**<u>Snowflake</u>**

- [Snowflake SnowPro Core Certification Study Guide (2022)](https://dev.to/aidutcher/snowflake-snowpro-core-certification-study-guide-2jji)