teleren/devto huggingface dataset:
Demystifying Array.prototype.flat
Tags: javascript, webdev, learning, productivity
Published: 2019-06-18 11:27:52

---
title: Demystifying Array.prototype.flat
published: true
description: I'm an ECMAScript junky and I wanted to dive into the latest features! In this post, we're looking at a new method to flatten arrays.
tags: javascript, webdev, learning, productivity
cover_image: https://thepracticaldev.s3.amazonaws.com/i/adm40uwekj9clrrhhemu.png
series: Demystifying ES2019
canonical_url: https://tenmilesquare.com/demystifying-array-prototype-flat/
---

ES2019 is officially available for us all to play with. Caution ahead, make sure that if you use these features your browser and/or transpiler supports them.

Without further ado, let's dive into our first new feature. I give you Array.prototype.flat!

# The Old Way

Embedded arrays exist in our code for any number of reasons, and to be honest, they're kind of a pain.

```javascript
let arr = [1, 2, [3, 4, [5, 6]]]
```

Handling stuff like this used to require unintuitive trickery like the code below.

```javascript
var merged = [].concat.apply([], arr);
```
And that would only result in one level of depth being flattened!

```javascript
[1, 2, 3, 4, [5, 6]]
```

Boooooooo

# The New Way!

Then along came `flat()`. And this is a game changer.

Doing the same thing we did above is a breeze.

```javascript
var merged = arr.flat(1)
```

That argument is just the depth that we want to flatten. So one level deep gets us this, just like before.

```javascript
[1, 2, 3, 4, [5, 6]]
```

Note that if you don't pass an argument it defaults to `1`. That means these statements are equivalent. 
```javascript
arr.flat(1)
//is the same as
arr.flat()
```

# Magic

But what is so incredibly powerful is that it doesn't stop there. We can flatten our entire array in a single line.

```javascript
var merged = arr.flat(2)
```

Becomes

```javascript
[1, 2, 3, 4, 5, 6]
```

# Wait for It

We've even been gifted one more awesome feature. Let's say we don't know the depth of our array but we want to flatten it all the way.

```javascript
var merged = arr.flat(Infinity)
```

![Ron Swanson saying what the hell just happened](https://media.giphy.com/media/xhN4C2vEuapCo/giphy.gif)


#In Summary

It's a miracle!!! Go forth and enjoy the awesomeness that ES2019 has gifted us.
WordPress on Heroku 2019
Tags: webhosting, cheapwordpresshost, heroku, wordpress
Published: 2019-06-19 05:21:32

---
title: WordPress on Heroku 2019
published: true
tags: Web Hosting, cheap WordPress host, Heroku, WordPress
canonical_url: https://kevinhq.com/wordpress-on-heroku-2019/
---

Is it possible to run WordPress on the Heroku on this 2019? The short answer is yes. It is possible. But is it feasible? Let’s see. SSL If we want our WordPress to use SSL on Heroku, then we need at least to pay for their Hobby plan which is $7 per month. But, that’s… 

[Read More »WordPress on Heroku 2019](https://kevinhq.com/wordpress-on-heroku-2019/)
Divert Vertical Scroll To The Side ↔️
Tags: javascript
Published: 2019-06-18 10:59:58

---
title: Divert Vertical Scroll To The Side ↔️
published: true
description: Does your design involve horizontal scrolling? Ensure that natural, vertical scrolling works as intended.
tags: javascript
series: Blog-A-Day in June
---

Let's try a combined blog post today: one tip for helping your users get around when you have horizontal scroll areas (for effect, or whatever), and one tip for _navigating_ the web.

## Vertical To Horizontal

If you have a great, amazing UI feature which just happens to scroll horizontally: think a big long list of products which go on forever, users can use say, a trackpad or a scroll bar to get there.

But if your user has a regular mouse with only a vertical scroll wheel, how can they navigate that area? 🤷

We can actually redirect catch the `wheel` event, and just modify the `scrollLeft` property (which controls _horizontal_ navigation) based on `deltaY` (the up and down motion of the wheel). We also need `deltaX`, as otherwise we prevent real horizontal scrolling. Take a look:

```js
// handle up/down scrollwheel on the scroller, as most folks don't have horizontal scroll
scrollableElement.addEventListener('wheel', (ev) => {
  ev.preventDefault();  // stop scrolling in another direction
  scrollableElement.scrollLeft += (ev.deltaY + ev.deltaX);
});
```

{% codepen https://codepen.io/samthor/pen/jjroEa %}

This is something we used on Santa Tracker in the [🧝 Elf Builder](https://santatracker.google.com/elfbuilder.html) game.

## The Tip (aka Today I Learned)

If you scroll vertically on a page (in nearly any browser) but hold down _shift_, you'll actually scroll horizontally.

# Thanks!

That's all for today!

18 👋
On Saving Characters
Tags: css, webdev
Published: 2019-06-04 03:24:26

## Recently I discovered something mind-blowing that I feel like I should have known for years.

**This article was originally published on 06 May, 2013 at [Trezy.com][canonical].**

When I write my sans-serif font-family stack in my CSS file I normally use this:

```css
body {
 font-family: Ubuntu, Helvetica, Arial, sans-serif;
}
```

[Ubuntu][font-ubuntu] is one of my favorite fonts which I import from [Google Fonts][google-fonts] but you can replace it with whatever custom font you want. Since I prefer Helvetica over Arial, it's the next font on the list which I'm hoping they have preinstalled. If not the stack falls back to Arial, then the default `sans-serif` system font.

Now I've been writing my font stack this way for several years (sans the custom font) completely oblivious to the ridiculously obvious fact that half of the stack isn't necessary. The `sans-serif` piece of the stack asks for the system's preferred `sans-serif` font which, by default, is Arial on Windows and Helvetica on Mac. If I'm not concerned about the user having changed their default `sans-serif` font, I can cut 16 characters (not including spaces) out of my font stack:

```css
body {
 font-family: Ubuntu, sans-serif;
}
```

When I realized this a couple days ago, I subjected myself to an hour of staring at terrible websites as punishment for my ignorance. After recuperating from the debacle I decided to take a closer look at my new font stack. The only issue I have with it is that I don't trust my Windows users to not have changed their default system font to [Comic Sans][font-comic-sans] or [Papyrus][font-papyrus]. Fortunately, Windows will fallback to Arial if you declare Helvetica and it's not installed! When it's all said and done our font stack should like this:

```css
body {
 font-family: Ubuntu, Helvetica, sans-serif;
}
```

It's not a performance saver and it's not going to impress anybody - in fact you may look like an idiot if you admit to not having known this already - but it's a nice piece of info to have when writing your font stacks.





[canonical]: https://trezy.com/blog/on-saving-characters
[google-fonts]: https://fonts.google.com
[font-comic-sans]: https://bancomicsans.com/main/
[font-papyrus]: https://trezy.com/blog/christmas-time-with-papyrus
[font-ubuntu]: https://fonts.google.com/specimen/Ubuntu
Vanilla Place Picker - Place Picking Needs in Android.
Tags: kotlin, android, placepicker
Published: 2019-06-18 10:46:31

Vanilla page picker offers the UI- That means it displays an Interactive map that displays accurate information and place details with prediction based on the user input query.

Want to build your Place Picker?

Checkout our code @GitHub: [Vanilla - Place picker](https://github.com/Mindinventory/vanilla-place-picker)

Hope you get this!

Don't Forget to Comment your Views.
Understanding the JavaScript language (guidelines for beginners)
Tags: javascript
Published: 2019-06-18 10:44:34

---
title: Understanding the JavaScript language (guidelines for beginners)
published: true
description: https://www.ma-no.org/en/understanding-the-javascript-language-guidelines-for-beginners
canonical_url: https://www.ma-no.org/en/understanding-the-javascript-language-guidelines-for-beginners
tags: javascript
---
Why I am building a digital government
Tags: government, vue, node, javascript
Published: 2019-06-18 10:23:23

Governments often lack innovation in the digital space, and technology has enabled an extremely convenient way of life, compared to traditional living.

You're lucky if your government is using a legacy digital system, where most won't even be using websites for many government functions.

I decided to build Arkovia on the grounds that a government must be technologically innovative.

I set out to build a digital government on [Arkovia.com](https://arkovia.com)

The government's central digital foundation would be [myArk](https://arkovia.com/services/myark), which is Arkovia's online accounts system, where anyone, not limited to citizens would be able to signup. This account would serve as the central hub for the digital government.

Citizens would be able to use this account to register businesses, apply for citizenship, and do other various citizen tasks.

The front-end is using Vue, and Node.js in the backend. Creating this site has prompted me to create an entire CMS using:
- Vue (for frontend)
- MongoDB (for database)
- GraphQL (for API)
- Node (for server)
- Koa (for routing)

I will be posting regular updates on the progress on the backend

**Edit**
The new government website is now https://promatia.com

We will be publishing news updates on https://promatimes.com
Latest Mobile App Development Technology- Flutter
Tags: flutter, android, ios, startup
Published: 2019-06-18 09:35:05

Why target on a particular device, when you can make all your devices compatible with a single application?

The <a href="https://bit.ly/2RcZcX4">cross-platform application development</a> of Data EximIT allows you to own an innovative application that is compatible with multiple operating systems.

1. Convenient coding to suit the concept
2. Real time project updates
3. Mobile app development on multiple platforms

Flutter app development company-Data EximIT, deliver high-quality and bespoke mobility solutions to our clients to achieve their business objectives!

For more details, read : <a href="https://bit.ly/2H8R1Iy">Top Flutter App Development Company in India</a>
Angular 9|8 ngIf, ngIfElse, ngIfThen Tutorial with Examples
Tags: softwaredevelopment, angular98, ngifelse, angifthentutorial
Published: 2020-01-30 10:19:46

---
title: Angular 9|8 ngIf, ngIfElse, ngIfThen Tutorial with Examples
published: true
tags: Software Development, Angular 9|8, ngIfElse, angIfThen Tutorial
canonical_url: https://www.positronx.io/angular-8-ngif-ngifelse-ngifthen-tutorial-with-examples/
---

In this tutorial, we are going to understand **Angular 9|8 ngIf, ngIfElse, ngIfThen** structural directive with Examples. Angular 9|8 offers a wide range of basic directives which help you to render the template based on the condition applied to the template. 

The **structural directive in Angular 8** works on boolean value pattern if the value is true, then the template is rendered, and if the value is false or null, then it doesn’t render the template. I will show you in this tutorial how do **Angular 8 structural directives** work with examples. Let us take a closer look at the structural directive properties.

| Property | Detail |
| --- | --- |
| **ngIf** | It’s write-only property works on boolean expression to identify as the condition to render a template. |
| **ngIfThen** | It’s write-only property, it renders the template when the the condition return true. |
| **ngIfElse** | 

It’s write-only property, it renders the template when the the condition return false.


## Angular 8 \*ngIf Example

[click here to read more](https://www.positronx.io/angular-8-ngif-ngifelse-ngifthen-tutorial-with-examples/)
Advantages of Using  Paper Writing Service 
Published: 2019-06-18 09:11:45

In the event that you figure you can't compose the paper yourself, utilizing our administrations is a decent choice for you. We comprehend that you might be excessively over-burden with work to compose such a protracted exposition yourself. Considering the way that these papers are normally allowed as composing assignments by educators close to the finish of semesters and terms. That is additionally when the last tests of the year are coming. Understudies experience considerable difficulties picking between finishing their tasks, assignments, and <a href="https://www.wordsdoctorate.com/"> paper writing service  </a>, and getting ready for the tests. In the event that you figure composing it will require so much investment that you won't almost certainly complete other significant errands, pick carefully! On the off chance that you utilize our administration, this is what you get: 
Someone else will compose your paper who is a specialist recorded as a hard copy research projects as well as in the applicable field of study. Consequently, the paper will be cautiously, attentively, and impeccably composed. 
You will most likely concentrate after finishing different assignments and planning for tests as our master essayists set up the <a href="https://www.wordsdoctorate.com/services/dissertation-writing-services/"> Dissertation Writing Services </a> for you. You will most likely become familiar with a great deal by perusing the paper we convey. Your essayist will fuse the correct ideas and thoughts in the paper identified with the subject. You may build up your ideas better along these lines. 
Our Term Papers Accord with Your Academic Level 
"Would you be able to compose my <a href="https://www.wordsdoctorate.com/services/research-paper-writing-services/"> research paper Writing Services </a> at the school level?" Yes, we can! One of the claims to fame of our administration is that it provides food for the necessities all things considered. Understudies from every single scholarly dimension extending from secondary school to school, undergrad level, graduate dimension, and Ph.D. level can get help from us. Our journalists have been conveying custom research projects for quite a long time, and they are knowledgeable with the scholastic necessities everything being equal and levels. Simply notice the dimension of the paper you need, and we'll compose it for you.
Problem with moving files to subfolders
Tags: python
Published: 2019-06-18 09:01:39

Hey,
I have a problem with the code below. It should automatically move files with the same name (or only a part of it) as the directory into directories and subdirectories.
It works very well for root directories but not for subdirectories. I thought os.walk was going through the whole tree structure. If you see where the bug comes from.... Thank you for your help.

def moveFiles2Folder():
    root_path = lien vers mon répertoire de départ
    for (root, dirs, files) in os.walk(root_path):
        for dir in dirs :
            for file in files :
                    fileX = os.path.splitext(file)[0]
                    if fileX in dir :
shutil.copy(os.path.join(root_path,file),os.path.join(root_path, dir))
Lightning fast installation of AsmBB forum.
Tags: webdev, asm, asmbb
Published: 2019-06-18 08:20:50

The web applications are often complex for installation. Mainly because of the dependencies and complex configuration.

Here is how it should be done:

**[AsmBB](https://board.asm32.info)** web forum engine has very few dependencies. It needs only Linux and some web server. 

In the bellow video, the fastest, assembly language written web server **[RWASA](https://2ton.com.au/rwasa/)** is used.

So, less talks, more action! Look how to install **AsmBB** forum and make a post for less than two minutes:

{% youtube 2cnOqQX5rxk %}

P.S.: Of course, this is not a production installation. But on a real server you will need only to make the programs to start automatically. 

Here is an article about [how to install AsmBB](https://board.asm32.info/asmbb/how-to-install-asmbb-on-vps-with-nginx-and-systemd.163/) on a production server with systemd and nginx. You can see it is almost as easy and quick.
Nested Ternary statements in React JSX
Tags: react, javascript, eslint, codepen
Published: 2019-06-18 07:39:29

After discovering our ESLinter hasn't been running for *some time* I've spent most of today going through trying to fix a whole bunch of eslint and a11y issues in our React app.  I hit quite an interesting one:
```javascript
/*eslint no-nested-ternary: "error"*/
```

Which basically means, don't do this:
```javascript
const drink = dislikeCoke ? 'fanta' : likesCherry ? 'cherryCoke' : 'dietCoke';
```
Which I think in general everyone can get behind as a rule.  It's not readable code, even when split over multiple lines with indentations, and should be broken out into if statements.

However, this is a very common pattern in React where we can use ternary statements to do conditional rendering in a component.

```jsx
 <h1>Data Loader!</h1>
        { this.state.loading ? 
        <h2>It is Loading.</h2>
          : this.state.data ? 
          <h2>{this.state.data}</h2>
          :<h2>There was no result!</h2> 
        }
```
        

(This is a very contrived example).

I poked around on the internet for a while and the best alternative I've found to this is to extract the second part of the ternary into a stateless functional component.  The component can still live in the same file so it's still quick and easy to comprehend, and I found it to be a nice way to encapsulate the UI code.

```jsx
const DataDisplay = ({data}) => data ? 
          <h2>{data}</h2>
          :<h2>There was no result!</h2> 
          
          ...
          
          { this.state.loading ? 
        <h2>It is Loading.</h2>
          : <DataDisplay data={this.state.data}/>
        }
```

Full example codepen below:
{% codepen https://codepen.io/samberic/pen/JQKbMd %}
As a freelance web developer, how do you cope up with learning so many technologies?
Tags: discuss, productivity, webdev, career
Published: 2019-06-18 08:13:32

Its no secret that the `webdev` world is currently riddled with byzantine amount of complexities in all areas like frameworks, libraries, standards, coding languages, markup languages, build systems, documentation systems, container and virtualization systems, database management, machine learning and statistics, etc.

Now, a large company or think tank has the luxury to hire hundreds of smart technical experts in all of these areas but a solo freelancer dude doesn't have that luxury, right?

As a freelancer, how do you cope up with all this? In order to be competitive in today's cut-throat competition in freelancing, you must have the knowledge of at least little bit of all these areas.

As these complexities become even more nuanced in the coming decades, do you think that freelance coding will finally be a dead field? There are limitations to how much a single dude can learn or grasp after all, you can't keep up with everything that's going on everywhere. Where do you see the future of freelance programming going in this regard?
AMA with Julia Silge, Stack Overflow's Data Scientist 
Tags: datascience, stackoverflow, sql, discuss
Published: 2019-06-18 08:12:59

Hey! I work for TNW, and wanted to let you know that we’re hosting an AMA with Julia Silge, Stack Overflow’s Data Scientist, this Wednesday. Here's the link if you're interested and/or want to ask a question!    https://answers.thenextweb.com/s/julia-silge-X4MWDG
A secret way to test your React without writing code.
Tags: javascript, react, testing
Published: 2019-06-18 08:10:43

Writing tests is like eating your veggies: it is something everyone knows that they should do, but not everyone does. Spearmint provides a simple way to write tests that give you confidence your React application will work in the way your users interact with it. 

Using Spearmint, developers can easily generate React tests by using our user-friendly GUI. It dynamically converts user inputs into executable Jest test code by using DOM query selectors provided by the react-testing-library. We chose react-testing-library over Enzyme because it guides developers to focus on testing user behavior rather than testing implementation details. By leveraging react-testing-library, our application provides our users with more stable tests that do not break when refactoring or gives false positives due to shallow-rendering.

Visit us at:
www.spearmintjs.com
www.github.com/spearmintjs/spearmint
How do you teach programming to your kids?
Tags: basic, programming, discuss, kids
Published: 2019-06-18 08:04:33

---
title: How do you teach programming to your kids? 
cover_image: https://thepracticaldev.s3.amazonaws.com/i/1hxpge19l6l2k1s01d6j.jpg
published: true
description: Share your experience teaching programming to the kids
tags: basic, programming, discuss, kids
---

My elder son is in 6th grade and had Basic, Logo, kturtle, edubuntu in his curriculum so far.

Last weekend he asked me to help him learning Ruby. Basically I am Ruby programmer by profession and he is fascinated by the apps created using Ruby on Rails.

I have been in programming for about 12 years. I designed couple of courses and trained hundreds of people in my career in different organizations. But I find it difficult where to start and how to train kids.

I am sure many of you have been passed through and found a path. It would take a full length article to share your experience but do share whatever you can which would surely help kickstart.
A free image editor plugin for any web project
Tags: javascript, webdev, react
Published: 2019-06-18 08:01:29

---
title: A free image editor plugin for any web project
cover_image: https://thepracticaldev.s3.amazonaws.com/i/epmdn4s6840wh13e67cx.png
published: true

description: Filerobot Image Editor is a free and open source plugin which allows you to easily implement image editing capabilities into your projects with JavaScript code. You can crop, resize, change orientation and apply a variety of filters or effects: https://scaleflex.github.io/filerobot-image-editor/
tags: javascript, webdev, react
---
Filerobot Image Editor is a free and open source plugin which allows you to easily implement image editing capabilities into your projects with JavaScript code. You can crop, resize, change orientation and apply a variety of filters or effects.
https://scaleflex.github.io/filerobot-image-editor/