teleren/devto huggingface dataset:
Day 84 : #100DaysofCode - Reviewing JS
Tags: 100daysofcode, freecodecamp, javascript
Published: 2020-08-24 00:18:25

Today, I spend the day reviewing the basics of Javascript on freecodecamp. I watched the 3:25:42 hour long video on Javascript fundamentals and coded along.

{% youtube PkZNo7MFNFg %}

I was able to get 99/110 lessons done and I am proud that a lot of it was easy to remember. I look forward to building Javascript projects. 

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

One lesson that I want to remember is how to Escape Sequences in Strings. The lesson provided the following resource which I found helpful:

```
Code	Output
\'	single quote
\"	double quote
\\	backslash
\n	newline
\r	carriage return
\t	tab
\b	word boundary
\f	form feed
```

In addition, I met up with my bookclub today and we reviewed Chapter 6 of the Eloquent JS - The Secret Life of Objects! I learned a lot from my book club friends and cant wait to learn more. 

I cant believe I am almost done with my #100DaysofCode journey, time flies!

As always, thanks for reading!

Sincerely, 
Brittany

Song of the day: 

{% soundcloud https://soundcloud.com/raphael_saadiq/soul-sista-remix-from-queen %}
Dark Theme
Tags: themes, vscode, intellijidea, color
Published: 2020-08-24 00:12:22

The Lone Coder es un tema que decidí compartir en base a mis ajustes de colores en los dos editores que uso cada dia, el Intellij Idea y el VSCode.

- [Visual Studio Code Theme](https://marketplace.visualstudio.com/items?itemName=lgzarturo.the-lone-coder-vscode)

{% github lgzarturo/the-lone-coder-vscode %}

- [JetBrains IDE's](https://plugins.jetbrains.com/plugin/14906-the-lone-coder/)
> Android Studio, CLion, DataGrip, GoLand, IntelliJ IDEA Ultimate, IntelliJ IDEA Community, IntelliJ IDEA Educational, MPS, AppCode, PhpStorm, PyCharm Professional, PyCharm Community, PyCharm Educational, Rider, RubyMine, WebStorm

{% github lgzarturo/the-lone-coder %}
How to create new HTML elements and add them to DOM using JavaScript?
Tags: javascript
Published: 2020-08-24 00:00:00

---
  title: How to create new HTML elements and add them to DOM using JavaScript?
  published: true
  tags: JavaScript
  date: Mon Aug 24 2020 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/create-html-element-attach-dom-javascript
  cover_image: https://melvingeorge.me/_next/static/images/main-632c14ebba380c94c16d6dc454ca1f81.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/create-html-element-attach-dom-javascript)
  
To create a new HTML element using JavaScript, you need to use the `createElement()` document method and add it to the body of the HTML.

Let's say we want to make a paragraph tag with some text content and add it to the body of the HTML.

First, Let's create the paragraph tag using the `createElement()` method.

- The method accepts a valid tag name as string eg: `p`, `div`, etc.

```javascript
// create paragraph tag
const paragraph = document.createElement("p");
```

Now let's create some text content using the `createTextNode()` document method.

- The method accepts a valid string.

```javascript
// create paragraph tag
const paragraph = document.createElement("p");

// create some text
const textNode = document.createTextNode("Hello World!");
```

after creating text content, we need to attach the text content node to the paragraph node.

For that let's use the `appendChild()` node method.

- The `appendChild()` method accepts a valid node reference.

```javascript
// create paragraph tag
const paragraph = document.createElement("p");

// create some text
const textNode = document.createTextNode("Hello World!");

// add text node to paragragh node
paragraph.appendChild(textNode);
```

Lastly, we need to attach the entire paragraph tag to the body of the HTML itself.

Let's use the `appendChild()` node method again to attach it to the HTML body node.

```javascript
// create paragraph tag
const paragraph = document.createElement("p");

// create some text
const textNode = document.createTextNode("Hello World!");

// add text node to paragragh node
paragraph.appendChild(textNode);

// get the HTML body tag
const body = document.querySelector("body");

// attach paragraph to the body tag.
body.appendChild(paragraph);
```

### Feel free to share if you found this useful 😃.

---
Getting Started with OAuth 2.0
Tags: engineering, oauth, authentication
Published: 2020-09-01 10:54:52

---
title: Getting Started with OAuth 2.0
published: true
date: 2020-08-24 00:00:00 UTC
tags: Engineering,OAuth,Authentication
canonical_url: https://www.loginradius.com/engineering/blog/oauth2/
---

Using this blog one can easily understand the basic concept of Oauth 2.0

   
[Read On](https://www.loginradius.com/engineering/blog/oauth2/)
I Understand Flexbox!
Tags: watercooler, css, webdev
Published: 2020-08-23 23:06:42

I just want to take a moment and celebrate a pretty big moment for me. I have been attempting to use flexbox on and off for months now, and having some success here and there, but relying more on React component libraries like [Material UI](https://material-ui.com/) (my favorite!) which has a lot of flex properties built in.

Today I opened up a recent [Codesandbox](https://codesandbox.io/s/flexbox-practice-xji8g) and reworked the layout with responsive rows and columns. And it finally clicked! 

<img src="https://media1.giphy.com/media/3o7TKFXELFFs2roQRG/giphy.gif?cid=ecf05e47691ce74228a7c21cd611a36ab569047cd077e769&rid=giphy.gif" alt="Ron Swanson dancing, drunk on Snake Juice"/>

Do you ever have that moment where something becomes clear in your minds' eye and not just an abtract idea? Now I literally can visualize the CSS for different types of flex layouts.

This card I made below features rows and columns inside the card, and the cards themselves are placed in a series of rows and columns, depending on the screen size. 

![Screen shot of card I made with Flexbox](https://dev-to-uploads.s3.amazonaws.com/i/cxaadtmhbx1uwy6z6ip1.jpeg)

![Screen shot of all my cards wide screen](https://dev-to-uploads.s3.amazonaws.com/i/xnby5n98d9yf8096bkzv.jpg)

Tomorrow I am going to write the article about HOW I did it. But today I am going to celebrate my personal victory and enjoy the rest of my evening!!

(A big thank you to [Flexbox Froggy](https://flexboxfroggy.com/) for helping me understand and visualize the concepts.)

Be sure to check out my latest post on how I created the layout with Flexbox: [Flexbox Rocks!](https://dev.to/jamesncox/flexbox-rocks-2bf9)
GitHub Codespaces CodeTour
Tags: github
Published: 2020-08-23 22:03:43

GitHub Codespaces are great for teaching and learning.  I wanted to test out using a VSCode [CodeTour](https://marketplace.visualstudio.com/items?itemName=vsls-contrib.codetour) in this environment, so I started by manually installing the CodeTour extension into my Codespace (shown below).

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

Next I recorded a short CodeTour in one Markdown file in this Repo.  I manually renamed the CodeTour steps to improve the readability of this test.  To try it out, I played back this CodeTour, starting with the first step (shown below).

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

I clicked through each of the 5 steps of this CodeTour and it worked as expected, ending on the last step (shown below).  It's easy to edit a recorded CodeTour, by renaming, moving and/or deleting any recorded steps too.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/q8kxn495fnalhzclkara.png)
Web Design and Styling..... what is the right path, I should look into? 
Tags: python, css, django, technology
Published: 2020-08-23 22:00:51

Today....
I’ve realized how much I don’t like styling.
I like javascript, and also python....
But when it comes to styling, it’s kinda up in the air and things can take a while to hook up because of location folders.

I like JavaScript but don’t like at times the extra syntax.... in witch, that’s why I like React and Vue. But, I still get slow with styling.

So, what part of web design, can you “see” what your making, but, you don’t have to worry about 20 different ways to do one thing? 

I like python, and the opportunities. It’s the styling that gets me at times
RenderBlocks - FrontEnd UI Library
Tags: react, angular, svelte, vue
Published: 2020-08-23 21:25:28

## What is RenderBlocks

In my journey building different frontend libraries to improve my own comfort with frontend development I made libraries like MercedUI and AMPonent that are built around the Web Component browser API. After creating mBlocks, I really liked the functioning of a basic Vue instance relying on its constructor function and tried to create something similar with RenderBlocks.

*You can find this and my other libraries at AlexMercedCoder.com
*RenderBlocks Github Page: https://github.com/AlexMercedCoder/RenderBlocks

## Setup

- in a folder somewhere on your computer create three files.
  - index.html
  - app.js
  - style.css

**index.html**

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- RENDERBLOCKS -->
    <script src="http://www.alexmercedcoder.com/renderBlocks.js" charset="utf-8" defer></script>
    <!-- YOUR CODE -->
    <script src="app.js" defer></script>

    
</head>
<body>
    
</body>
</html>
```

## Your First Block

The way it works is a RenderBlock renders a template to a target element. At minimum you pass in the CSS Selector for the target element and a function that renders the template.

**app.js**
```js
const app = new RenderBlock({
    target: "#app",
    render: block => `<h1>Hello World</h1>`
})
```

**index.html**
```html
<body>
    <div id="app"></div>
</body>
```

## Props

Of course, you can pass in props via the target element.

```html
<div id="app" hello="Hello World"></div>
```

```js
const app = new RenderBlock({
    target: "#app",
    render: block => {
        const {props} = block

        return `<h1>${props.hello}</h1>`
    }
})
```

## Info

Info is like state in React or data in Vue, Reactive Variables. The UpdateInfo Function allows you to update info and cause a re-render of the template.

```js
const app = new RenderBlock({
    target: "#app",
    render: block => {
        const {props, info} = block

        return `<h1>
        ${props.hello}
        </h1>
        <button>
        ${info.button}
        </button>`
    },
    info: {
        button: "Click Me"
    },
    after: (block) => {
        document.querySelector('button').addEventListener('click', () => {
            block.updateInfo('button', 'I have been clicked')
        })
    }
})
```

Notice we destructure props and info out of Block to make it easier to interpolate it into the template. The after property is a lifecycle function the runs after every render in this case adding the event listener to the button. Since the block itself is passed into every function, the updateInfo function is called. Notice it works differently than in react or vue, updateInfo allows you to update one property at a time by specifying a key and the new value.

## Bottom Line

This is the basics of how to use RenderBlocks. It has also has a methods property for writing additional methods along with several lifecycle functions. Check it out, it was a fun library to create.
🔥 Howl → C# beyond ASCII 
Tags: language, csharp, productivity, 100daysofcode
Published: 2020-08-23 21:24:44

Today's a milestone in Howl development as the symbolic notation engine / dev platform is in alpha on Github, with a CLI and macOS, Linux, Windows 'one line installers'

You may find it here:

https://github.com/active-logic/howl

So what is it, and what can you do with it? 

Howl is a terse symbolic notation for OOP programming; the best way to explain it is probably showing source code. Today I'll pick an innocuous looking example (for a change):

```howl
‒̥ ┈ ExportAll(){
    🐰 "Convert *.howl scripts to C# 〜 (;ω;)";
    ExportDir("Assets/", verbose: ✓);
}
```

`‒̥ ┈` stands for `public static void` (Howl input is available in Atom via the `language-howl` package; type C#, get Howl)

For small projects, you may compile, run and deploy howl source via the `howl` CLI; or export to C# and setup your own pipeline.

There is also a [Unity 3D integration](https://github.com/active-logic/uta)

### The Why

I wanted to away the red tape / verbosity of (mostly) pedantic, strongly typed languages. After a couple of weeks using over 100 symbolic notations... well; it is a different, and (to me) mostly pleasurable and productive experience.

Throughout, I noticed that programmers where amused and possibly interested whenever I showcased code samples. So I am putting extra effort (Big 'X') in making the platform available to others.
Day 5 of 100DaysOfCode
Tags: 100daysofcode, javascript, codenewbie, eloquentjs
Published: 2020-08-23 20:25:21

Hey! Same thing as yesterday, life got in the way of coding. Fortunately, the night is long and I put in some time to learning!

Worked some more on the exercises of Eloquent JavaScript. Finished the ones in CH4. 

To everyone: Keep coding, you can do it!

## What I did today:

### 1. Exercises of Eloquent JavaScript Chapter 4
https://eloquentjavascript.net/04_data.html#h_TcUD2vzyMe
####What I learned from it:
* Working with arrays on JavaScript
* Recursion
* Difference with JavaScript list and array

#### Time spent actually coding: 2h 48min

#### Total time: 2h 48min
Tracked by using my [TaskTimer](https://www.arttupyykonen.com/tasktimer/) script and the [WakaTime app](https://wakatime.com/about)

Check out the book (link above) to have a great learning resource! Highly recommend it.

That's all for today. See you all tomorrow!
If Ruby’s so Happy, What’s %w(a b c)

Tags: ruby, webdev
Published: 2020-08-23 20:27:06

When I started learning Ruby, I came across this quote about 50 times:

>I hope to see Ruby help every programmer in the world to be productive, and to enjoy programming, and to be happy. That is the primary purpose of Ruby language.

According to its creator, Yukihiro Matsumoto, the goal of Ruby is to make programmers happy. For me, that was mostly true. There’s very few reserved words to memorize, tons of useful, baked-in methods, parentheses are often optional. It is a really clean language--to learn and use.

However, every once in a while, I would come across something like this:

```ruby
%w(a b c)
```

Usually, I would find something like this while I’m in the middle of a bug, skimming docs, looking for a quick solution. Usually time was an issue so if I came across the odd percentage notation, annoyed, I’d skip it and open a new tab.

I’d think something like: If Ruby’s so happy, then what the hell is this??

### Ruby Literals
“A literal is a special syntax in the Ruby language that creates an object of a specific type.” [ [1.](https://www.thoughtco.com/string-literals-2908302#:~:text=A%20literal%20is%20a%20special,literals%2C%20there%20are%20several%20forms.)]

Everything in Ruby is an object. Strings, integers, arrays and everything else have a class that dictates their identity, state, and behavior. To create an instance of one of these objects from its class, we invoke it with a literal.

These odd looking `%` signs are shorthand ways of invoking a literal. For example, `%w` invokes an array of strings. It works like this:

```ruby
%w(a b c)     # [a, b, c]
%w(turtle cat different turtle)  # [turtle, cat, different, turtle]
```

According to a [post](https://stackoverflow.com/questions/1274675/what-does-warray-mean/1275147#1275147) on Stack Overflow:

>There are other % literals:
%r() is another way to write a regular expression.
%q() is another way to write a single-quoted string (and can be multi-line, which is useful)
%Q() gives a double-quoted string
%x() is a shell command
%i() gives an array of symbols (Ruby >= 2.0.0)
%s() turns foo into a symbol (:foo)

And there’s other notations too. Check this [link](https://www.w3resource.com/ruby/ruby-literals.php#:~:text=We%20have%20already%20seen%20literals,Booleans%20and%20nil) for more literals.

### Conclusion
I learned `%w` isn’t some happiness obfuscating headache. It’s actually another way Ruby gives its user options. It’s honestly pretty nice. Hell yeah, Ruby.
Readme of my endless document app experiment
Published: 2020-08-23 20:26:20

Attempt to replicate the [Workflowy](https://workflowy.com) endless document concept, extended with features I am currently missing.

## My thoughts on workflowy

Overall I am really happy with what workflowy offers as a tool and I enjoy using it. I tried several of the bigger alternates to it. None of them could resemble the ease of use and often overwhelmed me with too many pointless features. Nevertheless, I miss some things, but these are mostly visual, little organizing helpers, or time savers. 

*There are a bunch of browser extensions that are recommended to enrich the experience with workflowy, but they don't appeal to me. Security and my privacy are the main reasons I don't want to use them. Also, it feels somewhat hackish to use them; like some of these DIY videos, where everything is done with hot glue.*

### What do I like using workflowy?

- ease of use and limited feature set does emphasis the focus on the content
- nearly everything can be used via keyboard shortcuts
- it is **fast**, **responsive** and **frictionless** *unlike its competitors*
- jotting down my thoughts as they come into my mind
- the search is easy to use and search settings can be saved as a favorite
- I am not constrained to a specific workflow and can do whatever works for me

### What features am I currently missing in workflowy?

- more text formatting options within a nodes description field
- document structuring through headlines and sections
- possibility to change the bullet icon of a node or coloring it
- spacer elements to structure documents
- linking to other nodes without using the title of the node automatically
- automatically receiving the title of inserted links
- coloring of tags
- collection of used tags
- grouping favorized searches in a tree structure
- native extensibility

---

<span>Cover Photo by <a href="https://unsplash.com/@sctgrhm?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Scott Graham</a> on <a href="https://unsplash.com/s/photos/project-management?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></span>
Recreating an endless document application
Published: 2020-08-23 20:25:02

Writing about the stuff I do every day for more than 10 years in the tech industry, has always been something I wanted to do.

Today I created a new repository to work on an experiment and decided it was a good time to start scratching that itch of mine. I'd be happy if I can share some exciting things with you and keep you interested in following me along. 

This will is an ongoing documentation of how I attempt to replicate the endless document concept of Worflowy and extend it with features I am currently missing.

*Feedback is very welcome and highly appreciated.*

---

## Github Repository

{% github martinemmert/endless-document %}

---

<span>Cover Photo by <a href="https://unsplash.com/@sctgrhm?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Scott Graham</a> on <a href="https://unsplash.com/s/photos/project-management?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></span>
A longawaited fix to a legacy project | Devlog #1
Tags: webdev, react
Published: 2020-08-23 20:19:21

👨🏼‍💻 📹 In this devlog, you will follow along with me as I work on a project that I haven't updated in 3 long years.

---

[Devnews](https://devne.ws/) is a developer news aggregation website that I created 4 years ago and still use to this day. However, it broke about a year ago due to an issue with the GitHub trending repositories page crawler. I initially created the project using React, Material UI, localForage, WrapAPI, and Webpack. The static website host used for deployment is Surge.

Will I be able to fix the issue? Does the project even still run on my machine or able to be deployed? Watch to find out.

---

Full episode is also available to [watch on YouTube](https://youtu.be/-WKjxdfblI8)
What is CSS

Tags: css, html, php
Published: 2020-08-23 20:06:43

Having a lot of importance on Web technologies CSS  ( C ascading  S tyle  S heets) Cascading Style Sheets can translate the language. It is a simple design language designed to facilitate the process of optimizing web pages for visibility .


READ MORE : https://www.teknobu.net/english/what-is-css/
Why Do We Need Cyber ​​Security?

Tags: security, hacktoberfest, webdev
Published: 2020-08-23 19:49:20

It can rightly be said that modern day generation lives at the net, and we widespread customers are almost blind to how these random bits of 1s and 0s get correctly into our laptop. It is a golden age for a hacker. With such a lot of get admission to factors, public IPs and consistent visitors and heaps of information to make the most, black hat hackers live a hell of exploiting vulnerabilities and developing malware for it. On top of that, cyberattacks are growing each day. Hackers are becoming smarter and greater innovative with their malware, and how they pass virus scans and firewalls still amazes many humans.

Therefore, there need to be some form of protocol that protects us towards some of these cyberattacks and guarantees that our facts does now not fall into the wrong fingers. This is precisely why we need cybersecurity.

READ MORE : https://www.teknobu.net/english/why-do-we-need-cyber-%e2%80%8b%e2%80%8bsecurity/
KOTLIN - EXPRESSÃO WHEN
Tags: kotlin, beginners, brasil, android
Published: 2020-08-23 19:46:27

Está aprendendo kotlin e ainda não sabe quando usar o *when*?

Dá uma conferida nesse vídeo do curso de Kotlin do Rapadura Dev.

<a href="https://youtu.be/GQQ88-7kn4I" target="_blank">
<img src="https://dev-to-uploads.s3.amazonaws.com/i/6wntht6bv6czk7cwig55.png" width="700"/>
</a>


<span>Photo by <a href="https://unsplash.com/@leliejens?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Jens Lelie</a> on <a href="https://unsplash.com/s/photos/decision?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></span>
Creating Certificates with certie
Tags: certificate, ssl
Published: 2020-08-23 19:27:09

To setup TLS/SSL for web servers, X.509 client authentication, or even for database servers, you need to have certificate files. The quickest way to generate them, assuming you are on MacOS/Linux, is with certie.

Installing certie is simple:
```
sudo gem install certie
```

Following the installation, generating the certificates is as simple as: 
```
certie dev.mymachine.local
```

This creates a root certificate and a server certificate in PEM format within the current directory.

You may want to change the subject prefix by editing the ".certie_subjprefix" file in your home directory. Note that if you change the subject prefix, you would need to start over (delete the contents of the current directory, or create a new directory).

### Dependencies

If you were unable to successfully execute "gem install certie" above, you likely need to install Ruby and OpenSSL dependencies.

If you are on RedHat, you may need to install build tools and Ruby:
```
sudo yum groupinstall -y "Development Tools"
sudo yum install -y ruby-devel openssl-devel
```

For Ubuntu/Debian, the dependencies are installed with:
```
sudo apt install -y ruby-dev libssl-dev build-essential
```