teleren/devto huggingface dataset:
Why BEM?
Tags: css, html, codenewbie, webdev
Published: 2020-10-21 05:24:36

##What is BEM?

BEM stands for Block, Element, Modifier.It is a popular naming convention for classes in HTML and CSS. Its goal is to help developers better understand the relationship between the HTML and CSS in a given project. ⁣

##Why should you use BEM?

CSS is a language that’s easy to learn but very hard to maintain. As the project grows larger, without proper structure, maintaining CSS is unbearable, hence we use the BEM methodology to make CSS maintainable.

##Benefits of using BEM

BEM provides a modular structure to your CSS project. Because of its unique naming scheme, we won’t run into conflicts with other CSS names. BEM also provides a relationship between CSS and HTML. Ambiguous names are hard to maintain in the future⁣.
Overall, BEM is my favourite CSS naming scheme, and I strongly suggest you try using it too!
It will save you SOOO much debugging time in the future.⁣

##Example

*/ * Block Component * /*
**.btn{}**

*/ * Element that depends upon the block * /*
**.btn__price{}**

*/ * Modifier that changes the style of the block * /*
**.btn--orange {}**
**.btn--big {}**

In this CSS methodology, a **block** is a top-level abstraction of a new component. This block can be thought of as a parent.

**Elements**, or child items are placed inside the block and can be denoted by two underscores following the name of the block.

**Modifiers** can modify the block so that we can style that particular component without infliction changes on a completely unrelated module. This is done by appending two hyphens to the block.

Another smart part of BEM is that everything is a class and nothing is nested. That makes CSS specificity very flat and low, which is a good idea.

BEM is extraordinarily useful for constructing scalable and maintainable interfaces where everyone on the team should have a clear idea of how things can be improved. This is because a great deal of front end development is not just about the nice tricks that solve one little problem in the short term; we need agreements, promises and binding social contracts between developers so that our codebase can adapt over time.

Thank You!
My First Hacktoberfest
Tags: hacktoberfest, hacktoberfest2020, opensource
Published: 2020-10-21 05:20:37

## What I Learned From Hacktoberfest

This year has been a journey of learning new skills and exploring the developers community. Hacktoberfest was a major breakthrough in actually learning how to contribute to opensource. I submitted various PRs for the purpose of showing and contributing what I can. One of them was a 'live bitcoin value tracker in INR'. The idea was suggested by my friend and it was easy to accomplish. It's simple but is of great use in terms of consistency and continuity of the constant results it shows. It can help anyone who keeps a track of price changes.
It can also be modified to show value in different currencies or multiple currencies as required by the demand.
Overall, this was a starting which has a long way to go.
Thank you @DigitalOcean
Code without a keyboard - serenade.ai
Tags: a11y, news, ai, nlp
Published: 2020-10-21 05:17:43

For real, code using your voice. Serenade allows you to speak your code, instead of typing it. Sit back, relax, and just voice-code away, with a little help of AI. Great for wrist, nerve or repetitive strain injuries preventing you from coding, but also useful for just about anyone wanting to accelerate their workflow using additional voice control. I tried Serenade.ai for a couple of hours and this is my review/tutorial.

Verdict: do give it a shot, it is super cool. So much potential laying in this technology.

https://www.youtube.com/watch?v=Pc-EbY1fRWk
{% youtube Pc-EbY1fRWk%}

Check Serenade.ai yourself at:

https://serenade.ai/

Hope you find this useful 👋
Hacktoberfest completed 🤩
Tags: hacktoberfest
Published: 2020-10-21 05:02:28

## What I Learnt From Hacktoberfest.
  I recently completed this year's challenge .Hacktoberfest is massive and as a fresher I learnt a lot from it. It encourages new people to contribute in open source. I learnt the proper use of GitHub and how to help people in their projects with it.😄😄
Recursive functions
Tags: erlang, tutorial
Published: 2020-10-21 04:42:38

This is me trying to describe recursive functions in Erlang. How you can write them and how it works.

Erlang uses recursive functions often because in other languages you have for, while and other loops. In Erlang we do it with recursive functions.

Example:
```
-module(recursive).

-export([sum/1]).

sum([]) ->
    0;
sum([Head | Tail]) ->
   Head + sum(Tail).
```

Here we do a sum function that will take a list of integers and summarize them. 

```bash
15> recursive:sum([1,2,3]).
6
```

What happen when we call our function?

Thing in Erlang works that we go from the top to the bottom of our code.

recursive:sum([1,2,3]). When we call this function with argument [1,2,3] this will happen.

```erlang
sum([]) ->
   0;
sum([1 | [2,3]]) ->
   1 + sum([2,3]).
```

First we will hit the first function clause and because our list contain three elements it will go on to the next function clause. Here the head of the list will be 1 and the tail will be list with two elements [2,3].

The recursive call that we call our function sum again but now with the tail will give us.

```erlang
sum([]) ->
   0;
sum([2 | [3]]) ->
   2 + sum([3]).
```

We also do that with the last element in the list.

```erlang
sum([]) ->
   0;
sum([3 | []]) ->
   3 + sum([]).
```

Last call here will hit the base case and return a 0.

This will calculate 3 + 2 + 1 + 0 (base case) = 6.

You can also do this with tail recursive so you pass the result of the recursive to the next.

```erlang
sum([], Sum) ->
    Sum;
sum([Head | Tail], Sum) ->
    sum(Tail, Sum + Head).
```

This is our function with tail recursive. What will happen here is very similar to what we did above. Different now is that we to the addition in the recursive step and send the result to the next recursive. When we hit base case we will return the result.

```erlang
16> c(recursive).          
{ok,recursive}
17> recursive:sum([1,2,3], 0).
6
```

We have now created a function called sum that now have aritry 2. It will take the list with integers and the start value.

```erlang
sum([], Sum) ->
   Sum;
sum([1 | [2,3]], 0) ->
   sum([2,3], 0 + 1).
```

```erlang
sum([], Sum) ->
   Sum;
sum([2 | [3]], 1) ->
   sum([3], 1 + 2).
```

```erlang
sum([], Sum) ->
   Sum;
sum([3 | []], 3) ->
   sum([], 3 + 3).
```

```erlang
sum([], 6) ->
   6;
sum([Head | Tail], Sum) ->
   sum(Tail, Sum + Head).
```

When we hit the base case and the list is empty we will return the variable Sum that is in this case 6.
Are you preparing for your next frontend interview? 
Tags: html, career, javascript, webdev
Published: 2020-10-21 04:00:09


#### Here are some of my favorite resources which I always look up to for technical interviews. 

1. [Front-end interview tips](https://github.com/Jobeir/front-end-interview-preparation-guide)
2. [Front-end interviews questions list](https://frontendmasters.com/books/front-end-handbook/2018/practice/interview-q.html)
3. [Geeks for geeks](https://www.geeksforgeeks.org/)
4. [Front-end-interview-handbook](https://github.com/yangshun/front-end-interview-handbook)
5. [Interview-preparation](https://github.com/topics/javascript)
6. [Front-end-Interview-Questions](https://github.com/khan4019/front-end-Interview-Questions)
7. [JavaScript](https://dev.to/macmacky/70-javascript-interview-questions-5gfi)
8. [JavaScript Visualized Series' Articles](https://dev.to/lydiahallie/series/3341)
9. [Best Blog i have ever read about front-end interview](https://www.freecodecamp.org/news/cracking-the-front-end-interview-9a34cd46237/)
10. [Additional blog](https://codelifefitness.hashnode.dev/how-to-land-your-first-job-as-a-web-developer?guid=bcfee791-c63c-45de-80e6-746eaa687987&deviceId=549bbac1-efd0-4492-8f51-924ea2807c21)
11. [Javscript-ALgorithms](https://github.com/trekhleb/javascript-algorithms)
12. [Coding Interviews](https://github.com/jayshah19949596/CodingInterviews)
13. [Technical interview](https://github.com/andreis/interview)
14. [Interview Questions](https://github.com/MaximAbramchuck/awesome-interview-questions)
15. [React-js interview questions](https://github.com/sudheerj/reactjs-interview-questions)


---

Additional Resources to learn DATA structures,javascript..etc

1. [Learners bucket](https://learnersbucket.com/)
2. [Btech smart class](http://btechsmartclass.com/)
3. [30-days-of-JS](https://github.com/Asabeneh/30-Days-Of-JavaScript)
Understanding Execution Context, Thread, and Functions in Javascript
Tags: javascript
Published: 2020-10-21 04:09:19

In today's post, I am going to write about how javascript works. We will throw some light on terminologies like Execution context, function level execution context, function invoking, and threads.  

**Do you know what happens behind the scene when you run a javascript code? **

Let's take an example of the below code snippet. 

```
const a = 10;

function add(x, y){
    const result = x + y;
    return result;
}

const name = 'github';
const final = add(10, 20);

``` 

As soon as you run this program, it creates a `Global Execution Content`, the place where the javascript thread will run line by line and run your code. 


> You can think of `Global execution context` as an environment where the code runs. 

> There can be multiple `execution context` in a program but a single `Global execution context`. 

Now let's go back to the above code snippet and see what the JS engine does when we run the code.

- JS Engine parses your code line by line & identifies variables & functions created by code (which will be used in the execution phase)

- JS Engine setup memory space for variables & functions ( called as **Hoisting**)


**Hoisting ** is basically the JS Engine set-asides memory space for variables and functions used inside the code before your code is executed. These variables & functions comprise the Execution Context of any function that is being executed. 

- A new Execution Context is created whenever function invocation is called. 

> All variables in JS are initially set to `undefined`.

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

Let's take one more example. 

```
function y(){
    const p = 100;
}

function x(){
    y();
    const t = 10;
}

x();
const r = 20;
```

> EC : Execution Context

When we run this code, here is what the Javascript engine does.

- First, a `Global Execution Context` is going to be created.

- Interpreter encounters `call x()`, and again a new EC is created for x. 

- Now the `EC` for x is created it will run the code line by line inside x. 

- Inside x, a new function call `y()` is invoked, it again creates an EC for y. 

- When y is finished running, it will back to EC of `x`, and variable t is assigned. 

- After x run is finished, it will be back to `Global EC`, and variable r is assigned. 

- `Global EC` finishes running and the program stops. 


In tomorrow's blog, I will explain how the call stack works in Javascript. I would love to know your feedback on this blog. 

----

Stay tuned -  Follow me on [Twitter](https://twitter.com/HQdeepak)
My Hacktoberfest2020 Journey
Tags: hacktoberfest
Published: 2020-10-21 03:53:55

## What I Learned From Hacktoberfest
<!-- What did you learn that can help others contribute to the project you worked on? What did you learn that can help the users of that project?! -->

This was the first time I took part in hacktoberfest. At first, I wasn't able to understand how to contribute but after watching some of the hastoberfest videos and once I got a hang of it and started contributing to the projects, I really enjoyed it. I contributed to some great projects in my domain of interest. I really look forward to participating next year.
IDEA Intellij - Plugins - Save Actions
Tags: java, intellij, idea, code
Published: 2020-10-21 03:48:28

# Save Actions &crarr;
&#64; &rarr; [link](https://plugins.jetbrains.com/plugin/7642-save-actions)
&#64; &rarr; [info](https://github.com/dubreuia/intellij-plugin-save-actions)

_Organize, formate, limpe seu código automaticamente no momento que ele é salvo._

O "Save Actions" suporta ações ao salvar os arquivos, de forma configurável, semelhantes ao Eclipse, incluindo "otimizar de imports", "reformatar código", "reorganizar código", "compilar arquivo" e algumas correções rápidas para Java como "adicionar / remover `this`" e etc. O plugin executa as ações configuradas, quando o arquivo é sincronizado (ou salvo) no disco.

### Caracteristicas

- Otimiza os imports
- Executa salvando um arquivo, atalho, lote (ou uma combinação)
- Executa em vários arquivos escolhendo um escopo
- Reformata o código (arquivo completo ou apenas texto modificado)
- Reorganiza o código (reordena métodos, campos, etc.)
- Inclui / exclui arquivos com suporte a expressões regulares
- Funciona em qualquer tipo de arquivo (Java, Python, XML, etc.)
- Pode ser configurado por projeto

### Demostração
<img src="https://user-images.githubusercontent.com/3587262/94834610-f607cd80-03e6-11eb-9f12-1939c3989991.gif" alt="preview" width="800"/>

### Instalação
<img src="https://user-images.githubusercontent.com/3587262/94829817-4da33a80-03e1-11eb-8273-ecd2b2fe11b2.png" alt="install" width="800"/>

### Configurações
<img src="https://user-images.githubusercontent.com/3587262/94831132-b939d780-03e2-11eb-80b2-ec93e770c1c4.png" alt="config" width="800"/>

### Recomendações
<img src="https://user-images.githubusercontent.com/3587262/94831645-5a289280-03e3-11eb-80aa-6ef240e578be.png" alt="config" width="800"/>
What I learnt from Hacktoberfest 2020
Tags: hacktoberfest
Published: 2020-10-21 03:48:21

This was the first-ever year that I participated in a Hacktoberfest, it also happened to be the first time I tried contributing to open source projects (I was just a beginner learning my way up in programming). And how did Hactoberfest help me...... In every possible way (actually!). I now have the confidence to contribute without the fear of my coding styles, structure etc., I have gotten better at my own skills by contributing and since I was a beginner, got to help with documentation where my programming knowledge wasn't enough. I feel if you need to get better in code and get familiar with the community, Hactoberfest is the best!
HacktoberFest
Tags: hacktoberfest
Published: 2020-10-21 01:53:54

## What I Learned From Hacktoberfest

This is my first time participating in hacktoberfest fest program. Heard about it in just couple of months ago and was very hyped about it. It felt like a very daunting task at first but, then I took tips and instructions from the website and read through the contribution guidelines of repositories before trying to make any contribution and it was really an amazing feeling having my contributions accepted - because it turned out contributing to open source wasn't as hard as I thought.


### Here is a brief description of my contributions :

* Fixing Documentation errors in Canvas Api which is a Python API wrapper for Instructure's Canvas LMS. Easily manage courses, users, gradebooks, and more. (https://github.com/ucfopen/canvasapi)


* Fixing bugs in a Repository for Machine Learning utils at the Wellcome Trust. (https://github.com/wellcometrust/WellcomeML)


* Making a brand new Discord bot to play music and share memes from Discord.py (https://github.com/anushkrishnav/PyAutomate)


* Adding more features to a previously made discord bot to share Anime Reactions on a Text Channel. (https://github.com/uzair-ashraf/anime-reaction-api)



Feel free to send in comments with your personal experiences. Cheers!!
GitHub : https://github.com/Xx-Ashutosh-xX
HacktoberFest 2K20
Tags: hacktoberfest
Published: 2020-10-21 03:29:27

I began this challenge with no to little desire for how might it go and if I would even complete it. After 4 matured pull request, here I remain in my new most loved thing, DEV, posting about a challenge I thought nothing about! got energized when my PR was consolidated, and that urged me to investigate different issues. Likewise, gratefulness and rivalry roused me to accomplish more.
Apart from this, it just made me want to do more contributions like this in open source.
Looking forward to getting my Hacktoberfest badge over my GitHub!
Creating Slides With Ionic Framework Using React or Vue: Accessing The Full SwiperJS API
Tags: ionic, react, vue, tutorial
Published: 2020-10-21 03:16:58


The amazing thing about [Ionic Framework](https://ionicframework.com/) is that it doesn't ask you to get into the battle over which is better, [React](https://reactjs.org/), [Vue 3](https://v3.vuejs.org/), or Angular it just says come build something using our web components.

>Ionic Framework is an open-source UI toolkit for building performant, high-quality mobile and desktop apps using web technologies — HTML, CSS, and JavaScript — with integrations for popular frameworks like Angular and React. ( AND VUE )


Recently the VueJS components and CLI integration for Ionic became available through the official release and needless to say I was excited.

I recorded a simple tutorial to show how to create and integrate slides into your solution using the [IonSlides](https://ionicframework.com/docs/api/slides), which is built on top of [SwiperJS](https://swiperjs.com/), Component in VueJS. Then the next day I saw a similar question about integrating IonSlides using ReactJS... So I made another video!

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

If you are partial to Vue, there is one for you and if you are partial React there is something for you too; but the great thing is that this is how the whole framework is structured. BTW I haven't even mentioned that you can package this all up into a mobile app or PWA using [Capacitor, A cross-platform native runtime for web apps.](https://capacitorjs.com/)

So checkout out the videos and be sure to like and subscribe to my channel for more content around Ionic Framework and Capacitor on React OR Vue.

{% youtube mCkrZYIbH10 %}

{% youtube -Qm-tG4Kt9s %}

💥 NEWSLETTER SIGNUP: https://buff.ly/35bAMIf 💥
Sweer Alert [TH] With Vuejs
Tags: vue
Published: 2020-10-21 03:14:30

```js
npm i vue-sweetalert2
```

main.js
```javascript
import VueSweetalert2 from 'vue-sweetalert2';
import 'sweetalert2/dist/sweetalert2.min.css';

Vue.use(VueSweetalert2);
```
Success
```javascript
    this.$swal({
      position: "top",
      icon: "success",
      title: "บันทึกข้อมูลสำเร็จ!",
      showConfirmButton: false,
      timer: 1600,
    });
```
AlertEditSuccess
```javascript
    this.$swal({
      position: "top",
      icon: "success",
      title: "แก้ไขข้อมูลสำเร็จ!",
      showConfirmButton: false,
      timer: 1600,
    });
```
AlertDeleteConfirm
```js
    this.$swal({
      title: "คุณแน่ใจไหม?",
      text: "คุณจะลบรายการข้อมูลนี้ และไม่สามารถกู้คืนกลับได้!",
      icon: "warning",
      showCancelButton: true,
      confirmButtonColor: "#3085d6",
      cancelButtonColor: "#d33",
      confirmButtonText: "ใช่ลบ!",
      cancelButtonText: "ปิด",
    }).then((result) => {
      if (result.isConfirmed) {
        this.$swal("ลบแล้ว!", "รายการข้อมูลนี้ถูกลบแล้ว.", "success");
      }
    });
```
AlertError
```js
    this.$swal({
      position: "top",
      icon: "error",
      title: "เกิดข้อผิดพลาด! ไม่สามารถทำรายการได้",
      showConfirmButton: false,
      timer: 1600,
    });
```
Sweet Alert
Published: 2020-10-21 03:14:07

use Illuminate\Http\Request;

    public function register(Request $requies)
    {
        Validator::make($requies->all(), [
            'name' => ['required', 'string', 'max:255'],
            'email' => ['required', 'string', 'email', 'max:255', 'unique:users'],
            'password' => $this->passwordRules(),
        ])->validate();

        return User::create([
            'name' => $requies['name'],
            'email' => $requies['email'],
            'password' => Hash::make($requies['password']),
        ]);
    }
How does React.js work?
Tags: react, javascript
Published: 2020-10-21 03:08:04

"What is React?" This is a question you might have been asked or possibly even asked to yourself. Like many others who are relatively new to programming, my go-to answers were something like, "It makes designing UI a lot easier" or "It's a front-end focused JavaScript library". Though these definitions aren't wrong, it'd be much more beneficial for both you and the person who asked this question to explain the answer in a way that a new programmer, or even a non-programmer, can understand. As I am writing this blog, my first experience with React was only yesterday. However, through building an application with React, JavaScript and research, I'd like to give a short but effective explanation as to what React really is.

So what is React? 
React is a JavaScript library that was developed in Facebook in 2011 and is the most popular JavaScript library for building User Interfaces. React utilizes React Components (pieces of UI) that are independent, isolated, reusable, which compile to build complex applications.

How does React Work?
To put it shortly, there normally is a Root component as well as child components, which are built by using a Class component or a Functional component (the differences between the two are out of scope for this blog; however, there are many resources online that can explain them well! For the purposes of understanding, I will talking about the class component). Below is an example of how components would be segmented.

![Example of components](https://reactjs.org/static/eb8bda25806a89ebdc838813bdfa3601/6b2ea/thinking-in-react-components.png)

Looking at the example above, the yellow outer box would represent the Root component and all the components inside would be child components of that Root component. 

The Class component has a state and a render function, whose output is a React element which is essentially a plain JS object mapped to a DOM element. It's not a real DOM element, it's just a plain JS object that represents the DOM element in memory. So React keeps a light-weight representation of the DOM in memory, which is commonly referred to as the Virtual DOM. Unlike the browser (or the Real DOM), the Virtual DOM is cheap to create. When we change the state of a component, we get a new React element, React will then compare this element and its children with its previous version, figure out what has changed, and then will update part of the Real DOM to keep it in sync with the Virtual DOM. So that means that when building applications with React, unlike JavaScript or jQuery, we no longer need to work with the DOM API in the browser. 

That is exactly why this library is called React. Because when a state changes, React "reacts" to the stage changes and updates the DOM!