teleren/devto huggingface dataset:
What is web shell and why create it?
Tags: web, webdev, blockchain
Published: 2019-09-30 00:26:11

---
title: What is web shell and why create it?
published: true
description: This is the first run of the Observer web browser.
tags: web, webdev, blockchain
series: Observer.
cover_image: https://thepracticaldev.s3.amazonaws.com/i/ae9ln00j6fd1kn3dkntb.png
---

**Web shell** is a next generation of browsers. Web shell fixes browsers incompleteness and make the Web a self-hosted platform.

Observer is the first web shell. It's built with [Electron](https://electronjs.org). It has a lot of features which hasn't announced yet and will be kept in secret for some time 😎 (that's a reason to follow [Observer](https://dev.to/observerhq) profile).

## Short announcement

After a long time I've finally decided to build the Observer as a complete application for demonstration purposes and here it is:

{% youtube npaakEWYeEQ %}


## Motivation

So why to build new browser today? In the history of the Web there was two great browser wars: the first has won by Internet Explorer which defeated Netscape Navigator and the second when Firefox defeated IE. The second war finished twelve years ago in 2007. For this twelve years the only thing that has changed is a leader, now it's Chrome.

The second war was caused by poor standard support and backwardness of IE. But today all browsers are supporting standards well, they all works together to solve the issues. What the reason to change something?

This is my reasons: 
* Modern browsers are just an addition to the operation system's native apps, while they should be the first class citizens and work seamlessly on any platform. Browser should became the one and only application required to cover any user activity.
* Browsers aren't secure: *Users could not control the code they run*! Users couldn't check what web application do! Does it sniff ports or create fingerprint. Publisher could do whatever they want on users' computers!

So what am the goal of Observer? Observer will make the Web a complete and the only platform for running applications.

## References

* [Observer profile](https://dev.to/observer0x).

* Observer repository (will be filled with code soon):
  
  {% github observer0x/observer no-readme %}
I am a Software Bootcamp Instructor, Ask Me Anything!
Tags: ama
Published: 2019-09-29 23:00:52

---
title: I am a Software Bootcamp Instructor, Ask Me Anything!
published: true
tags: ama
---

I have been a coach for over 4.5 years now. I've been personally responsible for 17 different cohorts of students, run innumerable experiments, and learned countless lessons about the human mind, technology for beginners, and teaching.

If you are thinking of attending a bootcamp, considering instruction, or are an instructor, ask me anything!
Body Markdown for Newbies
Tags: markdown, codenewbie
Published: 2019-09-29 22:53:45

I've been thinking for a while about starting a blog to discuss the ins and outs of transitioning into the tech field, and today I decided to go for it. Two minutes later - "Body Markdown" is written in the body of this post and my new internal dialog is, "Damnit, now I have to learn Markdown!".

I knew Markdown was simple, but I would need to learn it nonetheless. I can't be the only newbie googling "basics of body markdown", so here is a quick reference guide.

# Headings 

I thought this was going to be easy until I started marking up some examples and it all went to crap when I tried to equate hashtags to HTML heading tags. Turns out you can use heading tags in Markdown. Problem solved. 

<h2>`<h2> This is an 'h2' tag, but you could also have used '##'`
<h4>`<h4> This is an 'h4' tag, but you could also have used '####'`

# Text Emphasis

Add in some **bold text** by putting '**' on either side of the text you want to bold. 

Add some *italicized text* but putting single '*' on either side of your text.

Get sassy with ***bold and italic text*** by adding, you guessed it, '***' on either side of the text. 

# Paragraphs and Line Breaks

Press enter. Go to the next line. Repeat.

# Block Quotes

>"I made this special quote block by adding a simple '>' in front of this text" -Me

# Code

You can add in some bits of code and clearly make it different from your plain text with backticks: `console.log('This is a sweet bit of code');`

# Links

You can create a link within your text to keep things clean by putting the text you want to show up as a link in brackets [] followed by the actual link in parentheses (). 
`[My Sweet Porfolio](www.caitlyngreffly.com)`: [My Sweet Porfolio](www.caitlyngreffly.com)

# Image

Adding an image is similar to adding a link, just add a ! in front. 
`![Cute Dog](https://img.buzzfeed.com/buzzfeed-static/static/2016-09/30/12/asset/buzzfeed-prod-fastlane02/sub-buzz-27930-1475251501-1.jpg?downsize=800:*&output-format=auto&output-quality=auto)`: ![Cute Dog](https://img.buzzfeed.com/buzzfeed-static/static/2016-09/30/12/asset/buzzfeed-prod-fastlane02/sub-buzz-27930-1475251501-1.jpg?downsize=800:*&output-format=auto&output-quality=auto)

About halfway through writing this I found [this sweet cheat sheet](https://www.markdownguide.org/cheat-sheet/) that has even more helpful stuff! 

Alright, now to create actual content next...
React is finally JavaScript
Tags: react, hooks, javascript, composition
Published: 2019-09-29 22:31:57

---
title: React is finally JavaScript
published: true
description: You can finally write React in JavaScript
tags: react,hooks,javascript,composition
---

"Classes are the future of JavaScript because of React."

I heard this many times over the last few years, and I remained highly dubious because, I believed, use of classes in JavaScript was perfectly fine... until you understood JavaScript. Once you do that, using classes becomes clunky, uncomfortable, and awkward.

Finally, the voices of reason and "hey, let's use JavaScript the way it was intended" have been heard.

Hooks is functional composition well executed, and I finally feel comfortable using React.

When I'm in C#, I use classes/interfaces in a composition-based architecture because it's what the language is intended to be based on, and I love it.

When I'm in JavaScript, I use functions in a composition-based architecture because it's what the language is intended to be based on, and I love it.
Javascript Learning From Scratch -00006
Tags: javascript, beginners, deliaslan, khanacademy
Published: 2019-09-29 21:22:11

**Shortcuts of writing codes**

var x = 200;
var y = 350;

__x = x * y;__  _is the same of_  __x *= y;__
__x = x + y;__  _is the same of_  __x += y;__
Client-side Concept
Published: 2019-09-29 20:24:12

What is client-side? A client-side is basically what the FBI see through your camera, but for real a client-side is what the web browser application is showing to the client (a.k.a you). In this article, we will talk about three client-side concept components, server, and API. 

Let go more in about what is a web browser application. A web browser application is an environment that executes code inside a web browser that’ll give clients access to the code functionality. 

Components are different parts of the web application that allows the client to do many things on the web browser app. Components break things down on the conceptual level of things. For instance, the like button on facebook is a simple component that allows the client to like posts on the feed. Components that are dynamic are parts of the web browser application that needs to be updated frequently. You can think about it as when you gain a new follower on twitter your followers' count goes up. Components that are static are part of the app that does not require updating until the client request the update. For example, it can be updating your bio on tinder. Also, many components can have components inside a component like a Russian doll. Lastly Component can have encapsulation components meaning that some components can have related behaviors. An example of this is every time you post a picture on Instagram your picture will appear on your profile, the timeline, and your post count will also increase. 

![Alt text of image](https://thepracticaldev.s3.amazonaws.com/i/3xtp3ua71crr7xxi47bn.jpg)

A server is an application that runs on your computer, laptop, or whatever electronic you use to access the web. The server provides an interface to data & resource that the client doesn’t have access to. You can think of a server as a server in the restaurant. If you tell the server what food you want, then the server goes run to the kitchen tells the chef what you want. After all that waiting, he brings the food out. You can see the server but never see the chef. Unless it’s a hibachi-style restaurant. You'll never see the data the server is getting for you to retweet that tweet.

Application Programming Interface, or API, is a way that allows coders to specify how to interact with servers in their program. Think of API as making a certain request to the URL then these actions will happen. There is an API called the RESTful API. REST stands for REpresentational State Transfer meaning that a pattern is created that construct interfaces to our server applications that use URLs that include noun to refer to their resources, called endpoint. The RESTful API is exactly like the REST pattern but it’s an interface that conforms to the REST pattern.

In conclusion, the client-side concept are a lot of things. But know we know about the different components on the web browser. We know there is a little server that responds to our every request we tell the server. I hope the article gave you a new way to think about every time you use the web. Also, if this is your first time reading a coding blog, welcome to the matrix! :)
Learn New Skills Faster
Tags: learn, teach, skills
Published: 2019-09-29 20:22:28

Learning new skills can be difficult, especially without a plan. The amount of information is vast, sometimes it is hard to decide where to start and what is essential to learn, that is what might slow you down.
I want to share a few tips, how you can advance your learning process and encourage to try it out the next time you decide to learn something.

#### Define a Goal
When you pick a skill to learn, the first thing is to define a specific, measurable goal regarding the skill. 'Learn React' won't do it, you need a goal you can keep track of, for example, 'Build a Todo List app with React' or 'Create a Todo List RESTful API with Node.js'. Having a measurable goal, you can keep track of it, know when you will reach it, which will be a gratifying feeling. You know, the one when you cross an item from the todo list.

#### Research and Gather Material
After you set a goal, you need to gather material. Start with official documentation, books, blog posts. You want to look for the necessary information, how to start quickly with the least amount of effort. Explore the content of the books, tutorials and blog posts, notice what the order of the topics in the material is. You need to have a broad understanding of the capabilities of the skill.

#### Make a Plan
Now that you know what the skill is capable of, you need to make a plan and filter out the information that does not fit the plan. For example, if you were to make Todo List with React, your plan could look like this:
- Initiate the project (create-react-app)
- Store items in the local state (state and lifecycle)
- Create components for adding new and render existing items (JSX)
- Add and remove items from the local state (handling events)

And based on the plan, we can filter out information about routing, context, portals, optimizing performance, and so on.

#### Practice and Explore
You have a plan and required material, it is time to start practice. The key is to start as soon as possible with the minimum info and explore it on the way. As you start doing it, you will stumble into problems that will make you search for additional information, this way, you will realize what is really important for you and will understand the concepts better.

#### Teach What You Learn
And the most essential key to mastering the skill is to try to teach someone. Trying to teach the topic you learn is quite challenging but very rewarding, as you will be forced to learn it well so you can to explain complicated things in an easy to understand way. The information you teach will sink in better.
To share your learnings, you can write a blog post, teach a coworker, do a workshop or cast on youtube.

## Conclusion
There is nothing new in these concepts, it simply adds some structure, planning and teaching. Give it a try next time, especially the teaching part and leave feedback on how it went. I would be glad to hear your learning process or a suggestion on how to improve this one.
Evitando o uso de uma <div> desnecessária: DocumentFragment
Tags: javascript, documentfragment, dom
Published: 2019-09-29 19:51:28

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/z3zeis751ghg64ttakqo.png)

Você já deve ter se deparado com situações que "precisou" criar uma  `<div>` apenas para envolver outras `tags` e então adicionar essa `div` ao elemento `body`. Só porque não queria adicionar essas `tags` diretamente ao `body`.
Então, essa **`div` extra que você criou, não está ali por conta de uma real necessidade**.  🤨
Envolvemos essas `tags` em um elemento, porque se adicionamos cada novo elemento diretamente ao `body`, o código ficaria mais lento, isso porque obrigaria o navegador a passar pelos processos de refluxo para definir o novo layout da tela e depois redesenhar a tela.
Então, para resolver o problema do uso desnecessário da `div`, podemos usar o método `.createDocumentFragment()`

Segundo a [documentação](https://developer.mozilla.org/en-US/docs/Web/API/Document/createDocumentFragment),  as mudanças feitas em um `DocumentFragment` acontecem fora da tela, portanto não há custo de refluxo e redesenho para construir esse recurso.  Consequentemente,  as mudanças feitas no `document fragment` não afetam o documento e nem geram efeito no desempenho que pode ocorrer quando temos mudanças.


Não há nada de muito novo para usar esse recurso, ele se assemelha muito ao nosso velho conhecido `document.createElement()`

Vejamos o exemplo:

{% codepen https://codepen.io/silvanavlima/pen/ZEzNqpd %}

Bem simples! 🤙
Three questions when starting with React.js. 
Tags: javascript, react, beginners
Published: 2019-09-29 19:50:06

---
title: Three questions when starting with React.js. 
published: true
description: 
tags: js,react,beginner
---

### 1 - Why Do I need to use npm, npm does not stand's for Node.js, why I need it to deal with npm in a javascript react.js front-end project? 

> <i>Javascript is now I full featured programming language and like one there is some ways to manage the dependencies. Npm is the one of those ways.  Is the same logic to:</i>
>
> - <i>Nuget and .net</i>
> - <i>Composer and PHP</i>
> - <i>Java and Maven </i>



### 2 - In my early days as a web developer I put the cdn hosted scripts on bottom of my html body tag and had to create that scripts that I needed, how I do that in a react.js project ? 

> <i>This is still the way that js will be placed on the html, but now react.js will be in charge to put deployment version script on html page.</i>

### 3 - Why there is a development server and a deployment version on React Project ? 

> <i>Modern javascript frameworks like compiled languages put in one side the code repository and assets and on the other side a folder or set of folders that will be the deployment version.  In this folder called "build" will be all the files that js project needs to work and also a html that works as a page root.  </i>
>
> <i>1 - ` $: npm install react `</i>
>
> <i>2 - `$: npm install create-react-app myProject` </i>
>
> <i>4 - Development Process</i>
>
> <i>3 - `$myProject: npm run-script build ( creates a deployment version on build folder of the project)`</i>
Buffers in VIM
Tags: vim, linux
Published: 2019-09-29 19:38:13

---
title: Buffers in VIM
published: true
description: A quick tutorial on keeping multiple files open using buffers in VIM
tags: vim, linux
---

Buffers are essential knowledge in VIM.

A buffer represents an open file.  If you know how to manipulate buffers, you'll easily be able to switch between files.

There are three essential things to know.

- `:badd <file>` will open `<file>` into a new buffer.
- `:ls` will list open buffers.
- `:b <buffer_number>` will open `<buffer_number>` into the current window.

That's all you need for buffer basics.  If you want to close out a buffer, you can open it into the current window and use `:q`.  Alternatively, you can use `:bdelete <buffer_number>`. 

---

Follow me here on dev.to or on [Twitter @connorbode](https://twitter.com/connorbode) for more quick tips!
Pull request template
Tags: pullrequest, codequality, codereview, discuss
Published: 2019-09-29 19:19:50

I am wondering how some people are against about a checklist of what a pull request should have before it can be merged / what a reviewer should be looking for when reviewing a PR.
Of course, all we are lazy humans. And we rather skip it at all than try to follow it up. But I think it's a problem of our attitude to this thing. Of course, this approach has own pros and cons. IMHO, the checklist reminds us about the important steps what we should do or check. It means better and more consistent code quality and helps to avoid breaking the rule of no surprises. Also, it's useful for new team members. 
I am sure you will say, that a well-experienced developer should keep this list in mind all the time. But I am not talking about obvious things as use patterns, best practices: Single Responsibility Principle, KISS, DRY, SOLID, etc.

It could be something like that or even less:


![](https://i.postimg.cc/RhgNDRxV/Screenshot-2019-09-29-at-21-08-08.png)
746. Min Cost Climbing Stairs
Published: 2019-09-29 19:04:15

```js
/**
 * @param {number[]} cost
 * @return {number}
 */
var minCostClimbingStairs = function(cost) {
  const length = cost.length;
  for (let i = 2; i < length; i++) {
    cost[i] += Math.min(cost[i - 1], cost[i - 2]);
  }

  return Math.min(cost[length - 1], cost[length - 2]);
};

minCostClimbingStairs([10, 15, 20]); //?

```
My Top Five FrontEnd VSCode Plugins
Tags: vscode, frontend, html, css
Published: 2019-09-29 18:27:13

I have been using Microsofts [Visusal Studio Code](https://code.visualstudio.com/) everyday for the past few months. I have installed it multiple times on Linux and Windows. There are five plugins I always install immediately. I thought I would share them here. 

* [**Remote-WSL**](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-wsl) - extension lets you use the Windows Subsystem for Linux (WSL) as your full-time development environment right from VS Code. If you haven't set up the subsystem, [here are some instructions.](https://dev.to/vetswhocode/setting-up-a-linux-javascript-dev-environment-on-windows-2n74)
* [**Front-end extension pack**](https://marketplace.visualstudio.com/items?itemName=loiane.frontend-extension-pack) - This is actually a cluster of stuff in one bundle makes life much easier than searching each one out.
    * Preview Live Server
    * Browser Preview
    * IntelliSense for CSS class names in HTML
    * HTML CSS Support 
    * Auto Rename Tag
    * Auto Close Tag
    * npm Intellisense
    * Path Intellisense
    * JavaScript (ES6) code snippets
    * Turbo Console Log
    * stylelint 
    * ESLint
    * Prettier - JavaScript formatter
    * Beautify
    * EditorConfig for VS Code
    * Import Cost
    * Code Spell Checker 
    * Debugger for Chrome
    * TypeScript Extension Package
    * Bracket Pair Colorizer
    * Git History (git log)
    * snippet-creator
* [**Live Share Extension Pack**](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare-pack) - This extension pack includes everything you need to start collaboratively editing and debugging in real time.
    * Live Share
    * Live Share Audio
    * Live Share Chat
    * Peacock
* [**Gitlens**](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens) -  Supercharges the Git capabilities built into Visual Studio Code.
* [**CSS Flexbox Cheatsheet**](https://marketplace.visualstudio.com/items?itemName=dzhavat.css-flexbox-cheatsheet) - VS Code extension that lets you open a flexbox cheatsheet directly in the editor.



I haven't found a need to install anything else besides these and maybe I have tried a few themes. 

Also note, you have to install them twice if your using WSL (Windows Subsystem for Linux).

Enjoy
How to Learn Software Design and Architecture [Roadmap]
Tags: softwaredesign, architecture, cleancode
Published: 2019-09-29 18:08:51

---
title: How to Learn Software Design and Architecture [Roadmap]
published: true
description: Software Design and Architecture is pretty much its own field of study within the realm of computing, like DevOps or UX Design. Here's a map describing the breadth of software design and architecture, from clean code to microkernels.
tags: software design, architecture, clean code
cover_image: https://thepracticaldev.s3.amazonaws.com/i/6i4jflrqqthwjmt2q0b8.png
---

> This article is a summary of what I'm writing about in my newest project, [solidbook.io - The Handbook to Software Design and Architecture with TypeScript](https://solidbook.io). Check it out it you like this post.

It's crazy to me to consider the fact that Facebook was once an empty text file on someone's computer.

Lol.

This past year, I've been going hard in software design and architecture, [Domain-Driven Design](https://khalilstemmler.com/articles/domain-driven-design-intro/), and [writing a book](https://solidbook.io) on it, and I wanted to take a moment to try to piece it together into something useful I could share with the community.

Here's my roadmap for how to learn software design and architecture.

I've broken it down into two artifacts: the **stack** and the **map**.

## The Stack

Similar to the [OSI Model](https://en.wikipedia.org/wiki/OSI_model) in networking, each layer builds on top of the foundation of the previous one.

![The stack](https://thepracticaldev.s3.amazonaws.com/i/e727h5b9nozcuo4za2yw.png)

## The Map

While I think the stack is good to see the bigger picture of how everything works together, the map is a little bit more detailed (and inspired by the [web developer roadmap](https://github.com/kamranahmedse/developer-roadmap)) and as a result, I think it's more useful.

It's pretty huge, and Dev.to won't let me upload the entire thing, so [click here to fork the repo, read my detailed write-up and see the entire image](https://khalilstemmler.com/articles/software-design-architecture/full-stack-software-design/).

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/7f7bqt2vg9pelqp1cbss.png)

I hope it's useful.

Cheers!
Rank Performances
Tags: ruby, rails
Published: 2019-09-29 17:17:20

<h3><center>Rails + React + Redux - Pt 6</center></h3>
*********************************************************

This post is going to revisit the get_seasons and get_appearances method with the most complex aspect of the scrape so far, the condensed and transformed ranks of each queen in each episode. 

*********************************************************
<h1><center> Let's get started! </center></h1>
*********************************************************

*1. Revisit get_seasons in season.rb to scrape, clean, and transform the ranks of each episode per queen and store them in the episode for use in get_appearances.*

{% gist https://gist.github.com/JaredHarbison/6a9c9d49e8a3d0ff94b2ec4b9ee3ea3d %}

*2. Revisit get_appearances in appearance.rb to instantiate each and every appearance with the queens numerical rank for that episode.*

{% gist https://gist.github.com/JaredHarbison/d249a4fc35f0555070583d9867abc230 %}


I'd love to refactor the get_XXXX methods from the previous posts as soon as possible, but I may move on to some UI in my post next week!

*********************************************************
<h1><center> That's all folks! </center></h1>