teleren/devto huggingface dataset:
Nested property declarations in Sass
Published: 2022-08-20 06:35:50

Use nested property declarations

```
// typography.scss

body {
  font: {
    size: 16px;
    weight: 500;
  }
}
```

instead of

```
// typography.scss

body {
  font-size: 16px;
  font-weight: 500;
}
```
Learn Javascript for free
Published: 2022-08-20 06:32:00

## 1) FreeCodeCamp Youtube JS Series

This 15+ hours JS Playlist contains everything you need to master Javascript.

It contains more than 20 Real-world projects and even DSA in JS that will take your JS skills to the next level.

[Link To Playlist](https://www.youtube.com/playlist?list=PLWKjhJtqVAbleDe3_ZA8h3AO2rXar-q2V)




## 2) W3 Schools - JS Docs

Similar to MDN Web Docs, this is another great resource if you like learning something through documentation and articles.

Here every JS topic is arranged properly in a sequential way from easy to advance.

[Link To Playlist](https://w3schools.com/js/)




## 3) JS - MDN Web Docs - Mozilla

MDN Web Docs is the Encyclopedia for Web Developers. 

This resource contains every single topic about Javascript and you can refer to this resource whenever you are stuck or want to learn something new in JS.

[Link To Playlist](https://developer.mozilla.org/en-US/docs/Web/JavaScript)




## 4) Brad Traversy JS playlist

Brad Traversy is one of the best Programming Teachers you will find on the Internet.
He has shared tonnes of High value and high-quality content for free on Youtube.

This JS playlist is a great example of that.

[Link To Playlist](https://www.youtube.com/playlist?list=PLillGF-RfqbbnEGy3ROiLWk7JMCuSyQtX)
Day 1 - Web Dev Journey
Tags: beginners, webdev, javascript, programming
Published: 2022-08-20 06:19:00

Day 1 of Learning Web Development - Here We Go!!
I have some basic knowledge of programming. I have studied C, Basic Java, some basic PHP, and JavaScript as well. But I have never fully committed to any particular language and I am just a perfect example of Jack of All Trades, Master of None. I know the basics of every language but have not mastered a specific language. I studied just in order to pass the exams until now. 
But now, I am fully committing to Web Development. I am starting Web Development Journey through the online platform App Academy Online which is a free platform. I looked through the syllabus and I was satisfied with it.
The first day was all about how to learn at app academy and some steps to approach a problem through Polya's Problem Solving Framework. Also, I learnt some JavaScript Fundamentals such as primitive data types in JavaScript(Numbers, Boolean, Strings, Undefined, Null), functions introduction and control structures. Nothing new as I had basic knowledge of JavaScript knowledge.
Fully Pumped and excited for tomorrow. Let's Go!!!
Build library using JavaScript, Webpack and Workspaces
Tags: javascript, webdev, programming, webpack
Published: 2022-08-20 06:09:25

---
canonical_url: https://srele96.medium.com/build-library-using-javascript-webpack-and-workspaces-e71310ad8db8
---
A guide on building library using Webpack and Yarn workspaces. The explained goal and source code is in [this](https://github.com/srele96/sk-experiments/tree/c83ce4a4dea6eae13bc2f15db087ed65b804dae7/javascript/calculator-demo) repository.

## Requirements

These are the requirements. But if you do check out the repository, there are references and explanation. I tried to provide explanation as good as I could, but it’s rarely perfect or univeral for everyone. There are steps to build and test the code so you can play around with it. Plenty of resources to dig and learn how it works.

- Familiarity with JavaScript.
- Some familiarity with Webpack. The code is using minimal configuration of around 15 lines of code.
- Some familiarity with Yarn workspaces.

## The goal

Build an app that demonstrates building packages using JavaScript and monorepo.

## Split logic using monorepo

Use module bundler to create a package that depends on another package which isn’t published to NPM.
Specs

For the sake of brevity let’s make a calculator.

We will build a calculator app that has four operations:

```txt
+    add
-    subtract
*    multiply
/    divide
```

We are building a calculator. We split logic to the four packages.

Our calculator will use four packages. We use webpack to build our calculator package.

## Initiate repository

Run _(The following command is a shorthand for `yarn install`)_:

```terminal
yarn
```

## Build package

Development and production

```terminal
yarn build
```

## Run tests

First build the package.

To test in browser:

1. Go to `__tests__` directory.
2. Open `useDevBuild.html` in browser.
3. Open `useProdBuild.html` in browser.
4. Open the developer console and verify that output is there.

To test in nodejs run:

```terminal
yarn test
```

## References

- Read about [Yarn workspaces](https://yarnpkg.com/features/workspaces).
Introduction to Data Engineering
Published: 2022-08-20 06:07:29

Big data is data that is so large that you must consider how to deal with it. Big data is distinguished by its volume, velocity, value, diversity, and veracity. That is why data engineers exist. A data engineer is in charge of data ingest, collection, and storage.
**_The process of ingesting and storing data so that it is accessible and ready for analysis is known as data engineering. In other words, they design and build large-scale data collection, storage, and analysis systems._**

## Data Engineering Roles
To better understand the role of data engineer, I'll provide a brief overview of the data science process using the image below as a guideline.

![The Data Science workflow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gpe0y547rwj0ygwhhiiy.jpg)

1. The first step is to collect and store raw data from around the world.
2. The following step is data pre-processing, which includes cleaning, filtering, querying, and aggregation.
3. Following that, we will look at visualization and EDA (Exploratory Data Analysis), which will assist a machine learning engineer in deciding which models and algorithms to use.
4. Finally, we make decisions such as forecasting and predictions. and generate reports based on the data collected

**_A data Engineer is responsible for the first two steps in the Data Science Workflow. Data engineers store and ingest data, they are also responsible for setting up a database and building data pipelines._**

## Why do we need Data Engineers
As previously stated, data engineers are in charge of the first step in the data science workflow. Without them, machine learning engineers, data analysts, and data scientists would be forced to work with raw, unprocessed data. Engineers are required because they process and prepare data for future analysis. Data engineers also assist in the collection, storage, and optimization of data for usability.


## Data Engineer Vs Data Scientists
Data engineers transform unstructured data into a more useable format for data analysts while searching through the data for insights. They develop data warehouses for sizable databases, maintain the architecture and design of the data, and construct queries.

On the other side, data scientists gather and organize unstructured data, develop models for using big data, and do big data analysis.
 
Strong programming skills are required for data engineering, whereas strong analytical skills are required for data science.
Material & Custom theming using Jetpack Compose
Tags: android, jetpack, compose, kotlin
Published: 2022-08-20 05:42:00

[GitHub](https://github.com/daniyaljavaid/ThemingInCompose)

## About The Project

Sample project to showcase Material & Custom theming using Jetpack Compose. Goal is to design
reusable feature modules which can be used in multiple apps and each app is to provide the theme
which that feature module requires.

For this project we have following modules:

* <b>:components</b> - contains reusable UI components
* <b>:feature:registration</b> - customizable registration screen
* <b>:applications:facebook</b> - module which provides its own theme for registration screen
* <b>:applications:linkedin</b> - module which provides its own theme for registration screen

<big><b>How things work:</b></big>

<b>Registration</b> feature module exposes all of its custom theming classes using
`CompositionLocal` with default values. For example:

Theming class `ExtendedColors` is exposed using `LocalExtendedColors` composition &

Theming class `ExtendedTypography` is exposed using `LocalExtendedTypography` composition

These classes will be used for customizing UI in <b>Registration</b> feature. Both <b>
Applications</b> modules i.e linkedin & facebook will create instances for these custom theming
classes and provide these instances to <b>Registration</b>
feature module by using `CompositionLocalProvider`.

For example:

LinkedIn will create an instance of `ExtendedTypography` named
`LinkedInExtendedTypography` and an instance of `ExtendedColors` named
`LinkedInExtendedColors` and will provide to Registration module using

```
CompositionLocalProvider(
        LocalExtendedTypography provides LinkedInExtendedTypography,
        LocalExtendedColors provides LinkedInExtendedColors
) {
        RegistrationScreen()
}
```

Now use `LocalExtendedTypography.current` & `LocalExtendedColors.current` to
access `ExtendedTypography`
and `ExtendedColors` objects provided by any of the <b>applications</b> modules.

<b>Note:</b>
Use either `FacebookApp()` or `LinkedInApp()` in `MainActivity` to try out themes provided by these
2 <b>applications</b> modules.


**Results**

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

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

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

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w7kn5i3aq2crpsx9cvbm.png)
Introdução ao AWS Cloudfront.
Tags: aws, cloud, beginners, amazon
Published: 2022-08-20 05:29:32

Neste post vamos entender melhor sobre o Amazon Cloudfront. 

O Amazon CloudFront é um serviço que acelera a distribuição do conteúdo estático e dinâmico da web, como arquivos .html, .css, .js e arquivos de imagem, para os usuários. O CloudFront distribui o conteúdo por meio de uma rede global de datacenters denominados pontos de presença. Quando um usuário solicita um conteúdo que você está disponibilizando com o CloudFront, a solicitação é roteada para o ponto de presença que fornece a menor latência (atraso), assim o conteúdo é entregue com a melhor performance possível.

Hoje, o CloudFront possui mais de 400 pontos de presença em 90 cidades e em 47 países diferentes (figura 1). Se o conteúdo já estiver no ponto de presença com a menor latência, o CloudFront o entregará imediatamente. Porém, se o conteúdo não estiver nesse ponto de presença, o CloudFront o recuperará de uma origem definida, que foi identificado como a fonte para a versão definitiva do conteúdo.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n2zom4dncvvtd14n2utd.png)
Figura 1 - Pontos de presença do Cloudfront.

O CloudFront acelera a distribuição de seu conteúdo roteando cada solicitação de usuário por meio da rede da AWS para o ponto de presença que pode atender melhor ao seu conteúdo. O uso da rede da AWS reduz drasticamente o número de redes pelas quais as solicitações de seus usuários devem passar, o que melhora o desempenho. Os usuários obtêm latência mais baixa e taxas de transferência de dados mais altas.

Você também obtém maior confiabilidade e disponibilidade porque as cópias de seus arquivos (também conhecidas como objetos) agora são mantidas (ou armazenadas em cache) em vários pontos de presença ao redor do mundo.

Alguns casos de uso do Amazon Cloudfront incluem entrega de conteúdo de site estático mais rápido, fornecer vídeos de streaming ao vivo ou sob demanda, Criptografar campos específicos durante todo o processamento do sistema e fornecer conteúdo privado utilizando personalizações do Lambda@Edge.

**Nível Gratuito Amazon Cloudfront**

Como parte do nível de uso gratuito da AWS, você pode começar a utilizar o Amazon CloudFront gratuitamente. Ao usar o Amazon CloudFront, você recebe 1 TB de transferência de dados de saída, 10.000.000 de solicitações HTTP e HTTPS e 2.000.000 de invocações do CloudFront Functions a cada mês. Você também pode utilizar a [pricing calculator](https://calculator.aws/#/addService) da AWS para estimar o custo do uso do cloudfront.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/knnckifeyvyspi0fhr1f.png)
What's a good programming language to help teach beginners?
Published: 2022-08-20 04:53:00

I'm looking for some advise. What's a good programming language to help teach beginners? Let's talk about it later in my stream @ 2pm Singapore time today(an hour from now). 

Catch me live @ https://twitch.tv/donvitocodes

Hope to hear from those who started programming also. What language were you comfortable of using?
871. Leetcode Solution in Cpp
Tags: cpp
Published: 2022-08-20 04:50:26

```
class Solution {
 public:
  int minRefuelStops(int target, int startFuel, vector<vector<int>>& stations) {
    // dp[i] := farthest position we can reach w/ i refuels
    vector<long> dp(stations.size() + 1);
    dp[0] = startFuel;

    for (int i = 0; i < stations.size(); ++i)
      for (int j = i + 1; j > 0; --j)
        if (dp[j - 1] >=
            stations[i][0])  // with j - 1 refuels, we can reach stations[i][0]
          dp[j] = max(dp[j], dp[j - 1] + stations[i][1]);

    for (int i = 0; i < dp.size(); ++i)
      if (dp[i] >= target)
        return i;

    return -1;
  }
};

```

#leetcode
#challenge
Here is the link for the problem
https://leetcode.com/problems/minimum-number-of-refueling-stops/
Django orm haqida!
Tags: python, django, backend
Published: 2022-08-20 04:32:00



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2kacsbrw0pk0dmtclc0y.jpeg)

<hr>
<br>

**Django**
models.py file da yozilad

```
  class Product(models.Model):
    title = models.CharField(max_length=120)
```

**SQL**
```
     CREATE TABLE Product(
         id int NOT NULL PRIMARY KEY,
         title varchar(120),
     );
```
I'm here to tell you that I'm developing something that car geeks will love!
Tags: javascript, webdev, programming, productivity
Published: 2022-08-20 04:19:39

Hey, I'm Sandile Moremedi. I'm a junior JAMstack Developer and I'm developing a blog website.

I know what your thinking "another blog website 😐". Trust me this won't be the same from all my others. 

This is gonna be a passion project. The app is called The Car Heart. I will be using an unusual stack of technologies. NextJS, Supabase, SCSS and Sanity.io

I'm planning on building it publically, please be patient with me. I will be showing everyone how it works from the backend and any simple animation in the site.

I hope you'll enjoy this. Here is my twitter account. Tag me and say you found the site and let's have a coffee chat. [Twitter Url](twitter.com/masandza_1). See you soon
How to switch from Oh My Zsh to starship 🚀
Tags: tooling, terminal, mac
Published: 2022-08-20 03:47:00

I switched from `Oh My Zsh` to `starship` since I started learning rust 😁 🦀

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

## Step 0 Install homebrew if you don't have already

```zsh
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
```

https://docs.brew.sh/Installation


## Step 1 Delete Oh My Zsh
First, remove `Oh My Zsh`. When you remove Oh My Zsh, your `.zshrc` will be archived. 

```zsh
uninstall_oh_my_zsh
```

## Step 2 Install starship

```zsh
brew install starship
```

## Step 3 Add the setting to .zshrc
Add the following to your `.zshrc`

```zsh
 eval "$(starship init zsh)"
```

## Step 4 Add a font
You can use the following font to avoid the character corruption.

https://github.com/ryanoasis/nerd-fonts#font-installation

## Step 5 Create a config file for starship
Lastly we will need to create a `toml` file to configure starship settings

```zsh
mkdir -p ~/.config && touch ~/.config/starship.toml
```

You can find out the details [here](https://starship.rs/config/#prompt)


My starship.toml
The latest version is [here](https://github.com/koji/my-starship).

```toml
[aws]
disabled = true

[character]
format = "❯❯ "
success_symbol = "❯❯(bold green) "
error_symbol = "❯❯(bold red) "

[directory]
format = "[$path]($style)[$read_only]($read_only_style) "
truncation_length = 4
truncate_to_repo = false
truncation_symbol = "…/"

[git_status]
disabled = true

[hostname]
disabled = true

# Disable the package module, hiding it from the prompt completely
[package]
disabled = true

[time]
disabled = false
time_format = "%Y-%m-%d %H:%M"
utc_time_offset = "local"

[username]
style_root = "green bold"
format = "😈 [$user]($style) "
disabled = false
show_always = true

[git_branch]
symbol = "💻 "
truncation_length = 20
truncation_symbol = "…"
style="bold purple"

[rust]
format = "via [⚙️ $version](bold red)"

[python]
pyenv_version_name = true

[nodejs]
format = "via [🤖 $version](bold green) "
```
A deep dive into unit testing in Flutter 🧪
Tags: testing, mocktail, dart, flutter
Published: 2022-08-20 03:39:11

Testing code is an important task for a developer that helps us in ensuring that our code works as expected. Testing is an important task that should not be given the least priority or be neglected. Many companies seeking for a software developer candidate look for those who can perform testing effectively. Many open-source projects don't prefer to merge contributions for which tests are not included. So, it is clear that testing is a must-have skill for a developer and in this blog, we will go in depth about unit testing in Flutter. 😎
Testing **doesn't** help in locating bugs. It only helps in making sure that our code works as expected. It gives us the confidence that our code works even after refactoring the codebase.
In Flutter, there are mainly three types of test but not limiting to. They are:
- Unit Testing
- [Widget Testing](https://docs.flutter.dev/cookbook/testing/widget/introduction)
- [Integration Testing](https://docs.flutter.dev/cookbook/testing/integration/introduction)

In this article, we will see what unit testing is and how we can perform unit testing with some examples.

**NOTE**
I am publishing all of my blogs on my own [blogging site](https://biplabdutta.com.np). You can read this blog on my site by visiting this link.
[https://biplabdutta.com.np/posts/unit-test/](https://biplabdutta.com.np/posts/unit-test/)
Unable to create Virtual env in Win 11...
Tags: discuss, python, debug, help
Published: 2022-08-20 02:51:17

Hi, There!
I want to create a virtual environment in my windows 11 but it throws fatal error.
My problem is that I uninstall the python from old location _user/appdata/local/........./..._

and reinstall it to 

 _C:drive/program files/...._

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


But when I hit 

_virtualenv myenv_

Throws an error

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

then I run

_pip install virtualenv_

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8a4gqqxfma97jed8fgqg.png)
 
if you see the location pip pointing toward appdata folder in above image is the old location which I have deleted the python before.
-----------------------------------------------------------------

Now I run following command to unistall the virtual env..

_pip unistall virtualenv_

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

 
if you see in this image the pip pointing and uninstalling the virtual environment package from the new location...


Now I trying to reinstall virtualenv pkg again

_pip install virtualenv_

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kbyezw5agyqeuqrrso3y.png)
 
after uninstalling and reinstalling virtual env it says _REQUIREMENT ALREADY SATISFIED _ which means it is pointing to the older location which is in appdata or you can see in above image also and it also throws an warning.

_This problem is not only in this package it also happens with rest package_
------------------------------------------------------------------

IF ANYONE KNOW THE PROBLEM PLEASE HELP ME :\

I did alot google search but didn't find a working solution.....
Designing EOS the first MMORPG Built on Multi-Chain technology
Tags: blockchain, gamedev, mmo, unity3d
Published: 2022-08-20 02:40:28

You can check out some content in the main game of Empire Of Sight, trying to take blockchain technology and turn web2 into a web3 environment as one of the worlds first mmorpg built on multichain tech <3 

https://medium.com/@empireofsight/designing-eos-the-first-mmorpg-built-on-multi-chain-technology-db1cde359c2a

You can also find more info on it here, feedback is really appreciated!

https://youtu.be/STs-EEqMcg4

Twitter: https://twitter.com/EmpireOfSight

Discord : https://t.co/AHSELD7UeB

Website : https://www.empireofsight.com/

EOS
Rat in a Maze - is possible path available?
Tags: javascript, leetcode
Published: 2022-08-20 02:26:00

This solution is for only 1 path & with connected cell track.

For Multiple hops allowed follow - [Rat In A Maze - With Multiple Hops](https://dev.to/zeeshanali0704/rat-in-a-maze-with-multiple-hops-2hmh)
```
let solutionMatrix = [
  [0, 0, 0, 0],
  [0, 0, 0, 0],
  [0, 0, 0, 0],
  [0, 0, 0, 0],
];
let N = solutionMatrix.length; // rows
let M = solutionMatrix[0]?.length; // column

let inputMatrix = [
  [1, 0, 0, 0],
  [1, 1, 0, 1],
  [1, 1, 0, 0],
  [0, 1, 1, 1],
];

const solveMaze = (solutionMatrix) => {
  if (solveMazeRun(0, 0) === false) {
    return false;
  } else {
    return solutionMatrix;
  }
};

const solveMazeRun = (i, j) => {
  if (N - 1 === i && M - 1 === j) {
    solutionMatrix[i][j] = 1;
    return true;
  }

  if (isSafeToMove(i, j)) {
    solutionMatrix[i][j] = 1;
    if (solveMazeRun(i + 1, j) === true) {
      return true;
    } else if (solveMazeRun(i, j + 1) === true) {
      return true;
    } else if (solveMazeRun(i - 1, j) === true) {
      return true;
    } else if (solveMazeRun(i, j - 1) === true) {
      return true;
    }
    solutionMatrix[i][j] = 0;
    return false;
  }
};

const isSafeToMove = (i, j) => {
  if (i < N && j < M && inputMatrix[i][j] !== 0) return true;
  else return false;
};

console.log(solveMaze(solutionMatrix));

```
[Rails][Sorbet] Rubocop Settings
Tags: ruby, rails, sorbet
Published: 2022-08-20 16:36:45

---
title: [Rails][Sorbet] Rubocop Settings
published: true
date: 2022-08-20 02:24:40 UTC
tags: ["Ruby","Rails","Sorbet"]
canonical_url: https://note.hiko1129.com/posts/1660962280/
---

<a href="https://note-hiko1129-com.translate.goog/posts/1660962280/?_x_tr_sl=ja&_x_tr_tl=en&_x_tr_hl=ja&_x_tr_pto=wapp" target="_blank" rel=”noopener noreferrer”>Translate ja to en</a>

下記のようにrubocop-sorbetが入っている前提
```ruby
group :development, :test do
  gem 'rubocop-sorbet', require: false
end
```

下記のようにTrueSigilを有効化してExcludeでspecやconfigを除外するのが良さげ。
デフォルトでFalseSigilが機能しているので全体としてはtyped: falseが必須でアプリケーション本体に関連する部分のみtyped: true以上必須という挙動になる。
```yaml
Sorbet/TrueSigil:
  Enabled: true
  Include:
    - "**/*.{rb,rbi,rake,ru,jb,jbuilder}"
  Exclude:
    - spec/**/*
    - config/**/*
```

上記設定があると`bundle exec srb rbi suggest-typed`でアプリケーション関連のtypedがfalse以下になったときに簡単に気づける。