teleren/devto huggingface dataset:
JS Numeric Separator
Tags: javascript, ecmascript, chrome
Published: 2019-10-19 16:19:18

---
title: JS Numeric Separator
published: true
date: 2019-10-18 00:00:00 UTC
tags: javascript, ecmascript, chrome
canonical_url: https://bjcant.dev/js-numeric-separator/
---

Here’s a new ECMAScript feature that I am excited about: numeric separators. Currently in [proposal stage 3](https://github.com/tc39/proposal-numeric-separator), this readability feature will make it much easier for our eyes to parse numbers. If you have Chrome version 75 or above — find your version by typing `chrome://version/` in your URL input — you can test out this feature in Chrome dev tools right now!

```js
// try this in the console
let oneMillion = 1_000_000
```

The underscore can be place between any numeric values, including after a decimal.

```js
let pi = 3.141_592_653
```

You may notice that the actual numeric value omits the separator. Don’t get too attached!

```js
pi
//=> 3.141592653
```

This is especially useful for separating binary numbers.

```js
let binary = 0b1101_1100_0000
```

It also works for [hexadecimal](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Numbers_and_dates#Hexadecimal_numbers)…

```js
let abc = 0xA_B_C
```

[BigInt](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt)…

```js
let frickinHugeInt = 1_000_000_000_000_000_000_000n
```

… and [exponential](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Numbers_and_dates#Exponentiation) notation!

```js
let infinitePi = 3.145e1_000
```

Separators can be placed in unconventional places, too.

```js
let kwazyInt = 43_8_83998_123_583_1_0
```

Not sure why you would want to do that 🤷‍.

There are some limitations to the separator. These are the things you _can’t_ do:

Place underscores at the beginning or end of a number

```js
// no
_1000

// nope
1000_
```

Place underscores adjacent to a non-numeric character

```js
// nah
1_.348

// also nah
5.43_e2
```

Place underscores adjacent to each other

```js
// nice try
1 __000__ 000
```

Remember, this feature is still in proposal phase and as of this writing is not available on browsers other than Chrome. For Node apps, you will need to be running on v12.5 or higher. If you want to use this on the web, your only viable option for now is to transpile your JS with [Babel](https://babeljs.io/docs/en/babel-plugin-proposal-numeric-separator), unless of course you are confident that all of your users are on the latest Chrome 😜. Gotta keep ‘em separated!
CSS-only horizontally-scrolling cards with snapping
Tags: codepen
Published: 2019-10-17 23:03:15

It's a common design problem to have content cards to lay out in different arrangements in various viewports. In this exploration, I wanted to see how cards might be more effectively organized using a simple design pattern of a scrolling horizontal list. Try it on mobile:

{% codepen https://codepen.io/allanwhite/pen/oNNbpqx %}

It's implemented with CSS, and doesn't require any scripting for the layout or interactions. [Lozad](https://github.com/ApoorvSaxena/lozad.js) is used for lazy-loading.

There's some nice hover effects in place, CSS custom properties, and I use a simple CSS mask gradient on the edge to indicate there are more cards. _To-do:_ Enable `tabindex` for accessibilty.

I experimented with more robust CSS grid layout for the cards, but I found after playing with it on mobile it was overkill.
FireDI – Advanced Use Cases
Tags: php, discuss, showdev
Published: 2019-10-17 22:32:09

---
title: FireDI – Advanced Use Cases
published: true
date: 2019-10-17 22:25:46 UTC
tags: php, discuss, showdev
canonical_url: https://ua1.us/updates/firedi/firedi-advanced-use-cases/
---

FireDI can do a lot more than just resolve your dependencies for you. This tutorial, we are going to cover other scenarios where FireDI can become helpful.

## For Mocking In Test Cases

When working on testing your code, you will find that from time to time, you will need to mock a dependency for the class you are testing.

```
<?php
class TheClassImTesting {
    public function __construct(MyDependentClass $myDependentClass) {}
}
```

Now to mock `MyDependentClass`!

```
<?php
$fireDi = new \UA1Labs\Fire\Di();
$myDependentClassMock = Mock::get('MyDependentClass');
$fireDi->set('MyDependentClass', $myDependentClassMock);

$theClassImTesting = $fireDi->get('TheClassImTesting');
```

## For Injecting New Objects Every Time

By default, FireDI will cache all objects (including object dependencies) within the container object cache. This is so the next time you need the object, it is already ready for you and is just simply returns. From time to time, however, you may need for a specific object to return a new instance every time it is needed.

```
<?php
// to prevent an object from caching, you may pass a factory into the Di::set() method.

$fireDi = new \UA1Labs\Fire\Di();
$fireDi->set('MyNewObjectEveryTime', function() {
    new MyNewObjectEveryTime();
});
```

## For Interface Dependencies

In many cases, you might have a class that has a constructor dependency on an interface.

```
<?php
inteface MyInterface {}

class MyClass implements MyInterface {}

class InterfaceDependentClass 
{
    public function __construct(MyInterface $MyInterface) {}
}
```

In the example above, you will notice that `InterfaceDependentClass` depends on an object that implements `MyInterface`. If you want to resolve this, you would need to `new MyClass()` and pass the resulting instance object into the `InterfaceDependentClass` constructor. Or you can simply have FireDI do that for you!

```
<?php
$fireDi = new \UA1Labs\Fire\Di();
$myClass = $fireDi->get('MyClass');
$fireDi->set('MyInterface', $myClass);

$interfaceDependentClass = $fireDi->get('InterfaceDependentClass');
```

The post [FireDI – Advanced Use Cases](https://ua1.us/updates/firedi/firedi-advanced-use-cases/) appeared first on [UA1 Labs](https://ua1.us).
Day 14 : Faces
Tags: hiphop, code, coding, lifelongdev
Published: 2019-10-17 22:22:13

_liner notes_:
- Professional : Got a first draft of the use case write up complete. Added some notes of what screenshots and code snippets to include. Going to go back over it to make sure it all makes sense and add everything. We also had our Dev Catchup session to see how everyone is doing.

- Personal : Last night after I got home from the meetup, I decided to fix this thing that was bugging me about my personal site.  When I originally designed it, the cards would line up in a single column for phones. It worked, but I noticed that there would be enough room for there to be two columns. Also, with the one column, it would be so close to the bottom of the page that would would cause a weird glitch when scrolling up. When I changed it to 2 columns, everything worked the way I envisioned. Before bed, I went through some tracks submitted for this week's radio show.


![Quepos, Costa Rica ocean view](https://thepracticaldev.s3.amazonaws.com/i/7oyni2w4wpkahfy2zkwq.jpg)

Right now, I'm hanging out in my car downtown getting ready to head to the React meetup tonight. I'll most likely be streaming it on https://otech.events as well. Afterwards, there a couple of HIPHOP events I may stop by on the way home. Some people I know are performing so it'll be good to see some faces I haven't seen in a minute. Going to be a full evening.

Have a great day tomorrow!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube UPAXrXiFbIg %}
The Mesh is Here!
Tags: javascript, graphql, news, startup
Published: 2019-10-17 21:44:07

###We are very excited to announce the opening up of the [TakeShape Mesh](https://www.takeshape.io/mesh/) service!

Those of you who signed up for the Mesh Beta are first in line as we start to onboard people! Today at the [San Francisco JAMstack Conference](https://jamstackconf.com/sf/), TakeShape’s CTO Andrew Sprouse dropped this news. For those of you who weren’t able to make it, or haven’t [signed up](https://app.takeshape.io/signup/) yet, this article is for you. 🤗

Over the last year, we’ve been working heads down to make sure the Mesh is plenty robust for your powerful web application. The Mesh unites all of your services into a single backend GraphQL API. Now you can compose, sync, and fetch content and data across your multiple APIs with ease. We’re starting with two service TakeShape CMS and Shopify with more to quickly follow as we hear from the community what APIs are most needed.

All you need to do is [login](https://app.takeshape.io/login), and toggle to the Mesh tab! If you don’t see the Mesh button here yet, don’t worry. It’ll be rolling out to each of you slowly yet surely. And we want this beta to be meaningful, so give us your feedback. From your nicest words to your harshest criticisms, our ears and eyes are open.

Take TakeShape for a spin!
Continuous integration, continuous delivery and continuous deployment in a nutshell
Tags: devops, webdev
Published: 2019-10-17 20:26:27

Many people misunderstand between continuous integration, continuous delivery, and continuous deployment terms. In this article, I am going to simply these terms in simple words.


#What is Continuous Integration
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/0w36ndtiw5uxu4oeqt6f.png)
When you finished developing on a feature branch and you want to merge your code back to your main branch. You need to run your tests before merging to the main branch to make sure that your feature is not breaking anything. This repetitive task is called **continuous integration**, but doing this manually every time before merging to the main branch is boring and it will be an issue in large teams. Thanks to **CI** tools such as Jenkins, Travis CI, and circle CI, you can run your tests automatically and apply CI in your workflow.

#What is Continuous Deployment 
Continuous Deployment is all about releasing your app without any human interaction, so whenever a new code is merged to the main branch (after passing your tests), there will be a new release on your production environment.


#What is Continuous Delivery 
Continuous Delivery is different from Continuous Deployment in only one thing, you need to click a button to deploy your app or decide when can release your application (human interaction is required).


Now the question is: what is the best choice, Continuous Deployment or Continuous Delivery?

Answer: This depends on your business needs. If you don't have users yet in your system, then continuous deployment should fit your needs, otherwise, you need to follow the continuous delivery approach. I believe you can mix between those two approaches in your workflow by applying continuous deployment on your **development** branch so that whenever you merge your code to **development** branch, your app will be deployed automatically on the **development** environment. If you want to proceed to production, you need to click a button to release your app on **production** environment.

Here is a simple illustration:
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/rc6zhr4zdn4qhb1jkd0z.png)
A "Built To Throw Away" Mindset in Software Development
Tags: simplicity, pragmatic, agile, programming
Published: 2019-10-17 20:00:37

---
title: A "Built To Throw Away" Mindset in Software Development
published: true
description: Never set aside time for cleaning.Clean as you go. 
tags: #Simplicity #pragmatic #agile #programming
---

Let’s discuss your production code. Yes, all that junk you’ve been writing and currently sitting in production. We've all contributed to some of that and there is no shame to be had about it. Perhaps it was the best you could do at the time with what you knew. Maybe the technology simply wasn't there.  Its all lessons learned even though some of us may like to pretend that this does not apply to them. They've crafted procedures and protocols in place designed to prevent this exact problem. Weeks are spent on sizable design documents, UML diagrams, and all the bells and whistles that go with that. Everything is accounted for before coding takes place. With the premise that, by the time the associated piece of code is done, it is as solid as it can get. Built to last we should say. Except that it's not what the client wants by then.

Besides the fact that these documents have no profound value, any team out there on a mission to build tanks or bulled proof code needs to reevaluate their basics. Software is like any other living thing. It's there to serve a purpose within a given set of constraints. It should be allowed room to grow and change. This may sound mundane but it has profound implications on your speed of delivery and simplicity.  Please note that I'm not promoting some type of careless practice with endless refactoring. I'm softening your fear of change and advocating pragmatic solutions. No amount of design and documentation will foresee business needs. Be open to modifying your code as constraints and time allow.  This should be expected and your system should be designed as such by segregating fundamental business rules from external dependencies.

With a "built to throw away" mindset, dependencies are minimized and responsibilities managed. More importantly, developers welcome change with open arms as this can be achieved in small increments without having to carve out an extended time dedicated to refactoring. No single module, class or function is considered irreplaceable. In this mindset, progress can be better evaluated as a function of how much code you threw away than how much you've added. Any portion thrown away means you've understood the problem a bit better. This is progress.
I need a mathematician, Iridescence effect canvas?
Tags: help, javascript
Published: 2019-10-17 19:53:45

This is the effect I most want to produce on canvas in 2D or glsl contexts. Does anyone know the algorithm to do this? Its like oil on water and so on, note that it's vibrant and rough which is kind of what I'm after, is it perlin noise that I should investigate? I'd also like it to animate really slowly at the speed of crude oil.
Cypress e2e testing : My talk at Node.JS Meetup Berlin in Germany 💥
Tags: node, cypress, javascript, testing
Published: 2019-10-17 19:39:18

As a speaker, I attended Node.JS Meetup Berlin event in Germany.

This is the largest NodeJS community group in Germany. It was awesome to be there as a Speaker.

Being a Polyglot Engineer, I really like the JavaScript ecosystem including NodeJS and it's surroundings.

JavaScript ecosystem changes rapidly and it's really fun and hard at the same time to learn/know most of the things.

To do the end-to-end test for Modern Web 2.0 applications is really hard. And Cypress really has changed everything how we think for e2e testing.

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

[Cypress.io](https://www.cypress.io) is becoming popular day by day. And it's growth rate is tremendous!

I thought - I would talk about Cypress at NodeJS meetup and the audience really liked it. I am sharing my slides here but I showed LIVE demo which was the most fun part. 🔥


{% speakerdeck b6e4613364454dcf99cb8e356696ec5a %}


![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/5veee1vv1cwohng61zlq.jpg)


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

Hope, you guys like it!

{% twitter 1184917968389627905 %}

Cheers!
:wave:

As I am trying to contribute contents on the Web, you can buy me a coffee for my hours spent on all of these ❤️😊🌸
<a href="https://www.buymeacoffee.com/destromas" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" style="height: 51px !important;width: 217px !important;" ></a>

My Blog: https://shahjada.me
hsl() with CSS variables? 🚒
Tags: css, webdev
Published: 2019-10-17 19:25:29

Peek-a-boo, sorry I got caught up in a toddler moment.

Everyone is talking about how to create a theme with CSS variables, although to me this is just the tip of the ice burg I thought short and hard about how this idea of dynamic theming could be taken up a notch.

Do you ever use hue, saturation, lightness alpha in your CSS? hala() in my entire career has only appeared once, and that was when a very excited Chris Coyier (big fan) wrote about the subject early last year [CSS Tricks post](https://css-tricks.com/hsl-hsla-is-great-for-programmatic-color-control/).

I thought, "it's nice but more cognitive load to manage all those colors. Plus I'm kind of used to writing rgba". You can't deny that rgba does produce colors.

I have come to realize from recent posts that when you want to create a pallette, you could go to a pallette tool and get 5 colors and not know what to do with them, because those 5 colours are not absolute, you are meant to modify the hue, saturation, lightness to fit the situation, not take them as goapal. 

As CSS variables (custom properties for all the righteous name crusaders out there) are a thing, and so it's reasonable to assume that not only could you change the theme from red to blue, such transition much hue! The potential goes further as you could lighten your theme or even greyscale it a touch.

``` css
.all-The_Things {
   background-color: hsl(var(--rainbow), var(--depresion), var(--sunglasses));
}

```

Yet another philosophical post. Enjoy your evening, until next time, outro text here... Love you all ♥️
My son's first GitHub Repository
Tags: python, webscraping, requests, beautifulsoup
Published: 2019-10-17 19:22:56

---
title: My son's first GitHub Repository
published: true
description: My son's first open source release. Let's appreciate him :)
tags: Python, Web Scraping, Requests, BeautifulSoup
---

![Cambridge Past Papers Downloader - Python Script](https://thepracticaldev.s3.amazonaws.com/i/kw1ifuf7pay3jdsmbbc0.jpg)

**Proud moments for a Dad**

I have finally convinced my son to take a step forward and publish something in public domain. As he is learning Python these days, he made a scraper to download Cambridge past papers (GCSE / IGCSE).

If you like it, encourage the kid by pressing the Star button :)

https://github.com/UsamaKashif/CambridgePastPapersDownloader
React Resources
Tags: react, libraries, resources
Published: 2019-10-17 19:20:51

---
title: React Resources
published: true
description: A list of helpful resources and libraries for React Development
tags: react, libraries, resources
---
This is a list of helpful tools and libraries for React development. It will be continuously updated. Feel free to suggest more in the comments and I'll include them in the main doc as I update. 


PACKAGES

axios
dotenv
node-sass
react-dom
react-redux
react-router-dom
react-stripe-checkout
redux-logger
redux-persist
redux-saga
redux-thunk
reselect
styled-components


COMPONENT LIBRARIES

React Rainbow
https://react-rainbow.web.app/#/Components

Bit
https://bit.dev/

Materialize-CSS and Material-UI are libraries that have some nice-looking and handy premade components that can be used for React development.


GUIDES

Paid course, but very affordable when on sale (~$13), and worth every penny. Best if you already have a firm grasp on JavaScript through ES10.
https://www.udemy.com/share/101WH4AkEeeFdSRn4=/

The React Handbook - a massive free guide to building web applications with ReactJS (116 minute read): https://medium.freecodecamp.org/the-react-handbook-b71c27b0a795

https://leveluptuts.com
To Split or Not to Split
Tags: commentary
Published: 2019-10-20 11:06:17

---
title: To Split or Not to Split
published: true
date: 2019-10-17 18:43:37 UTC
tags: commentary
canonical_url: http://blog.jonstodle.com/to-split-or-not-to-split/
---

Some people encourage smaller functions rather than larger ones. “If a function does more than one thing, break it into smaller ones”, they say. Others say that breaking functions into smaller functions like that reduces readability. “Keep everything in one place if it belongs together. Don’t make me jump around the code to find out what’s happening”.

Personally, I’m leaning towards the first opinion. I feel calling smaller helper functions inside a larger one assists readability. The larger function describes the overall process, while the smaller ones abstract away the nitty gritty of each task, making the whole flow easier to read.

I think there’s an important point to make about these helper functions: **I always keep them pure**. I don’t want these helper functions to modify local state of any kind. They take some kind of input and return a result. That’s it.

I think some of the people who dislike splitting up functions would let helper functions mutate state, which I agree would create a lot of mess. By keeping the helper functions pure, I think this confusion is avoided.

Just a thought.

Happy coding!
Looking for Job/Work Contract
Tags: career
Published: 2019-10-17 18:38:43

I am looking for a good job or work contract. I have 5 Years of experience in web development.

Skills:

- Reactjs
- Expressjs
- Angular
- Laravel
- MySQL
- MongoDB

Visit my [website](https://maitraysuthar.github.io/portfolio/) for more details and update CV.

Anyone can direct contact me on my email: maitraysuthar@gmail.com .

References are very appreciated. Looking forward.

Thank you. Have a nice day!
Interviews with open source maintainers and developers
Tags: showdev, opensource, hacktoberfest
Published: 2019-10-17 18:27:26

When I started working as a developer a few years ago, I barely considered that there were people devoting their free or paid time to all of the open source software I depended on. Of course, every piece of software you depend on has one or more humans behind it, and they have stories to tell which might be instructive for others. Hence I built a site to share those stories (the framework for which is heavily inspired by IndieHackers).

I have 3 main aims with SourceSort: 1) discover and share best practices (and learnings from failures) for other open source maintainers and developers 2) promote the projects and maintainers I interview and 3) satisfy intellectual curiosity. I'd love to hear any feedback from the DEV community on whether I've managed to fulfil these aims so far.

Here's the site: https://sourcesort.com


(And thanks to all of the developers who took part in this first set of interviews, all of whom have been very friendly and generous with their time.)