teleren/devto huggingface dataset:
Full Tutorial #1: Microservices Chat App Using React, Node.js, TypeScript and GraphQL
Tags: react, node, webdev, javascript
Published: 2021-01-08 08:18: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!)_

This is part 1 in a full tutorial on how to set up a React/Node.js/TypeScript chat app with a microservices architecture. In this project, I make use of:

- [React](https://reactjs.org/);
- [Node.js](http://nodejs.org/);
- [TypeScript](http://typescriptlang.org/);
- [Socket.IO](https://socket.io/);
- [Docker and Docker Compose](http://docker.com/);
- [GraphQL](https://graphql.org/);
- [TypeORM](https://typeorm.io/) (with [MySQL](https://www.mysql.com/));
- [Redux](https://redux.js.org/);
- [Styled Components](https://styled-components.com/); and
- [React Hook Form](https://react-hook-form.com/).

I hope you enjoy!

{% youtube PUmXufS9y-8 %}

Happy coding!

Source code: [https://github.com/lucaschen/microservices-chat-demo](https://github.com/lucaschen/microservices-chat-demo)
Is C Most Underrated Programming Language?
Tags: discuss, c, beginners, csharp
Published: 2021-01-08 07:45:22

# Introduction

C was the first programming language that I learned in systematic ways, thanks to my college. At that time I used to think about where I am going to use this language but in books, it wasn't clean like water, just a paragraph about it.

![C](https://dev-to-uploads.s3.amazonaws.com/i/nyj855ggghu7rcc6ib7c.gif)

I see C is not a very popular language among beginners and even professionals, so today we are going to look into the use of the C language in the industry.

---

## **Operating System**

Program scripted in C language gets executed with speed as compared to other assembly languages. C is primarily used in developing various operating systems.

![Operating System](https://dev-to-uploads.s3.amazonaws.com/i/sdzubkcnqp9jz5wcs97g.jpg)

The operating system using C language
- Linux
- Unix Kernel
- Microsoft Windows Utilities
- Android Operating System
- Many other Modern OS

---

## **Development of New Language**

C, directly and indirectly, helps in the development of many other programming languages due to its simplicity and efficiency in the execution of code.

![Development of New Language](https://dev-to-uploads.s3.amazonaws.com/i/gitekwq03rrexmzwszgn.png)

The language developed using C
- C++ (C with classes)
- D
- Java
- Javascript
- Perl
- Python
- And many more

---

{% post https://dev.to/surajondev/top-7-programming-books-recommended-by-programmers-2317 %}

---
## **Embedded System**

C language is used in an embedded system because of direct access to the hardware level, presence of C compiler, dynamic memory allocation. It plays a key role in performing a specific function by the processor.

![Embedded System](https://dev-to-uploads.s3.amazonaws.com/i/lkdzrlpt71qh8ohzgjt9.jpg)

Embedded System using C language
- MP3 Player
- Video game console
- Digital Camera
- Much More

---

## **Graphics and Games**

C language heavily involved in game development and contribute to the development of various games.

C language can be used by beginners to learn game development.

![Game Development](https://dev-to-uploads.s3.amazonaws.com/i/j7xxbzhvwp7dk79sa801.jpg)

Games Developed using C language 
- Old games like
     - Doom
     - Quake I, II, and III
     - Return to Castle Wolfenstein
- Modern games like
     - Chess
     - Bouncing Ball
     - Archery 

---

{% post https://dev.to/surajondev/css-tips-to-start-thinking-responsive-website-1ohh %}

---

## **Computation Platforms**
Algorithm and Data structure are swiftly managed by C programming language and it helps in faster computation. This helped C to be used for a higher degree of calculation.

![Computation Platforms](https://dev-to-uploads.s3.amazonaws.com/i/ce8wh7gsrcbiicrbpkmv.jpg)

Uses of C in Computation Platforms
- MATLAB
- Mathematica

---

# Discuss
- Is C the most underrated programming language? and Why?
- If not then which is the most underrated programming language and Why?

# Last Note
*Thanks for reading the blog post.*
Portfolio website for #dohackathon
Tags: dohackathon, digitalocean, submission
Published: 2021-01-08 07:27:56

## What I built
This is my First portfolio website which i have built and deployed using digital Ocean platform, i really enjoyed using the platform with beautiful UI and it clearly guided me in deploying projects in simple steps. 

### Category Submission: 
Personal Site/Portfolio


### App Link
https://ganapathi12-phfd6.ondigitalocean.app/


### Screenshots
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/qyea4jjwv5b7oapmnjjs.JPG)


### Description
This is simple portfolio website build using HTML,CSS,Javascript which containes all the information about my acheivements and academic performances. 
 

### Link to Source Code
https://github.com/ganapathi12/ganapathi12.github.io

### Permissive License
MIT License


## Background
I have been recently started learning HTML,CSS and Javascript and its the basic instinct of any web developer who tries to apply his knowledge and showcase their skills by building a proper portfolio which clearly represents the person's skills. so at the correct time this hackathon gave me a proper reason and became a platform to showcase my skills to the world.

### How I built it 
Even though my project is a static site, when i started exploring the digital Ocean console i have seen a lot of options which mae me more curious to learn about those technologies and see the technologies in action, so i started learning Django as a backend and created a small fun api and even deployed it in Digital Ocean. The whole console is beautifully built and helps in making things simple and clean.


### Additional Resources/Info
https://www.digitalocean.com/docs/app-platform/how-to/add-deploy-do-button/
Local Set-Up: Check!
Tags: devjournal, codenewbie, womenintech, career
Published: 2021-01-08 07:23:48

_This post was originally published on January 7, 2021 on [my blog] (https://alexlsalt.github.io/blog)._

Felt so proud of myself today at work for finally getting my local computer set up for everything.

Although I did have a bit of slight anxiety about exiting out of the programs because I was nervous about not being able to set everything up again. But I think that's normal, and I'm just looking forward to when this all seems like second nature (it usually comes sooner than we think!).

I also made sure to fully document my set-up process. Especially since I'm on Windows for the moment, the process is super convoluted, so I wanted to make sure that I was creating a roadmap for myself to be able to accurately retrace my steps (and at times, missteps).

That doc actually ended up coming in handy because I was able to also share it with my team for a closer look at how to go through the installation process on Windows.

Onto Day 4! Going to work on getting more familiar with Tailwind CSS and Eleventy today so that I can jump into my first official pair programming sesh (ahh!)


-------

P.S. I send weekly newsletters via email about the self-taught coding journey and my own coding adventures (and misadventures!)  [Sign up here if you want in on that! >>](https://ladies-code-collective.ck.page/e53b5fca44)
SingleNumber
Tags: javascript
Published: 2021-01-08 01:24:17

# Problem Statement

Given a non-empty array of integers, every element appears twice except for one. Find that single one. Note: Your algorithm should have a linear runtime complexity. Could you implement it without extra memory?

# Thought Process
My initial conclusion was that no, you couldn’t. Since there’s not a range for the possible numbers in the array and the array isn’t already sorted, you can solve in linear time if you used an object to store counts, but you need that extra storage or sorting is O(n log n).

But see, I forgot about XOR (^). For those of you who don’t play with bits, exclusive or takes two binary numbers and for pair where one number has the bit flipped and the other doesn’t, the resulting number has the bit flipped.

```
  01101
^ 10110
= 11011
```

So if you have a number and XOR it by 0, you get the number. If you have a number and XOR it by itself, you get 0.

Now, that’s helpful, but why would you care about XOR for this problem?

Let’s run through an example:

```javascript
const input = [4,1,1,2,2,4,5,1,2,1,2]
let num = input[0];

for (let i = 1; i < input.length; i++) {
    num ^= input[i];
    console.log(num);
}

/*
5
4
6
4
0
5
4
6
7
5
*/
```

# Explanation/Solution
Because all of the values that appear twice will eventually cancel themselves out, you’re left with that one solitary element that has no partner. No extra storage necessary. Linear time.

```
  100 // 4
^ 001 // 1
= 101 // 5
^ 001 // 1
= 100 // 4
^ 010 // 2
= 110 // 6
^ 010 // 2
= 100 // 4
^ 100 // 4
= 000 // 0
^ 101 // 5
= 101 // 5
^ 001 // 1
= 100 // 4
^ 010 // 2
= 110 // 6
^ 001 // 1
= 111 // 7
^ 010 // 2
= 101 // 5
```

Since we're working with an array of numbers, we can make use of an array method to accomplish the task in lieu of a for loop.  

```javascript
function singleNumber(nums) {
    return nums.reduce((a, b) => a ^ b)
}
```
Problem taken from [LeetCode](https://leetcode.com/problems/single-number/)
Scaffolding, template, boilerplate
Tags: scaffolding, boilerplate, template, sideprojects
Published: 2021-01-08 07:15:37

Hi, I was wondering about my Laravel project, which has been prepared for making all kinds of api side projects in the future as a .... And I was wondering, not being born British, is it a template, is it a boilerplate or is it a scaffolding? Or something else? Please share your understanding. Thank you.
My First Project: Design and Fabrication of a Cost-Effective Spin Coater
Tags: beginners, python, programming, showdev
Published: 2021-01-08 06:54:24

Hi there!

I would like to share with you my first project "Low Cost Spin Coater Device" that I made for the Engineering Design class I took in my undergraduate education in Electrical & Electronics Engineering.

With this project, I aimed to support the free software philosophy through to the project's completely free and open source design, which has MIT License, and to make the product accessible to a wider audience than the ones sold in the market with low cost.

The spin coating method is a commonly used coating method to obtain uniform thin material films, usually polymers, on the surface of a substrate using the concept of centrifugal force. This method, which is easy to use, safe and inexpensive, is highly preferred for many applications where high quality layers are required such as microcircuit manufacturing, compact discs, magnetic disk coatings, polymer electronic devices.

The device allows the user to define up to 10 different stages in 500-7200 RPM and 5-3600 seconds intervals, except for 5 different quick programs in its memory.

The device, which I completed with a cost of less than 70$, can reach the desired speeds within an average of 5 seconds and keep it constant with an average of 6% error. This error can decrease to 2% at high speeds.

You can access all parts of the project on GitHub and use it as you wish.

GitHub Link: https://github.com/yetkinakyz/SpinCoater

![SpinCoater Project Result](https://dev-to-uploads.s3.amazonaws.com/i/gvg31qjschkoh7h6nxtj.jpeg)
Vue.js + Vuex form binding circuit
Tags: vue, vuex, nuxt
Published: 2021-01-08 06:48:20

---
title: Vue.js + Vuex form binding circuit
published: true
description: This post is about showcasing the method I use when I need to sync form datas with Vuex store.
tags: vue, vuex, nuxt
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/9shfgzq1hyiofywoozbu.jpg
---

### Introduction

The state reactivity is one of the feature that make Vue.js really stands out, especially when using the v-model attribute within a form element. We can manage the local state (i.e inside a given component) very easily.

Things get a bit more complicated when someone needs to deal with Vuex store, and get the data centrally managed. We can send our data to Vuex via either actions or mutations, and can get them via mapped states or getters.

###  Problem

Vuex in its design, does not allow to change its state directly, this should be done via actions or mutations.  When using v-model on a Vuex state, we break this Vuex law and therefore get an error.

To bypass this common problem, [Vuex documentation](https://vuex.vuejs.org/guide/forms.html) provides a work around that make use of a modified computed property which contains getter and setter. Each form element has to be bound to this computed but I think this approach can become very verbose if our form contains a lot of fields.

### My approach

After a lot of research, studying different proposed developer approaches, I’ve always used the same pattern since the beginning which I find the most robust and straightforward: **bind the form components on a local deep copy of the Vuex state and keep updating this copy through a watcher**.

### Mindmap 

As a picture is worth a thousands words, I made an illustrated mindmap of the full circuit to get things as clear as possible :

<a href="https://res.cloudinary.com/lansolo99/image/upload/f_auto,q_auto/lansolo.dev/posts/vue-js-vuex-form-binding_1.png">
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/q9fp9hlllf4u0nehjf2m.jpg)
</a>

Note: I’m using the fetch hook as the entry point (I always work with Nuxt), but this can be replaced with the created/mounted hook.

By no mean I would pretend this is the best solution, but only one that suits me the best across all my projects so far. Let me know if you identify potential problems/optimizations with this one.
Personalizar notificaciones en Laravel.
Tags: laravel, php
Published: 2021-01-08 06:40:58

Dejo este pequeño tip para personalizar las plantillas de las notificaciones en Laravel.

Primero debemos publicar los archivos de las notificaciones:

```php
php artisan vendor:publish --tag=laravel-notifications
```

Ahora en "resources/views/vendor", ahí podremos editar la plantilla del markdown.


### Personalizar los colores

Si necesito personalizar los colores u otras reglas CSS de la plantilla, Laravel nos provee un comando para publicar estos assets:

```php
php artisan vendor:publish --tag=laravel-mail
```

Ahora en "resources/views/vendor/mail/html/themes/default.css" podremos personalizar los estilos de CSS.

## Algunos tips: 

- Para personalizar el enlace del header: 

```css
.header a {
    color: #3d4852;
    font-size: 19px;
    font-weight: bold;
    text-decoration: none;
}
```

- Para personalizar el boton "primary":

```css
.button-primary {
    background-color: #2d3748;
    border-bottom: 8px solid #2d3748;
    border-left: 18px solid #2d3748;
    border-right: 18px solid #2d3748;
    border-top: 8px solid #2d3748;
}
```

También puedes personalizar la acción de "error" y "success", justo abajo.

Espero sea de utilidad, saludos!
git cake: when is my README’s birthday?
Tags: git, bash
Published: 2021-01-08 06:34:59



Do you want to know when was a file/directory committed in your git history? Well here is `git log` at your rescue

```bash
git log --date=format:'%d %b %Y' --diff-filter=A --name-only --pretty='%n%C(yellow bold)🎂️ %ad%Creset by (%C(blue bold)%h%Creset)'

```

![git-cake-demo-paager](https://user-images.githubusercontent.com/34342551/103223519-6b366080-494c-11eb-9d54-acebd0179ffb.png)

Ok ok! Let me explain for you lazy asses

- `--date=format:'%d %b %Y'`

This is pretty much self-explanatory, suit this to your own preferred date format.

- `--diff-filter=A --name-only`

This lets you filter nodes that were Added(A). Other filters include: Copied(C), Deleted(D), Modified(M) or Renamed(R). Multiple filters can be used together e.g `--diff-filter=AC`.

The `--name-only` shows only names of changed files. If you had like to print some status as well use `--name-status`

- `--pretty='%n%C(yellow bold)🎂️ %ad%Creset by (%C(blue bold)%h%Creset)`

This is the beauty that is responsible for the line `🎂️ 18 Jun 2019 by (f72312c)`.

Git provides us with various format specifiers these include.

  - %n : newline
  - %h : abbreviated commit hash (short version, use %H for complete hash)
  - %ad : author date that respects the previously specified –date= option

[**Read git pretty docs**](https://git-scm.com/docs/git-log#_pretty_formats) for info. on all 50+ options

> When you feel you are absolutely free do a `git log --help` & read that manual.

You should add this in your `.gitconfig`.

```bash
[user]
	email = varshneybhupesh@gmail.com
	name = Bhupesh-V
[commit]
	template = /home/bhupesh/.gitmessage
[core]
	editor = nano
[credential]
	helper = store
[alias]
        cake = log --date=format:'%d %b %Y' --diff-filter=A --name-only --pretty='%n%C(yellow bold)🎂️ %ad%Creset by (%C(blue bold)%h%Creset)'

```

Now send me some presents, will ya? Please?

> Seems interesting?, [Subscribe 🚀](https://buttondown.email/bhupesh) to read more such cool stuff or just connect with me on [Twitter](https://twitter.com/bhupeshimself).
Crea extractos de texto en Laravel
Tags: laravel, php
Published: 2021-01-08 06:23:01

Laravel 7 agrega un nuevo método a la clase "Illuminate\Support\Str".

Supongamos que tenemos un modelo "Post" y al mostrar todos los posts en una vista tipo "index" o lista de posts, y en vez de mostrar todo el texto, queremos mostrar únicamente un extracto del texto, en Laravel podemos hacer esto de varias formas.

### Creando un Accessor:

```php
use Illuminate\Support\Str;

class Post
{
    const EXCERPT_LENGTH = 100;

    protected $fillable = [
        ..., 'body'
    ]

    protected $appends = ['excerpt'];

    public function getExcerptAttribute()
    {
        return Str::limit($this->body, Post::EXCERPT_LENGTH)
    }
}
```

So now in your blade files you can use this method:

Ahora podrás usar el accessor en tus vistas y en cualquier parte de tu codigo donde uses el modelo post.

```php
<h1>{{ $post->title }}</h1>

<p>{{ $post->excerpt() }}</p>

```

Tambien puedes usar una directiva blade especifica para esto, podemos crear un provider para directivas blade:

```php
php artisan make:provider BladeServiceProvider
```

Agregamos la logica para crear una directiva blade en el método "boot".

```php
/**
 * Bootstrap services.
 *
 * @return void
*/
public function boot()
{
    Blade::directive('excerpt', function ($text) {
        return "<?php echo Str::limit($text, 100); ?>";
    });
}
```

Y en tus vistas puedes usar la directiva así:


```php
<p>@excerpt($post->body)</p>
```

Espero que te sea de utilidad, saludos!
Top 5 DEV Comments from the Past Week
Tags: bestofdev
Published: 2021-01-08 06:10:45

---
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.

---

This is a true **[weekly win](https://dev.to/devteam/what-was-your-win-this-week-2gd1)**, @ziizium!

{% devcomment 19omc %}

@pris_stratton enjoyed **["5 JavaScript "tips" that might bite you back"](https://dev.to/snigo/5-javascript-tips-that-might-bite-you-back-2gie)** as much as I did!

{% devcomment 19oi3 %}

@jess is wondering **[what's on your 2021 reading list](https://dev.to/jess/what-s-on-your-2021-reading-list-4hgg)** and @scrabill kept it real:

{% devcomment 19p45 %}

**[Vue or React?](https://dev.to/ghamadi/vue-or-react-iih)** — @dskaiser82 has a balanced perspective from years of experience:

{% devcomment 1a4mn %}

@ara225 had a great question: **["What's the best way to represent time spent on open source on a CV or Linkedin?](https://dev.to/ara225/what-s-the-best-way-to-represent-time-spent-on-open-source-on-a-cv-or-linkedin-27hn)"** @fkhadra's thoughtful advice made me smile.


{% devcomment 1a0l8 %}

See you next week for more great comments ✌
Fre: another concurrent UI library
Tags: react, vue, preact, javascript
Published: 2021-01-08 06:10:33

Hello everyone, my name is yisar, a front-end enginer in China.

This is my first visit to media, and I want to share my framework with you.

React is very popular, especially after react 16. The most amazing thing is concurrent mode, which is not available in other frameworks.

Fre is the second framework to implement concurrent mode in addition to react. This implementation is different from the other vdom reconciliation algorithm. Its rendering is asynchronous, and many use cases are built on the premise of asynchronous rendering.

Fre is similar to react in many ways, such as fiber architecture using linked list, hooks API and functional component…

But at the same time, they are different. Fre has a better reconciliation algorithm. The most important thing is that fre only has 400 lines of code, the bundle size is just 1KB!

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

In most use cases, the performance of fre is close to that of vue3 and better than that of react.

At the same time, 1KB of code means that you can better understand the source code of fre, and even learn react with the help from fre.

It is worth mentioning that preact is as small as fre, but preact is completely synchronous. It does not support concurrent mode and keeps the opposite roadmap with react.

If you are looking for an alternative framework of 1KB react, fre is more suitable for you.

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

If you’re interested in concurrent mode, take a look at fre and you’ll get a ruby.

https://github.com/yisar/fre

I really need partners, because fre has a lot to improve, let’s build together.
How you enforce team members to use same node version
Tags: help, node, developers, backend
Published: 2021-01-08 06:03:25

---
title: How you enforce team members to use same node version
published: true
description: Need help to maintain same node version across team members
tags: help, nodejs, developers, backend
//cover_image: https://direct_url_to_image.jpg
---

Basically I use nvm to maintain different node version on my system. I want to know how can I warn or prevent user to install libraries in project with different node version because it may lead to bugs in production environment.