teleren/devto huggingface dataset:
Machine Learning for JavaScript developers
Tags: machinelearning, javascript
Published: 2020-05-16 19:02:56

---
title: Machine Learning for JavaScript developers
published: true
description: 
tags: #machinelearning, #javascript
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/2n4eyuzhdl4f75o4kzqe.jpg
---

“OMG… I only needed to implement a simple model !!" is what I said, after finding myself stuck, wasting days and days of my valuable project time learning Python syntax, Python ML libraries, and Python best practices. So, I decided to build a course around this topic to save your time and provide you with what you need to flourish 😄.

{% twitter 1261714242371280896 %}

If you don’t want to waste time learning another language to implement your ML model, need to learn more about ML libraries in JavaScript or you are simply curious about Machine learning in general. Then check out our new course and signup at https://mlforjs.dev where we share news about the course, the course progress, and some free perks.

During our course, we’ll be guiding you through various Machine Learning algorithms and the ways you can implement them effectively in JS. All with the right amount of math that’s good for everybody.

Are there any projects or examples, that we’d be providing? You might be asking. Absolutely, all algorithms will be explained using thorough examples. Not only that, you might also need to get your hands dirty with some challenges we will be providing 😉. Psssst: We’ll also make sure that all of your questions got answered along the journey so don’t be afraid to ask 😉.

For more details head to https://mlforjs.dev and join the mailing list where we share news about the course, the course progress, and free videos.
'as const' in Typescript, better constant object support in IDE
Tags: typescript, beginners, javascript, productivity
Published: 2020-05-16 18:46:17

In most projects we have some kind of **global config object**. You may store there urls to API endpoints, constant string values, default values of parameters for some external scripts/services etc.

Example of the **global config object**:

```javascript
const config = {
  a: 84595,
  b: 'some string',
  c: {
    items: ['item1', 'item2', 'item3'],
  },
}
``` 

If you are using **Typescript** in your project with modern IDE (like **Visual Studio Code**), you will get below feedback from it:

```javascript
const config: {
    a: number;
    b: string;
    c: {
        items: string[];
    };
}
```

This feedback is already useful. While working on your code and accessing your config you will know that **config.c.items** is an array of strings, but you can get much more almost for free! Check below code:

```javascript
const config = {
  a: 84595,
  b: 'some string',
  c: {
    items: ['item1', 'item2', 'item3'],
  },
} as const
```

The only difference in this piece of code is the `as const` added after the object definition. It will give you below feedback from IDE:

```javascript
const config: {
    readonly a: 84595;
    readonly b: "some string";
    readonly c: {
        readonly items: readonly ["item1", "item2", "item3"];
    };
}
```
Now you see exactly what value is stored under each property of the **global config object**.
Simple (and naïve) way to mark private URLs as invalid
Tags: ruby
Published: 2020-05-16 18:19:38

I'm working on a new side project, and I needed some code to check that a user-supplied URL won't be accepted if it's a known private address... here's a [gist](https://gist.github.com/stympy/f831f3ad68db28ec60efc9737e09050a) with some quick code I wrote.
Changing CSS with JavaScript
Tags: javascript, beginners
Published: 2020-05-16 18:17:27

---
title: Changing CSS with JavaScript
published: true
description: style.anyCssProperty & style.setProperty(property,value)
tags: javascript, beginner
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/fqkuxhfpjdogzrsxje48.jpg
---
I use two ways to change the css via JS:
```element.style.cssProperty = value```
or
```element.style.setProperty(cssProperty, value)```


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9lsmwmfubmhyq98jmyt1.png)
[Series] JS Tips & Tricks - Ep. 1
Tags: javascrip, webdev
Published: 2020-05-16 17:49:32

# Introduction
A lot of Javascript tips, tricks, and code snippets are widely available, but not always even easily accessible. In this series, I will post on a regular basis helpful code snippets, tips, tricks that I used or find useful for JS-development


### **Snippet 1 - RGB to Hex**
Transforming an RGB-color value to a hexadecimal value is an easy task if you only have one color to convert, and a browser to find an online RGB(a) to hex transforming tool. But when you have multiple RGB values to convert, the next snippet makes life a lot easier.

```javascript
function rgbToHex(r, g, b) {
  return ((r << 16) + (g << 8) + b).toString(16).padStart(6, "0");
}
```

### **Snippet 2 - Array to HTML List**
A short snippet to visualize array items into a HTML ordered or unordered list where the list items are dynamically added to the ``<ol></ol>`` or ``<ul></ul>`` tags
```javascript
function arrayToHTMLList(array, listId) {
  let el = document.querySelector("#" + listID);
  return el.innerHTML += arr.map((item) => `<li>${item}</li>`).join("");
}
```

### **Snippet 3 - Is bottom of page visible**
Web-development sometimes requires you to trigger a set of events when the bottom of the page is reached. The boolean that is returned from the following function will let you know if the user has reached the bottom of the page or not.
```javascript
function isBottomOfPageVisible() {
  return document.documentElement.clientHeight + window.scrollY >=
    (document.documentElement.scrollHeight || document.documentElement.clientHeight);
}
```
Combinar Wireguard con Pi-hole
Published: 2020-05-16 17:26:19

Por ahora había explicado cómo crearnos nuestra propia [VPN casera](https://dev.to/nervi0s/wireguard-con-raspberry-pi-3i60) y cómo implementar [Pi-hole](https://dev.to/nervi0s/pi-hole-1flo) como nuestro Servidor DNS. Hasta este momento Pi-hole estaba funcionando en nuestra LAN. 

Bien, ahora vamos a cambiar una pequeña configuración para combinar el uso de nuestra VPN con Pi-hole, de esta forma conseguiremos bloquear anuncios incluso estando "fuera" de nuestra LAN haciendo uso de nuestra VPN.

El cambio que vamos a realizar es en el archivo de configuración del cliente, que habíamos llamado **cliente1.conf**.

Lo único que debemos hacer es cambiar la dirección IP del DNS del archivo mencionado antes, por la dirección IP de nuestro servidor DNS Pi-hole, es decir, la dirección de la Raspberry.

Imaginemos que estaba así:
```go
[Interface]
Address = 123.123.123.2/32
PrivateKey = <Clave privada del cliente>
DNS = 8.8.8.8

[Peer]
PublicKey = <Clave pública del servidor>
AllowedIPs = 0.0.0.0/0, ::/0
Endpoint = AquíVaLaIpPúblicaDeTuRed:51840
```
Ahora debe estar así:
```go
[Interface]
Address = 123.123.123.2/32
PrivateKey = <Clave privada del cliente>
DNS = AquíVaLaIPPrivadaDeLaRaspberry

[Peer]
PublicKey = <Clave pública del servidor>
AllowedIPs = 0.0.0.0/0, ::/0
Endpoint = AquíVaLaIpPúblicaDeTuRed:51840
```
A continuación como expliqué en el [post de Wireguard](https://dev.to/nervi0s/wireguard-con-raspberry-pi-3i60) nos generaremos un código QR y trasladaremos la nueva configuración al cliente Wireguard de nuestro smartphone.

Y eso es todo, con este sencillo cambio ahora disponemos de más ventajas a la hora de usar nuestra VPN.
What are the best open source GoLang frameworks? 
Tags: go
Published: 2020-05-16 17:19:39

<a href="https://golang.org">Golang</a> is developed at Google. It was introduced in 2009. Golang has been proved as a static language yet it has great power of interfaces that are highly scalable.

Before working with frameworks, you should <a href="https://golangr.com">learn the basics of Go</a>. Then you can import the framework you want and use it to build your apps.

Some frameworks include:

* <a href="https://github.com/gobuffalo/buffalo">Buffalo</a>
* <a href="https://goji.io/">Goji</a>
* <a href="https://beego.me/">Beego</a>
* <a href="https://github.com/gocraft/web">Gocraft</a>
* <a href="https://golang.org/pkg/net/http/">Net/HTTP</a>
* <a href="https://revel.github.io/">Revel</a>
* <a href="https://github.com/paulbellamy/mango">Mango</a>

You can find a list of packages on <a href="https://golang.org/pkg/">this page</a>. 
To search packages you can use <a href="https://godoc.org/">godoc</a>
MQTT vs HTTP at a Glance!
Tags: 100daysofcloud, gads, alc, cloud
Published: 2020-05-16 17:14:35

2,5.

Today I will just talk about Communication with Devices. 
I'm gradually developing interest for IoT and will actually work on the projects I have always wanted to work on. 

*MQTT vs HTTP at a Glance*

![Alt MQTT vs HTTP](https://dev-to-uploads.s3.amazonaws.com/i/n3ii2ka43wpar1h5ph2b.jpeg)

MQTT is an industry-standard IoT protocol (Message Queue Telemetry Transport). It is a publish/subscribe (pub/sub) messaging protocol.

HTTP is a "connectionless" protocol: with the HTTP bridge, devices do not maintain a connection to the cloud. Instead, they send requests and receive responses.

From Industrial IoT on Google Cloud Platform on Coursera

Delivery Guarantees
MQTT has three levels of service:

- At most once. Guarantees at least one attempt at delivery.
- At least once. Guarantees the message will be delivered at least once.
- Exactly once. Guarantees the message is delivered only once.

MQTT also has:

- Last will and testament. If a client (ie device) is disconnected unexpectedly, the subscribers will be notified by the MQTT broker.
- Retained messages. New subscribers will get an immediate status update.

The ride is getting more interesting for me!

[Protocols - GoogleCloud ](https://cloud.google.com/iot/docs/concepts/protocols)
Stackdriver command line viewer(helper) ///
Tags: appengine, logging, fzf, helper
Published: 2020-05-16 17:08:28


I'm boring using stackdriver logging console.

I wanna just only terminal.

So I created for appengine. done.


### 🛢command example

```sh
# error severity
$ gaelog -e
# http status >= 400
$ gaelog -r
# with query
$ gaelog -e "log like '%POST%'"
```

### 🎞Terminal Play

{% asciinema 330760 %}

### 🧸 My Gist

[Gist Link](https://gist.github.com/YooAppn/fd1f1ad4de84b9cee392bc44e3500b55)

{% gist https://gist.github.com/YooAppn/fd1f1ad4de84b9cee392bc44e3500b55
file=README.md %}
How to use your free time? ⏰
Tags: webdev, node, javascript
Published: 2020-05-16 16:30:08

### Hello everyone!🤗
Today I will try to give you some fun projects to work on in your free time. I personally think that these little projects will definitely help you improve your knowledge.

### What is the purpose of these projects?🤔
The purpose of these projects is to face new problems and troubles that you will be able to face throughout your dev career. 

### RESTful API👩‍💻
Why RESTful API? For me personally, building API's helped me get to know the backend aspect and what it actually takes for your data to get to your fetch request. You can have a lot of fun building these. I recommend making simple CRUD API's for example Jokes API that you can call to get some jokes and you can also put in a cool random get request that gives a random joke to the user that is fetching. I made one of my own using Vue.js for frontend, node.js combined with Express.js and MongoDB. You can check it out: [Random Programmer Puns](https://randompuns.netlify.app/).

### Blog📃
Building blogs is time-consuming but the end result will always make you happy and proud of your result. Building a blog will take you to combine the RESTful API I mentioned above and a frontend which will be your glue. I suggest using Vue.js or React.js for creating the frontend but you can also use other frameworks or no framework at all! You can also make your blog use markdown just as Dev.to does! This is a really cool project to use especially to add to your portfolio or your CV. It will combine all of your skills!

### Complicated website layouts🖼
Creating complicated website layouts is tedious but in the end, it will make you ready for real-life projects that you will face. You can take inspiration from dribble designers, design it yourself, or take part in an HTML & CSS challenge. You can also brush up on your SCSS knowledge by combining a lot of mixins to save your time.

### The end!👋
This is all that I've prepared so far. I hope that you liked the idea behind this post. I love talking about code and being connected to people that like talking about it too!
Data Persistence in Kubernetes | Kubernetes Volumes simply explained
Tags: kubernetes, devops, docker, tutorial
Published: 2020-05-16 16:53:24

###The problem###
**Kubernetes doesn't provide data persistence out of the box**, which means when a pod is re-created, the data (of a database application for example) is lost. 🙉
So, ***you*** need to create and configure the actual physical storage and manage it by yourself. 

###How to do it 👩🏻‍💻###
Once configured, you can use that physical storage using Kubernetes storage components. 
In this video I show you 3 different Kubernetes volume components, that you need to use to connect the actual physical storage to your pod, so that the application inside the container can access it.

**3 Volume Components**
- The 1st component **"Persistent Volume"** is a cluster resource, like CPU or RAM, which is created and provisioned by administrators. 
- The 2nd component **"Persistent Volume Claim"** on the other hand is a user's or pod's request for a persistent volume. 
- With the 3rd component **"Storage Class"** you can dynamically provision Persistent Volume component and so automate the storage provisioning process.

![Kubernetes Volumes](https://static.wixstatic.com/media/e7182f_182aa6f2aba54bd5abeb596f56729d4a~mv2.png)

####ConfigMap and Secret as Volume Types####
ConfigMap and Secret components can be used to:
1. create individual key-value pairs, like db credentials or db url
2. but also create configuration files, that can be **mounted into the pod as volumes**


You can find the full video here:
{% youtube 0swOh5C3OVM %}

-----------------
**Kubernetes 101** ► [Compact and easy-to-read ebook bundle 🚀](https://www.techworld-with-nana.com/e-books) 
It's a handy way to quickly look something up or refresh your knowledge at work and use it as your cheatsheet  😎


I'm happy to connect with you on 🙂
- [Private FB group](https://www.facebook.com/groups/techworldwithnana)
- [Twitter](https://twitter.com/Njuchi_)
- [YouTube](https://www.youtube.com/channel/UCdngmbVKX1Tgre699-XLlUA?sub_confirmation=1)
- [Instagram](https://www.instagram.com/techworld_with_nana/)
Deno - O novo runtime JavaScript e TypeScript.
Tags: deno, javascript, typescript
Published: 2020-05-16 16:52:38

Desde o final de 2018, Ryan Dahl, criador do Node.js, trabalha na construção de um novo runtime JavaScript. Apesar de ser criado pelo mesmo criador do Node.js e a semelhança no nome (node ao contrário), o Deno foi construído do zero com implementações totalmente novas. 

No dia 13/05/2020 foi anunciado oficialmente por Ryan Dahl, Bert Belder, e Bartek Iwańczuk a versão 1.0 do Deno, e explicando qual a razão que levaram a criação desse novo runtime.

E um dos pontos que valem ressaltar é que o Deno da total suporte a TypeScript de forma nativa, sem precisar de outra solução(como um pré compilador para converter o TypeScript em JavaScrypt assim como acontece no node).
 
Veremos um exemplo simples apresentado em seu blog

```javascript
     import { serve } from "https://deno.land/std@0.50.0/http/server.ts";

     for await (const req of serve({ port: 8000 })) {
         req.respond({ body: "Hello World\n" });
     }
```

Neste exemplo é importado um módulo completo do servidor HTTP, e não é necessário nenhum arquivo de configuração adicional e nem instalação a ser feita, basta com um único comando para que seja executado

```bash
     deno run example.js
```

Um ponto bem destacado já no título do site oficial é "Um runtime seguro", isso porque ele é executado como nos navegadores, executado em uma "caixa" de proteção segura sendo assim os scripts não podem acessar o disco rígido, abrir conexões de rede ou executar outras ações potencialmente maliciosas sem permissão. Os navegadores, por exemplo, fornecem APIs para cessar câmera e microfones, mas os usuários devem primeiro dar a permissão. O Deno fornece comportamento análogo no terminal. O exemplo acima falhará, a menos que passemos junto ao comando o --allow-net.

```bash
     deno run --allow-net example.js
```

#Promises 

No Deno, os soquetes ainda são assíncronos, mas o recebimento de novos dados exige que os usuários o expliquem explicitamente com 'read()'. Nenhuma semântica de pausa extra é necessária para estruturar adequadamente um soquete de recebimento. Isso não é exclusivo para soquetes TCP. A camada de ligação de nível mais baixo do sistema está fundamentalmente ligada às promessas - chamamos essas ligações de "ops". Todos os retornos de chamada em Deno, de uma forma ou de outra, surgem de promessas.


Nestas primeiras impressões o Deno se mostra muito performático e inovador com o suporte nativo de typescript, mas ainda é muito cedo para podermos a utilizar em produção, mas já é uma boa opção de se ir acompanhando e estudando sobre, e dai fica a pergunta. 

**O Deno substituirá o Node?** 

Se quiser saber mais a fundo sobre o Deno, em seu site oficial tem muito conteúdo legal e exemplos de utilização. 
Link: https://deno.land/v1

Deixei nos comentários o que achou desta publicação e ideias para os próximos,  um grande abraço
Starting My Blogging Journey.......
Tags: webdev, html, css, javascript
Published: 2020-05-16 16:36:50

Hello my gorgeous friend. For past 1 week I was thing for making blog I read, from where should I start? Is it the right time to start? blah, blah, blah.
Their where my question regarding this. So I decided I will be posting my blog to this community, and in sometimes If I feel the same way I'm feeling now, then I will be making my blog site with full dedication.

Literally, I have not comeup with that what type blog I have to make. Only the thing I know at the present is I have to make.

So, please support me by sharing my blog only if you like then or add a bit of values to your programming life.

Atlast, give me some ideas/topic on which you want blogs.
Which MacBook is better for web development?
Tags: help, tool, laptop
Published: 2020-05-16 16:27:27

I’m thinking of buying a new MacBook. 
Any idea of which one is better for web development? 🤔
(If buying Mac Air, I’ll upgrade the core and RAM. )

1. Air, 1.2GHz 10th-generation i7, 16G RAM
2. Pro, 1.4GHz 8th-generation i5, 8G RAM


By the way,
could anyone explain to me what’s the difference between 1.2GHz and 1.4GHz? Thanks! 😅
Looking for Coding Buddy!
Tags: beginners, java, fun
Published: 2020-05-16 16:02:46

 I'm Java beginner level coder and I’m looking for a coding buddy to learn Java with. We could hold each other accountable and stay motivated together. And it would be pretty good if you knew Russian, if no doesn't matter. So if you want u can write me in my telegram acc @xenialevi or down below
Power Up Gatsby with Auth
Tags: react, gatsby, tutorial, webdev
Published: 2020-05-16 16:00:38

> This video is a talk from [*Byteconf React 2020*](https://www.bytesized.xyz/react-2020), a free, live-streamed React conference that aired on May 1st-2nd, 2020. Join our newsletter at the [conference website](https://www.bytesized.xyz/react-2020) to stay in the know about future conferences, videos, and more!

Gatsby rose to fame as a static site generator, but it’s also an amazing platform for building dynamic sites! Wouldn’t it be awesome if we could add a user profile with access to protected data in our Gatsby app? Like Mario’s fire flower or Link’s hook shot, adding auth will power up your dynamic Gatsby site. Just one question: is it any different than adding auth to a regular React app?

In this talk, you’ll learn about Gatsby’s build process and runtime and how they impact setting up auth. You’ll also learn how to use Hooks and Context to build your auth sidekick. Finally, you’ll learn some tips and tricks to avoid common pitfalls with adding auth to Gatsby. By the end, you’ll be ready for the next level of your Gatsby quest!

Thanks to [Sam Julien](https://twitter.com/samjulien) who presented this talk at [Byteconf React 2020](https://www.bytesized.xyz/react-2020)!

{% youtube GdsKB6_6pdk %}

If you enjoyed the video, give it a thumbs-up, and [subscribe to our channel](https://www.youtube.com/channel/UC046lFvJZhiwSRWsoH8SFjg?sub_confirmation=1) for more web dev content every week. We also have a newsletter where we send out what's new and cool in the web development world, every Tuesday – [join here](https://www.bytesized.xyz/newsletter)!
Web development exercises for beginners
Tags: webdev, javascript, html, css
Published: 2020-05-16 15:57:01

---
title: Web development exercises for beginners
published: true
description: What are some great web development exercises you did while you were learning how to code?
tags: webdev,javascript,HTML,CSS
---

What are some great web development exercises you did while you were learning how to code?

I remember when I was learning, my first language was PHP. At the time, JavaScript wasn't booming yet so we had to do lots of backend alongside frontend work. My two main tutorials were Login forms and Contact forms.

I specifically remember those because Login forms taught me lots about security, correctly hashing passwords, how to protect from SQL injection, not revealing too much information in your errors, and others.

Contact forms taught me about user experience, I learned a lot about HTML and CSS, styling buttons and inputs, etc.

What was/is your favorite exercise or tutorial?
100daysofcode Flutter
Tags: 100daysofcode, flutter
Published: 2020-05-16 15:51:21

day 68/100 of #100daysofcode #Flutter
Learning Flutter , courses Udemy from
@maxedapps

Today learn about making animation in flutter from scratch
https://github.com/triyono777/100-days-of-code/blob/master/log.md
Google's guide and chart for where to implement application logic and rendering
Tags: javascript, webdev, react
Published: 2020-05-16 15:40:33

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/7l1j339bta3hn2ofhrge.png)
Source: https://developers.google.com/web/updates/2019/02/rendering-on-the-web

Found this chart from a February 2019 Google Developer update which was very helpful for me in making architecture decisions and choosing frameworks to use (React frameworks like Next.js, Gatsby etc.) – instead of just going with the most heavily-marketed and hyped ones!

Note the tradeoffs between performance, SEO and overhead costs. Personally though, I don't think the Time To First Byte (TTFB) performance measure they use is that significant a consideration to take into account.

“Trisomorphic” rendering which was mentioned in the article, and not discussed as widely, seemed promising:
Use streaming server rendering for initial/non-JS navigations. Then have your service worker take on rendering of HTML for navigations. This keeps cached components and templates up to date. Enables SPA-style navigations to render new views in the same session. Works best when you share the same templating and routing code between the server, client page, and service worker. 

If you are doing client-side rendering, make sure you implement aggressive code splitting and lazy-load Javascript!

--
If you found this helpful, I run a newsletter featuring more of such content at: https://pragmaticcs.substack.com/

Cheers,
Zac