teleren/devto huggingface dataset:
7 projects ideas to build as a beginner web developer (HTML, CSS and JavaScript only)
Tags: programming, codenewbie, html, javascript
Published: 2021-03-26 15:02:57

_If you found value in this thread you will most likely enjoy my tweets too so make sure you follow me on [Twitter](https://twitter.com/VladPasca5)  for more information about web development and how to improve as a developer. This article was first published on my [Blog](https://vladpasca.hashnode.dev/)_

## 1.  [Gradient Background generator](https://pascavld.github.io/Background-generator/) 

This is an awesome project to start with as a JavaScript newbie

It contains a little bit of JavaScript but enough to get you some confidence

You can also use this website yourself after you build it

## 2.  [To-Do list App](https://t.co/IqTEDP76Ee?amp=1) 

This is a project everyone recommends to build because you learn a ton from it

From how to manipulate the DOM to how to work with Local Storage

This is the project that taught me the most

## 3.  [Loan Calculator or any convertor](https://t.co/qzR2GkJZwb?amp=1) 

This project will teach you:

- how to get and use the data from the user

- how to manipulate that data using JavaScript

- how to display data to the DOM

## 4.  [Number Guesser](https://t.co/LM7vbco5Oa?amp=1) 

This project will teach you:

- how to generate a random number

- how to get data from the user and compare that data with the one you generated

- how to restart everything after the number of tries goes to 0

## 5.  [Book List](https://pascavld.github.io/book-list/) 

This is a great project to build if you want to learn more about how to get data from the user and save it on your website

You'll also practice more working with Local Storage and saving an entire list of items there

## 6.  [Calculator App](https://t.co/3SIsfln8Dz?amp=1) 

This project will teach you how to use Classes when working in the DOM and how to format your data in a way that looks nice

It will also teach you how to use CSS Grid in practice

## 7.  [Weather App](https://t.co/Rr52R0L60D?amp=1) 

This is an awesome project to build if you want to learn more about APIs and how to work with them

You'll learn how to get the data you want from an API and display that on your website

## The end

_I hope found this useful and if you did please let me know. If you have any question feel free to DM me on  [Twitter](https://twitter.com/VladPasca5) ._
Introduction to Kotlin
Tags: kotlin, android, development, programming
Published: 2021-03-26 15:02:48

---
title: Introduction to Kotlin
published: true
description: 
tags: kotlin, android, development, programming
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ptvv9ewtvq7bocu1kq12.png
---

# Introduction to Kotlin
---
### History
* In July 2011, JetBrains unveiled Project Kotlin, a new language for the JVM.
* Kotlin was released on 15 February 2016.
* Kotlin is sponsored by Google, announced as one of the official languages for Android Development in 2017.
* On 2019, Google announced that the Kotlin programming language is now its preferred language for Android app developers.

### Intro
Kotlin is an open-source, statically-typed programming language that supports both object-oriented and functional programming. Kotlin provides similar syntax and concepts from other languages, including C#, Java, Groovy and Scala, among many others. 

### Benefits of Kotlin
* Kotlin compiles to JVM bytecode or JavaScript
* Kotlin can use all existing Java Frameworks and Libraries
* Kotlin can be learned quickly, and it is approachable
* Automatic conversion of Java to Kotlin
* It Requires Less Code
* It’s Secure

### Features of Kotlin
* Clean, compact syntax
* Null Safety
* Data Classes
* Extension Functions
* Smart Casts
* Type Inference
* Single type system (almost)
* Functional Programming

### Kotlin VS Java
![Kotlin VS Java](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xbyxfokmbnmn93hne27m.png)


### Applications of Kotlin
* Pinterest
* Trello
* Evernote
* Slack
* Netflix
* And much more! 

For many resources, check out my Github:
https://github.com/SeijinD
Learning process in Javascript
Tags: javascript, learn, errors, operators
Published: 2021-03-26 15:00:52

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/52fegaxqf7j4pskv33dh.png)

Need to learn properly
    1.  var, let, const
    2.  type conversion
    3.  Loops
    4.  Conditions
    5.  this keyword
    6.  class
    7.  object-oriented programming
    8.  imports/export
    9.  Recursion
    10. Closures
    11. arrow functions
    12. Spread operator
    13. destructing
    14. map, filter, reduce
    15. Asynchronous programming
    16. Promises
    17. Async and await
    18. Scope of variables
    19. Naming conventions in JS
    20. error handling in javascript
How-to Use The Reddit API in Python
Tags: python, datascience, api, tutorial
Published: 2021-03-26 14:58:35

{% youtube FdjVoOf9HN4 %}

Reddit is a huge ecosystem brimming with data that is readily available at our very fingertips. As a data-minded person, I wanted to take advantage of this and perform some analysis using this vast repository of open-source data.

Initially, it turned out that getting to grip with Reddit’s API wasn’t as clear-cut as expected — despite being a straightforward process; it can be a little confusing at first.

So, after figuring everything out, I wrote this article — which I hope will help a few of you to get familiar with using the Reddit API in Python. We will cover:

* Getting Access
* Making Requests
  * Reading the Data
  * Streaming New Posts
* Parameters
Empty Object?
Tags: javascript
Published: 2021-03-26 14:47:18

At times, for example, when receiving an object as a _function parameter,_ we wish to know if we have received an empty object or not.

This can especially be the case if some JSON data in a _request body_ is not parsed correctly; our server then ends up with an empty object.

```javascript
function check4ValidObjectWithKeys(someObj) {
  if (Object.entries(someObj).length) {
    return "👍🏾"
  }

  return "👎🏾"
}
```

## `Object.entries`...
...along with things like `Object.keys` and `Object.values` (all would work for the example) creates an array of either...

1. The entries - 🔑/value pairs (it's an array of arrays!)
2. Just the 🔑s - again, an array
3. Just the values - what is it?...an array!

## `.length`...

...gives us the length (number of items) in an array as a _number._

## Coercion with `if`

`  if (Object.entries(someObj).length) {` translates to:

1. Get the entries from the object as an array
2. _If_ the _length_ of that array is considered as 'truthy' (non-zero)...
🆔 Identity, Unlocked... Explained: Season 2, Ep. 3
Tags: identity, security
Published: 2021-03-26 14:44:06

🛡 This podcast is all about discussing identity specifications and trends from a developer's perspective. The podcast is powered by Auth0; this season is sponsored by the OpenID Foundation.
Continuous Access Evaluation Protocol (CAEP) with Tim Cappalli and Atul Tulshibagwale
[Read more...](https://auth0.com/blog/identity-unlocked-explained-season-2-ep-3/?utm_source=content_synd&utm_medium=sc&utm_campaign=identity_unlocked)
Bootstrap 5 Containers
Tags: bootstrap, javascript, webdev, html
Published: 2021-03-26 14:40:14

## What are the Bootstrap Containers?

Containers are a fundamental building block of Bootstrap that contain, pad, and align your content within a given device or viewport

----

## How to use Containers in Bootstrap 5?

Here are the resources that we have prepared to help you work with this component:

1. Read [📄  Containers tutorial & documentation](https://mdbootstrap.com/docs/standard/layout/containers/) <-- start here
2. In to get the most out of your project, you should also get acquainted with other Layout options related to the Containers. See the section below to find the list of them.
3. You can use predesigned Layout elements in [📥 Starter Bootstrap 5 templates](https://mdbootstrap.com/freebies/)
4. Templates are a part of [📦 Free UI Kit for Bootstrap 5](https://mdbootstrap.com/docs/standard/)
5. After finishing the project you can publish it with CLI in order to receive [💽 Free hosting (beta)](https://mdbootstrap.com/docs/standard/cli/)

-----

## Related Layout options & features
- [Breakpoints](https://mdbootstrap.com/docs/standard/layout/breakpoints/)
- [Grid system](https://mdbootstrap.com/docs/standard/layout/grid/)
- [Columns](https://mdbootstrap.com/docs/standard/layout/columns/)
- [Display](https://mdbootstrap.com/docs/standard/layout/display/)
- [Flexbox](https://mdbootstrap.com/docs/standard/layout/flexbox/)
- [Float](https://mdbootstrap.com/docs/standard/layout/float/)
- [Gutters](https://mdbootstrap.com/docs/standard/layout/gutters/)
- [Horizontal alignment](https://mdbootstrap.com/docs/standard/layout/horizontal-alignment/)
- [Utilities for layout](https://mdbootstrap.com/docs/standard/layout/utilities-for-layout/)
- [Vertical alignment](https://mdbootstrap.com/docs/standard/layout/vertical-alignment/)
- [Z-index](https://mdbootstrap.com/docs/standard/layout/z-index/)

-----

## Learn Bootstrap 5 in 1.5H

{% youtube c9B4TPnak1A %}

-----

## Additional resources

Learn web development with our **learning roadmap**:
**[:mortar_board: Start Learning](https://mdbootstrap.com/docs/standard/getting-started/)**

Join our mailing list & receive **exclusive resources** for developers
**[:gift: Get gifts](https://mdbootstrap.com/newsletter/)**

Join our private FB group for **inspiration & community experience**
**[👨‍👩‍👧‍👦 Ask to join](https://www.facebook.com/groups/682245759188413)**

**Support creation of open-source packages** with a STAR on GitHub
[![GitHub Stars](https://img.shields.io/github/stars/mdbootstrap/mdb-ui-kit?label=Star%20now&style=social)](https://github.com/mdbootstrap/mdb-ui-kit/)
Fixing Next js "ReferenceError: document is not defined"
Tags: nextjs, react
Published: 2021-03-26 14:38:53

I came across this error while learning next js and I couldn't understand what I did wrong. The error is thrown because `document` is only available inside the browser and not on the server. Next js executes this code on the server side and that's why the error is thrown.
In this tutorial I'll show you three ways on how to solve this issue.
**Solution 1**:
Since the window is part of the browser, we can wrap our code inside an if statement. If you check on the console the `type of` `window` it returns `object`. The following code illustrates this:

```js
if (typeof window === 'object') {
// Check if document is finally loaded
   document.addEventListener("DOMContentLoaded", function () {
       alert('Finished loading')
     });
  }
```
***Solution 2***:
Since `nextjs` uses `reactjs` we can use the `useEffect` hook which checks if component has mounted or updated. Here is an example.
```js
import {useEffect} from "react";

useEffect(() => {
    alert('Finished loading');
  }, []);
```
Note that I passed `[]` as a second argument, this is because `useEffect` watches what has changed which in this case I just want to check if the document has completed loading. If you don't pass it it will keep executing let's say we you click on an internal link it will keep `alerting`. Check [documentation](https://reactjs.org/docs/hooks-effect.html)

***Solution 3***:
I read that this is a `deprecated` method but I just decided to add this in case you come across it somewhere. I'll be using the `process.browser method`

```js
if (process.browser) {
    document.addEventListener("DOMContentLoaded", function () {
       alert('Finished loading');
     });
   }
```
Aprenda um pouco de Erlang para um Grande Bem
Tags: erlang, beam, programming
Published: 2021-03-26 14:38:40

Estou fazendo uma série sessões de estudo sobre o livro ["Learn You Some Erlang for great good!"](https://learnyousomeerlang.com/) de Fred Hebert.

Eu gravo quando tenho tempo e anuncio um pouco antes lá no [@elixir_utfpr](http://twitter.com/elixir_utfpr) no Twitter. Os vídeos ficam gravados no YouTube.

Acabei de gravar a Sessão 4, sobre Compreensões de Lista (será que é uma boa tradução para *List Comprehensions*?).

Compreensões de Lista são um recurso fantástico de Erlang que te permitem escrever muita coisa, com pouco código que, para mim, parece fácil de entender (por ser baseado em notação matemática).

E você, o que acha deste recurso?

Assista ao vídeo mais recente (4) em https://youtu.be/y_I7df4KGzk.

A playlista completa está em [Aprenda Erlang Para Um Grande Bem](https://www.youtube.com/playlist?list=PLF5ttO8F-IsTided30sMhUx-5Rfyeur65).
It helps to distinguish between stories and tasks
Tags: scrum, jira, stories, testing
Published: 2021-03-26 14:37:35

---
title: It helps to distinguish between stories and tasks
published: true
description: 
tags: scrum,jira,stories,testing
//cover_image: https://direct_url_to_image.jpg
---
## Introduction
Agile/Scrum teams using Jira often create a "story" for everything they work on (except bugs and improvements).
Tracking your work is not a bad practice, but not distinguishing between stories and tasks can be.

## So what's the difference?
**Stories contain changes that are visible to end-users.**
**(Most) tasks contain changes that not visible to end-users.**

## Examples
To make it a bit clearer, here are some examples of stories:
- create installer 
- add login screen
- add "Cancel" button
- add application to OS startup

While not all changes are visual, they are all clearly visible to the end-user (ok, some users might be oblivious even to the most obvious graphical changes of an app, but that's a different story - pun intended!)

And here are some examples of tasks:
- refactor login screen code
- add documentation for IDE setup
- research how to support 10k concurrent connections
- integrate unit test framework
- add third-party library to project

All of these tasks, when finalized, will have no impact on end-users. They don't know or care about unit tests, refactoring or third-party libraries. With or without them, the application/product is the same to end-users.

## Ok, so what's the real benefit of this "separation"?
**It's testability.**
In Scrum teams, the Definition of Ready should (ideally) contain a checkbox that says "is this testable by QA?".
Also, the Definition of Done, should (ideally) contain a checkbox that says "has it been tested by QA?".

All stories can be tested by QA! Why? Because "Stories contain changes that are visible to end-users".
Can tasks be tested by QA? Not really. At least most of them can't. Why? Because "(Most) tasks contain changes that not visible to end-users".

"refactor login screen code" - Other than running a set of regression tests to make sure nothing was broken, there's not much QA can do to verify this. But then again, this wouldn't mean that they are testing this task alone, would it?
"add documentation for IDE setup" - Sure, QA can look at the documentation and actually try to do what was written there, but I would hardly call that QA testing.
"research how to support 10k concurrent connections" - QA can ask developers what the result of their research was, but this would not be QA testing.
"integrate unit test framework" - Other than making sure everything still compiles ok, there's not much QA could do. But again, this isn't QA testing. Or QA's job, for that matter.
"add third-party library" - Again, QA cannot test this specifically. Best case, they could run a set of automated regression tests to check that nothing was broken.

## Conclusion
While it's easy to consider everything as a "story", it might help to distinguish between stories and tasks sometimes.

Let me know your thoughts!
Top 10 Programming Languages in 2021 | Best Programming Languages 2021
Published: 2021-03-26 14:29:36

We will discuss about Top 10 Programming Languages in 2021 or Best Programming Languages 2021.
{% youtube IZHQypmB0iY %}
*Please Like the video and subscribe the channel👍*
### Read Here>>>>>###
[please check it](http://expoashish.blogspot.com/)

####🎥💡🔥AND Subscribe to Our YouTube Channel [bestcodecreator] (https://www.youtube.com/bestcodecreator) 


Thankyou
Bootstrap 5 Grid system
Tags: bootstrap, javascript, webdev, html
Published: 2021-03-26 14:23:55

## What is the Bootstrap Grid System?

Bootstrap grid is a powerful system for building mobile-first layouts. It's a very extensive tool with a great number of options.

----

## How to use Grid in Bootstrap 5?

Here are the resources that we have prepared to help you work with this component:

1. Read [📄  Grid tutorial & documentation](https://mdbootstrap.com/docs/standard/layout/grid/) <-- start here
2. In to get the most out of your project, you should also get acquainted with other Layout options related to the Grid system. See the section below to find the list of them.
3. You can use predesigned Grid in [📥 Starter Bootstrap 5 templates](https://mdbootstrap.com/freebies/)
4. Templates are a part of [📦 Free UI Kit for Bootstrap 5](https://mdbootstrap.com/docs/standard/)
5. After finishing the project you can publish it with CLI in order to receive [💽 Free hosting (beta)](https://mdbootstrap.com/docs/standard/cli/)

-----

## Related Layout options & features
- [Breakpoints](https://mdbootstrap.com/docs/standard/layout/breakpoints/)
- [Containers](https://mdbootstrap.com/docs/standard/layout/containers/)
- [Columns](https://mdbootstrap.com/docs/standard/layout/columns/)
- [Display](https://mdbootstrap.com/docs/standard/layout/display/)
- [Flexbox](https://mdbootstrap.com/docs/standard/layout/flexbox/)
- [Float](https://mdbootstrap.com/docs/standard/layout/float/)
- [Gutters](https://mdbootstrap.com/docs/standard/layout/gutters/)
- [Horizontal alignment](https://mdbootstrap.com/docs/standard/layout/horizontal-alignment/)
- [Utilities for layout](https://mdbootstrap.com/docs/standard/layout/utilities-for-layout/)
- [Vertical alignment](https://mdbootstrap.com/docs/standard/layout/vertical-alignment/)
- [Z-index](https://mdbootstrap.com/docs/standard/layout/z-index/)

-----

## Learn Bootstrap 5 in 1.5H

{% youtube c9B4TPnak1A %}

-----

## Additional resources

Learn web development with our **learning roadmap**:
**[:mortar_board: Start Learning](https://mdbootstrap.com/docs/standard/getting-started/)**

Join our mailing list & receive **exclusive resources** for developers
**[:gift: Get gifts](https://mdbootstrap.com/newsletter/)**

Join our private FB group for **inspiration & community experience**
**[👨‍👩‍👧‍👦 Ask to join](https://www.facebook.com/groups/682245759188413)**

**Support creation of open-source packages** with a STAR on GitHub
[![GitHub Stars](https://img.shields.io/github/stars/mdbootstrap/mdb-ui-kit?label=Star%20now&style=social)](https://github.com/mdbootstrap/mdb-ui-kit/)
Hacker?
Tags: security
Published: 2021-03-26 14:20:10

---
canonical_url: https://sankalp.me/Hacker/
---
There are many definitions out there to describe Hackers. Some people think of them as technical experts, some associate them with criminals, while some refer to them as, in general sense, people or things that hack.

However my understanding of what it truly means to be a Hacker is different-

   **"A hacker is a person who applies ingenuity to find solutions to problems"**

Different people believe in different explanations but media, movies and TV shows often portray a hacker as someone involved with cyber crimes, which isn't always true. Being a hacker **does not** by default make someone a criminal, unless they do, in fact, commit a crime.
Anyone can be a hacker! It does not necessarily have to be associated with computers. For the domain related to computer hacking, I like to use the term ‘Cybersecurity’. 

Nevertheless, for my future posts I will use the terms ‘Hacking’ and ‘Computer Hacking’ interchangeably. In these posts I will write about how you can learn hacking!

Whenever someone talks about hacking, a quote from a very famous hacker (Adrián Lamo) comes to my mind-

   *"It's less about technology for me, and more about religion.[on hacking]"*

To be honest I won't associate it with religion either, rather a way of life. And I am here to know more about *this* lifestyle and share my learnings with you. Happy reading!

P.S.- If you have some ideas to discuss or any kind of constructive criticism to share, please feel free to reach out to me.
Meta Tags
Tags: html, webdev, beginners, codenewbie
Published: 2021-03-26 14:19:55

Meta tags are code that exists in the head of the html, the `<head>`'s content is not displayed on the page. Meta tags contains information about the web page but the data is not for the clients(user), its for the browser, search engines, web crawlers etc.. The search engines use the data to get an idea about the content and purpose of the page, the data is also used in search engine optimization .  

```html
<head>
  <title>My web title</title>
  <meta charset="utf-8">
  <meta name="author" content="kiranraj">
  <meta name=”keywords” content=”meta, tags, dev”/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
```

### Some of the useful meta tags are explained below.



1. **Charset** `<meta charset="utf-8">`
Specifies the character encoding of the document, in the above code is says that the encoding to use is utf-8.

2. **Description** `<meta name="description" content="page description">`The description tag contains short description or summary of the content of the web page under 160 characters, character after the limit is truncated (Google).

3. **Keywords** `<meta name=”keywords” content=”meta, tags, dev”/>`The keywords tag is used to specify the important keywords of your web page. It help the search engine to understand the content/topic of the page quickly. Keywords where once the key player in determining the ranking of the page, now keywords are no longer part of the Google ranking algorithm. 

4. **Title** `<title>Web Title</title>` Title tag is not a meta tag but it is considered as one due to its importance. Title tag is expected to contain relevant phrases/keywords that describes the page content and purpose. Title is visible to the user, they are displayed on the top of the browser and as the title text in a search result listing. Its best to keep Title under 60 characters.

5. **Author** `<meta name="author" content="kiranraj">`The author meta tag tells who the author of the page is.

6. **Viewport** `<meta name="viewport" content="width=device-width, initial-scale=1.0">`Helps the browser to set the page's width and scaling. In the above code the width is set to device width and the zoom level is set to 1 when the page is loaded, no zoom.
AuroraLocalCoopFilters – Now you can filters coop games again in your xbox360 dashboard
Tags: xbox360, lua, python
Published: 2021-06-09 10:21:52

---
title: AuroraLocalCoopFilters – Now you can filters coop games again in your xbox360 dashboard
published: true
date: 2021-03-26 14:11:06 UTC
tags: xbox360,lua,Python
canonical_url: https://daniele.tech/2021/03/auroralocalcoopfilters-filters-coop-games-xbox360-dashboard/
---

Ops I did it again a tool for retrogaming for another console, what will be the next one?

The post [AuroraLocalCoopFilters – Now you can filters coop games again in your xbox360 dashboard](https://daniele.tech/2021/03/auroralocalcoopfilters-filters-coop-games-xbox360-dashboard/) appeared first on [Daniele Mte90 Scasciafratte](https://daniele.tech/eng).