teleren/devto huggingface dataset:
SASS - Syntactically Awesome Style Sheets
Published: 2022-01-10 10:18:50

Hello Everyone,
Firstly Happy new year 2k22 

[SASS](https://abhishekkovuri25.medium.com/sass-syntactically-awesome-stylesheets-e36891d173c1)

[Please do follow my blogs and give it a clap, if you like it and share with your friends](https://abhishekkovuri25.medium.com)
User Authentication, Rails Backend
Published: 2022-01-10 10:15:19

Ever wonder how that sign-in window, login screen, and/or authentication request is created? I definitely did. It would be more accurate to say, prior to my coding bootcamp, I attempted to learn coding on my own. Authentication was one of the topics, I found myself being really confused with. I didn't understand it, and couldn't find the exact information I was looking for. Armed with a little more knowledge (and practice), I hope this will help you better understand how to implement user Authentication, focusing on Rails backend.

First, let's define Authentication. Whenever you attempt to login to a program or application, your credentials are checked against the server it was setup/monitored on. If the check passes, your account is authenticated and your account will login. Basically, it's confirming you are the account that you're logging into.
 Now that we have defined Authentication. How can we setup code that implements it? There are several ways to do this. I prefer using sessions, so we'll implement this process now.
 **Step 1:** 
 First ensure a SessionController is setup. Plenty of ways to create a SessionController, but I use the terminal command,'rails g controller Sessions'. This will be used to check the account credentials being typed and the actions that follow. See this Ex:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pvw1pvb3fqopfuv5euzc.png)
using data from your database, along with the params hash and session ID, I setup a cookie in the session hash to handle the action for checking to see if the information typed matches the credentials in the database.
**Step 2:** 
Once the controller has been set, you'll have to create the POST route which will submit the user inputted form on the frontend, to the route specified. See the following EX:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5tzhv0h2x0zlw3be21ql.png)

**Step 3:**
Ensure error checking is implemented. So when a user types an incorrect username and/or password combination, they'll receive a descriptive error.

There are more steps to the Authentication process on the frontend (navigating to the route/site, entering credentials, etc) but I wanted to give an overview of the backend steps that I've used that works. Personally, finding this information had been difficult at times, as I was just learning the material. I hope this can be of some reference for all beginners.
More Class Please...
Published: 2022-01-10 10:14:24

Hello again! We're back, and here to talk about our favorite subject, class components. More specifically, the lifecycle hooks. As you may remember, I previously posted about the three main phases of class, Mounting, Updating, and Un-mounting. Within each phase, there are several processes called lifecycle methods (or *hooks*) that help create the applications the user sees, and interact with. Well, let us get right into it!

 **componentDidMount:** During the Mounting phase, this is invoked immediately after the initial render method. This method can be considered the original "useEffect" hook (*with the empty dependency*). So, componentDidMount is used for extended running procedures, like fetching data. See how functional component's, useEffect, and class component's, componentDidMount, are similar, below:

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

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

**componentDidUpdate:** Moving on to the Updating phase, the method componentDidUpdate is invoked right after an update occurs. It must be enclosed in a conditional statement to prevent an infinite loop (*see example below*). Also, notice the repetitive code in the fetch. Another reason, useEffect is more widely used.

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

**componentWillUnmount:** Lastly, at the Un-mounting phase, componentWillUnmount is invoked prior to the component getting unmounted and destroyed. Basically, the component is deleted and the page is cleared. One thing to note about this phase; **Never** call a setState() on this method, as nothing will be rendered. See an example below:

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

 There are more lifecycle methods that are not used as frequently. Mounting on initial render, updating after a render, and un-mount before deleting a page are core methods that should be remembered. I hope you've gained a little more insight on how class components operate to print your ideas to paper.
Onlinekurse erfolgreich verkaufen - LaunchMagie®
Tags: onlinemarketing, kurs
Published: 2022-01-10 12:19:23

---
title: Onlinekurse erfolgreich verkaufen - LaunchMagie®
published: true
date: 2022-01-10 10:11:06 UTC
tags: OnlineMarketing,kurs
canonical_url: https://bloggerpilot.com/onlinekurse-erfolgreich-verkaufen/
---

![Online Kurs erfolgreich erstellen](https://bloggerpilot.com/wp-content/uploads/2022/01/launchmagie-desktop.png)

Um einem Onlinekurs erfolgreich zu verkaufen, reicht es nicht aus,...

Der Original-Artikel erschien auf [Onlinekurse erfolgreich verkaufen - LaunchMagie®](https://bloggerpilot.com/onlinekurse-erfolgreich-verkaufen/).

Wenn es dir wie uns geht und du bereit bist, deinen Online-Kurs zu starten, dann fragst du dich wahrscheinlich, wie du ihn vermarkten kannst. Es ist gar nicht so schwer, deinen Kurs zu verkaufen, und du kannst ihn auf Dutzende von Arten vermarkten.
Google and Facebook are combining forces (Here is the hint)
Published: 2022-01-10 10:05:38

In Jan 7, 2022 Stephen Hawking's 80th Birthday Doodle, YouTube show something incredible at 1:22 (01 min and 22 sec) of the video:

{% youtube Isim0ysZ6X4 %}

Hint is `ReactJS` Logo which is created by Facebook.

This is just my take on this Doodle video, maybe Google and Facebook aren't going to work together or this logo might be of something else not of ReactJS, what do you think, let me know about your thoughts in the comment section.
Temporal dead zone(TDZ)
Tags: webdev, javascript, programming
Published: 2022-01-10 09:46:06

Let's discuss the temporal dead zone in depth!

####We Know Let and Const declarations are known to be hoisted.
And, if we talk about hoisting, it's the default behavior of moving all declarations to the top of the scope before code execution, which means we can access variables before they're initialized because in js memory is allocated to each variable even before a single line of code is executed.

Let take an example and try to understand this
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/peyv5jxusn9qn4v141l1.png)
here you can see the varVariable is called before it is being initialized and we did not even get the error, this is because the var is Global scope, varVariable got some memory in the Global scope but the value is not initialized hence giving undefined.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wjk3njbrbks6s62kvxfi.png)
But wait ! Why are we getting an error here? If you say that I told you that memory is allocated to every variable even before a single line of code is executed, but we still get a reference error. Then hold on, memory is allocated to letVariable, but in a different memory space, which is not global as let being block scope, and we are unable to inspect these let and const before assigning them a value.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tvm1n36731u2dgv8wxai.png)
Here's where the Temporal Dead Zone comes in. We're getting the value of letVariable now, and we can see what TDZ is- It is the time between since when the let/const variable was hoisted and till it is initialized some value.

In other words,

> The time window in which a variable exists but is still uninitialized and thus cannot be accessed in any way is known as the TDZ. That initialization can only be achieved by implementing the instructions left by the Compiler at the time of the original declaration. The TDZ is now complete, and the variable can be used for the remainder of the scope.

_A var also has a TDZ, but it's zero in length and therefore invisible to our programs, Only let and const have a TDZ that can be observed._
#####And Why TDZ happen?
Let/const declarations are hoisted too but like var they are not auto-initialized until they are initialized in the code sequence, hence resulting in TDZ. 

Hope you like it, comment the feedbacks:)
Happy Coding
Query necessity skill
Tags: programming, beginners, stackoverflow
Published: 2022-01-10 05:44:33


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3el8wrqs1djzzw6ihh9r.png)
One of the most essential skills for programmers is searching!

In my opinion, the atmosphere of programming is a little different in compartments with other scientific fields. During solving mathematical problems, you need to think deeply and use logical or arithmetic approaches to clear them up.
But during programming, you may face different problems. Here I name them algorithmic problems and engineering problems. The algorithmic one is like a mathematical problem, and you treat it in the same way. Another type of problem which we name engineering problems are not difficult as algorithmics, pretty common, and frequently people confront.
The best way for solving these kinds of issues during programming is to search on the internet to find a suitable solution. After internet universality programmers create discussion forums to propose and debate on their problems. This method became familiar among programming enthusiasts and even now is a necessity for coding.
The StackOverflow is a great platform to search your the same issues or propose a new problem and ask experts to help you. Before publishing requires to search carefully on the web especially on the website itself. 
In another post, I will discuss the rules of the website and the method of posting a question. 
By the way, Check my profile on [**StackOverflow**](https://stackoverflow.com/users/12869547/parham-hasani)
Project 98 - React Native Clock App
Tags: reactnative, react, javascript
Published: 2022-01-10 09:21:59

*Hey! I'm on a mission to make 100 React.js projects. Please follow my dev.to profile or my [twitter](https://www.twitter.com/jwhubert91) for updates and feel free to reach out if you have questions. Thanks for your support!*

Link to the repo: [github](https://github.com/jwhubert91/project98_reactNativeClock)


![React Native clock app screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jja2m475tb8j4zoosb5p.png)

**If you like projects like this and want to stay up to date with more, check out my Twitter [@jwhubert91](https://twitter.com/jwhubert91), I follow back! See you tomorrow for another project.**
Google Maps Javascript API Tutorial
Tags: googlecloud, javascript, html, tutorial
Published: 2022-01-10 09:18:45

{% youtube ZscHG5xY_r4%}

In this video, we will use the Google Maps Javascript API and create a new map and use it in our HTML website.

We will use the Google Cloud Platform to create a new project and billing account. 
Then we will link the project to the billing account.

We will then enable the Google Maps Javascript API and create an API key for our website.
We will also see how we can restrict a google map API key to a website domain.

We will then create a simple google map and embed that in our website.

We will also learn how we can create google maps markers and create them statically and dynamically.

We will add labels to markers and also give a custom icon for the marker.

At last, we will turn our google maps into a cool night look by using the google maps map style feature.

The possibilities of using google maps into a website is endless and google maps api gives us tons of features that we can use.
LET SAVE BIG
Tags: promocodes, discounts, coupons
Published: 2022-01-10 09:10:04

Whatever store or brand you are interested in, there’s a good chance we’ve got a great Offer for it. Every Day LetSaveBig. [LetSaveBig.com](https://www.letsavebig.com/) features thousands of new LetSaveBig from today’s leading online stores and brands every day. We feature hundreds of Offer categories, ranging from electronics and apparel to flights and fitness memberships. Whether you’re hoping to find a good deal on a tablet or wondering how you can save with a coupon on shopping for clothes, you can find everyday savings solutions on LetSaveBig.com Holiday Savings. In our Holiday Savings Centers, you’ll find carefully specialized selections of LetSaveBig for major holidays like Black Friday, Cyber Monday, Mother’s Day, Memorial Day, and many others. Take advantage of the best savings opportunities of the season with exclusive coupons, limited-time deals, and holiday promotions.
QuadAir Drone - Is it Safe? Read More Reviews!
Published: 2022-01-10 09:09:08

The procedure is that I made my own [QuadAir Drone](http://ipsnews.net/business/2022/01/01/quadair-drone-reviews-is-it-legit-to-fly-warnings-side-effects-and-user-complaints/) Reviews. This is fictional. Using this is as fast as lightning. QuadAir Drone Reviews is a truly unique addition to any QuadAir Drone Reviews collection. The models of mavens doing that assumes that this trend would go on forever. Some scheme could be dependable. My question is, can you do it effectively. We'll get through this faster. I think you find QuadAir Drone Reviews to your satisfaction. I had lost a few faith in a result but I've been inspired to try again. My experience with this paradigm is the power of old hacks doing this. We're waiting on the sequel. This isn't just due to popular demand. When comparing doing it to this congregation the figures are typically going to look really uncertain. No QuadAir Drone Reviews avoids QuadAir Drone Reviews altogether, but good QuadAir Drone Reviews avoid them more often than poor QuadAir Drone Reviews. I might be potentially be losing my mind over QuadAir Drone. 

Click Here=> [http://ipsnews.net/business/2022/01/01/quadair-drone-reviews-is-it-legit-to-fly-warnings-side-effects-and-user-complaints/](http://ipsnews.net/business/2022/01/01/quadair-drone-reviews-is-it-legit-to-fly-warnings-side-effects-and-user-complaints/)
Handling Previews in a Headless Architecture - Strapi and Next.js
Tags: cms, nextjs, javascript, strapi
Published: 2022-01-10 09:02:29

There is an ongoing shift in content management from traditional CMS to headless CMS. A headless CMS allows you to completely separate your content management system from the presentation layer. The content is made available via API and can be consumed in any kind of frontend, from websites to mobile apps.

Using headless CMSs has opened up a new way of building websites, known as pre-rendering. It is one of the best-known techniques in Jamstack, in which the website is compiled into a set of static assets like prebuilt HTML, CSS, and JavaScript files with the help of a static site generator (SSG). During the build time, the files are created by collecting the data from a headless CMS. These files are cached to a content delivery network (CDN) and served to a user on each request from the nearest CDN node. This improves speed and response times and reduces hosting costs.

However, content creators need to preview their content before publishing it to production, meaning they need to wait for an entire build to complete before they can view their content. To solve this problem, a preview mode allows editors to view their changes on the fly.

In this tutorial, you’ll learn to implement a preview system when working with a headless CMS like Strapi. You’ll implement the frontend in Next.js for creating content previews.

Read the full blog on [Strapi](https://strapi.io/blog/handling-previews-in-a-headless-architecture).

Thanks for reading 💜

---

I publish a [monthly newsletter](https://www.ravsam.in/newsletter/) in which I share personal stories, things that I am working on, what is happening in the world of tech, and some interesting dev-related posts which I come across while surfing on the web.

Connect with me through [Twitter](https://twitter.com/ravgeetdhillon) • [LinkedIn](https://linkedin.com/in/ravgeetdhillon) • [Github](https://github.com/ravgeetdhillon) or send me an [Email](mailto:ravgeetdhillon@gmail.com).

— [Ravgeet](https://www.ravgeet.in/), *Full Stack Developer and Technical Content Writer*
Dinosaur Game 
Tags: gamedev, programming, beginners, discuss
Published: 2022-01-10 09:01:00

[Dinosaur game](https://dinosaur-game.io) is a simple yet addictive 2D arcade game in which you must assist the legendary dinosaur in navigating his way over a huge arid desert without getting injured by other creatures. It is necessary for you to help him jump over cactus and pterodactyls in order to complete the level successfully.
You have an unlimited amount of time to explore the desert where your adventure takes place, so attempt to get as far as you possibly can to improve your score; if you fail, try again to surpass your previous high score and repeat the procedure until you succeed. If you can master this 8-bit endless running and jumping game, you'll be able to brag about your fantastic accomplishments to your friends and family.
Anjou City
Published: 2022-01-10 08:23:22


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/27emk9kq8fhbrdbsmel9.jpg)
Historically , it was a land for farmers and other workers in the agricultural sector. Anjou began to evolve in the 1950s into an increasingly urbanized culture. In 1956, Anjou was separated from a parish to create Ville d'Anjou. In 2002, the parish dropped the name "ville de" to become just Anjou. Anjou did not receive the required 35% to be separated from Montreal during the referendums. It was still part of Montreal's city. Les Galeries of Anjou which is Montreal's biggest shopping center is an important Anjou landmark. But what's notable about Anjou is the roads that brought it to existence. 

Construction of the Metropolitan highway and highway 25 eventually resulted in the creation of an industrial park. This will eventually lead to the building of the commercial centre. According to the 2011 census Anjou has 22 percent of people over 50. The median age of an Anjou citizen's age is 44.7 years. Anjou is home to 42 thousand people. 89 percent of the residents of Anjou speak French in their work. An astounding 96% of the population learned to only speak one language when they were growing up, 67% of this percentage is French. 

Anjou's indigenous Quebecois comprise 70% of the population and are followed by an immigrant adult population from Italy, Haiti, or Algeria. Much like their New France grandparents The majority of people in Anjou are Catholic, with a growing Muslim community (10%). Anjou's provincial political district is combined with Mercier-Hochelaga-Maisonneuve to form Anjou-Louis-Riel, a circumscription notable for one of its past MNAs and former Premier Pierre Marc Johnson of the Parti Quebecois. Its federal political district is Honore-Mercier, which is combined with Rivieres-des-Prairies--Pointe-aux-Trembles and a bit of Mercier-Hochelaga-Maisonneuve.

**Written By** — Colin B.-Dunnigan

**Construction Materials Distributor In Anjou**

Since 1957, PSC has distinguished itself as a specialist [building materials distributor.](https://sites.google.com/view/construction-materials-anjou/anjou)

Our mission? To be an outstanding business partner in the realization of specialized construction projects through excellent products, services, and solutions.

**Contact Us :**

**PSC Montreal**
[9711 Rue Colbert, Anjou, QC, H1J 1Z9, Canada](https://www.google.com/maps?cid=1042613826765248265)
(514) 355-9650
cbdunnigan@pscmtl.com
[https://www.pscmontreal.com/](https://www.pscmontreal.com/)

**Find Us Online :**

[Facebook](https://www.facebook.com/pscmtl/)
[Linkedin](https://ca.linkedin.com/company/pscmontreal)
[Brand Video](https://youtu.be/J_xkEy4ViM8)
[Brand Map](https://www.google.com/maps?cid=1042613826765248265)
[To Know More](https://webhitlist.com/profiles/blogs/anjou-city)
Average
Tags: discuss, growth, personal
Published: 2022-01-10 08:02:32

---
title: Average
published: true
description: You're the average of the five people you spend the most time with
tags: discuss, growth, personal
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9kakij793iqbreqnj9u8.jpg
---

_Originally published on [my blog](https://www.nikola-breznjak.com/blog/daily-thoughts/average/)._

> Jim Rohn said that you're the average of the five people you spend the most time with.
> 
> Looking at my own life, that's both true and shocking at the same time. Be it finance, relationships, fitness, beliefs; it all checks out more or less.
> 
> Now, it may be the same for you. But, you may not like what you see, and you want to change for the better. Now what? Do you go out and find new people? Sometimes that may be easier said than done.
> 
> And even if you're able to make the change, what do you do with, essentially, your friends, that don't want to continue 'traveling' with you?
> 
> I'm seriously curious how did you deal with this in your life?

---

This is [why I write](https://www.nikola-breznjak.com/blog/daily-thoughts/why-do-i-write-these-daily-thoughts-posts/) these 'daily thoughts' posts.
A Quick 10-Second Programming Joke For Today
Tags: jokes, dailydeveloperjokes
Published: 2022-01-10 08:00:13

---
title: "A Quick 10-Second Programming Joke For Today"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
published: true
tags: #jokes, #dailydeveloperjokes
---

Hi there! Here's today's Daily Developer Joke. We hope you enjoy it; it's a good one.

![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e1258a197fb7.png)

---

For more jokes, and to submit your own joke to get featured, check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/). We're also open sourced, so feel free to view [our GitHub Profile](https://github.com/dailydeveloperjokes).

### Leave this post a ❤️ if you liked today's joke, and stay tuned for tomorrow's joke too!

_This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit._

<!--
Joke text:
___Q:___ Whats the object-oriented way to become wealthy?

___A:___ Inheritance
 -->
Shadow DOM... Illustrated
Tags: javascript, html, webcomponents, programming
Published: 2022-01-10 07:59:47

## What is DOM

Browser generates Document object model from static html files in order to manipulate the structure, style and content.

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

---

## Enter Shadow DOM

Shadow DOM enables encapsulation to keep the markup, style and behaviour hidden and private to the component that hosts it. 

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

---

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

---

## Events

Events that are thrown from within a shadow DOM usually do not propagate outside the boundary unless it is set to `composed: true`

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

---
If you like this content please follow on twitter for more of these - https://twitter.com/Rajasneha_dev