teleren/devto huggingface dataset:
Hello, dev.to!
Tags: azure, microsoft, aboutme
Published: 2020-01-08 02:09:12

---
title: Hello, dev.to!
published: true
description: My name is Tidjani Belmansour
tags: Azure, Microsoft, AboutMe
cover_image: https://thepracticaldev.s3.amazonaws.com/i/3iu9atmorwh0isay0ph3.jpg
---

Hello, dev.to community. My name is Tidjani Belmansour. I’m a software consultant who mostly works on the Microsoft .NET stack and a Cloud Solutions Architect. I’ve been working with Microsoft Azure since its beginning in 2009. I’m also a former Microsoft Student Partner (MSP). In 2019, I’ve been given the great honour to be awarded as a Microsoft Azure MVP.

For more than a decade, I’ve been sharing my knowledge and experience through blogging (anyone who remembers the MyWindowsPC blogging platform? I’ve been there :)), presenting at various meetups and bootcamps, among others.

I usually share my knowledge and experience in French. You can find my posts in French at http://espacenuagic.com 

I’ve been thinking for some time to also do it in English. I’ve also been thinking what would be the best place to do this and I’ve come up with the answer that “what would be the best place than a platform made by developers, for developers?” And that’s why I decided that my posts in English would be on dev.to whereas my posts in French would be on http://espacenuagic.com.

My posts will certainly cover technical content. But I’ll also share with you my views on various topics, ideas and principles. I’ll expect to engage with you and discuss on these either through comments or on [Twitter](https://twitter.com/tidjani_b).

For my first post though, I wanted to introduce myself to you and let you know what to expect from my posts. This is by no mean a way to tell you that I’m great. I’m aware of what I know and, most importantly, I’m aware of what I don’t know. And one thing I know for sure is that dev.to leverages the power of the community: _I learn something from you and you’ll learn something from me._

So, see you around soon!

Sincerely,

Tidjani


Cover photo by Tyler Lastovich on [Unsplash](https://unsplash.com/s/photos/hello?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
Setting Up a GraphQL API With Strapi
Published: 2020-01-08 02:06:00


*[Original post from series "Building an App with Gatsby and Strapi"](https://shannonwilliams.io/setting-up-graphql-api-with-strapi/)*

**Who is this post for?** Each post in the series is loosely dependent on each other. So you can follow any post in any order you like. Posts were made this way so you don’t have to read all the previous ones to follow along.

**The goal of this post** is to explore Strapi’s GraphQL API in regards to:

- setting up the API,
- setting up API permissions,
- documenting and testing API endpoints.

## Setting Up
To begin, you will need to install the GraphQL plugin from the Marketplace.

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

Once installation is finished, restart Strapi.

## Setting Up API Permissions
Similar to setting up the REST API, we will need to define who has permission and to what actions. For example, let’s look at the Page content type and give the Public role permission to call `count`, `find`, and `findone` actions (actions are simply the functions used by the controller to perform business logic).

**Step 1 – Ensure the content type is defined as needed**

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

**Step 2 – Go to Roles & Permissions and select the Public role**

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

**Step 3 – Give permission to use the actions**

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

## Documenting and Testing the API
Strapi automatically provides a GraphQL playground at `/graphql`. So if you are running Strapi locally, it can be found at [http://localhost:1337/graphql](http://localhost:1337/graphql), otherwise, it’ll be located at `http://<website-domain>/graphql`. From here you can explore the available schemas, type details, arguments, and test queries using the editor.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/5ld243blzkr9pqnwpxg5.gif)
I'm a professional React developer, and here's how I deploy a React/Node.js App using Microservices onto AWS using Terraform. #3
Tags: react, node, webdev, javascript
Published: 2020-01-08 01:28:32

**About Me:** I've been a professional web developer for just over 10 years now. I'm currently the lead web development instructor at [Better Coding Academy](https://codebetter.com.au), and as part of what I do, I post videos on our YouTube channel at [https://www.youtube.com/c/BetterCodingAcademy](https://www.youtube.com/c/BetterCodingAcademy).

_(Subscribe for awesome web development content!)_

In a previous video series, I built a classifieds app with a microservices architecture using React, Node.js, GraphQL and Docker; you can find the dev.to article on that [here](https://dev.to/bettercodingacademy/i-m-a-professional-react-developer-and-here-s-how-i-set-up-react-node-js-microservices-using-docker-and-graphql-20gk).

Now, I'm deploying that application onto [AWS](https://aws.amazon.com/) using [Terraform](https://www.terraform.io/), and this is part 3 of that tutorial.

I hope you enjoy!

{% youtube ln32o2hoOb4 %}

Happy coding!

Full source code: [https://github.com/parkroolucas/microservices-demo](https://github.com/parkroolucas/microservices-demo)
Angular 9/8 CRUD with HttpClient Example and Tutorial
Tags: angular
Published: 2020-01-08 01:05:10

---
title: Angular 9/8 CRUD with HttpClient Example and Tutorial
published: true
description: Angular 9 CRUD and HttpClient tutorial
tags: angular
---

In this Angular 9 tutorial, we'll learn to build an [Angular 9 CRUD example application](https://www.techiediaries.com/angular/angular-9-8-crud-example-and-tutorial/) going through all the required steps from:

- creating/simulating a REST API, 
- scaffolding a new project, 
- setting up the essential APIs, 
- and finally building and deploying your final application to the cloud.

![Angular 9 httpclient tutorial](https://dev-to-uploads.s3.amazonaws.com/i/nx0bw2z4wnef4hip8m32.jpg)

## What You'll Learn in this Angular 9 Tutorial?

We'll learn by example:

- how to send GET requests with URL query strings and parameters 
- and process HTTP responses from REST API servers in your Angular 9 application using Angular Httplient for fetching and consuming JSON data,
- how to do error handling for HTTP errors using the RxJS `throwError()` and `catchError()` operators, 
- how to retry failed HTTP requests in poor network connections and cancel pending requests using the RxJS `retry()` and `takeUntil()` operators, 
- and finally how to deploy the application to Firebase Hosting using the latest Angular 8.3+ features.

We'll also see how to use Angular 9 services and RxJS Observables, and learn how to set up Angular 9 Material in our project and style the UI with Material Design components.

We'll see how to use the new ng deploy feature in Angular 8.3+ to easily deploy your Angular 9 application from the command-line to Firebase hosting.

Angular 9 is finally released, and comes with various new features and improvements particularly the new Ivy renderer.

[Read more](https://www.techiediaries.com/angular/angular-9-8-tutorial-by-example-rest-crud-apis-http-get-requests-with-httpclient/)
Day 65 : All Night
Tags: hiphop, code, coding, lifelongdev
Published: 2020-01-08 00:47:21

_liner notes_:

- Professional : Did some more research on my upcoming project for work. Also, got ready for my trip tomorrow. Making sure that my tickets were good.

- Personal : After work, I pretty much jumped back onto my side project. I'm so close to getting it working. I created an admin section to add stories to the site. Got the front end working. Now I'm running into a road block where my code isn't returning a response for an API call, but it works when I copy and paste the URL into the browser. What is going on!?!?!. haha. Probably going to be an all night session. Thing is that I have my flight tomorrow morning.

![Looking into the night sky over Silverthorne Colorado](https://thepracticaldev.s3.amazonaws.com/i/n5j62di4vqhpfb651lz8.png)

Not much too say. Going to go back to working on this code! It seems like it always comes down to the last minute with these side projects. haha

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube dVJ8ZFofpV8 %}
laravel 6 drag and drop table rows
Published: 2020-01-09 09:56:29

---
title:  laravel 6 drag and drop table rows
published: true
date: 2020-01-08 00:00:00 UTC
tags: 
canonical_url: 
---

Hi GuysIn this tutorial I will show how to use jQuery UI Sortable along with Datatables to add drag and drop functionality in laravel 6 this is a example of drag and drop datatable rows for sorting laravel 6dynamic sorting or drag and drop list items or div or table rows it is simply and
Bring focus to things app
Tags: productivity
Published: 2020-01-08 23:48:16

---
title: Bring focus to things app
published: true
date: 2020-01-08 00:00:00 UTC
tags: Productivity
canonical_url: https://coltborg.com/bring-focus-to-things-app/
---

I love the app [Things 3](https://culturedcode.com/things/). I have been using it since it’s design update in (look up when Things 3 released).

My only problem with it is that it does have the ability to defer tasks or hide tasks until I can start them.

However, I’ve found a nice work around to only show the tasks that I’m working in right not.

I created a new tag called `now`.

![Adding a new tag in Things tag manager](https://thepracticaldev.s3.amazonaws.com/i/koi8gu0gp752n25klq3y.png)


When I’m working on a task, I add the `now` tag to the task.

![I add the now tag to my task](https://thepracticaldev.s3.amazonaws.com/i/04317kkytq9a9te2dngn.png)

Then on the top of the page—usually the Today page for me—select the `now` tag to only show tasks that have that tag.

![Filter tags to only now](https://thepracticaldev.s3.amazonaws.com/i/guz1gr45lr297rrbbwh0.png)

I usually only add the tag to one task at a time. And more I don’t see any other tasks while I’m working on what’s important. This might seem easy or not that big of a deal, but not seeing clutter ready improves my focus.
Top 5 DEV Comments from the Past Week
Tags: bestofdev
Published: 2020-01-07 23:45:48

---
title: Top 5 DEV Comments from the Past Week
published: true
description: Highlighting some of the best DEV comments from the past week.
tags: bestofdev
cover_image: https://res.cloudinary.com/practicaldev/image/fetch/s--7VrAA2ln--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://thepracticaldev.s3.amazonaws.com/i/qmb5wkoeywj06pd7p8ku.png
---

This is a weekly roundup of awesome DEV comments that you may have missed.  You are welcome and encouraged to boost posts and comments yourself using the **[#bestofdev](/t/bestofdev)** tag.

@jmfayard shares a great conspiracy theory in **[How programming languages got their names](https://dev.to/scottydocs/how-programming-languages-got-their-names-207e)**:
{% devcomment jlj6 %}

@ryansmith talks about "the age of skimming" in response to **[The New Years Resolution That Changed My Career](https://dev.to/ben/the-new-years-resolution-that-changed-my-career-5b8p)**:
{% devcomment jjc5 %}

@bsaad adds to the **[Probably the hottest code refactoring you ever saw 🔥](https://dev.to/potouridisio/probably-the-hottest-code-refactoring-you-ever-saw-3072)** post with a really helpful suggestion:
{% devcomment jm09 %}

@lazerfx adds their thoughts to **[Changing your name is a hard unsolved problem in Computer Science](https://dev.to/penelope_zone/changing-your-name-is-a-hard-unsolved-problem-in-computer-science-kjf)**, adding more reasons about why this is such a problem:
{% devcomment jkej %}

@jheld offered a great overview in **[What is the state of Python versions?](https://dev.to/ben/what-is-the-state-of-python-versions-egi)**:
{% devcomment jkea %}

See you next week for more great comments ✌
Scaling WordPress: AWS is no silver bullet
Tags: aws, wordpress, webdev
Published: 2020-01-07 20:24:35

There is a common misconception that hosting WordPress on AWS makes it scalable automatically. Every online WordPress community I visit has a fair number of posts asking about solutions for a growing site. 10 out of 10 times, these posts have a suggestion that says, “If you need scalable infrastructure, AWS is the only option.”

Suggestions like this lead to a scenario we often see when onboarding new customers at Scale Dynamix. It goes something like this:

The site starts to grow and runs into scaling troubles. Developers suggest a CDN. When the site still has issues, management decides to move the site to AWS. 

At this point, either the IT dept., or the agency managing WordPress launches a new EC2 instance. Since AWS recommends using Bitnami’s WordPress AMIs, most people go with that.

While these EC2 images are an excellent way to launch development environments, using them in production doesn’t provide any of the scalability or high-availability features that AWS offers. In other words, users trade their bare-metal servers and VPSs in favor of EC2 VMs and are no better off than before. And now, they also need to have a plan for backups, security, and staging sites (Most AMIs only support one WordPress install).

Here’s how I like to design a scalable and highly-available stack for WordPress using AWS: 

- Start with appropriately sized EC2 instances (At least two).
- Use an application load balancer to route traffic across instances.
- Use RDS / Aurora for database hosting. A separate database server facilitates horizontal scaling of web nodes.
- Offload static assets to S3

With a stack like this, you can add more EC2 instances as the traffic increases and delete them as needed. Elastic Beanstalk can handle this automatically if the traffic is highly variable.

You can make this stack more reliable and cost-effective by using multiple availability zones for EC2 and using spot instances to handle traffic spikes.

Granted, this is more work, but it helps WordPress scale a lot further than using a pre-created image meant for prototype sites.
A simple way exists… but it’s not that simple!
Tags: simplicity, webdev, productivity, coding
Published: 2020-01-07 21:53:33

I remember back when I was starting to learn programming, my very first days with my hands into the code. As a new guy on this huge and new world for me, everything seemed so perfect, so smartly built, so complex and magical. I just loved everything about it. Reading books and watching tutorials for hours and hours started to become my new lifestyle. I, started to learn how to create my own magic, to write those complex and smart lines of code…

But then, something really changed… I was not a new guy on the coding world anymore. Things I wanted to create required more work to do and hours and hours slowly became days and days. Smart and complex solutions were just becoming more and more complex but not smarter. Complex was not magical to me anymore!

Something really changed… All those years admiring complex works of other people, thinking how smart one should be to write such number of lines of code, to work on such huge code bases… I thought that should be very hard to do. And yes, it was; not smart and absolutely not efficient anyway.

Something really changed… I started to learn how not to love complex anymore. I started to love something else, quite the opposite in fact. Yupp, you are right: **simplicity**.

I started by replacing many rows on many places in my code with some tiny lines that were doing the same job. Creating service classes and functions were becoming my hobby. I started developing new ways of thinking. I was really enjoying it. I thought that thinking simple would solve many of my problems and on top of that, it would be more easy. But ohhh boy, how wrong was I.

I never thought that creating something simple would be so hard. It was unbelievable what I found. May I present to you the irony itself: *The hardest and most complicated part of my job was creating something simple*.

I found myself many times knowing how to do or write something but thinking very hard because I wanted it to be and to look simple. But you want to know what’s the funniest (not so) part: How do you tell someone that you’re thinking so hard just to create something simple? People want results. They don’t really care if it’s simple or it’s complicated, they want something they can see, they can touch…

But I didn’t care either. I was creating my own magic and I wanted to do that by my own rules. And of course people asked again and again, why I was taking so much time just to make something simple, why I was obsessed with this word. My answer to that was: I’m doing a favor to my future self, I’m saving HIS time!

**Simplicity is smart, simplicity is worth it…**
Heroku CLI for Rails
Tags: rails
Published: 2020-01-07 21:51:24

Sometimes, you have to fix at the Heroku CLI for like this situation.

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

(I met this after I had added `devise` gem)

## 👍 First of all
### 1. login to heroku CLI
```sh
$ heroku login
heroku: Press any key to open up the browser to login or q to exit:

Opening browser to https://cli-auth.heroku.com/auth/cli/browser/xxxx
Logging in... done
Logged in as xxxxx@xxx.xxx
```

### 2. list apps
Make sure which app you want to manipulate.

```sh
$ heroku apps
=== xxxxxxxxx Apps
aaaaa
bbbbb
ccccc
```

## 🐛 Debuging
```sh
$ heroku logs -a [app_name]
$ heroku logs --tail -a [app_name]

$ heroku run rails c
```

## 👍 db:migrate
```sh
$ heroku run rake db:version -a [app_name]
$ heroku run rake db:version -a eventer-prototype
```
GUI for services like https://patchbay.pub/
Tags: showdev, webdev, automation, http
Published: 2020-01-07 21:47:57

---
title: GUI for services like https://patchbay.pub/
published: true
description: Read patchbay.pub for the best example of how this works. The real benefit you get from this GUI is the ability for local notifications. That is to say, you can get a little ping on your desktop when a subscriber resolves. To see this in action, click "Add" and then execute the CURL command and accept notifications when prompted.
tags: showdev,webdev,automation,http
cover_image: https://i.imgur.com/kkhV7Rp.png
---

[https://patchme.link](https://patchme.link)

Read patchbay.pub for the best example of how this works. The real benefit you get from this GUI is the ability for local notifications. That is to say, you can get a little ping on your desktop when a subscriber resolves. To see this in action, click "Add" and then execute the CURL command and accept notifications when prompted.
Is Virtual-DOM Needed? A Simplified Example
Tags: javascript, react, webdev, vue
Published: 2020-01-07 18:54:41

Before we start, let's see if the browser DOM is slower than all the javascript code that's executed on the javascript engine.

Instead of all the Virtual DOM code, let's take a very small javascript snippet where an array collects the incremented number over a loop. After the loop ends, it adds an array of numbers to the DOM. 

In the second case, let's update the DOM inside the loop on every increment. 

Here is the screenshot from jsperf where a small test case was written to compare. And the result looks as shown below,

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

The results clearly show that updating DOM for every increment is **100% slower** than a javascript snippet execution and to update the DOM only once.

## Let's See Why It Is 100% Slower?

To revisit basics, Javascript engine executes all the code first and then DOM plus CSSOM has to be ready. Only after that, the first pixel on the screen will be painted. 

DOM is to Browser Engine & Javascript is to Javascript Engine. Whenever a DOM update happens, both the engines need to communicate bringing in the lag.

Due to workflow that happens before the first paint, every time the DOM is updated via javascript code ` domElement.innerHTML = "someValue" `, the CSSOM also needs to complete. It adds further to the delay. Again the next line of javascript code is run. This needs the switch between the execution by javascript engine and browser engine unless defer or async tags are used.

## Virtual DOM Helps

Virtual DOM having a tree that's stored and executed by javascript Engine itself makes things a lot less slow. 

- The number of times both the engines communicate reduces.
- There is no need for CSSOM to complete as the styles need not be applied in Virtual DOM.
- Every time the Virtual DOM updates, there is no switch of execution as it is run by only Javascript Engine.
- Though it is a good practice not to update the Virtual DOM also whenever it is not needed, there is quite a good margin on performance loss that can spoil our application performance.
- This means smooth user interaction, faster first paint time and hence a better SEO ranking as well.
- We are not even speaking about efficiently writing a Virtual DOM. Yet, it is beneficial if we just take care of very few scenarios too.

From all the cases, for now, Virtual DOM is a lot beneficial. This will continue to be the same unless the browsers come up with a strategy to address the DOM update delays.

*A comment on the above reading would be a lot helpful for me to improve my writings further. Thanks for the time!*
Learning Bootstrap in 2020. Is it worth it?
Tags: discuss, bootstrap, css
Published: 2020-01-07 21:39:39

I am a babe front-end dev.
While I get along with pure CSS, I often see in Job ads Bootstrap as a requirement.
So I was wondering if it is worth to go and learn bootstrap.
Give me the PROs and CONs

p.s. While learning a new thing is always worth, I have limited time
Learn RxJS with this free book that I've written
Tags: javascript, webdev, showdev, rxjs
Published: 2020-01-07 21:28:42

---
title: Learn RxJS with this free book that I've written
published: true
description: 
tags: javascript, webdev, showdev, rxjs
---


Hey everybody. Some time ago I wrote a free book on RxJS. I've now moved it to https://softchris.github.io/books/rxjs/

It contains the following:

- [Basics](https://softchris.github.io/books/rxjs/async/)
- [Operators](https://softchris.github.io/books/rxjs/first-look-operators/)
- [Concepts](https://softchris.github.io/books/rxjs/observable-anatomy/) such as Observables, Observer, Producer etc
- [Error handling](https://softchris.github.io/books/rxjs/error-handling/)
- HTTP with [ajax operator](https://softchris.github.io/books/rxjs/operators-and-ajax/) and [cascading calls](https://softchris.github.io/books/rxjs/cascading-calls/)

and more

Enjoy

Chris
Clean Architecture: A Craftsman's Guide to Software Structure and Design by Robert C. Martin
Tags: review, architecture, design, agile
Published: 2020-01-07 20:58:39

It is a compilation of ideas expressed in multiple articles written by the legend of the software craftsmanship community. 

The book contains a historical overview of software development techniques. The primary goal of the book is to describe the general rules to design a software system and organize a codebase.

# For beginners:
The book gives some necessary context for the software development process. Most of the book might be beyond comprehension.

# For experienced:
It exposes readers to the author's wisdom gained and promotes a sensitive attitude toward software architecture. Some of the ideas might be too radical, however useful for a software developer’s purview.

More information about the book is available [here](https://www.goodreads.com/book/show/18043011-clean-architecture).
A Neumorphic OP-1 in HTML and CSS
Tags: codepen, html, css, design
Published: 2020-01-07 20:12:53

Inspired by Neumorphism, a new trend in UI design, I've coded a web version of an OP-1 synthesizer by Teenage Engineering. (Check it out in 0.5x zoom)

What do you think about the latest trend and its possible applications in the UI design? 

{% codepen https://codepen.io/liva_raita/pen/zYxpLjJ %}