teleren/devto huggingface dataset:
Fun with BASH Pt: 2 Aliases
Tags: bash, terminal, shortcut, lyfehack
Published: 2019-06-03 14:00:14

---
title: Fun with BASH Pt: 2 Aliases
published: true
description: 
tags: BASH, terminal, shortcut, lyfehack
---
Pt 1: https://dev.to/sirclesam/fun-with-bash-pt-1-scripting-51l9

This one will be short, which makes sense in context.

Another way to save precious keystroked when working in the terminal is to use bash aliases.  My main use for this is to get to project directories that I access frequently.  

If you read my previous post about writing bash scripts you may have thought to try something like this, but realized after the script executes that you're still in the same directory.  This is because in .sh scripts cd just changes the directory in the context of the script and not your active shell, luckily alias can help with this.

Once again we're going to be editing our bash profile file in our home dir.  For most BASH shells on linux this will be ~/.bashrc however because apple with the stock OSX terminal it is ~/.bash_profile.

For a while, I've been doing daily hack-hours to practice algorithm solving, pulling from a daily updated repo that has new problems in it every day.  In order to interact with the scripts I need to be in their directory which means typing:

```
cd hack-hour/challenges/
```

which even with tab correction still equals 5 keystrokes every morning.  Ain't nobody got time for that!

open up your bash profile and insert the following:

```
alias hh="cd ~/hack-hour/challenges"
```

Go open a new terminal (has to be new, remember the profile settings get added when a terminal is opened) and try it! 

TAH DAH!!


Originally that was going to be all for this article, but I learned a new BASH trick that I can rope back into this so you get that too.

I just learned you can `cd -` to go back the previous directory you were in, pretty neat but got me thinking about some alias work I'd done in college when we lived in the terminal.

pushd is a less well-known sibling of cd.  It does the same thing but as its name might have suggested it does a push, and this is on to a directory stack.  The benefit of this is you can do a popd to traverse backwards through the stack.

Another thing to note about aliases, that this demonstrates, is they get executed before anything on your PATH environment variable, so if you add this to your profile:

```
alias cd="pushd"
```

now anytime cd is used it will call pushd instead and you can utilize popd to go back in your directory history, if `cd -` doesn't get the job done!

That's it for now, 
cheers
Best way to visualize line data on maps
Tags: question
Published: 2019-06-03 13:11:46

I'd like to show certain events on Google maps (or other software) any pointers how to do this?  

Points (lines actually) would be dynamically loaded from database and presented to the user via web browser.  

So what I am trying to do is a Google maps (preferably) with my own custom points(lines), that are clickable and upon clicking more info should be loaded.  
I've done something similar with leaflet, but now the requirement is using Google maps or something similar...

Thanks in advance,
Kristjan
The Building an Indie Business Podcast- Choosing a Name and Cover Art for the Podcast
Tags: podcast, startup
Published: 2019-06-03 13:06:36

---
title: The Building an Indie Business Podcast- Choosing a Name and Cover Art for the Podcast
published: true
description: 
tags: podcast, startup
---
https://overcast.fm/+RG5gf3GJs

[Episode Page](https://baib-podcast.com)
[Revenue Research](https://revenueresearch.co/)
Agile product roadmap: pros, cons, and best practices
Tags: roadmap, webapps
Published: 2019-06-03 13:03:31

---
title: Agile product roadmap: pros, cons, and best practices
published: true
description: A product roadmap is a document that describes what you want to achieve with your product and how you’re going to do it.
tags: roadmap, web-apps
cover_image: https://www.mindk.com/blog/wp-content/uploads/2019/05/tabea-damm-579138-unsplash-1920x1080.jpg
canonical_url: https://www.mindk.com/blog/product-roadmap/
---
Agile teams value flexibility and validated learning. They build products in quick iterations and make frequent changes. This means deadlines are often irrelevant and long-term planning is treated as obsolete. But can you really succeed without a product roadmap?

A product roadmap is a document that describes what you want to achieve with your product and how you’re going to do it. Roadmaps are typically visualized as a Gantt chart.

There are many variations of product roadmaps, ranging from detailed plans that focus on features and deadlines to high-level statements of intent that map business goals on loose timeframes.

[Continue reading...](https://www.mindk.com/blog/product-roadmap/)
6 things you can learn from the best Progressive Web App examples
Tags: progressivewebapp, webapplication, mobileapp, mobileweb
Published: 2019-06-03 13:01:23

---
title: 6 things you can learn from the best Progressive Web App examples
published: true
description: Mobile app or mobile web? Progressive web apps take the strong points of both to create a unique user experience.
tags: Progressive-web-app, web-application, mobile-app, Mobile-Web
cover_image: https://www.mindk.com/blog/wp-content/uploads/2019/05/341607-PA98GR-308-1920x1080.jpg
canonical_url: https://www.mindk.com/blog/best-progressive-web-app-examples/
---
Mobile app or mobile web? Progressive web apps take the strong points of both to create a unique user experience. A number of world known companies have already launched progressive web apps and here is what they got.

In short, you can consider Progressive Web Apps (PWAs) a website built using web technologies which interacts with a user as an application. Developments in browser technologies, cache and Push-interfaces allow us to install PWAs on home screens directly from the browser, receive push notifications and even work offline.

Some leading-edge companies are already reaping the benefits of PWAs. We invite you to take a closer look at best progressive web apps examples from 6 different industries and learn from their success stories!

[Continue reading...](https://www.mindk.com/blog/best-progressive-web-app-examples/)
CSS Only ASCII Table Flip
Tags: codepen, html, css, career
Published: 2019-06-03 12:47:18

## Enraging

<p>Kaomoji or 'Japanese Emoticon' doing the table flip.</p>

<p>I only used CSS to do all the animations.</p>

<p>This is just a little joke about enraging.</p>

<p>Well, honestly, there are times that I am feeling enraged, if I can't find the solution/s on the problems that I am trying to resolve.</p>

## What we should do

<p>The thing that I am thinking in those time is to flip the table where I am working on. That is why, while we are doing our work, we should keep our temper into moderate.</p>

<p>If we're feeling tired, we should try to rest. We are enraging because we are lacking rest (Well, just as I think in my opinion). Take a deep breath, just take a few steps for you to relax your mind.</p>

## Something I did

<p>So instead of flipping the table in real life, I thought that why shouldn't I do an animated something, where I should release my frustrations.</p>

<p>Down below is my example.</p>

{% codepen https://codepen.io/takaneichinose/pen/arXEaN %}
What challenges for development do you face in your region?
Tags: discuss
Published: 2019-06-03 12:10:59

---
title: What challenges for development do you face in your region?
published: true
description: Discover what challenges devs in other countries might be facing
tags: discuss
---

I recently read [an article](https://dev.to/funkyidol/why-becoming-staying-productive-in-india-is-difficult-3b27) about the challenges developers face in India. 

Which made me wonder about the different conditions and difficulties (or positive conditions) all around the world. 

Limited access to learning opportunities or hard to come by tutorials in your native language? Lack of companies where you can learn? I'd like to hear about it!

> **What's development like in your region?**
Angular 8 HttpClient & Http Tutorial – Build, Consume RESTful API
Tags: angularangular98, angular98bootstrap, httpclient
Published: 2020-01-29 12:30:52

---
title: Angular 8 HttpClient & Http Tutorial – Build, Consume RESTful API
published: true
tags: Angular angular 9|8, angular 9|8 bootstrap, HttpClient
canonical_url: https://www.positronx.io/angular-8-httpclient-http-tutorial-build-consume-restful-api/
---
![Angular 8 HttpClient Tutorial](https://www.positronx.io/wp-content/uploads/2019/05/angular-8-httpclient-4439-01.jpg)

**Angular 8 HttpClient & Http tutorial** is going to be discussed in this blog today. We’ll learn to create and consume RESTful APIs in Angular 8 project. To manage the data on the remote server, we make GET, POST, PUT and Delete using HttpClient API. We are required to import and setup HttpClient service in Angular 8 project to consume REST APIs.

To work with HttpClient service in Angular, you need to import the `HttpClientModule` in `app.module.ts` file. Then inject HttpClient service in constructor method after that you can hit the remote server via HTTP’s POST, GET, PUT and DELETE methods.

## HttpClient in Angular 8

HttpClient API service is used to make communication between front-end web apps with backend services. This communication is done over HTTP protocol. Angular 8 HttpClient service makes the communication with remote server very easy. It needs to be imported via @angular/common/http package.

### Benefits of HttpClient Service

- Easy Testing
- Typed Request & Response Objects
- Request Interception
- Response Interception
- APIs Observable Support
- Easy Error Handling

#### What Does [Angular.io](https://angular.io/api/common/http/HttpClient#description) say About HttpClient?

“HttpClient is available as an injectable class, with methods to perform HTTP requests. Each request method has multiple signatures, and the return type varies based on the signature that is called (mainly the values of observe and responseType).”

## Angular 8 HttpClient Methods

- request()
- delete()
- get()
- patch()
- post()
- put()
- head()
- jsonp()
- options()

[Click here to read more](https://www.positronx.io/angular-8-httpclient-http-tutorial-build-consume-restful-api/)
Event tips and tricks: easily find connections on Linkedin
Tags: event, collabsummit
Published: 2019-06-03 11:33:25

In these days I am at [Collaboration Summit](https://www.collabsummit.eu/) in Wiesbaden.
As always, Content is King, but connections and networking are the main reasons to come to these kinds of events.

How can you optimize these experiences?
How can grab all contacts for every people I met there?

With LinkedIn, you have two options.

## QR Code

If you meet a new person during the event, you can share your contact one to one directly.
Without any search on the LinkedIn toolbar and without the embarrassing when you ask "Sorry, can you remember me your name?".
Just scan a QR Code with your phone and vice versa.

From the main window of the app, you can click in the upper corner of the search bar.

![](https://thepracticaldev.s3.amazonaws.com/i/ifkk49umgr1fgpa3czr7.png)

From this screen, if you tap on "My Code", you can share your QR Code with someone, or you can save the code in your gallery to share your data more quickly later or to add the image on your slide deck, for example.

If you come back to the previous screen, you can scan a QR Code from another phone or from a picture in the gallery.

![](https://thepracticaldev.s3.amazonaws.com/i/grooyaic89greqr7hf8i.png)


## Find Nearby

This is one of my favorite feature on LinkedIn.
It's useful when you are in a big place with many people or you can use this feature when you speak at an event or in a meeting full of persons.

From the main screen of the LinkedIn app, tap on the "Network" icons at the bottom.
Now, in the middle of the main bar at the top, you can tap the button "Find nearby".
The first time you have to consent the access to the Bluetooth settings for the app.
If you activate this feature, when you have LinkedIn opened on your phone, the people who are on the same screen, start to appear in the list.
Now, with a single tap on the name, you can start to add them to your contacts.

![](https://thepracticaldev.s3.amazonaws.com/i/7lar61scmpb9639ha0hn.png)

It's really useful at the end of a meeting or at the end of a public speech.

## Conclusion

With these two easy and quick features, you can surprise your friends and colleagues, but first of all, can help you to find new business contacts.
If Javascript Is Single Threaded, How Is It Asynchronous?
Tags: javascript, webdev, beginners
Published: 2019-06-03 10:15:57

---
title: If Javascript Is Single Threaded, How Is It Asynchronous?
published: true
description: You have to take a look under the hood to understand why.
tags: #javascript #webdev #beginners
---

Javascript is a single threaded language. This means it has one call stack and one memory heap. As expected, it executes code in order and must finish executing a piece code before moving onto the next. It's synchronous, but at times that can be harmful. For example, if a function takes awhile to execute or has to wait on something, it freezes everything up in the meanwhile.

A good example of this happening is the window alert function. `alert("Hello World")`

You can't interact with the webpage at all until you hit OK and dismiss the alert. You're stuck.

So how do we get asynchronous code with Javascript then?

Well, we can thank the Javascript engine (V8, Spidermonkey, JavaScriptCore, etc...) for that, which has Web API that handle these tasks in the background. The call stack recognizes functions of the Web API and hands them off to be handled by the browser. Once those tasks are finished by the browser, they return and are pushed onto the stack as a callback.

Open your console and type `window` then press enter. You'll see most everything the Web API has to offer. This includes things like ajax calls, event listeners, the fetch API, and setTimeout. Javascript uses low level programming languages like C++ to perform these behind the scenes.

Let's look at a simple example, run this code your console:

```
console.log("first")
setTimeout(() => {
    console.log("second")
}, 1000)
console.log("third")
```

What did we get back?

```
first
third
undefined
second
```

Feels odd, right? Well, let's break this down line by line:

`console.log("first")` is on the stack first, so it gets printed. Next, the engine notices setTimeout, which isn't handled by Javascript and pushes it off to the WebAPI to be done asynchronously. The call stack moves on without caring about the code handed off to the Web APIs and `console.log("three")` is printed.

Next, the Javascript engine's event loop kicks in, like a little kid asking "Are we there yet?" on a road trip. It starts firing, waiting for events to be pushed into it. Since the `setTimeout` isn't finished, it returns `undefined`, as the default, well because it hasn't been given the value yet. Once the callback finally does hits we get `console.log("second")` printed.

There's a really good site that slows this all down and shows this happening.

http://latentflip.com/loupe

I suggest playing around in this sandbox to help solidify your understanding. It helped me get a feel for how asynchronous code can work with Javascript being single threaded.
Launch story: There, and back again...
Tags: product, node, puppeteer, react
Published: 2019-06-01 07:31:46

---
title: Launch story: There, and back again...
published: true
description: Slowing down, thinking and improving.
tags: product, node, puppeteer, react
series: InvoiceMaker
---

# Introduction

The development of my <a href="https://invoicemaker.com">Invoice Maker</a> application continues. In the <a href="https://dev.to/damcosset/launch-story-1st-month-3ene">last article</a> I wrote, some people gave me some great feedbacks, and I decided to act on them. The result was that this iteration of the product feels like the application is not moving much. 

However, because I jumped in the creation of the application without thinking too much beforehand, it seems only natural that there is now a moment of reflection, pausing and ultimately, going back on a few things.

## Changing the UI completely

One of the feedbacks I receive mentioned this <a href="https://invoiceto.me/">application</a>. After playing around with it, it was really clear that the UI felt a lot more fluid, easier and clearer. So, I decided to just steal how the interface was implemented in this application for mine :D

The number of clicks is greatly reduced. The template is immediately accessible to the user instead of being on another page. I'm quite happy with the results and the new found fluidity and clarity.

## Feedbacks possibility

Another commenter asked me if I considered having a way to receive feedbacks from users. I didn't, and I should have! So, I've added two ways to get feedbacks from users:

- A chat plugin using Facebook's messenger ( with the *react-messenger-customer-chat* package )

- A form in the About page. Using *nodemailer*, users can now send an email with their name, email and their feedback.


## Rolling back on some things

Because of the UI changes, the Account functionality I had added didn't really feel useful ( ability to save your organisation's infos ), or needs to be re-thought.

All in all, I think that going back and re-thinking certain things is only natural considering how I launched my application. I didn't do much planning, and started coding right away to have something in production quickly. That pace comes at a price, and now, I'm starting to roll back on certain functionalities I had to create something better. I don't see this as a setback, or a failure, or something bad. It just had to happen.

I'm not quite sure where I want to go from here. This is probably the right moment to take some time and think about it :D

Happy coding <3
Flask Boilerplate - Learn Flask by coding
Tags: flask, boilerplate, appseed
Published: 2019-06-02 18:17:39

---
title: Flask Boilerplate - Learn Flask by coding
published: true
description: Speed up your development with FlaskPlay, an open-source Flask Boilerplate. 
tags: flask, boilerplate, appseed
---

Hello Coders, 

Meet **FlaskPlay**, an open-source [Flask boilerplate](https://github.com/app-generator/flask-boilerplate-flaskplay). 

---

In case you want to **start faster** your next **admin dashboard** project check out this index with **[Open Source Admin Dashboards](https://appseed.us/admin-dashboards/open-source)** already coded with authentication, database, and deploy scripts 

> *Thanks for reading!* - Content provided by **[App Generator](https://appseed.us/)**.

---

Features:
- Coded in Pyhton3
- Integrated [Html5 Phantom design](https://html5up.net/phantom) from **Html5 Up**
- ORM - [Flask-SQLAlchemy](https://flask-sqlalchemy.palletsprojects.com/en/2.x/)
- SQLite database 
- Authentication features: Login / Register
- Export as static app - via [Frozen-Flask](https://pythonhosted.org/Frozen-Flask/)
- Live deploy (via FTP deploy script) 

## [Demo](https://flask-boilerplate.appseed.us/) & [Sources](https://github.com/app-generator/flask-boilerplate-flaskplay) 

![Flask Boilerplate](https://github.com/app-generator/flask-boilerplate/raw/master/screenshots/flask-boilerplate-main.jpg)

This app can be a good source of knowledge for beginners, especially. 

### Related resources
- [Flask](http://flask.pocoo.org/) - the official website
- Full Stack Python - [Flask section](https://www.fullstackpython.com/flask.html)
- [Flask Mega Tutorial](https://blog.miguelgrinberg.com/post/the-flask-mega-tutorial-part-i-hello-world) - a must-read resource for any Python beginner.
- [Flask Apps](https://appseed.us/apps/flask-apps) - Flask Apps provided by AppSeed
- My [Twitter](https://twitter.com/Sm0keDev) .. <('_')> .. 

### App Screen Shots 
- Generic page
![Flask Boilerplate - Generic Page](https://github.com/app-generator/flask-boilerplate-flaskplay/raw/master/screenshots/flask-boilerplate-generic-page.jpg)

- Login page
![Flask Boilerplate - Generic Page](https://github.com/app-generator/flask-boilerplate-flaskplay/raw/master/screenshots/flask-boilerplate-login.jpg)

- Page with an expanded menu
![Flask Boilerplate - Generic Page](https://github.com/app-generator/flask-boilerplate-flaskplay/raw/master/screenshots/flask-boilerplate-menu.jpg)

- Page with design elements
![Flask Boilerplate - Generic Page](https://github.com/app-generator/flask-boilerplate-flaskplay/raw/master/screenshots/flask-boilerplate-elements.jpg)

### Resources
- [Flask Apps](https://appseed.us/apps/flask-apps) - index provided by AppSeed
- [Flask Boilerplate](https://appseed.us/boilerplate-code/flask-boilerplate) - supported by AppSeed
- More [Boilerplate Code](https://appseed.us/boilerplate-code/) - provided by AppSeed

---

**Thank You** & Happy Codding!
Game of Life in PureScript
Tags: purescript, functional
Published: 2019-06-03 07:59:48

---
title: Game of Life in PureScript
published: true
description: Interactive Programming in PureScript
tags: purescript, functional
cover_image: https://thepracticaldev.s3.amazonaws.com/i/i759uoq7qwupq5v3ky0c.jpg
canonical_url: https://odone.io/posts/2019-06-03-game-of-life.html
---

You can keep reading here or [jump to my blog](https://odone.io/posts/2019-06-03-game-of-life.html) to get the full experience, including the wonderful pink, blue and white palette.

---

An example run

![](https://thepracticaldev.s3.amazonaws.com/i/9291nq5hj5nomvxp7zie.gif)

The code

```haskell
module Main where

import Prelude
import Effect (Effect)
import Effect.Console (log)
import Data.Tuple (Tuple(..))
import Data.Array.NonEmpty as NEA
import Data.Array as A
import Data.Foldable (elem, length)
import Data.String.Common as S
import Effect.Timer as T
import Control.MonadZero (guard)

maxX :: Int
maxX = 80

maxY :: Int
maxY = 10

type Y = Int
type X = Int
type Pos = Tuple Y X

-- Alive cells
type Board = Array Pos

block :: Board
block =
  [ Tuple 0 0
  , Tuple 0 1
  , Tuple 1 0
  , Tuple 1 1
  ]

blinker :: Board
blinker =
  [ Tuple 0 1
  , Tuple 1 1
  , Tuple 2 1
  ]

glider :: Board
glider =
  [ Tuple 0 1
  , Tuple 1 2
  , Tuple 2 0
  , Tuple 2 1
  , Tuple 2 2
  ]

showBoard :: Board -> String
showBoard board =
  S.joinWith "\n" $ map showRow $ A.groupBy haveSameY $ A.sort allPositions
  where
        haveSameY :: Pos -> Pos -> Boolean
        haveSameY (Tuple y1 _) (Tuple y2 _) = y1 == y2

        showRow :: NEA.NonEmptyArray Pos -> String
        showRow fs = S.joinWith "" $ NEA.toArray $ map (\f -> if elem f board then "O" else "X") fs

nextGeneration :: Board -> Board
nextGeneration board = do
    p <- allPositions
    guard $ willLive p board
    pure p

allPositions :: Board
allPositions = do
    y <- A.range 0 maxY
    x <- A.range 0 maxX
    pure $ Tuple y x

willLive :: Pos -> Board -> Boolean
willLive p board =
    case Tuple (aliveNeighbors p board) (isAlive board p) of
         Tuple 0 true -> false
         Tuple 1 true -> false
         Tuple 2 true -> true
         Tuple 3 _ -> true
         _ -> false

aliveNeighbors :: Pos -> Board -> Int
aliveNeighbors p board =
    length $ A.filter (isAlive board) $ neighbors p

isAlive :: Board -> Pos -> Boolean
isAlive board p =
    elem p board

neighbors :: Pos -> Array Pos
neighbors p1@(Tuple y1 x1) = do
     y2 <- A.range (y1 - 1) (y1 + 1)
     x2 <- A.range (x1 - 1) (x1 + 1)
     let p2 = Tuple y2 x2
     guard $ p1 /= p2
     pure p2

loop :: Board -> Effect Unit
loop board = do
    log "\x1B[2J\x1B[0f" -- clear terminal
    log $ showBoard board
    log ""
    _ <- T.setTimeout 2000 (loop $ nextGeneration board)
    pure unit

main :: Effect Unit
main = do
    -- loop block
    -- loop blinker
    loop glider
    pure unit

```

---

Get the latest content via email from me personally. Reply with your thoughts. Let's learn from each other. Subscribe to my [PinkLetter](https://odone.io#newsletter)!