teleren/devto huggingface dataset:
Vscode for FrontEnd Devs
Tags: vscode, javascript, frontend, dev
Published: 2019-09-26 22:08:25

Hey Everyone! This is my first blog post as a dev! The main reason is to help those who are having difficulties learning front-end technologies. Visual Studio Code aka vscode is so great that it will make your life easier and sometimes by installing extensions.

List of Extensions: 


1. Live Server: Live server opens your project on localhost and it will help you switch between pages because we add cdn's which will make it slow when reloading the webpage + { you don't need to reload the page, it will automatically show the changes that you have made } );


2. Live Sass Compiler: Live Sass Compiler is a handy tool which made my project so easy that I just made one index.scss file and did all CSS + SASS on it for 7 to 8 webpages. { Reason for using LSC is the functionalities that SASS have for ex: Nesting, Storing CSS properties in variables as we do in JS, and much more.

3. Better Comments ( The Better Comments extension will help you create more human-friendly comments in your code.
With this extension, you will be able to categorize your annotations into Alerts, Queries, TODOs, Highlights, and other comment styles to make your comment look good!!

4. Auto Rename Tag: Auto Rename Tag is a lifesaver when you change the first tag and it will change the second tag automatically. 

5. Highlight Matching Tag: This extension helps you when you in-built tag highlighter is not working!!

6. Gatito Theme: I'm using this theme for quite a while and it doesn't annoy me when I'm staring at the screen for hours.

7. Best Settings: AutoSave = ON, Wordwrap = ON + ( Alt + Ctrl ) + Live Server + Live Sass Compiler. You can turn autosave and word wrap on and you'll see the changes + Alt and ctrl will help you switch between pages + live server will help you reload the page automatically and live sass compiler will save the changes with a blink of an eye!!



You can follow me on @tahaadotdev at Instagram, twitter!!
Happy Coding!!
Getting Started with Dev.to's Stackbit Connection
Tags: meta, webdev
Published: 2019-09-26 22:00:24

You've probably noticed the new announcement from Dev.to about how [You can now generate self-hostable static blogs right from your DEV content via Stackbit](https://dev.to/devteam/you-can-now-generate-self-hostable-static-blogs-right-from-your-dev-content-via-stackbit-7a5).

If you're someone like me who has thought about starting blogging but just haven't made the commitment yet, this seemed like a nifty project to check out. However there is one caveat in their guide on [How To Generate A Site With Stackbit](https://dev.to/connecting-with-stackbit) (at least when using Hugo and the Fresh theme): you actually need to have at least one post in your profile; otherwise the Netlify build will fail with `Error: Error building site: failed to render pages: render of "section" failed: "/opt/build/repo/layouts/_default/blog.html:4:51": execute of template failed: template: _default/blog.html:4:51: executing "content" at <"/posts">: can't evaluate field Pages in type *hugolib.Page`.

Instead of being a good citizen and opening a PR to handle the null instance (that's on the TODO list, though), I decided to check out Dev's editor and create my very first post! Figured this would be more interesting than a 'lorem ipsum' or 'hello world!', and maybe it'll help someone else.
Feedback - Kreatorschool.com - Choice-based tutorials learning platform to create digital experiences w/o technical expertise 
Tags: nocodewebflowjava
Published: 2019-09-26 21:53:59

Hello, everyone, hope you are all doing well. Kreatorschool.com become live yesterday and launched the Promo Video as well. We at Kreatorschool help students/entrepreneur/millennials/Freelancers build their dream project without the need of code knowledge and help them create their own product and validate, implement and raise. If one idea/product doesn't work move on to the next one after validation, making the process faster and less time consuming.

A platform with a personalized educational experience, where you'll answer questions about what kind of an app or websites you want to build and it'll show you the steps and tools to use instead of asking you to go through dozens of tools to get your job done.

I and my co-founder have plans to take these lessons to Educational institutions and startup hubs and conduct workshops and build projects in person together.

Promo video link:
https://youtu.be/l9AnAtt2h4U
Product link:
Kreatorschool.com
Twitter: 
twitter.com/kreatorschool

We're in early Alpha and we're looking for your feedback ;)

Cheers!

Promo video:  {% youtube l9AnAtt2h4U %}
Easy React onClick Event Handling Methods with Examples
Tags: react, javascript, onclickeventhandling, eventhandling
Published: 2020-02-01 19:46:25

---
title: Easy React onClick Event Handling Methods with Examples
published: true
tags: React, JS, onClick Event Handling, Event Handling
canonical_url: https://www.positronx.io/react-onclick-event-handling-methods-with-examples/
---

The post [Easy React onClick Event Handling Methods with Examples](https://www.positronx.io/react-onclick-event-handling-methods-with-examples/) appeared first on [positronX.io](https://www.positronx.io).

In this tutorial, we are going to look at how to **handle React onClick events**. Event handlers help in making the decision which action should be taken when an event is fired. In an application, a user might click, hover, scroll, or insert any value in an input field.

Handling events in React is simple; events are declared in **camelCase** in a React app. For instance, if you have to define the `onclick` event, so we take a little different approach and declare `onClick` event this way in a React application.

[Click here to read more](https://www.positronx.io/react-onclick-event-handling-methods-with-examples/)
Disable row in Drupal tableselect
Tags: drupal
Published: 2019-09-26 20:47:38

When you use the `tableselect` element there may be reasons you want to make a row not selectable:
- Permissions
- Missing properties on the element
- Or any other reason to not make a row selectable

I had to do this recently and thought it should be a easy thing to do, since all form elements seems to support the `#disabled` property.

A tableselect element looks something like this:

``` php
$form['table'] = [
  '#type' => 'tableselect',
  '#multiple' => FALSE,
  '#header' => [
    'name' => 'Name',
    'age' => 'Age',
  ],
  '#options' => $options,
  '#empty' => 'No items available',
];
```

And then each entry (in `$options`) would look like:

``` php
$options['anders'] = [ // knowing the key is important for disabling.
  'name' => [
    '#markup' => 'Anders',
  ],
  'age' => [
    '#markup' => 30,
  ],
];
```

You would think the way to disable a row is to just add `'#disabled' => TRUE;` to the option entry, but no, nothing happens.

To actually disable a row you would need to target the same key outside the `#options` array. Like this:

``` php
$form['table']['anders']['#disabled'] = TRUE; // Added directly to tableselect element.
```

In my opinion this is quite confusing.
Problem with buttons in Canvas
Tags: javascript, code, help, html
Published: 2019-09-26 20:32:46

Hello everyone guys!
I have a probelm with Canvas.
If I put only a button into it, the button appear into it. But If I put more than one button, the others don't appear. Can you tell me why?

This is the code if I put only a button in Canvas: https://pastebin.com/pciDrQZ9

And this is the code if I put more than one button in Canvas: https://pastebin.com/fa6BtGGC
How do you measure complexity to address architectural decisions?
Tags: discuss, microservices, monolith, architecture
Published: 2019-09-26 19:55:51

---
title: How do you measure complexity to address architectural decisions?
published: true
description: Some people argue it's better to start monolith and move later to microservices when complexity increases. But how to measure how complex a system is?
tags: discuss, microservices, monolith, architecture
cover_image: https://thepracticaldev.s3.amazonaws.com/i/blgyrn9bgdfje4vqjizf.jpg
---

This [notorious blog post](https://www.martinfowler.com/bliki/MonolithFirst.html)  by Martin Fowler throws an interesting perspective on microservices vs. monolith:

> ## _(...) **don't even consider microservices** unless you have a system that's **too complex to manage** as a monolith_

The chart below illustrates his point:

* With **low complexity**, use **monolity** to maximize productivity
* With **high complexity**, use **microservices** to maximize productivity

![Mololith vs. Microservices Curves](https://www.martinfowler.com/bliki/images/microservice-verdict/productivity.png)
_Source: [Martin Fowler - Microservice Premium](https://www.martinfowler.com/bliki/MicroservicePremium.html)_

### So the question is: how do we judge where an application falls on this chart in terms of complexity?

There are measures of code complexity, such as [McCabe](https://en.wikipedia.org/wiki/Cyclomatic_complexity) and [Halsteads](https://en.wikipedia.org/wiki/Halstead_complexity_measures).

But what if one is just starting new application development. There's no code yet.

### How would you judge whether it's better to start monolith or microservices?

_Cover image credit: [Markus Spiske](https://unsplash.com/@markusspiske?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)_
A Dockerized Nodejs Express Boilerplate with TypeScript
Tags: docker, typescript, showdev, node
Published: 2019-09-26 19:49:49

Github Project: [https://github.com/sidhantpanda/docker-express-typescript-boilerplate](https://github.com/sidhantpanda/docker-express-typescript-boilerplate) 

Getting started with TypeScript for your next backend project? Or just want to play around with a TypeScript based Express server? This project’s for you!

# Microsoft already has a starter repo. Why this?
There is Microsoft’s  [starter repo](https://github.com/microsoft/TypeScript-Node-Starter)  but it requires you to install a bunch of other stuff like MongoDB yourself. The Microsoft repo is a good reference repository but lacks a lot of stuff when building production applications.

# How to get started?
Simple, just run:
```
$ bash <(curl -s https://raw.githubusercontent.com/sidhantpanda/public/master/scripts/generate-express-ts-app.sh)
```
Or, if you don’t trust the shell script, clone the repo:
```
$ git clone git@github.com:sidhantpanda/docker-express-typescript-boilerplate.git your-app-name
```

# Features
* You can spin up **Mongo** containers and run your Node project with nodemon with a **single command**, and spin them down when you are done. Just run the following command and see it happening:
```
$ npm run dev
```
Running the above commands results in
  * 🌏API Server running at `http://localhost:3000`
  * ⚙️Swagger UI at `http://localhost:3000/dev/api-docs`
  * 🛢️MongoDB running at `mongodb://localhost:27017`

  Pressing `Ctrl + c` will stop the server and remove all mongo containers. All the data in Mongo is **persisted** between the runs at data/dev/mongo .

* This project also contains instructions to **dockerize** your application from the get go, so you get to learn Docker along with it, or experienced developers can directly start configuring the Dockerfile or docker-compose.yml files.

* A **[custom middleware](https://github.com/sidhantpanda/docker-express-typescript-boilerplate/blob/master/src/middleware/handle-error-middleware.ts)** for easier async/await for your request handlers. This allows you to write less verbose and eliminate having to write try-catch blocks in your request handlers every time you want to write an async method. Just throw any error and the handler will catch it and pass it on to the Express error handler.

* **[Sample mongoose model](https://github.com/sidhantpanda/docker-express-typescript-boilerplate/blob/master/src/models/Book.ts)** written in TypeScript. Lets you kick-start data modelling.

* Comes with a  [sample Open API 3.0 spec file](https://github.com/sidhantpanda/docker-express-typescript-boilerplate/blob/master/openapi.json)  so you can get started with API documentation directly.

* All configuration done through `.env` file.

* **ESLint + Prettier** — Linting and formatting from the start

* **Winston** as the default logger to generate debug and error log files during application lifetime.

* Pre-configured **Travis CI** for that automation goodness.
What if your interview coding challenge would look like this?
Tags: career, interview, discuss
Published: 2019-09-26 19:38:24

Just posted a new article on my blog: [What if your interview coding challenge would be completely different?](https://zoharpeled.wordpress.com/2019/09/26/what-if-your-interview-coding-challenge-would-look-like-this/) This is a (very) shortened version to get other developer's opinion on this.

Instead of the boring FizzBuzz, the annoying whiteboard, the mental dry-runs of code from a paper page, and all the other coding challenges we all so love to hate - what if we had something like this instead?

A coding challenge that is comprised of a few small parts, each designed to give the interviewer insight of a different aspect of the capabilities of the candidate. 
These mini challenges should be as close as possible to your development team member’s day-to-day job, and combined, should take no longer than what you would normally expect the coding challenge part of the interview:

* Reading a small codebase
* Simple debugging
* Actual problem solving
* Finding and fixing logical problems in a codebase
* Simple code design
* Handle specification changes

So, what say you?
Medindo o desempenho do código JavaScript: performance.now()
Tags: javascript, frontend, performance
Published: 2019-09-26 19:31:03


Sabemos que geralmente existem N maneiras de escrever um código para obter um mesmo resultado. E sabemos também que sempre vai existir uma maneira que vai resultar em uma performance melhor.

Para medir a performance de um **código JavaScript** e até mesmo escolher qual solução **JavaScript** optar, podemos usar o método `performance.now()`

Seu uso é bastante simples.
Você vai precisar declarar duas variáveis usando o método `performance.now()`, uma no começo do seu código e outra no final. Depois disso você fazer o cálculo do valor final - valor inicial.

Confira o código completo nesse exemplo abaixo:

{% codepen https://codepen.io/silvanavlima/pen/GRKLEwp default-tab=js,result %}


E teremos o resultado:

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


Para saber mais sobre o método: [performance.now()](https://developer.mozilla.org/en-US/docs/Web/API/Performance/now)

Essa é uma dica bem rápida e bacana!
Agora você pode comparar seus códigos, escolher a opção mais performática :)

Até a próxima!
CRUD app concept
Published: 2019-09-26 19:02:50

Using various methods, any programming language can be used to make a CRUD app. **CRUD stands for Create, Read, Update, Delete**. For web APIs use HTTP requests are used to correspond to the CRUD verbs.

**C for Create**
HTTP Method : POST
POST creates a new resource.

**R for Read**
HTTP Method : GET
GET retrieves a resource.

**U for Update**
HTTP Method : PUT/PATCH
PUT/PATCH updates an existing resource.

**D for Delete**
HTTP Method : DELETE
DELETE deletes a resource.
How to use the Editor Vim as an Hex Editor
Tags: vim
Published: 2019-09-26 18:52:24

---
title: How to use the Editor Vim as an Hex Editor
published: true
description: 
tags: #vim 
---

I want to display the `hexadecimal` format of a compiled binary from an `helloworld.c` program using *vim*.

The source code of the `helloworld.c`:

```c
#include < stdio.h >
int main()
{
   // printf() displays the string inside quotation
   printf("Hello, World!");
   return 0;
}
```

So after you generate the binary `helloworld` using the `gcc` compiler:

```
gcc helloworld.c -o helloworld
```

You’ve to edit the executable using `vim`:

```
vim helloworld
```

The last step is to use the `xxd` command to transform the result to the `hex` presentation by doing `:%!xxd`.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/954hc7gsx0whl0al0dxl.gif)
How to Implement Sign in with Apple Easily on iOS Apps
Tags: signinwithapple, login, ios, identitymanagement
Published: 2019-09-26 18:44:28

---
title: How to Implement Sign in with Apple Easily on iOS Apps
published: true
description: Supporting Sign in with Apple on iOS and web apps can be an easy task if you use the right tools.
tags: #signinwithapple #login #ios #identitymanagement
canonical_url: https://auth0.com/blog/learn-how-to-implement-sign-in-with-apple-easily/
---
Apple recently announced that the company is going to release its identity provider service called Sign in with Apple. This provider can be a great addition to apps and users because they will be able to exchange identity information more easily and securely. 

On the other hand, this also can become a headache for developers because Apple is going to require all apps that rely on other social providers to support their own. However, as you will see in this article, if you choose the right tools and services, supporting Sign In with Apple can be an easy task...

[Read on 🍎](https://auth0.com/blog/learn-how-to-implement-sign-in-with-apple-easily/?utm_source=dev&utm_medium=sc&utm_campaign=siwa_ga)

![How to Implement Sign in with Apple Easily on iOS Apps](https://cdn.auth0.com/blog/illustrations/sign-in-with-apple.png)
How to make a simple, extensible button - HTML/CSS
Tags: css, html, webdev, beginners
Published: 2019-09-26 17:44:06

---
title: How to make a simple, extensible button - HTML/CSS
published: true
description: Create an infinitely extensible button using HTML and CSS
tags: css, html, webdev, beginners
---

In this tutorial, I will show you how to create a simple, yet powerful button that is easy to read and is **extensible**. ([Skip to the result](#result))

First, create a new div on your HTML page with class="button"

```html
<div class="button">Submit</div>
```

Then, define the button class in CSS:

```css
.button {
}
```

Now, let's give it some shape:

```css
.button {
  display: inline-block; /* forces div width to conform to content */
  border-radius: 5px; /* creates rounded corners */
  padding: 8px 12px;
}
```

We want to make our button **extensible**, so let's define colors in a separate class:

```css
.button.blue {
  background-color: #5DADE2;
  color: #fff;
}
```

...and let's define button and font sizing in separate classes as well:

```css
.button.small {
  font-size: 0.8em;
}

.button.large {
  font-size: 1.2em;
  padding: 10px 20px; /* Give the button more room since it is bigger! */
}
```

Now let's add some interactivity by adding a hover behavior. In this case, let's make the button color slightly lighter when the user mouses over it:

```css
.button:hover {
  filter: brightness(110%); /* Brightens the current background color by +10% */
}
```

Now let's add some additional attributes to complete our button:
```css
.button {
  display: inline-block; /* forces div width to conform to content */
  border-radius: 5px; /* creates rounded corners */
  padding: 8px 12px;
  cursor: pointer; /* show pointer on mouseover */
  user-select: none; /* prevent text selection */
  transition: 0.2s; /* makes the hover behavior smoother */
}
```

Let's add the new classes that we defined to our div and let's see what we got!

```html
<div class="button blue large">Submit</div>
```

# Result <a name="result"></a>
{% jsfiddle https://jsfiddle.net/aichforhuman/p0xwL1qh result,css,html %}
Sweet! Now, let's get fancy and extend our button by creating a new class to add a shadow effect:

```css
.button.shadow {
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2); /* black shadow at 0.2 opacity */
}
```

# Your Task
Use the [jsfiddle](https://jsfiddle.net/aichforhuman/p0xwL1qh/) above to add a shadow to your button. How would you do it?

# Congratulations!

Here's what we learned:

* We created a simple, yet infinitely **extensible** button by using separate, related classes.
* We used **descriptive words** to define our classes so that it could be easily read and interpreted by other developers. Our button is "blue, large, and has a shadow!" Cool!
Angular accordion working demo
Tags: angular, angular8, angularaccordion
Published: 2019-09-26 17:36:40

---
title: Angular accordion working demo
published: true
description: Angular 8 accordion working example
tags: angular, angular 8, angular accordion
cover_image: https://thepracticaldev.s3.amazonaws.com/i/byvc0cehqud98iae9aku.png
---

Here is the link from where you can check angular 8 accordion working example:

[Angular 8 accordion working demo](https://therichpost.com/angular-8-custom-accordion-working-example/)


Thank you
Wtf are arrow functions?
Tags: javascript, es6, beginners, webdev
Published: 2018-12-17 19:45:39

---
title: 'Wtf are arrow functions?'
published: true
description: 'A quick and dirty explanation of arrow functions'
tags: javascript, es6, beginners, webdev
---

This post is a bit weird for me to write because I basically only write arrow functions. I rarely ever use the traditional `function` syntax anymore. However, this post is still worth writing because many of my students only use the `function` syntax and I want to both show them another way and point out the minor differences that come with arrow functions!

First, what am I talking about? Well! Glad you asked, let me show you below. As you can see I have declared two very simple functions in two different ways. The bottom one is an arrow function.  
Ooooh, how fancy.

An **arrow function** is a function declared using the `=>` syntax. Get it? It looks like an arrow.

```javascript
function someFunc() {
  console.log('No Me Gusta')
}

const otherFunc = () => console.log('Me Gusta')
```

They really come in handy when using higher-order function like `map`, which you can read all about in this [Blog Post](https://lvrbrtsn.com/blog/how-the-hell-do-i-use-map/)

```javascript
someArray.map(function(item) {
  return item * 2
}) // Eww gross.

someArray.map(item => item * 2) // Sexy!
```

See how much better the arrow function looks there? I am a big fan of simplicity and minimal syntax. I believe that comes from writing so much Ruby in my early days of programming, and arrow functions deliver big on simplicity.

One of the first things worth taking note of about arrow functions is that when the expression is on a single line the `{}` braces are not necessary. As you can see in all of the examples above. The `return` is also implicit for this single line functions. How cool!

This doesn't mean every arrow function has to be a single line though. As I stated above, I always use the arrow syntax, which means my multi-line functions look like this.

```javascript
const someNewFunction = (arg1, arg2) => {
  // Do some stuff with arg1
  // Do some other stuff with arg2
  // Solve world hunger
  return arg1 + arg2
}
```

Notice we need the `return` again when it is multiple lines.

One other thing worth noting before I wrap this really short post is that the context of `this` is different for arrow functions. Basically, `this` works lexically for arrow functions. Meaning the way you thought `this` worked originally only to learn you had no clue how `this` actually works at all. It keeps the context from where it was declared, kind of like self in any OO language. Which means you can do this in React without having to worry about binding.

```javascript
class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { count: 0 }
  }

  increase = () => this.setState({ count: this.state.count + 1 })
  render() {
    return (
      <div className="App">
        <button onClick={this.increase} />
        <h2>{this.state.count}</h2>
      </div>
    )
  }
}
```