teleren/devto huggingface dataset:
Scale Design Systems with Web Components
Tags: designsystems, webdev, webcomponents, frontend
Published: 2020-05-10 01:38:12

---
title: Scale Design Systems with Web Components
published: true
description:  As a design system scales, how can we create a single source of truth to span multiple framework architectures and even non-framework web applications?
tags: #designsystems #webdev #webcomponents #frontend
---

If you’ve used front-end web frameworks such as Angular, React, or Vue, you might be familiar with the concept of component-based design. UI/UX software like Sketch, Adobe XD, and InVision include tools for creating component libraries from design systems. But as a design system scales, how can we create a single source of truth to span multiple framework architectures and even non-framework web applications? One answer is to use web components.

# What are Web Components?

Web components allow a developer to re-use the function and style of a designed asset such as a button, card, list, icon, etc. Each component is a predefined template that may be used again and again anywhere in the web application or across different web applications, even if they are using different web frameworks and architectures. Web components are not a broad term for the component systems seen in various frameworks. Rather, it is a standardized collection of native web technologies including the shadow DOM and custom elements that provide built-in HTML / JavaScript support for cross-framework and non-framework component-based design.

# Why does it matter?

Because web components do not rely on a framework, they are portable, free to evolve with a scaling application, maintain backwards compatibility, and may grant some level of future-proof stability. Web components are also supported by all major front-end frameworks which can save money if an app stack were updated or acquired by another company and converted. From a design perspective, a reusable and standardized component system can save time. Baked-in styling regulation also reduces styling bugs. In addition, the semantic readable code that custom elements create leads naturally to greater accessibility and scaled software management.

# Resources to get started

If you haven’t any experience with design systems and component based design methods, I recommend reading through the following:

https://bradfrost.com/blog/post/atomic-web-design/

https://designsystemsrepo.com/

If you’re ready to get started and build some web components today, I recommend heading over to https://open-wc.org/ . The prepackaged bundle comes with all of the libraries that make writing web components super fun including LitElement, Storybook, and a collection of testing tools.
Using an After-Parameter
Published: 2020-05-10 01:15:54

One of my side projects involved a vanilla JavaScript implementation of a Reddit Comment Analyzer. The program was designed to take any Reddit user and analyze all the information they have ever posted to produce some interesting statistics. While the final product was really cool, I was pretty impressed with how the program was designed to scrape all the information so quickly. The trick to pull information that is located on many different pages was key to the design of the app. To do the dirty work and simulate multiple different fetches, it relied on an "after" parameter that was available via the network.

So what is an after parameter? An after parameter is an alfa-numeric value code that is present in the network request of the pages reddit displays. When that code is posted to the network, it tells the server to present the next batch of user comments. By turning the page into JSON and then calling the after parameter, the fetches occur much faster.

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

The next step is to use ES7 keywords to fetch and await the completion of the multiple fetch requests. This is implemented like so and allows the entire user history to be pulled before analytics are performed.

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

The result is a really fast and interest end product. Demo it for yourself here:
https://andyreadpnw.github.io/redditanalyze/
Best Node Js Resources, Courses and Tutorials
Tags: javascript, node
Published: 2020-05-10 01:02:42

---
title: Best Node Js Resources, Courses and Tutorials
published: true
date: 2020-05-10 01:02:42 UTC
tags: javascript, nodejs, 
canonical_url: https://www.ma-no.org/en/programming/javascript/best-node-js-resources-in-2019-courses-and-tutorials
---

NodeJS is a platform that enables developers to write high-performance and networked applications server side. And using good old Javascript as well. Why should you study NodeJS? To begin with, it never hurts to learn something new. But most importantly, it's great to learn NodeJS.

With a focus on modern JavaScript and real-world application, Learn Node is an efficient way to add server-side JavaScript to your skill-set and start building the applications you have been dreaming about.

We have divided the article into several sections: courses, multi-part tutorials, tutorials:

Courses
The Complete Node.js Developer Course (2nd Edition)
26 Hours of Video || 66,000 Students

The Complete Node.js Developer Course 2 covers the fundamentals of Node before diving deep into great tools like Express, Mongoose, and MongoDB.

The entire course is based around a single goal: Turning you into a professional Node developer capable of developing, testing, and deploying real-world production applications.

The best way to learn Node is by building Node apps.

[Read all](https://www.ma-no.org/en/programming/javascript/best-node-js-resources-in-2019-courses-and-tutorials)
Creating mathematics animation videos in #python with the manim library
Tags: python, math, twitch
Published: 2020-05-09 23:15:08

The creator of the excellent [3blue1brown](https://www.youtube.com/channel/UCYO_jab_esuFRV4b17AJtAw) YouTube videos has an [open source library](https://github.com/3b1b/manim) with which he produces all his videos. I'm trying to learn to use it... [live on Twitch](https://www.twitch.tv/leotrs1)!
Building an interactive form: Additional changes
Tags: html, css, webdev, tutorial
Published: 2020-05-09 23:03:42

---
title: Building an interactive form: Additional changes
published: true
description: Learn how to develop an interactive login form in an afternoon, with HTML + CSS + JS.
tags: HTML,CSS,webdev,tutorial
series: Building an interactive form
cover_image: https://thepracticaldev.s3.amazonaws.com/i/1zn2rvs6wiztswtluegk.png
---

That was longer than I initially expected... but the journey doesn't stop with that last post, and it hasn't stopped yet. 

After publishing this series, I continued looking into the code and improving some things here and there. I will edit this post with the changes I've done and the reasoning behind it.

## Fix button for mobile

One thing I noticed on mobile (and on iOS in particular) is that the `input` of type "submit" is not styled as expected. Making it look like a native button rather than the styled button on other platforms.

One option to fix that is to transform the `input` into a `button` (keeping the type "submit" so it sends the form automatically on click).

The change on the HTML was from this:

```html
<input type="submit" value="Log In" name="submit" id="submit" />
```

to this:

```html
<button type="submit" id="submit">Log in</button>
```

And in the CSS, I added the button selector wherever I was styling the `input` type submit:

```css
/* added button here */
input,
button {
  ...
}

/* and replace input[type="submit"] with button[type="submit"] here... */
button[type="submit"] {
  color: hsl(var(--bgColorH), var(--bgColorS), var(--bgColorL));
  background: hsl(var(--fgColorH), var(--fgColorS), var(--fgColorL));
  font-size: 0.75rem;
  font-weight: bold;
  margin-top: 1rem;
  padding-left: 0;
  text-transform: uppercase;
  transition: all 0.125s;
  cursor: pointer;
}

/* ...here... */
button[type="submit"]:focus,
button[type="submit"]:hover {
  background: hsl(var(--fgColorH), var(--fgColorS), calc(var(--fgColorL) * 0.85));
}

/* ...and here. */
button[type="submit"]:active {
  background: hsl(var(--fgColorH), calc(var(--fgColorS) * 2), calc(var(--fgColorL) * 1.15));
}
```

It is a small change, but it makes a big difference on mobile.

-----

This is how it looks after the changes:

{% jsfiddle https://jsfiddle.net/alvaromontoro/jtnc4gvf/187/ result,html,css,js %}
var, const and let differences in Javascript
Tags: var, const, let, javascript
Published: 2020-05-09 22:55:03

<b>Summary</b>
Basically there is no reason to use var and it is considered bad practice. Only use const and let. 

A good video is on this topic is: https://laracasts.com/series/es6-cliffsnotes/episodes/3?autoplay=true

<b>Scope differences</b>

Variables declared with `var` are not block scoped (although they are function scoped), while with `let` and `const` they are.

`if (y>10){var A = "hello"}`
A would be available outside if block

`if (y>10){const B = “hello}` or `if (y>10){let B = “hello}`
B would not be available outside if block

```function Test1 () {
var C = "test"
return (C)}```

```function Test2 () {
const C = "test"
return (C)}```

For both of the functions above `C` would not be available outside of the function once it has been invoked.

To reference a variable outside a block that is not a function using `let`:
```const bool = true;
let a;
if (bool) {
  a = 'foo';
}
console.log(a);```

<b>Why not to use var</b>

var hoists the variables declaration up to the top of the function scope or class scope, causing undesired results. e.g:

```function test(bool) {
if (bool) {
   var a = 'foo';
   console.log(a);
} else {
   console.log(a);
}
}```

If you run: `test(true)` this will result in 'foo' in the console.
If you run: `test(true)` this will result in 'undefined' -> which does not make sense. It should be a reference error. If you change the a in the else block to anything else it becomes a reference error. Why is this? Because js is interpreting it as the following due to the hoisting (hence why the undefined error):

```function test(bool) {
var a;
if (bool) {
   a = 'foo';
   console.log(a);
} else {
   console.log(a);
}
}```

This is why to avoid var.

To quote a past dev post:
https://dev.to/johnwolfe820/should-you-never-truly-use-var-bdi

No error is thrown if you declare the same variable twice using var (conversely, both let and const will throw an error if a variable is declared twice)

const - means that the variable assignment stays constant and cannot be overwritten within the block. But note that you can still alter the value of the object. I.e. if you wrote the following this would work:
```
const A = ['suzy','juju','uno'];
A.push('matt');
```
But the following would give an error because A is already defined:
```
const A = ['suzy','juju','uno'];
const A = ['suzy','juju','udsdsd'];
```

`let` - means that the variable can be overwritten at any point within the block.
Balancing COVID-19 HomeSchooling and Post-Bootcamp Goals
Tags: bootcamp, codenewbie, momswhocode
Published: 2020-05-09 22:52:58

I just graduated from Flatiron School's Software Engineering Bootcamp, and have started the process of learning new skills, building my portfolio of projects, and looking for my next opportunity. 

Last week, I tried to set up a daily/weekly schedule to keep myself productive, on task, and accountable to my goals post-graduation. Yet, one day into that schedule, my husband was suddenly called back to work and I resumed my role as full time COVID-19 homeschool teacher for two boys under the age of ten. Goodbye, schedule! My new normal became filled with making textboxes on the boys' online math worksheets, checking their writing, and helping them log onto google hangouts and turn in assignments on google classroom.

![Imgur](https://i.imgur.com/yOTVpvb.jpg)

While my schedule evaporated, the goals still remain. Since I've always been a project-based learner, I decided to use whatever time I can find to start working on a big project and incorporate many of the new skills I was hoping to learn. Forget the tutorials, ditch the daily coding challenges. Just build! So I started creating a new React app. I wanted to learn new skills that weren't covered in the Flatiron curriculum, as well as practice some skills that I had not focused on in my recent projects. Here are the skills and technologies I aimed to use/practice:

1. Use Hooks as opposed to Lifecycle Methods
2. Create functional components rather than reliance on class components
3. Limit my use of extra frameworks and libraries
4. Practice using local state and passing props rather than a Redux store
5. Fetch data from external APIs
6. Use D3 to create and render data visualizations

With this list at the forefront, I started creating a COVID-19 World Tracker to learn and practice these skills. I just started building...and each time I ran into a place that requires new learning, I pull up the documentation and look at examples, try it out, and then move on to the next new challenge. Using this approach, I've already been able to check off the first 5 items on my skills list!

![Imgur](https://i.imgur.com/S16dBFA.jpg)

Stay tuned - I'll share more about the Tracker when it's finished, summarize the skills I learned along the way, as well as my biggest challenges. Until then...it's finally time to learn some D3, while embracing my new homeschool routine!

[See my first update about the project here!](https://dev.to/jessesbyers/project-update-covid-19-world-tracker-5dhh)

*Who else has been juggling the kids' school and your own learning goals? What has been working for you?*
Match URI templates with Burrito
Tags: haskell, webdev
Published: 2020-05-09 22:43:16

URI templates are a powerful way to succinctly describe URLs. For example the URI template `https://hackage.haskell.org/package/{name}` shows you how to find a Haskell package on Hackage. By expanding that template with `name := "parsec"` you can get the full URL of a package: `https://hackage.haskell.org/package/parsec`.

``` hs
>>> let Just template = parse "https://hackage.haskell.org/package/{name}"
>>> expand [("name", stringValue "parsec")] template
"https://hackage.haskell.org/package/parsec"
```

[RFC 6570](https://tools.ietf.org/html/rfc6570) specifies how URI templates work. Unfortunately it doesn't describe how to go in the other direction. That is, how to take a full URL and parse it according to a template. For example you may want to take a package URL and match it against the template to get the package name. This is kind of like doing template expansion in reverse.

``` hs
>>> match "https://hackage.haskell.org/package/parsec" template
[[("name", String "parsec")]]
```

I'm happy to announce that [version 1.1.0.0 of Burrito](https://hackage.haskell.org/package/burrito-1.1.0.0), my URI template library for Haskell, can now perform this matching operation! So if you find yourself needing to expand or match URI templates, please check it out.
Learning Golang 104
Tags: go, beginners
Published: 2020-05-09 22:36:40

## Data
Go has two allocation primitives, the built-in functions new and make. 

### Allocation with `new`
it allocates memory, but it does not initialize the memory, it only zeros it (default value. check the definition [here](https://tour.golang.org/basics/12)). It returns a **pointer** to a newly allocated zero value of type.
For example:
```
type SyncedBuffer struct {
    lock    sync.Mutex
    buffer  bytes.Buffer
}

p := new(SyncedBuffer)  // type *SyncedBuffer
var v SyncedBuffer      // type  SyncedBuffer
```
Constructors and composite literals
Sometimes the zero value isn't good enough and an initializing constructor is necessary.
```
func NewFile(fd int, name string) *File {
    if fd < 0 {
        return nil
    }
     return &File{fd: fd, name: name}
}
```
If a composite literal contains no fields at all, it creates a zero value for the type. The expressions `new(File)` and `&File{}` are equivalent.

### Allocation with `make`

**Make applies only to maps, slices and channels and does not return a pointer**. The reason is that these three types must be initialized before use. It returns an initialized (not zeroed) value of type T (not *T).

### Arrays
**Keynote**
* Arrays are **values**. Assigning one array to another **copies** all the elements.
* In particular, if you pass an array to a function, it will receive a copy of the array, not a pointer to it.
* The size of an array is part of its type. The types [10]int and [20]int are distinct.
```
Do pass value, instead using point. value is expensive.
func Sum(a *[3]float64) (sum float64) {
    for _, v := range *a {
        sum += v
    }
    return
}

array := [...]float64{7.0, 8.5, 9.1}
x := Sum(&array)  // Note the explicit address-of operator
```

### Slice
Slices wrap arrays to give a more general, powerful, and convenient interface to sequences of data. Slices hold references to an underlying array, and if you assign one slice to another, both refer to the same array.
```
func (f *File) Read(buf []byte) (n int, err error)

n, err := f.Read(buf[0:32]) // read first 32 bytes
```

### Maps
Key-Value pair
```
var timeZone = map[string]int{
    "UTC":  0*60*60,
    "EST": -5*60*60,
    "CST": -6*60*60,
    "MST": -7*60*60,
    "PST": -8*60*60,
}
```
`timeZone[key]` returns two values. First one is the `value`, second one is bool, `false` if not present. `true` if present.
Use vue component in an existing AngularJs Application 
Tags: vue, angular, help
Published: 2020-05-09 22:22:27

My goal is to migrate my company big application from AngularJs to Vue or React. Whichever is easy. I think Vue will be easier.

Problem 1: 
How to make new vue component ( .vue files ) and use it along in existing AngularJs application (with ngRoute) and do all the operations.


Problem 2:
How to change the existing module or feature one by one slowly to vue and finally make a Vue application.

Please help me out with these issues.
I will be very thankful to you.
My first experience using Kotlin instead of Java to develop mobile Android
Tags: beginners, kotlin, android
Published: 2020-05-09 22:19:08

So Hi everyone! This is my first post here and I hope you enjoy. Like the title, I'll talk about my first experience using Kotlin instead of Java in the Android developer world in real projects. Unless 2 months I joyed with Teams android develop in my work, after that I had developed some small apps using Java unless 2 years ago and in my work.

 I was working with Rust language. So, why I started the developer apps 2 years ago? and why Java? first Java was the second language I learned(first was Python) it makes it easier to started developer apps, Kotlin was started adopted from Google to Android, and second I really had interesting in how apps were created.
 
My first day saw code base full Kotlin was amazing and little scare, amazing because all code was easier to read special class, inheritance and polymorphism, scare because have a lot different like val and var private inlate and other thinks like functional programming features using together with OOP. 

One week after that I wrote some code to project and guess I had fun too when a developer one thing with Java a lot of years I not fun more and not because Kotlin was a new Language was because Kotlin gives me more productivity, logic matter more write some getter and setter I know some IDE do this but is not same.

 Today was 2 month I'm working with Kotlin and one thing it's really bad is a way you could use OOP and functional programming because is really easier you confuse some things and your code became more unreadable because of that. Another thing is the null pointer because kotlin is null safe but interoperation with Java, because that if you use some third library in java you could have a null pointer(Belive this is bad things). Thanks, everyone and I hope you like to feel free to comment too.
Composable Stimulus Controllers?
Tags: stimulus, rails
Published: 2020-05-09 22:16:33

Quite some time ago I wrote a simple Stimulus wrapper for [Flatpickr](https://github.com/adrienpoly/stimulus-flatpickr). I learned a lot while doing this project. One of my initial goal was  to explore the possibility of having standard controllers with in the Stimulus world. Controllers anyone could use to avoid reinventing the wheel every time.

Stimulus by default is a modest (yet powerful) framework. [The list of available  standard controllers](https://github.com/skatkov/awesome-stimulusjs) is also rather modest. 

Beside a few exceptions I don't have the feeling they are widely used. While many factors can explain it, for me the missing ability to compose multiple simple behavior within a controller has been a major obstacle of adoption.

I have been recently looking into this and made a few prototypes. Would love to have feedbacks if anyone already tackled this problem

## Have you made in your projects some reusable, shareable and composable Controllers ?
Material Monokai Theme for VSCode
Tags: vscode, theme, material, javascript
Published: 2020-05-09 22:15:41

---
title: Material Monokai Theme for VSCode
published: true
description: 
tags: vscode, theme, material, JavaScript
cover_image: https://user-images.githubusercontent.com/9580458/81484601-06a48500-9247-11ea-899e-b5bb92261300.png
---
Just published a new version of my *Material Monokai Theme* for VSCode.
This theme is simply built on top of my personal preferences: material design, monokai color scheme and high contrasts.

[Check it out in the marketplace..](https://marketplace.visualstudio.com/items?itemName=repeale.material-monokai)

{% github https://github.com/repeale/material-monokai %}
DEV.to weekly popular posts RSS feed?
Published: 2020-05-09 21:47:57

---
title: DEV.to weekly popular posts RSS feed?
published: true
description: 
tags: 
---

**Feature request**:

Currently using the regular RSS feed in my reader which contains all posts. It's alright but sometimes there are too many posts. It would be nice if there's a separate "weekly popular posts" only RSS feed.