teleren/devto huggingface dataset:
How to change html &ldquo; entity colour in VSCode?
Tags: vscode, color, theme, custom
Published: 2020-08-06 21:05:02

The cover image shows how the Github colour-theme tint the html quotes entities like &ldquo and &amp and so on, but my favourite colour-theme Nostromo shown in the image below:

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

Does not apply any colour to those entities, I have looked at the entire colour-theme .json file to no avail. I would like to know what settings I need to change to apply those changes to my custom "workbench.colorCustomizations" settings. Hope that makes sense.

Any help will be much appreciated!

// END OF LINE
Frontend State Management , Meiosis and Mergerino to the rescue
Published: 2020-08-06 21:00:59

[mergerino](https://github.com/fuzetsu/mergerino): an immutable merge utility for state management.

[meiosis](https://meiosis.js.org/) : '...a simple pattern to manage state in your web applications'.

Nothing more to say, just admire.

```js
const merge = mergerino

const state =  {count: 0}
const update = m.stream();
const states = m.stream.scan(merge, state, update)
const actions = Actions(update)

states.map(state =>  view(state, actions)) 

function view(state, actions) {
  const {up, down, increment} = helpers(actions)
  m.render(app, 
    <div>
      <div>{state.count}</div>
      <button onclick = {increment(up)}>inc</button>
      <button onclick = {increment(down)}>dec</button>
    </div>
  )
}

function helpers (actions)  { 
  return {
    up : 1,
    down: -1,
    increment : (direction, incr = 1) => 
      () => actions.onclick(direction * incr) 
  }
}

function Actions (update) {
  return {
    onclick: onclick
  }
  function onclick (incr) {
    update({
      count: (value) => value + incr
    })
  }
}

```
You can test it here [MeiosisMergerino](https://flems.io/#0=N4IgZglgNgpgziAXAbVAOwIYFsZJAOgAsAXLKEAGhAGMB7NYmBvAHgBMIA3AAgjYF4AOiAwAHUcIB8LAPQdOkyiDgxY1YhHoJEIAAyIAjAE4QAXwrpsuHfgBWCKnQZNieGTO4liouIncBzCGJCAFcAI3w6LBlRDABrAA8ZYJgAWiwgwgAnaFSODBz4GQB3CDiIGQBZWjZVVMqMTH8YHAZU0uD6mE04CDhBNAGZACpuAAF7BO4sbmGPAYGnOGJpmCzm7n5V9bWINFoFtCWV5YxGTe5uYDoQhkRuXVNFrRWQ0TYzmAusfGWsmGwAAoAJQAbmeaGW3FOjDg31+xH+2F+1EagJwOwo0OInyxbw+jGBEKhGHUmkhFwAgmStID8Z8iYNITjYfgsGJATCvvxJJdOBAYMVOSyYFjSRotMDgdxDmBbjS0Nx+YLhbjuOLyXBpcABpdjlc3li2LRimgsXtqP9WsRTBdCKpRGs4ICNZLddN8P80LUsi7xFj3Zd2FxJIHLtxgwpgFzIrRbjbZPJQ4rw0GwiFiMR6Nx6NQoBBqHELsALVaXHTRMDTJILbJ05n6MnU2mM1nFbn84Xi6WWuXjaaq5JatQ663G2HEyH3Yynky5UcJYr7VBHVk4S6FVrLsAZSn-sQQllFTqU5c3tx7gYKGH+2h7qkr2Ge9aL9xARx-grzUcshcDNKeV3Zs3wA3lXUhfAOwLOJ3wgT9F1mXgf2ld1Z1nAZ5wVbhqUXdd6UJK53X3Q9jzDKDC3uci4lQ91MIQqi31LbUw3wmBARPYCbjuN9OAwKAQhgUClT4gTuAAaiQy0w1MRlLjQw4lCiURoDWPAwgwMJVCUFQ1FwvAABZ9MQXQzAsEBMBwPBIjgBwaHoRhmB0MwAF0qHzNA4m0VBzKsPAMWaHJ9iUQ9yB0LwfD8GRblEOJ-FjaJ-N2fYxl0fB9PwXQ5D6YgZESwLaHweAAFY2T2OxbOIABPR08DgS0IFEVxzEsSydAyYIcnIKgQrwcLfHcaLYvi3LMk6sYACYMrSkaOugUq0HKpQqpqnQ6pyRrTJa6wQHa7Jcj+AEsGCrJQpAPrIsGuKohmvaoFSA7sAmqbMoen57CW6rtrWhqmuc0wgA)
New rice up
Tags: i3, linux, ricing
Published: 2020-08-06 20:35:15

Today, I've decided to change from GNOME to i3wm. Using it for a few days, I loathe doing rices, since I've done it before and with more functionality in mind than visual appreciation!

So I decided to go overkill. Let's create a trello board so I don't get lost since it's a lot of shit, first of all and possible start to thinking about the layout of what I want and then some colors that I enjoy.

I did some look around to see what new programs have emerged in the linux scene and which I want to use, providing that they work and are appealing in terms of configuration.

I'll probably make a git repository to keep my sanity in check and get some way that can quickly change the colors from .Xresources file or something.
I'll look into that later.

First, I need to decide the layout for my status bar, which I'll be using polybar for.
Then rofi to for my menus! All my menus! It's a beautiful and pragmatic program for sure! Be sure to look into it.
Well, I still need to understand why I can't clear the notifications popups and in the center, using deadd-notification-center. I'm....

relax...
Polybar layout...
One thing at a time.

Seems like a plan!
Where's the will? I'll find it after finally seeing some results.
Video tutorial 🎥 When data is too big for Git
Tags: git, machinelearning, devops, tutorial
Published: 2020-08-06 20:32:24

{% youtube kZKAuShWF0s %}

Have you ever tried to put a large dataset or model weights into Git? Git is amazing except when it comes to big files... which happens pretty often in machine learning. 
 
As part of an [MLOps Tutorials series](https://www.youtube.com/playlist?list=PL7WG7YrwYcnDBDuCkFbcyjnZQrdskFsBz), I made a video covering:

- Git fundamentals for ML 
- How to add external storage (from Google Drive!) to a GitHub repo to store datasets and trained models

There's also some inklings of a topic we'll develop further in upcoming videos: what does it mean to version _data as code_? How do we create high-level abstractions to separate data from the way it's stored?  Stay tuned.
Async/Await: Introduction
Tags: javascript, beginners, 100daysofcode, codenewbie
Published: 2020-08-06 19:49:03


Callbacks and promises are great when it comes to performing async operations. Promises improved over callbacks and provide a flat code syntax, especially when it comes to chaining promises. The operators on promises like `allSettled`, `any`, `then` and `catch` make it easier to write complex async operations.

Async/Await was introduced in ES7 to promote a cleaner syntax to promises. Under the hood, async/await are promises; they provide a nice abstraction layer under those keywords.

### Async

`async` keyword could be used in front of any function (declaration, expressions, callbacks or literally anywhere). All it means is that the function will always return a promise. Any return values other than a promise will be wrapped in a resolved promise.

```javascript
async function foo() {
    return "Parwinder" // returning a string but `async` will ensure it is wrapped in a promise
}

foo().then((data) => { // we can safely use then because async function foo returns a promise
    console.log(data); // Parwinder
})
```

We could return a promise in function `foo`, and it will still work. It will be unnecessary, though.

```javascript
async function foo() {
    return Promise.resolve("Parwinder")
}

foo().then((data) => {
    console.log(data); // Parwinder
})
```

### Await

`await` keyword makes JavaScript wait until the promise **settles** and returns its result. It can only be used inside an `async` function.

```javascript
async function foo() {
    const myPromise = new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("Parwinder"); // resolves with "Parwinder" after 2 seconds
        }, 2000);
    });

    // will not move to the next line until myPromise resolves/rejects
    const name = await myPromise;
    // the execution pauses (or awaits) for the promise

    console.log(name); // Parwinder
}

foo();
```

As you can see in the above example `await` provides a cleaner syntax compared to `Promise.then`.
JavaScript Array Methods | flat and flatMap 📹
Tags: webdev, tutorial, javascript, codenewbie
Published: 2020-08-06 19:19:41

---
title: JavaScript Array Methods | flat and flatMap 📹
published: true
description: In this episode learn how to use flat and flatMap. Array methods introduced in ES2019. 
tags: webdev, tutorial, javascript, codenewbie
//cover_image: https://direct_url_to_image.jpg
---
In this short episode learn how to use `flat` and `flatMap` in 5 minutes. `flat` and `flatMap` are Array methods that were introduced in ES2019 and give us an easy way to flatten and work with nested arrays.

{% youtube jkpGDFoWcyI%}  

I hope this helped and until the next one, happy coding! 💜

---

[Follow me on Twitter](https://twitter.com/nialljoemaher)

Subscribe on [Codú Community](https://www.youtube.com/c/Cod%C3%BACommunity)
AzureFunBytes Episode 9 - @Azure Regions, AZ's and SLAs with @chloecondon
Tags: cloud, azure, beginners, tutorial
Published: 2020-08-06 19:10:29

New #AzureFunBytes - Azure Datacenters, Regions, Availability Zones, and Service Level Agreements.

This time we look at what components make up the Azure cloud including how datacenters are organized.

My guest, [Chloe Condon](https://twitter.com/chloecondon), helps me solve three problems on Twitch!

{% youtube dJA5O30mPvw %}

  * What makes up the Azure cloud?
  * How does this impact my application?
  * How do we ensure high availability on Azure?

------

AzureFunBytes! - Byte-sized content with a live Twitch show!


Learn about Azure fundamentals with me!


Live stream is available on Twitch at 2 pm EDT Thursday. You can also find the recordings there as well.


https://twitch.tv/azurefunbytes
https://twitter.com/azurefunbytes


Join me, ask questions and learn about Azure!

[Building an Animal Crossing Turnip Timer!](https://dev.to/azure/building-an-animal-crossing-turnip-timer-video-2dni)
[Microsoft Learn: Azure Fundamentals](https://cda.ms/1jV ) 
[Microsoft Azure: $200 Free Credit](https://cda.ms/1tj ) 
[Microsoft Azure SLAs](https://cda.ms/1w5) 
[Azure geographies](https://cda.ms/1w6 ) 
[Regions and Availability Zones in Azure](https://cda.ms/1w7)
Securely transfer data to client from server application
Tags: node, security, webdev
Published: 2020-08-06 19:05:36

I have an application written in node. One of the pages is a form for users to enter data. When they submit that data, my app generates a response. I want to send that data to the client on a separate page. How do I do this? It must be secure. 

```javascript
const express = require('express');
const app = express();

app.post('/join', (rq, rs) => {
    let data = generateResponse(rq.query.foo, rq.query.bar);
    // transfer info here
}

app.get('/game', (rq, rs) => {
    //retrieve info here
    rs.render('game');
}
```

My app uses EJS for rendering if that helps.
What is an analogy or visualization of a coding concept that really helped you understand it better?
Tags: discuss, podcast
Published: 2020-08-06 19:04:16

---
title: What is an analogy or visualization of a coding concept that really helped you understand it better? 
published: true
description: Weigh-in for the chance to be featured on the DevDiscuss podcast!
tags: discuss, podcast
---
The format of DEV's first official podcast, [DevDiscuss](https://dev.to/devdiscuss), begins with an interview and ends with commentary from the community.

With the season two premiere coming out soon, we want to know... 

> ### **What is an analogy or visualization of a coding concept that really helped you understand it better?** 
_Answers can range from beginning to advanced concepts!_

**If you'd like a chance to be featured in an episode**, please send us a voice memo on this topic OR leave a comment below by Wednesday, August 12 at 5 PM PT (8 PM ET, 12 AM UTC).

#### Details on how to participate
* Call our Google Voice at +1 (929)500-1513 and leave a message 📞
Send a voice memo to pod@dev.to 🎙

* If you don't want your voice recorded, just leave a comment here and we'll read your response aloud for you 🗣

---
### ✨Subscribe to DevDiscuss✨
* [Apple](https://podcasts.apple.com/us/podcast/devdiscuss/id1513053883)
* [Spotify](https://open.spotify.com/show/4Jae2mPUqx0XnGychucsE4)
* [Overcast](https://overcast.fm/itunes1513053883/devdiscuss)
* [Stitcher](https://stitcher.com/podcast/devdiscuss)
* [Listen Notes](https://listennotes.com/podcasts/devdiscuss-dev-xtQvoDylAUg/) 
* [TuneIn](https://tunein.com/podcasts/Technology-Podcasts/DevDiscuss-p1324596/)
* [Google Podcasts](https://podcasts.google.com/search/devdiscuss)
* [Here on DEV!](https://dev.to/devdiscuss)

### Don't miss this recent episode from season one of DevDiscuss:
{% podcast https://dev.to/devdiscuss/s1-e5-how-hobbies-like-powerflifting-auto-repair-and-music-can-make-you-a-better-developer %}

### [>>Get a pack of FREE laptop stickers when you review DevDiscuss on Apple Podcasts!](https://airtable.com/shr8oKAIMZgdYnBxx)
Subscripts: Parameters & Static
Tags: swift, subscript, parameter, static
Published: 2020-08-06 19:00:46

I previously wrote a post talking about the basics and how to create a `subscript` for your own `classes`, `structs`...

{% link https://dev.to/fdorado985/subscripts-3obd %}

I didn't want to extend that post too much, and I just wanted to keep it simple, with that basic example.

Now for this, let's see what else we can do using `subscripts`.

## Subscript parameters

As you could see, the `subscript` signature looks just like a `function`, on the parameters I wrote

```swift
subscript(key: String) -> String? { ... }
```

And I just used my `subscript` like this...

```swift
jill["costume"]
```

But following the `function` rules, I should be used it like this...

```swift
jill[key: "costume"]
```

because I didn't add an `underscore` before my `parameter`, and `functions` use the `parameter` as `parameter name` when we skip it.

Well guess what? - This are `subscripts` not `functions`, this rule doesn't apply, but...

**WE CAN ADD PARAMETER NAMES**

and for that the rule is the same, as simple as just add the `parameter name` before the `parameter`.

```swift
  subscript(key key: String) -> String? {
    // ...
  }
```

Although we could use whatever name we want, c'mon, help other developers giving good names to them.

> This is not a key, it is a property of our `struct`, using `property` as the name sounds much better don't you think?

```swift
  subscript(parameter key: String) -> String? {
    // ...
  }
```

Now, our `subscript` will be called like this.

```swift
jill[parameter: "costume"]
```

But there is much more with this, Xcode is so intelligent that will be able to detect all this issues.

In case you try to access to your `subscript` without your `parameter name`, Xcode will complain

![subscript-missing-parameter](https://dev-to-uploads.s3.amazonaws.com/i/vgf3525yj2mcg4t9oqw8.png)

Also if you start writing inside your brackets or simply using the shortcut `CTRL + Space` you will see autocompletion.

![subscript-autocompletion](https://dev-to-uploads.s3.amazonaws.com/i/npzlmib7ng2tfarqtw3u.png)

## Static Subscripts

Now! another thing such as `functions` these can be `static` as well.

Let's see what we care about... *example*!

```swift
class Service {

  static subscript(key: String) -> String {
    switch key {
    case "production":
      return "https://a-production-url.com"
    case "stage":
      return "https://a-stage-url.com"
    case "development":
      return "https://a-development-url.com"
    default:
      return "No URL!"
    }
  }
}
```

And we don't need an instance to use our `subscript`, just call it directly...

```swift
Service["production"] // "https://a-production-url.com"
Service["stage"] // "https://a-stage-url.com"
Service["development"] // "https://a-development-url.com"
Service["custom"] // "No URL!"
```

Nice right?

There is one more topic related I would like to cover about `subscripts`.

I'll try it later on and **HAPPY CODING!**
AWS: Mission To MARS Hackathon!
Tags: amazon, aws, hackathon, cloud
Published: 2020-08-06 18:49:53

Did you love my post? <a href="https://www.buymeacoffee.com/willydavidjr"><img src="https://img.buymeacoffee.com/button-api/?text=Buy me a coffee&emoji=&slug=willydavidjr&button_colour=f25a71&font_colour=000000&font_family=Lato&outline_colour=000000&coffee_colour=FFDD00"></a>

Check out this virtual hack from AWS: Mission To M|A|R|S Hackathon there's $65K in prizes and you have six months to learn a new technology and build an app. Pretty cool! 

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

http://bit.ly/AWSMission2MarsHack

Registration opens August 10!

See you in MARS!
Quick UI Review - Stripe Homepage
Tags: stripe, ui, design
Published: 2020-08-06 18:43:26

---
title: Quick UI Review - Stripe Homepage
published: true
description: Quick research on features used on stripes home page.
tags: stripe,ui,design
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/drxi85hrj2m13e5m9bym.png
---

# Font

There are 7 fonts with 124(!) variations.

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

[Sohne-var](https://klim.co.nz/buy/soehne/) is the primary font.  This was probably a ">= 5" figure decision for them to license this font.  [Here](https://www.typewolf.com/site-of-the-day/fonts/sohne) is some more detail about the font and similar types.

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

# Colors

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

73 colors were used on that page.  This is probably high because they make almost everything on the page an html element.  This is highlighted by the fact that there are only 26 assets on the whole page.

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

# Layout

Their previous design was 2 columns with a balance on the center line of the screen.  This new design is 4 columns with a left aligned balance.

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


# Notable

The animations are smooth and intricate as they were with the previous site.  The animated text editor is pretty amazing.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/13shhqdmnh8mok9e8e95.gif)

The outlines I added to illustrate that it's not a gif but actual html elements.  Looking at the source code it supports multiple languages, autocompletions, line numbers, a terminal area and more.  I can only imagine this feature took considerable amount of time to make.  Hopefully they open source it at some point.

# Conclusion

There is a depth of knowledge with each new design that stripe uses.  My previous post talked about the animation of the drop down from their previous version:

{% post https://dev.to/kyleparisi/making-web-animations-9ng %}
I got 15,000+ requests on my app in less than 24 hours!
Published: 2020-08-06 18:33:55

I built DomeCode in 2020 and- the title. That's it.

The good thing is [DomeCode](https://domecode.com) is on track to achieve that and I believe I along with the help of other talented developers ( still looking for them ) can eventually build a platform for the world that has all the coding resources at one place. 
And the fact that it's already receiving a lot of traffic ( **over 15,000 requests** in the past 24 hours alone for just the pre-release without me even reaching out as much as I actually could have ). This is the kind of response that makes me believe that DomeCode can actually be a coding platform that was missing all this while. Even if you might be thinking that the features I listed are standard, well you won't have that thought once the further versions roll in with the sick features I have planned! 

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

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

DomeCode is still in the alpha stage though and is optimized only for larger screens as of now, however, I'd be fixing that soon and it will be completely optimized for screens of all sizes by the stable version. So if you're someone who thinks that they might be a good fit for contributing in a growing project like this, lemme know by emailing at *iwantin@domecode.com* 

You can checkout [DomeCode](https://domecode.com/) by clicking this [link](https://domecode.com/).
A Journey through React Hooks
Tags: react, hooks
Published: 2020-09-01 07:58:31

---
title: A Journey through React Hooks
published: true
date: 2020-08-06 18:30:00 UTC
tags: React,Hooks
canonical_url: https://www.loginradius.com/engineering/blog/a-journey-through-react-hooks/
---

Have you ever assigned a task to change the functional component which is full of UI and business logic to a Class Component just because the new feature requires the use of state, just to toggle some text colour to red on some events occurred? Then this article is for you.

   
[Read On](https://www.loginradius.com/engineering/blog/a-journey-through-react-hooks/)
Consistent Onboarding - Building SaaS #52
Tags: python, django, saas
Published: 2020-08-06 18:09:20

{% youtube RY8NtEUaAv4 %}

In this episode, we glued together some of the onboarding steps.  I added data validation so that future steps depend on data existing from previous steps.  Then we added page messaging to direct users to a proper page.

We reviewed the way that the form validates certain data from the form submission so that data is kept safe between users.  I showed how I switched from the `model` and `fields` attributes of `CreateView` to a `form_class` containing the form that does the necessary validation.

We talked about how the onboarding flow is interconnected.  With that context, I updated the first step to ensure that the school year data can only be created once.

We also updated the second step to ensure that a user can't proceed until the necessary data from the previous step is present.

I added tests to check the various conditions and updated templates to render the right thing for the various states.

This article first appeared on [mattlayman.com](https://www.mattlayman.com/building-saas/consistent-onboarding/).
AVATARZ - Library of 3D avatars
Tags: design
Published: 2020-08-06 18:04:00

Hey guys, 

I just wanted to share interesting resources with which are:

AVATARZ
https://www.avatarz.design/

and free 3D library of hands gestures HANDZ:
https://www.handz.design/

I believe these 2 resources can be super helpful for your next projects & products. 

Have fun,
Sam