teleren/devto huggingface dataset:
Cascading what? Explanation about CSS Cascading rules
Tags: css, beginners, programming, webdev
Published: 2022-01-05 06:40:28

CSS stands for Cascading Style Sheets

I want to talk with you about the cascading part today.

You probably already know that CSS is not a programming language. Instead, CSS is all about declaring rules to the elements in our DOM.

We have all kinds of ways to declare those rules.
For example, inline styles:

```
<div style="backgroundColor:red" class="my_div">Hi </div>
```

Or class selectors:

```
.my_div {
background-color:green;
}
```

But how do these rules apply? Which one is more powerful?

That is where the cascading rules come into action. The inline style will rule out the class selector in the example above.

I sometimes see people struggling with the cascading rules, but actually, it is straightforward.

When conflicting styles appear, the first thing your browser will check is the origin of the stylesheet.

We have two main types of origins:

-user-agent styles, which in simple words means **browsers' default**.
-Author styles, which in simple terms means - **your custom styles**.

The author styles will always override the user-agent styles.

So far, so good. But what if we have conflicts in the author styles themselves?

Well, it's effortless to remember that the winner is always inline styles.

After that, we get to the scary (and problematic to pronounce) word specificity.

Just memorize it: IDs, Classes, attributes, pseudo-classes, elements, pseudo-elements.

Or in symbols: 

```
#id (avoid using them!)
.class (Classes).
h1[lang="pt"] (attributes).
h1: hover (pseudo-classes).
h1 (elements).
h1:: first-letter (pseudo-elements).
```

Lastly, if no specificity rules apply, the browser will use the rule that appears later in the source.

I've created a nice diagram to help you with that. Please **learn it by heart** if you dare call yourself a frontend developer :)


![css cascading rules](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cgw6ofnjlw208y6uszk9.png)

0h, and don't use !important (unless you have a significant reason).

---

- For more posts like this [follow me on LinkedIn](https://www.linkedin.com/in/nitsan-cohen/)

- I work as frontend & content developer for [Bit](bit.dev) - a toolchain for component-driven development (Forget monolithic apps and distribute to component-driven software).
Reddit clone...
Tags: mongodb, react, webdev, graphql
Published: 2022-01-05 06:35:07

I enjoy making web application, so one day just thought for creating small application and I decided making reddit clone.

I creating this project from scratch. [take a look](https://gauravnumber-reddit-frontend.vercel.app/)

Frontend:
 * ReactJS
 * Semantic UI
 * Typescript
 * GraphQL

Backend:
 * MongoDB

Suggest me. What to do next for [this project](https://github.com/gauravnumber/reddit-frontend)?
A quick auth0/express/heroku setup
Tags: terraform, node, security, heroku
Published: 2022-01-05 05:09:56

_first post alert_ 

Every now and then, when I'm going through periods of needing a quick user authentication setup for a poc or mvp, I have to dig out my notes, or find the right blog post, or track down the last repo to refresh my brain. 
Then spend time refactoring it to suit the current needs.

I recently had to do this for the umpteenth time so I finally got around to creating a 'bootstrap' method so that I don't have to go through the same rigmarole as before.

_I should have done this the first time I had to repeat the process, but was likely being lazy or, paradoxically, in a rush._

It uses Terraform to create an app on heroku, enable the Auth0 addon, and deploy a basic express web-app that is setup with the authentication steps.

Once it's deployed, I can then get straight into development of the product rather than having to start with the auth0 config.

It's super simple: 

1. Create a heroku account (or use existing)
2. Add a payment method (if you don't already have one)
3. Update the tfvars with your values
4. `terraform apply -var-file=yourvars.tfvars`
5. Add your heroku url to the auth0 config
6. _profit?_



A few more details, screenshots and the like, in the Github Readme: https://github.com/iamgeef/heroku-express-auth0

Thanks
gareth

{% spotify spotify:track:6ITuEsxEy2qPhqMowdDAeI %}
Display excel in Angular page
Published: 2022-01-05 06:29:54

I have a use case, where I need to display an excel sheet from the server on the page developed using angular. The excel sheet would have formulas & also locked cells. The locked cells should not be editable on the web page & when we enter data in the other unlocked cells, the field with formula should be updated based on the values entered & the formula in the cell. We should also be able to save the excel back to the server. Kindly suggest the approach & if any components which I can use to achieve this functionality.
Hello!
Tags: firstpost
Published: 2022-01-05 05:44:37

Hello, I was thinking to start blogging about few random topics which might be useful for folks out there. I was not sure whether to start as wring article or a blog. I think I wasted enough time thinking about the options so here is my first post.

I have start drafting bunch of topics so I don't forget to cover them. I will soon publish them.
How to prevent motion sickness with few lines of CSS.
Tags: webdev, css, a11y, productivity
Published: 2022-01-05 05:39:39

Motion sickness occurs due to a difference between actual and expected motion. Symptoms commonly include nausea, vomiting, cold sweat, headache, dizziness, tiredness, loss of appetite, and increased salivation. Complications may rarely include dehydration, electrolyte problems, or a lower esophageal tear.

The cause of motion sickness is either real or perceived motion. This may include from car travel, air travel, sea travel, space travel, or reality simulation. Risk factors include pregnancy, migraines, and Meniere’s disease. The diagnosis is based on symptoms.

Treatment may include behavioral measures or medications. Behavioral measures include keeping the head still and focusing on the horizon. Three types of medications are useful: antimuscarinics such as scopolamine, H1 antihistamines such as dimenhydrinate, and amphetamines such as dexamphetamine. Side effects, however, may limit the use of medications. A number of medications used for nausea such as ondansetron are not effective for motion sickness.

**Nearly all people are affected with sufficient motion and most people will experience motion sickness at least once in their lifetime. Susceptibility, however, is variable, with about one-third of the population being highly susceptible while most other people are affected under extreme conditions. Women are more easily affected than men. Motion sickness has been described since at least the time of Homer (ca. 8th century BC).**

Please 🙏 include this small snippet in your CSS bundle to protect people from motion sikness.
```css
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
```
Tis media query (`@media (prefers-reduced-motion: reduce)`) is called reduced motion media query.

This snippet adds some animation limitations for all the elements in the page. Added `!important` directive, so anyone can't override it with online ne styles.

Thanks for reading this article.💕

Follow me for more articles🏃
10 Great Topics for Engineering All Hands
Tags: management, leadership, productivity, culture
Published: 2022-01-05 05:25:23

Bringing together an engineering team is something we all can agree we should be doing. But how do make sure it’s not a waste of time?

We might ask many questions that will guide us in the direction to find topics for engineering all hands.

- What updates are value for the team?
- What topics should be presented?
- What makes the teams feel involved or appreciated?
- What information might the team not get elsewhere?
- What would help... [Continue Reading](https://blog.jstassen.com/2021/12/10-great-topics-for-engineering-all-hands/)

## 10 Great Topics for Engineering All Hands


1. **Impact of what has been built**
This could be backed with numbers like sales, hours saved, etc.
Customer stories how they using what the team has been building. This could even involve bringing in real customers to meet the team and share their real life usage of the product.

2. **User Feedback about what we’ve been built.**
Similar to impact, however this might be reviews, tweets, emails, or feedback of what users are saying about the product we’re building.

3. **Vision of why and what we’re building across teams at high level.**
What are the business goals that we’re trying to meet?
How are [team roadmaps](https://blog.jstassen.com/2020/09/planning-quarter-roadmap-for-a-team/) satisfying those business needs?
What sort of things... [Continue Reading](https://blog.jstassen.com/2021/12/10-great-topics-for-engineering-all-hands/)
The Valuable Time of Maturity - Poem by Mário de Andrade
Tags: motivation
Published: 2022-01-05 05:25:09

Beautiful poem by Mario de Andrade (San Paolo 1893-1945) Poet, novelist, essayist and musicologist. One of the founders of Brazilian modernism.


I counted my years and realised that I have less time to live by, than I have lived so far.

I feel like a child who won a pack of candies: at first, he ate them with pleasure but when he realised that there was little left, he began to taste them intensely.

I have no time for endless meetings where the statutes, rules, procedures and internal regulations are discussed, knowing that nothing will be done.

I no longer have the patience to stand absurd people who, despite their chronological age, have not grown up.

My time is too short: I want the essence; my spirit is in a hurry. I do not have much candy in the package anymore.

I want to live next to humans, very realistic people who know how to laugh at their mistakes and who are not inflated by their own triumphs and who take responsibility for their actions. In this way, human dignity is defended and we live in truth and honesty.

It is the essentials that make life useful.

I want to surround myself with people who know how to touch the hearts of those whom hard strokes of life have learned to grow with sweet touches of the soul.

Yes, I'm in a hurry. I'm in a hurry to live with the intensity that only maturity can give.

I do not intend to waste any of the remaining desserts. I am sure they will be exquisite, much more than those eaten so far.

My goal is to reach the end satisfied and at peace with my loved ones and my conscience.

We have two lives and the second begins when you realize you only have one.
Unique APIs to use in 2022
Tags: javascript, webdev, node
Published: 2022-01-05 05:02:30

You have used APIs... But today I have a great list of unique APIs you can use in 2022

### Imgflip
- https://imgflip.com/api
- Gets data of popular meme templates
- API key required **No**
- CORS **No**

### NASA
- https://api.nasa.gov/
- Get NASA Data including imagery
- API key required **Yes**
- CORS **No**

### International Space Station Location
- http://open-notify.org/Open-Notify-API/ISS-Location-Now/
- Get real-time location of ISS
- API key required **No**
- CORS **unknown**

### New York Times
- https://developer.nytimes.com/
- Get news data from NYTimes 
- API key required **Yes**
- CORS **No**

### IPStack
- https://ipstack.com/
- Get IP and GEO Location Data
- API key required **Yes**
- CORS **unknown**

### OpenWeatherMap
- https://openweathermap.org/api
- Get Weather
- API key required **Yes**
- CORS **No**

### EVA | Email Verification
- https://eva.pingutil.com/
- Verify fake/disposable emails 
- API Key required - **No**
- CORS **unknown**

Make sure to follow me on Twitter - [@codewithsnowbit](https://twitter.com/codewithsnowbit)

Subscribe on YouTube - [Code With SnowBit](https://www.youtube.com/channel/UCNTKqF1vhFYX_v0ERnUa1RQ?view_as=subscriber&sub_confirmation=1)
How to Drag, Resize, and Animate the Blazor Dialog Control
Tags: blazor, dotnet, csharp, webdev
Published: 2022-01-05 04:57:54

Learn how to drag, resize, and animate the Syncfusion [Blazor Dialog control](https://www.syncfusion.com/blazor-components/blazor-modal-dialog). This video explains how to position the Blazor Dialog control. You will see how to create a custom dialog and add multiple dialogs. 

Tutorial video: https://www.syncfusion.com/tutorial-videos

Download the example from GitHub: https://github.com/SyncfusionExamples... 

{% youtube qNW5d7C2L7g %}
🤬 Which parts of your job do you hate?
Tags: discuss, watercooler, webdev
Published: 2022-01-05 04:55:27

Since you're all on DEV - I think it's safe to assume that you probably **like** development, or at the very least are interested in it... but if you're one of those who are lucky(?) enough to do it as a career - which parts of the job do you really dislike?
Manga Dogs Apk 2022 Review

Tags: programming, javascript, beginners, react
Published: 2022-01-05 04:42:06

If you're a manga lover, you'll love the [manga dogs apk 2022]() application. This free application has an immense collection of manga books ready to read. Not only will you be able to browse through your collection of manga titles, but you'll also be notified when new ones are published. You can even create a shelf for your favorite manga and subscribe to notifications when new ones are released. The best part of this app is that it's totally free, so it's a great way to start reading your favorite works.

The app also has a history feature that remembers your current position, so you can continue reading from where you left off. It also has a continuous reading option, so you can start a series on one device, and finish it on another. It's an incredible feature for manga lovers. And because you can read manga offline, you'll never run out of books to read! With the help of Manga Dogs, you'll be able to download your favorite titles and continue reading them later.

The Manga Dogs application allows you to download free comics, manhwa, and manga without having constant internet access. You can also download your favorite stories to read later. If you don't have time to check the internet, you can always pick up your manga from where you left off. With its free service, you can read as much manga as you want on the go. Once you download the Manga Dogs application, you can begin reading your favorite stories wherever you are. If you want to find out about new releases, you can even participate in the MangaDogs community and share your own opinions.

The Manga Dogs application makes it easy to read manga anywhere. It has many features, such as a history that allows you to follow your favorite manga series. You can also chat with other manga fans through this app, which is great for anyone who loves the manga. The Manga Dogs application is free, so it's a must-have. So download this app today to enjoy the world of manga! So, get reading!

The Manga Dogs application is a great source for manga lovers. It has an incredible library of manga. You can read classic manga or choose from new releases. You can also download manga in HD and watch it on your computer. This app also lets you read different types of comics on multiple devices. The free versions of the app allow you to download them to your device. The Manga Dogs apk application does not require you to have internet connection.

The Manga Dogs application has a history feature, which will remember your position while you read. The app also has a continuous reading mode, which means you can start a manga on one device and finish it on another. You can even read the same manga on different devices, if you like. This free app can be downloaded directly from the link below. It is available for Android devices that support PDF files, but there are some restrictions. For example, the app does not allow you to download any files.
Self-Taught Developer Journal, Day 31: JavaScript Call Stack and Execution Context
Tags: webdev, beginners, codenewbie, devjournal
Published: 2022-01-05 04:41:31

Today I learned...

## Execution Context
When a JavaScript executes a script or function, an execution context is created. An execution context has two phases: the creation phase and execution phase.

Every script always starts with creating the global execution context. Then, for every function call, a new function execution context is created and put on top of the *call stack or execution stack*.

    let x = 10;

    function timesTen(a){
      return a * 10;
    }

    let y = timesTen(x);

    console.log(y); // 100

Source: https://www.javascripttutorial.net/javascript-execution-context/

In the **creation phase**:
* global execution context is created
* global object is created
* **this** object binding which references the global object is created
* a memory heap is set up
* variables and function declarations are stored in the memory heap with variables initial value set to undefined

![Creation Phase Example Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u1gss5sq3rw2xtspee2m.png)

Next, in the **execution phase**:

* the JavaScript Engine executes the code line by line.
* values are assigned to variables and function calls are executed
![Execution Phase Example Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0nqq9qxiyfge2ql5y66c.png)
* for every function call, a new Function Execution Context is created
* for the Function Execution Context creation stage, instead of creating the global object, *it created the arguments object that contains a reference to all of the parameters passed into the function*.
* **this** value is set to the global object
* **"a"** parameter is initialized with undefined
![Function Execution Context Creation Phase Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y362gtpo6xudsli0unzg.png)
* Lastly, during the Function Execution Context execution phase, values are assigned and the function returns the result to the global execution context
![Function Execution Context Execution Phase Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7y49yf9whffknsngdl1p.png)

## The Call Stack
The call stack works based on the LIFO principle, last-in-first-out. The functions are added to the call stack as the execution contexts are created.

![Call Stack](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n9lsfz8g6qp7ibpbc9tw.png)

The call stack has a fixed size (depending on the host environment). *If the number of the execution contexts exceeds the size of the stack, a stack overflow will occur*.

## Resources
https://www.udemy.com/course/the-complete-javascript-course
https://www.javascripttutorial.net/javascript-execution-context/
https://www.javascripttutorial.net/javascript-call-stack/
https://amnsingh.medium.com/lexical-environment-the-hidden-part-to-understand-closures-71d60efac0e0
Build a Video Conference App from Scratch using WebRTC,Websocket,PHP +JS Day 0
Tags: webdev, webrtc, php, javascript
Published: 2022-01-05 04:37:14

In this video,I am going to walk you through what we are going to create.

{% youtube 8IKjdnZRPWM %}

In this video we'll cover the download of vscode and xamp

{% youtube ziMzNq6cQlo %}

In this video we'll cover the  installation of composer

{% youtube cpgg0OnF7-k %}

Hi, welcome to the course Build a Video Conference App from Scratch using WebRTC, PHP +JS.
Webrtc and Websocket is combination of powerful technology where you will able to transfer data in real time with low latency. And thats why its been considering the best technology to build video conferencing app. So If you are webrtc enthusiastic, want to build web conferencing website also want to learn websocket.

It doesn't matter if you're a beginner or an experienced programmer, just you have to know the basics of PHP, JavaScript and MySQL and HTML/CSS

This course will be greatly and highly beneficial to you. And by the end of this course you will be capable of creating your own Peer To Peer Live Video Chat Application Just like WhatsApp, or zoom, not only this you will also learn about websocket because we will be using websocket with PHP.

And you can also add this One to one live video chat feature to your existing website or to your project where you want to add support with video chat.


This course will be greatly and highly beneficial to you. And by the end of this course you will be capable of creating your own Peer To Peer Live Video Chat Application Just like WhatsApp, or zoom, not only this you will also learn about websocket because we will be using websocket with PHP.

And you can also add this One to one live video chat feature to your existing website or to your project where you want to add support with video chat.

Okay so what’s the course about?

I will personally guide you, step by step, in creating your own real time video conference system from scratch using webrtc, websocket & JS complete with:

User registration

WebSocket Server

Clients Connections Logic

WebRTC Connection Logic

Live search system

Peer to Peer connection

One to one Video Chat

Ratchet

Clean Friendly URLs

and much more!
Profiling Your Python Code
Tags: python, programming, tutorial
Published: 2022-01-05 04:34:59

Sometimes you want to profile just a single function in your Python program. To profile single function on Python program, we can use `cProfile` to profile single function

```
def create_array():
  arr=[]
  for i in range(0,400000):
    arr.append(i)

def print_statement():
  print('Array created successfully')


def main():
  create_array()
  print_statement()

if __name__ == '__main__':
    import cProfile, pstats
    profiler = cProfile.Profile()
    profiler.enable()
    main()
    profiler.disable()
    stats = pstats.Stats(profiler).sort_stats('ncalls')
    stats.print_stats()
```

That will profile method `create_array` and `print_statement`. By using `pprofiler` [library](https://pypi.org/project/pprofiler/) we can simplify those step to single decorator call

```
from pprofiler import pprof

...

@pprof()
def main():
  create_array()
  print_statement()

if __name__ == '__main__':
    main()
```

By default `pprofiler` will sort by `ncalls`, we can use other sorting key by define it.

```
from pprofiler import pprof

...

@pprof(sort_by='time')
def main():
  create_array()
  print_statement()

if __name__ == '__main__':
    main()
```


![pprofiler in action](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8srjpsimrt13k9gphl83.png)