teleren/devto huggingface dataset:
3 Time Management Tips that worked for me 
Tags: productivity
Published: 2019-08-27 10:04:16

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

- **Break down your Tasks** 

I like to break down all of the tasks on my [to-do list](https://quire.io/compare/best-to-do-list-apps
) into chunks that I can handle in one go. This way I am more likely to finish them and close off the tasks as soon as possible. It will gives me a sense of accomplishment and motivates me to do more.  

- **Prioritize!!** 

Oh my goodness! I will admit this is the hardest part for me. We only have 24 hours each day, so choosing what to work on is so important! Before I get started, I will always say to myself, “is this task a must do?” or “is this task due soon??” (Of course, I will be careful and not [burn myself out](https://quire.io/blog/p/7-productivity-tips-to-avoid-burnout-at-work.html))


- **Start doing** 

Just start working. I know I know… It’s Monday morning, nobody wants to work. But no, there’s no time to procrastinate. I, like everybody else, will think oh.. there’s a right moment for me to start. No, right there and then is the right moment to start. Just start working! I always start with the small tasks, checking off the small things on my [list](https://quire.io) increase my confident and get myself to do more throughout the day.
Daily Challenge #50 - Number Neighbor
Tags: challenge
Published: 2019-08-27 13:33:45

---
title: Daily Challenge #50 - Number Neighbor
published: true
series: Daily Challenge
tags: challenge
---
Given a phone number of integer length `N (1 ≤ N ≤ 10)` as a number string (e.g. `555-555-5555` would be passed as `"5555555555"`), return an array of all phone numbers as number strings that would be considered neighbors of that phone number (which is any numbers ±1).


> For example: someone with the phone number `555-555-5555` has neighbors `555-555-5554` and `555-555-5556`.

***
_Want to propose a challenge idea for a future post?  Email **yo+challenge@dev.to** with your suggestions!_

_This [challenge](https://www.codewars.com/kata/5d5300a06b760900018d1b25) comes from SaladFork on CodeWars. Thank you to [CodeWars](<https://codewars.com/>), who has licensed redistribution of this challenge under the [2-Clause BSD License](<https://opensource.org/licenses/BSD-2-Clause>)!_
Why does two small for-loops run faster than a big one ?
Tags: explainlikeimfive, discuss, javascript
Published: 2019-08-27 13:30:02

---
title: Why does two small for-loops run faster than a big one ?
published: true
description: 
tags: explainlikeimfive, discussion, javascript
---
*Explain Like I am five* Why does two small for loops run faster than one big for loop?

```
s = Date.now()
for(let i=0;i<1e10;i++) { i + 100 }
for(let i=0;i<1e10;i++) { i + 100 }
console.log(Date.now() - s)
// => 37s


s = Date.now()
for(let i=0;i<2e10;i++) { i + 100 }
console.log(Date.now() - s)
// => 38s

```

Especially for language like JS which is not multi-threaded
Svelte and Bulma
Tags: svelte, bulma
Published: 2019-08-27 13:02:34

Hi there, for those looking for a way to put Svelte and bulma Together, I did a small project showing how I solved it:



A Demo is available here: https://jumanja.co 
The code is here: https://github.com/jumanja/SvelteBulma

For now, it uses a nav, breadcrumbs and one single input, which you can edit and it will change the Hello message, using the links will update the breadcrumbs, and it is using a Home component hdden when the link is not Home.

I really appreciate your comments, as I 'm planning to do a full post with step by step (if needed), and maybe complete the project to put more content and connecting this example maybe to REST API (for completion sake). 

Best Regards,
Juan
https://jumanja.net
Ternary Operator, I miss you
Tags: kotlin
Published: 2019-08-27 13:08:55

Kotlin is a wonderful language but I remember I was really sad when I saw that it doesn't have the ternary operator. I was a Java developer and I have user this operator a lot of times because I think it's fast to write and easy to read.

Wait, wait, yes: I know that `if` expression returns a value, but I think writing an `if` is superfluous when the body has only one instruction.

For example:

I'd rather write this code
```
val foo = booleanValue ? something : anythingElse
```

than this

```kotlin
val foo = if (booleanValue) something else anythingElse
```

Also, since the body may present a complicated expression, using the ternary operator I could write fewer lines of code.

Yes, you're right, I'm lazy; but If I wasn't so lazy, I'd be a farmer instead of a developer.

And yes you're right when the code is too much concise, it is less readable and I also believe that balance between readability and brevity is a good thing, but I don't think that ternary operator is the problem.

In fact, Kotlin advocates suggest us to avoid a list of `if` because it can lead to many bugs and so why shouldn't the ternary operator be kept?  

What do you think about it? Do you agree with me?
stargazed : Creating your own Awesome List of GitHub Stars!
Tags: javascript
Published: 2019-08-27 13:03:57

---
title: stargazed : Creating your own Awesome List of GitHub Stars!
published: true
description: Creating your own List of GitHub Stars
tags: javascript
---

Creating your own Awesome List of GitHub Stars!

I have build an awesome npm module which can convert all your GitHub starred projects to a list sorted by language to a markdown file.

The source is at

https://github.com/abhijithvijayan/stargazed

Published to npm as

https://www.npmjs.com/package/stargazed
🌮 Git 'r done when you're done.
Tags: git, productivity, showdev
Published: 2019-08-27 13:03:39

***Once again*** I'm waiting for my app to run its tests and build so I thought I'd write another quickie.

Previously I showed how I wrote a git function for emergencies and I need to [GTFO](https://dev.to/chiangs/in-case-of-fire-gtfo-30g4).

Today, I want to show you a more common process we all might do if we are working by ourselves or on small-teams.

When I'm done with a feature branch this is usually the steps I go through:

_(Assuming I'm at the top level of my directory and I've done `git push origin head -u` in the past)_


```shell
> {feature-branch} git add .
> {feature-branch} git commit -m "Awesome commit msg"
> {feature-branch} git push
> {feature-branch} git checkout develop
> {develop} git merge -
> {develop} git push
```

If I want to clean up the merged branch locally and remotely, I would also have to do this:

```shell
> {develop} git branch -d feature-branch
> {develop} git push origin :feature-branch
```

***That's a lot of steps.***

Here's how I make it easier with `git done` and `git donep`, I actually have an alias setup for `git` as `g` so I'll be using that from now on:

I'm going to go into my `.gitconfig` and create two new aliases like so:

```config
[alias]
  done = ""
  donep = ""
```

Using the same syntax as my `g tfo` function I'll create `done` first which does the following:

1. Merge the branch
2. Deletes the local branch
3. Deletes the remote branch

That function looks like this:

```text
done = "!f() { git merge $1 && git branch -d $1 && git push origin :$1; }; f"
```

You will notice the `$1`. That is a reference to a variable that will be passed in when calling the function which happens to be the branch name. Now, I have tried using `-` and `@{-1}` but deleting the remote branch part of the function won't accept those as references to the last branch used. So unless a reader here has an idea, I am relegated to passing in the feature branch name specifically, which in a way makes it more reusable too, but a bit of a pain if the branch name is complex or hard to remember. But at least, you still only have to type it once!

🤷‍♂️***So how do we use it?***

```shell
> {develop} g done feature-branch
```

🤯 Boom. That's it. 

But with this one, we haven't pushed the changes to develop remote. That's where `donep` comes in.

```text
donep = "!f() { git merge $1 && git branch -d $1 && git push origin :$1 && git push; }; f"
```

```shell
> {develop} g donep feature-branch
```

***note:*** this function also assumes you have done `git push origin head -u` and set the upstream. if you haven't and don't want to, you can modify the function to:

```text
donep = "!f() { git merge $1 && git branch -d $1 && git push origin :$1 && git push origin $2; }; f"
```

and run it like:

```shell
> {develop} g donep feature-branch develop
```

🐱‍👤 ***Git r' done!***

If you find this valuable, please leave a comment and follow me on [Dev.to @chiangs](https://dev.to/chiangs) and [Twitter @chiangse](https://twitter.com/chiangse), 🍻 cheers!
I can post your project to 150 startup lists
Tags: showdev
Published: 2019-08-27 13:01:26

Hi devs,

If you've made a project before you might know the situation that it's hard to get some visibility. I'm offering a little helper service where I post your project to a list of over 150 startup websites. Websites like AlternativeTo, Hacker News, BetaList and so on.

Let me know if you like it,
here it is: https://launchpropeller.com/#/submitplaces
I am a 14 year old code hobbyist and blogger, Ask Me Anything!
Tags: ama
Published: 2019-08-27 12:37:08

I started out coding 4 years ago, going on 5 now. I didn't fall in love with programming right away because it looked like math, but after I realized what it really was about, I got hooked though when I got my first laptop about a year later. It is (i still use it) a small acer aspire netbook with 16 gigs. Boy, was using that hard! I started off with Javascript, but now I use C++, Python, Groovy, Java/Kotlin, C#, ReactNative, Flutter(dart), Smalltalk, and Go. Anyway, go ahead, ask me anything!
Angular Performance: Route Level Code Splitting
Tags: angular, performance, javascript, videos
Published: 2019-08-27 11:28:25

---
title: 'Angular Performance: Route Level Code Splitting'
canonical_url: 'https://juristr.com/blog/2019/08/ngperf-route-level-code-splitting'
published: true
description: Learn about route-level code splitting and lazy loading with Angular
cover_image: 'https://juristr.com/blog/assets/imgs/ngperf/ngperf-lazyloading.jpg'
tags:
  - angular
  - performance
  - javascript
  - videos
---

_This post has originally been published on [https://juristr.com/blog/2019/08/ngperf-route-level-code-splitting](https://juristr.com/blog/2019/08/ngperf-route-level-code-splitting). Go to [juristr.com/blog](https://juristr.com/blog) for more content_

---
    


  This article is part of my "Angular Performance Week" series, where I publish a new video each day based on the performance articles on web.dev/angular. Today we're taking a look at route-level code splitting to increase the TTI of our application.

<!--more-->



> Note: this article and attached Egghead video lesson are based on the articles on [web.dev/angular](https://web.dev/angular) by [Minko Gechev](https://twitter.com/mgechev) and [Stephen Fluin](https://twitter.com/stephenfluin). Full credit goes to them :thumbsup:

## Angular Performance Series

1. **Route Level Code Splitting**
1. [Preload Lazy Routes in Angular](https://juristr.com/blog/2019/08/ngperf-preloading-lazy-routes)
1. [Performance budgets with the Angular CLI](https://juristr.com/blog/2019/08/ngperf-setting-performance-budgets/)
1. [Optimize Angular's Change Detection](https://juristr.com/blog/2019/08/ngperf-optimize-change-detection/)
1. [Virtual Scrolling for large lists with the CDK](https://juristr.com/blog/2019/08/ngperf-virtual-scrolling-cdk/)
1. [Precaching with the Angular Service Worker](https://juristr.com/blog/2019/08/ngperf-precaching-serviceworker)


Don't miss the other videos [by subscribing to my newsletter](https://juristr.com/newsletter).

## Route Level Code Splitting

TTI (Time to interactive) is an interesting metric that measures how long it takes for your app to be responsive, s.t. the user can interact. This is a good performance indicator. One way to improve TTI is to only load the minimum necessary part of our app, and then consequently "lazy load" other parts as they are needed.

In this video lesson we're going to implement route-level code splitting and lazy loading, step by step.

{%youtube gxlCl5P_PC8%}

### Bonus: Showing a loading indicator for lazy routes

{%youtube C0FBR4EUqgk%}

### Original web.dev article

Wanna read the original web.dev article? [Check it out here!](https://web.dev/route-level-code-splitting-in-angular/).
What is JSX?!
Tags: javascript
Published: 2019-08-27 11:07:33

JSX is a XML like syntax extension for JavaScript. It was created by a team at Facebook. It is cool because it allows you to combine the view with the functionality, hence simplifying the developer's experience. It is a syntax extension of JavaScript. It is used in React, though not exactly compulsory, but it comes in useful to be able to work with the UI inside the JavaScript code. In React, you can easily loosely couple both the markup and the logic into a simple unit(Component) using JSX. One of the reasons people like React is because of JSX, because JSX is easier to write and understand than creating and appending many elements in vanilla JavaScript.

JSX is closer to JavaScript, not HTML, so there are a few key differences to note when writing it.

-  'class' is a JavaScript reserved keyword, so to add a CSS class in JSX, 'className' is used instead of 'class'.
-  Properties and methods in JSX are camelCase - onsubmit will become onSubmit.
-  Self-closing tags must end in a slash - e.g. <img />

This is an example of what JSX looks like.

```
const name = 'Temitope';
const element = <h1 className="hello">Hello, {name}</h1>;
```

You wrap the JavaScript elements inside curly braces. JSX allows all of JavaScript's language features, so can be used in functions, if-statements, for-loops, assigned to variables, used as an argument, can be a return value of a JavaScript function.

```
const exactLocation = (user) => {
  return user.state + ' ' + user.country;
}
const greetUser = (user)=>{
  if(user){
    return <h1>Hello, {user.name}. How is {exactLocation(user)} today?</h1>;
  }
  return <h1>Hello, I don't know you</h1>
}

const user = {
  name: 'Temitope',
  state: 'Lagos',
  country: 'Nigeria'
};

const element = (
  <h1>
    {user.name} is from {exactLocation(user)}!
    {greetUser(user)}
  </h1>
);



ReactDOM.render(
  element,
  document.getElementById('root')
);
```

JavaScript expressions are put within curly braces in JSX.

In the code snippet above, the JavaScript function is embedded inside the HTML tags using curly braces. To ensure better readability, JSX is splitted over multiple lines, and to prevent automatic semicolon insertion, it is better to put them in parenthesis(as seen above).

There is a set of transpilers that all conform to the JSX syntax, but they use different semantics on the output.

1.  React JSX: Create React Elements using JSX.
2.  jsx-transform
3.  Babel: includes support for transpiling JSX right out of the box.
Turn existing website to PWA in 1 minute using PWAinit
Tags: npm, node, javascript, pwa
Published: 2019-08-27 10:30:20

![PWAinit logo](https://thepracticaldev.s3.amazonaws.com/i/og9qgi3tvt0qdr40h5nm.png)

#So what is PWAinit?
[PWAinit](https://saurabhdaware.github.io/pwainit) is a command line tool that can be installed using `npm install -g pwainit`. PWAinit lets you initiate a new Progressive Web App or you can even add PWA features like Service Worker, Web App Manifest, PushAPI into your existing website to turn it into a complete progressive web app.

#Installation & Usage
Download [NodeJS](https://nodejs.org) if you haven't already have it in your machine 
```c
# Check if npm is installed using `npm -v` then..
npm install -g pwainit
```

Now cd to your existing website and run command `pwainit add`
```
cd existingWebsite
pwainit add
```
Just answer the questions and thats it!🎉 
If you choose to add push api backend you would have to do absolutely zero configurations!!

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

## Run PushAPI backend
```
cd pushapi-backend/
node index.js
```
PWAinit Docs: https://saurabhdaware.github.io/pwainit
Github: https://github.com/saurabhdaware/pwainit
NPM: https://npmjs.org/package/pwainit
Youtube Demo: https://www.youtube.com/watch?v=bje85AdBOgs
A mixin to rule them all - flexbox-driven layout mixin
Tags: flexbox, css, mixin, utilities
Published: 2019-08-27 10:22:19

Sometimes using __flexbox layout__ could generate __tons of css properties__ and the final result could be __unreadable__ due to the properties generated.

I've maded a simple __scss mixin__ to handle generic flexbox layouts, because I work on complex web applications and I have to made a lot of different layouts.

This mixin handles some (_not all_) flexbox properties, and covers the main cases with flexbox layouts:

```scss
/**
* FLEXBOX
* A mixin to rule complex flexbox layout
* @author nicolacastellanidev@gmail.com
*/
@mixin flexbox(
  $display: flex,
  $direction: row,
  $placeContent: null,
  $placeItems: null,
  $wrap: nowrap,
  $shrink: 0,
  $grow: 0,
  $alignContent: null,
  $justifyContent: null,
  $alignItems: null,
  $justifyItems: null) {

    display: $display;
    flex-direction: $direction;
    
    @if $placeContent == null {
      @if $alignContent   { align-content: $alignContent; }
      @if $justifyContent { justify-content: $justifyContent; }
    } @else {
      place-content: $placeContent;
    }
    
    @if $placeItems == null {
      @if $alignItems   { align-items: $alignItems; }
      @if $justifyItems { justify-items: $justifyItems; }
    } @else {
      place-items: $placeItems;
    }

    flex-wrap: $wrap;
    flex-shrink: $shrink;
    flex-grow: $grow;
}

```

this mixin will help you defining a flexbox-driven elements, for example:

```scss
/* now we can add flexbox layout with a single line of code */
.anchor-top {
  @include flexbox($placeItems: flex-start);
}
    
.anchor-bottom {
  @include flexbox($placeItems: flex-end);
}
    
.anchor-center {
  @include flexbox($placeItems: center);
}
    
.anchor-left {
  @include flexbox($placeContent: flex-start);
}
    
.anchor-right {
  @include flexbox($placeContent: flex-end);
}
    
.anchor-center-hor {
  @include flexbox($placeContent: center);
}
```

These classes can be used to handle html layouts, like this:

```html
<div class="container">
  <div class="box anchor-top anchor-left">
    TOP LEFT
  </div>
  <div class="box anchor-top anchor-center-hor">
    TOP CENTER
  </div>
  <div class="box anchor-top anchor-right">
    TOP RIGHT
  </div>
  <div class="box anchor-center anchor-left">
    CENTER LEFT
  </div>
  <div class="box anchor-center anchor-center-hor">
    CENTER CENTER
  </div>
  <div class="box anchor-center anchor-right">
    CENTER RIGHT
  </div>
  <div class="box anchor-bottom anchor-left">
    BOTTOM LEFT
  </div>
  <div class="box anchor-bottom anchor-center-hor">
    BOTTOM CENTER
  </div>
  <div class="box anchor-bottom anchor-right">
    BOTTOM RIGHT
  </div>
</div>
```

The final result will be:

![Flexbox final result](https://thepracticaldev.s3.amazonaws.com/i/vjgxkjqoz0nnq3axof09.PNG)

Check this pen for a live example:

{% codepen https://codepen.io/NicolaCastellaniDev/pen/wvwdWMV %}

I wish this article will help you <3 love you all
NOT NOT (!!)
Tags: javascript, webdev, html
Published: 2019-08-27 09:47:29

###Picture this###
You need to check if an element exists on a page, let's take a look at this example:

You have a list of cool bugs on your website, but you want to check if the ladybug element is present on a specific instance (maybe the user initially chooses a bunch of insects from a list)

```js
function doesLadybugExist() {
    return (document.getElementById("lady-bug"));
    // This will either return the element, or null
}
```

This looks alright... but, this will either return the element, or it will return null, which is not *wrong*, but in this example its not desired, we want to see if the ladybug **exists**


###Lady bugs are !! cool###

```js
function doesLadybugExist() {
    return (!!document.getElementById("lady-bug"));
    // This will either true if it exists, or false
}
```
Take a closer look and see the **!!**

This is great because it returns a boolean value for us to if the user likes ladybugs or not. **Success!**

But not so fast. How does this work?

A quick google search will tell you that !! does not exist in a java context. It is simply the ! operator used twice.

What this does is it converts a non-boolean to an inverted boolean, meaning any *truthy* values get evaluated to true, and any *falsy* values get evaluated to false (in a boolean context)

All values are truthy unless they are defined as falsy

Below are the values that are falsy in Javascript according to [MDN](https://developer.mozilla.org/en-US/docs/Glossary/Falsy)

No. | Value
---|---
 1. | false
 2. | null
 3. | undefined
 4. | 0 (note: the string '0' evaluates to true)
 5. | NaN
 6. | ''
 7. | document.all



Using **!!** is a clean, and easy way of comparing the state of an element on your DOM against a boolean value without having to worry about type-casting and other conversion methods.

And, lastly, do not not leave a like and a unicorn ;)
What is the best free project management software?
Tags: discuss, productivity
Published: 2019-08-27 09:33:16

My team has 8 people, we work remotely most of the time, we have to track our projects closely on daily basis. 

Our team exists based on the university funding, so we cannot afford some high-end solutions like [Asana](https://asana.com) or [Omnifocus](https://omnifocus.com) or [Wrike](https://wrike.com). 

We have some people who are NOT tech savvy AT ALL, which means we need to find a solution that is easy to use without a steep learning curve. 

We don't need Gantt Chart, task dependency or timer. We just need a good tool to collaborate with each other. 

Any recommendations?
Orion Social
Tags: bestdigitalmarketingagency
Published: 2019-08-27 09:29:29

In this age of internet, its really important to have a healthy online presence of your business, and when it comes to one of the most effective ways to showcase your business and your products online we all know the role of a designer website which has the capabilities to showcase your business in the most engaging manner 🙂🖥
.
.
We at Orion Social has a dedicated team of professional web developers who have all the abilities to design a spectacular website for your business 😇✌👌
Has anyone used Nameko microservices?
Tags: microservices, python
Published: 2019-08-27 09:12:56

[Interesting interview](https://www.client-server.com/blog/2019/08/the-story-matt-yule-bennett-sets-the-pace-with-nameko) with one of Nameko's co-authors Matt Yule-Bennett on our blog this morning. 

Nameko is growing in popularity, with close to 60,000 downloads every month. 

Has anyone used Nameko? How have you found it?
How to hire and Work with a remote developer
Tags: developer
Published: 2019-08-27 08:37:48

There are so many things in your mind when you planning to hire a remote developer. 

Question 1. How to hire a remote developer?
Question 2. How do we work with a remote developer?
Question 3. Will we get the project successfully?
Question 4. Hire developer is productive or not?

Like this. 

you will get the complete answer of all your question related to remote developer. Now We are sharing one of the best details articles about the remote developer. And also share the experience about the client how they work and hire the remote developer. 

Read this article :-https://medium.com/@sharmashivaniwebtech/how-to-hire-and-work-with-remote-developers-detailed-guide-ada9ccb21f0d