teleren/devto huggingface dataset:
Improve SCSS structure
Published: 2020-08-23 10:10:41

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/cj36uj75motkzzefmkw5.png)
# A bad example
An example SCSS which is structured as:
```
.widget {
    background-color: red;
    .widget-body {
        background-color: black;
        .widget-link-block {
            background-color: yellow;
            .widget-link-block-menu {
                background-color: green;
            }
        }
    }
}
```
Which compiles to CSS:
```
.widget {
	background-color: red;
}

.widget .widget-body {
	background-color: black;
}

.widget .widget-body .widget-link-block {
	background-color: yellow;
}

.widget .widget-body .widget-link-block .widget-link-block-menu {
	background-color: green;
}
```
It has 2 disadvantages:
1. we are repeating keywords like 'widget'
2. the compiled CSS relies on HTML structure, i.e. it only works on the following HTML:
```
<div class='widget'>
  <div class='widget-body'>
    <div class='widget-link-block'>
      <div class='widget-link-block-menu'>
      
      </div>
    </div>
  </div>
</div>
```
Violating the hierarchy would cause them stop working:
```
<div class='widget-body'>
<div>
```
does not work
```
<div class='widget'>
  <div class='widget-body'>
    <div class='widget-link-block-menu'>
      <div class='widget-link-block'>
      
      </div>
    </div>
  </div>
</div>
```
does not work
# Suggested method
Use SCSS properly and Follow [BEM](https://en.bem.info/methodology/)

The above SCSS example can be modified to:
```
.widget {
    background-color: red;
    &-body {
        background-color: black;
    }
    &__link {
        &__block {
            background-color: yellow;
            &__menu {
                background-color: green;
            }
        }
    }
}
```
which compiles to CSS:
```
.widget {
	background-color: red;
}

.widget-body {
	background-color: black;
}

.widget__link__block {
	background-color: yellow;
}

.widget__link__block__menu {
	background-color: green;
}
```
As you can see, the compiled CSS is more compact, less complex. When write SCSS, we no longer repeat writing '.widget'. More importantly, the compiled CSS no longer relies on HTML structure, it can be used like this:
```
<div class='widget'>
  <div class='widget-body'>
    <div class='widget__link__block'>
      <div class='widget__link__block__menu'>
      
      </div>
    </div>
  </div>
</div>
```
or in different order:
```
<div class='widget'>
  <div class='widget-body'>
    <div class='widget__link__block__menu'>
      <div class='widget__link__block'>
      
      </div>
    </div>
  </div>
</div>
```
or individually:
```
<div class='widget-body'>
</div>
```
Stack Overflow learnings and answers
Tags: javascript, angular, rxjs, ngrx
Published: 2020-08-23 09:59:44

---
title: Stack Overflow learnings and answers
published: true
description: Stack Overflow learnings and answers
tags: #javascript #angular #rxjs #ngrx
---

I've been quite active on Stack Overflow this year and I thought it would be a good idea to put together some answers along with their discoveries.

[Here is the repo](https://github.com/Andrei0872/stackoverflow-learnings-and-answers/blob/master/README.md). Since I'm passionate Angular, I've answered questions from its ecosystem.

Thanks!
Add funny comments to your PRs and issues.
Tags: actionshackathon, github, opensource
Published: 2020-08-23 09:40:46

[Instructions]: # (To submit to the GitHub Actions x DEV Hackathon, please fill out all sections.)


### My Workflow
[Note]: # (Make sure to include the name of your GitHub Action and share where it's being used!)

I wanted to try it out Github actions for a while so when I saw this hackathon I though it was the perfect moment. 

I didn't have any productive idea that wasn't already in the marketplace so I remember that when I started as a developer we have a feature in Jenkins where every build you could read a funny comment about [Chuck Norris](https://es.wikipedia.org/wiki/Chuck_Norris), and I loved it!

I'm also kind off a newbie with Typescript so I decided to use it to keep learning. 



### Submission Category: 

[Note]: # (Maintainer Must-Haves, DIY Deployments, Interesting IoT, Phone Friendly, or Wacky Wildcards)
Wacky Wildcards

### Yaml File or Link to Code

[Note]: # (Our markdown editor supports pretty embeds. Try this syntax: `{% github link_to_your_repo %}` to share a GitHub repository)
Here is an example of how to use the Action:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/c20ogql0sla3jz9rc27k.png)

You can customise your funny comments with the comment_type argument.

* chuck : Add Chuck Norris's fun facts.
* gif : Add funny gifs.
* all: Random comment between all the options.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/vtnugs04ti1wfgu8vbtv.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/mdq98r1l6gpadtnpl051.png)

{% github https://github.com/Marta83/funny-comment-action %}

You can check it also in the [Marketplace](https://github.com/marketplace/actions/funny-comments)

### Additional Resources / Info

[Note]: # (Be sure to include the DEV usernames of your collaborators, if any. )

[Reminder]: # (Submissions are due on September 12th (11:59 PM PDT) and winners will be announced on September 23!)

https://github.com/github-actions-up-and-running/pr-comment
https://notiz.dev/blog/build-and-publish-your-first-github-action#quickstart
https://api.chucknorris.io/
https://giphy.com/
Tell me what confuses you the most about JS / TS / React / functional programming and I will write a full length article for you
Tags: codenewbie, javascript, typescript, react
Published: 2020-08-23 08:43:06

Hi!

I am Mateusz, front-end developer from Poland with 4+ years of experience in JavaScript, TypeScript, React and functional programming.

I recently started writing [articles here on DEV](https://dev.to/mpodlasin). I try to write simple tutorials with lots of examples, while at the same time explaining the topics deeply and exhaustively.

But, as a bit more seasoned programmer, I don't really know which topics bother newcomers the most.

You can ask me anything about **JavaScript, TypeScript, React and functional programming** and I will write a full length article specifically about your problem, for free.

**What is most difficult for you to understand?**

**Which topic still isn't covered well online?**

**What needs clearer explanation?**

When I was learning, online resources helped me a lot, so this time I want to give back!

Thanks in advance and see you soon! 

<span>(Cover Photo by <a href="https://unsplash.com/@heftiba?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Toa Heftiba</a> on <a href="https://unsplash.com/s/photos/help?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a>)</span>
Can't decide what to use for your application?
Tags: webdev, react, angular, javascript
Published: 2020-08-23 07:09:09

# This article was written for a lot of the folks out there who face problems while deciding what language to use, what framework to use, and a bunch more.

### Here are some points listed that you should consider before choosing what to use.

#### Does it have the features you need
Ask yourself does it have the utilities you need or does it not. If it does then congratulations but if doesn't then look ahead.

#### Community 
Is it dead or do people still use it, is important. For debugging purposes a large and welcoming community is really helpful. If it is dead/fewer people use it then it will be hard for you to find help when the bugs invade.

#### Learning Curve
You don't just want one weapon in your arsenal. Nicely documented tools are the best.

#### Client's Opinion
Make sure it has few marketing lines that impress the clients. It would be waste if the clients aren't happy. 

Have a nice day <3!
Lottery sambad result todays best website
Tags: lotterysambad, nagalandstatelottery
Published: 2020-08-23 08:39:30

Sikkim state lotteries result today
Sikkim lottery result today. Click on the link above to Download and view Sikkim lottery result online. Sikkim today lottery result PDF online. Sikkim lottery result also updated here on this site. 
 Download 04:00 PM PDF
Nagaland state lottery result today
Nagaland lottery result today. Click on the link above to Download and view Nagaland state lotteries result online. Nagaland today lottery result pdf file online. You may check nagaland state lottery morning 2020 here online. Stay connected with us to check daily Nagaland state lottery result of the day. Check all Sambad Lottery Result right over here. 
West bengal state lottery
Check here west Bengal state lottery sambad today result 4:00 PM online. West bengal old as well as today lottery draw result will be updated here on this page. Stay connected with us to check and download west bengal lottery draw result online. West Bengal lottery is one of the most and popular lottery around the globe. Keep visiting our site to check west bengal lottery draw result of the day. We also update you here with the new bumper prizes
These are the best website for lottery sambad <a href="https://lotterysambaddear.in/">Lottery Sambad</a>
<a href="https://nagalandstatelottery.in/">Nagaland State Lottery</a>
<a href="https://dhankesari.org/">Dhankesari</a>
<a href="https://keralastatelottery.in/lottery-sambad-result-today-1155-am-4pm-8pm/">Lottery Sambad</a>
Blurry screenshots after uploaded in Dev.to Post?
Tags: discuss, help
Published: 2020-08-23 08:01:58

Not sure that I'm only facing this issue !? Whenever I upload some screenshots from my PC for my post, It was looking blurry during the preview and after the publish.

If you look at my recent post [Azure Synapse Analytics(workspaces): Deploy and Debug - Part 1](https://dev.to/jayendran/azure-synapse-analytics-workspaces-deploy-and-debug-part-1-1fap) most of the screenshots are blurry. I tried with many different ways to get screenshots like snipper, Snagit nothing seems to work for me.

Eg.,
Some of the screenshot like

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/drm2pk3hjhydjkcq94zu.JPG)

![](https://dev-to-uploads.s3.amazonaws.com/i/uws0nyoc11fupx8max73.jpg)
Database Choices. NoSQL vs SQL
Tags: discuss, database, healthydebate
Published: 2020-08-23 07:42:04

I have seen a few posts about people saying their favorite database and I am curious now why you might choose a NoSQL database over an SQL database or vice versa.

Personally, for basically every project, I choose to use DyanmoDB. There are a few reasons why but they all in a way boil down to cost and performance.

As far as the cost side DynamoDB offers an extremely generous free tier and I have never on my side projects reached passed the free tier capacity which is really nice. One of the said side projects I had 10,000 users and even with doing roughly 150 reads a second it was free.

Another aspect I love about Dynamo is how good it works with serverless because you never make a constant connecting with the database, every change is done through HTTP requests. Dynamo is also extremely performant no matter how high you scale it. Currently working with a client that wanted to switch off of Postgres to Dynamo and performance has been an insane improvement for them.

I feel one of the main reasons I do not choose an SQL database is because I do not really have any analytical reads or have access patterns that I do not know about. I think SQL performs best when you need those analytical type queries but it seems a lot of people prefer SQL databases over NoSQL and was curious to see the reasoning.
A free pomodoro app
Tags: productivity, alpinejs
Published: 2020-08-23 07:02:35

Visit https://pomo-do.netlify.app/ for a demo

I have to learn alpinejs for work and I was looking for a pomodoro app where I can check my history for **FREE**.

So, I wrote a pomodoro app with alpinejs. It's like killing two bird with one stone.

TBH the pomodoro app could have been written on vanilla js but like I said I just wanted to learn it.

> Make it work, make it right, make it fast

The code is filled with a lot of conditions which I MIGHT improve later on.
Why Does Your Website Look Different In Different Browsers?
Tags: html, webdev
Published: 2020-08-23 07:00:40



## The Role of Browser
The main function of a browser is to present the user's selected web resources, such as html documents, pdfs, images and so on, by requesting the server to display them in a browser window.
For some documents like html, css need to be interpreted by the rendering engine in the browser.

## Reason of Difference
Different browsers have different **rendering engines** and often interpret source code like HTML and CSS in slightly different ways, so that website looking can be different or not be displayed properly.

## Difference in Box
In CSS, each element, such as div, h, p and etc., has a concept of **box**. A box consists of, from the outside, **margin**, **border**, **padding** and **content** like text or image.

``` css
box {
    width: 400px;
}
```

Sometimes you might define the width of the content like above, and [W3C](https://en.wikipedia.org/wiki/World_Wide_Web_Consortium) box model, which is the the main international standards organization for the World Wide Web, defines the width as **content width** while the Internet Explorer box model, which is one of the major browser and installed in windows computer since the beginning, defines width as **content + padding + border**.



![box interpret](https://i.imgur.com/y6PiO85.png)

## DOCTYPE

You must have seen the code like below if you have the experience coding html.

```html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
```
or
```html
<!DOCTYPE html>
```

DOCTYPE is a declaration of the **DTD**, which stands for "Document Type Definition" and not an HTML tag.

HTML is a language based on **SGML** (Standard Generalized Markup Language) and the DOCTYPE declaration and DTD are derived from SGML.
Many web browsers display documents in different ways such as **standard-compliant mode** and **compatibility mode** depending on the presence or absence of the DOCTYPE declaration and its content. This switching of the display method is called **DOCTYPE switch**. A simple explanation of how the DOCTYPE switch works is that if a DOCTYPE declaration is not placed at the beginning of an HTML sentence, it will be adapted to an older version of the browser's display.

HTML5 is no longer a language based on SGML. Therefore, unlike the language used up to HTML4, no DTD is required. However, the DOCTYPE declaration itself is still required in HTML5 since the DOCTYPE switch allows the browser to operate in standards-compliant mode.

![doctype](https://i.imgur.com/r6ptWxl.png)
## Further Knowledge
If you want to know more about the browser, click [here](https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/) to access the best resource that I think.

If you can't click the text link above, copy and paste the URL below into your internet browser: 
[https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/](https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/)
How to get a job in tech.
Tags: career, webdev, showdev, beginners
Published: 2020-08-23 05:33:31

---
title: How to get a job in tech.
published: true
description: How to get a job in tech.
tags: career, webdev, showdev, beginner
//cover_image: https://direct_url_to_image.jpg
---
How to get a job in tech as a beginner:

1. Research 30 companies you like to work for.

2. Use www.wappalyzer.com/lookup to see the stack they use.

3. Then learn the stack.

4. If they have openings, apply; if not mail them.

5. Repeat until you get a job.

What is your job hunting process?

Subscribe to my news-letter to always get my tutorials in your inbox: [You Too Can Code](https://aw194b5a.aweb.page/p/5c07dec9-f1bd-4a8f-a788-87e4f0a6a6a1)
Default error in ruby
Tags: ruby
Published: 2020-08-23 05:30:51

Before I was aware of the default errors that ruby could provide, I would always write my own custom error validations inside my controller. And so I just wanted to share with others the most basic syntax, for the right defaulted validation.
This is a code that temporarily saves your errors, only if the method "valid?" returns false. Here is the code "flash[:errors] = #{#any instance you have saved your create, update, edit method too or anything that is being validated}.errors.full_messages ". The error here runs a validation enumerable, and after you choose a style for way it saves the error, I chose the most original which was full_messages. Ruby is smart enough to realize what you are doing. This would automatically save the errors that are based off the validations that you have edited inside your active record methods. For Example if in the you methods you had, validates :column, presence: true, validates, uniqueness: true, then you could show its errors if there are any, by writing in its rendered value "flash[:errors]" in the presented page. If both are false, or either one, it would output a text like, "duplicate already exists", or "the name is empty". By using this default structure you can save a lot of time, and effort, and it's pretty convenient.
Bootstrapping a React Native App with Best Practices
Tags: react, reactnative, javascript, showdev
Published: 2020-08-23 05:06:29

---
title: Bootstrapping a React Native App with Best Practices
published: true
description: Created my own template
tags: react,reactnative,javascript,showdev
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/7xpr2g6j4f1gcwke6sgp.png
---

> Edit: While this was probably a decent template at the time – I no longer recommend using it today. For the latest and greatest check out [create-t3-turbo](https://github.com/t3-oss/create-t3-turbo) or [Solito](https://solito.dev/).

If you're unaware, you can [create your own](https://github.com/react-native-community/cli/blob/master/docs/init.md#initializing-project-with-custom-template) react native template to be consumed by the react native cli.

Since I always end up referencing old projects for some code (e.g. navigators, automation scripts) I decided I to make one and save myself the headache.

Anyway, I've been maintaining it for some time now and I'm quite happy with where it's at. I only got around to writing some docs this weekend though, which is why I feel this is a good time to share. I should also mention that it is using TypeScript.

Check it out here! 

### [osamaq/react-native-template](https://github.com/osamaq/react-native-template)

Thanks to the work by the authors of react-native-cli, using the template is as easy as:

```bash
$ npx react-native init MyApp --template @osamaq/react-native-template
```

> If you are **just** starting to learn React Native or TypeScript, I don't actually recommend this template as it could be a bit overwhelming, unless you have a native iOS or Android background.

I've put a lot of work into it, from applying best practices to writing boilerplate components/logic that you can build upon. More than anything, I love the automation scripts. Please go through the docs or codebase and let me know what you think!

If you have questions or suggestions on how it could be improved or what you'd do differently, I'd really appreciate it. Thanks!
Mini conceptual breakthrough re: ln
Tags: terminal
Published: 2020-08-23 05:01:52




# mind. blown.

i do not use the typical laptop or desktop setup to muck around on the linux cli, to use text editors [micro, my babe], or futz around in image and video editors. i rely mainly on my android phones rocking termux and other various apps.

one of the pains in my keister lately, as far as getting the files to my site host's server goes, has been in the quite convoluted steps i take to do a quite simple task. these are mainly, mostly in fact, done as a direct result of a) i am scared of `ssh`/`sftp` via a cli still, and b) im self teaching on every aspect of my growth so far. the process is roughly:
1. `commit` the updates via `git` 
2. `rsync` copy the files from the termux app storage into android storage proper `/data/data/com.termux/. `.. to the usual ` /storage/emulated/0 ` 
3. use TotalCommander as visual ftp client and send those badboys up to the server.

Now the point of this post. ` ln ` and **hard links**. I was reading some articles and the die.net MAN pages on `ln` tonight and it finally sank in, what makes a hard link so incredibly valuable. especially in arenas like where i dwell. 
> a file name simply points the OS to the data bits and bytes that are written on the disk that make up what i conceptualize as a `.html` or `.mp3` file. if the file name is erased (this happens when i _delete_ the file) only the pointer to the specific bits is removed. the bits an bytes remain and are written over, etc etc. there is nothing that says that multiple file names cannot point to and access the same range of bytes from the OS. that multiple file pointers cant reference the same data. 

😲😲😲😲😲😲

i can, through termux, access my `/storage/emulated/0/` file system and create hard links, via `ln`, to the html, liquid, css, etc files i edit and manipulate in termux and be able to upload them from android os. takes out constant `rsync` and `mkdir` and `cp` and `mv` shenanigans. makes my workflow leaner, tighter, more tiger like.
📱🔗🔗⛓️🔗⌨️


🐯

[main article that brought on the ah hah moment](https://shapeshed.com/unix-ln/)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ehrn2huoljgpga6i9p3s.jpg)
Replay & Async Subject (Observables)
Tags: javascript, codenewbie, webdev, beginners
Published: 2020-08-23 04:46:14


Now that we know what Subject and Behavior Subject is, it is time to dive into Replay and Async Subject. Both of them are variants of Subject but with slight differences. I will go over examples of each and explain the difference.

### ReplaySubject

ReplaySubject can maintain old values emitted. The behavior is useful when you want these old values replayed to a new subscriber. Saving old values is unlike BehaviorSubject. BehaviorSubject only maintains the latest of the emitted values.

You can save a set number of values, say X and the ReplaySubject will immediately emit all of the X values to a new subscriber.

```javascript
import { ReplaySubject } from 'rxjs';

const subject = new ReplaySubject(3);
// 3 is the buffer or values to hold

subject.next(1);
subject.next(2);

subject.subscribe(
  data => console.log(`Observer A: ${data}`)
  // A will have 1 and 2 (as Subject can hold up to 3 values)
);

subject.next(3); // A will have 3
subject.next(4); // A will have 4

subject.subscribe(
  data => console.log(`Observer B: ${data}`)
  // B will have last 3 values => 2, 3, 4
);

subject.next(5); // A and B both get the value 5
```

The output based on what each Observer gets is:

```console
Observer A: 1
Observer A: 2
Observer A: 3
Observer A: 4
Observer B: 2
Observer B: 3
Observer B: 4
Observer A: 5
Observer B: 5
```

### AsyncSubject

AsyncSubject is a type of Subject that only emits its last value on completion. It emits the latest value to all the Observers on `complete()`.

AsyncSubject is useful for fetching and caching one response resources, like an HTTP call to the backend. Components that subscribe after the fetch will then pick up value already fetched.

```javascript
import { AsyncSubject } from 'rxjs';

const subject = new AsyncSubject();

subject.subscribe(
    data => console.log(`Observer A: ${data}`)
);

subject.next(1); // nothing gets logged

subject.subscribe(
    data => console.log(`Observer B: ${data}`)
);

subject.next(2); // nothing gets logged
subject.next(3);

subject.complete(); // Observer A and B log the last value, 3
```

Based on our findings above, the console output will be:

```console
Observer A: 3
Observer B: 3
```

### Summary (Differences)

- `Subject` does not return the current value on subscription. It triggers only on `.next(value)` and returns the value, just like an Observable.
- `BehaviorSubject` will return the initial value or the current value of a subscription. It only maintains **one current/latest value**.
- `ReplaySubject` allows the `Subject` to holding more than one value.
- `AsyncSubject` emits **only** its last value on `complete()`.