teleren/devto huggingface dataset:
Quick Tip: Automatically generate the scaffolding for your next project 🎯
Tags: showdev, dart, beginners, tutorial
Published: 2018-07-04 23:13:35

---
title: Quick Tip: Automatically generate the scaffolding for your next project 🎯
published: true
description: Learn how to generate a project scaffolding in Dart
cover_image: https://thepracticaldev.s3.amazonaws.com/i/l619x3c8g7wea2yv5x19.png
tags: showdev, dart, beginners, tutorial
canonical_url: https://creativebracket.com/generate-the-scaffolding-for-your-next-project/
---

Producing the necessary files and configuration each time you start a new project setup could become tiresome. This is the case especially when you're setting nothing different from a previous project.

In this quick tip, I'd like to show you a quicker alternative to getting a Dart project up and running using a package named **[stagehand](https://pub.dartlang.org/packages/stagehand)**.

{% youtube DbLZO3MLigE %}
→ [**Watch on Youtube**](https://www.youtube.com/watch?v=DbLZO3MLigE)

Stagehand is a Dart project scaffolding generator inspired by mainstream tools like Web Starter Kit and Yeoman.

Now assuming you have [Dart version 2](https://www.dartlang.org/tools/sdk#install) already installed(`brew install dart --devel`), you can grab stagehand 3.0 by running the below command:

```bash
$ pub global activate stagehand
```
This will pull down the package from the **pub** package management repo. Then take a look at the generator template options by running:

```bash
$ stagehand
```
At this present time you could generate these templates:

1. **console-full** - A command-line application sample.
2. **package-simple** - A starting point for Dart libraries or applications.
3. **server-shelf** - A web server built using the shelf package.
4. **web-angular** - A web app with material design components.
5. **web-simple** - A web app that uses only core Dart libraries.
6. **web-stagexl** - A starting point for 2D animation and games.

So let's say we wanted to generate the scaffolding for an [AngularDart](https://pub.dartlang.org/packages/angular) application. We can do this by running the commands below:

```bash
$ mkdir awesome_dart_project
$ cd awesome_dart_project
$ stagehand web-angular # or whichever template
```
And this gives us the below with further instructions in the output:

![Stagehand web-angular scaffolding output](https://thepracticaldev.s3.amazonaws.com/i/i2ewygqrnh4uecrvql6r.png)

That's it for today's quick tip. Now how about you give it a go? 👐☺️

**Subscribe to [my Youtube channel](https://www.youtube.com/channel/UCHSRZk4k6e-hqIXBBM4b2iA?view_as=subscriber) for the latest videos on Dart**, thanks!

**Like and follow me** 😍 for more articles on Dart.

## Quick links
1. [Stagehand package](https://pub.dartlang.org/packages/stagehand)
2. [Dart install instructions](https://www.dartlang.org/tools/sdk#install)
3. **[Free Dart screencasts on Egghead.io](https://egghead.io/instructors/jermaine-oppong)**
What is the best IP Geolocation API?
Tags: api
Published: 2018-07-04 22:04:20

---
title: What is the best IP Geolocation API?
published: true
description: We compare several IP Geolocation APIs by data quality, API latency, Documentation and more.
tags: APIs
---

We just published this detailed [comparison of the most popular commercial IP Geolocation APIs](https://medium.com/@ipdata_co/what-is-the-best-commercial-ip-geolocation-api-d8195cda7027).

We looked at factors such as;
1. Data quality — the accuracy of their geolocation data
2. Data variety — threat intelligence data, proxy detection, carrier detection, tor detection
3. API latency — we used a third party monitoring tool to monitor each API for 24 hrs. We sent a request every 30 seconds from 8 locations globally. Los Angeles - US, Miami - US, Montreal - Canada, Gravelines - France, Frankfurt - Germany, Singapore, Tokyo - Japan, Sydney - Australia.
4. Global endpoints — whether the API has more than one endpoint in different locations for redundancy and high scalability.
5. Cost — cost per million calls
6. Libraries
7. HTTPs support
8. Rate limits
9. Infrastructure/High Availability — we use `dig` to show if a provider is terminating on a single server with an A record
10. Simplicity of Documentation

To measure API latency we setup status pages on updown.io for each API and monitored it for 24hrs. Updown sent a request every 30 seconds from 8 locations globally.

Feel free to reach out with feedback on your experiences using any of these services.
Change StatusBar Color [Xamarin.Forms]
Published: 2018-07-04 21:52:01


---
title: 
published: true
description: 
tags: 
---

Normalmente cuando estamos desarrollando una aplicación buscamos como poder brindar una UI completa hacia el usuario, ademas de que el cliente así lo solicita. Por ende cuando lanzamos la misma, la barra de estado es de otro color, lo cual rompe con lo anterior y lo que requerimos aquí es cambiar el color para que se asemeje con el de la aplicación, pero,¿como lo puedo hacer en Xamarin.Forms?

Esto es relativamente sencillo, a continuación las indicaciones por plataforma>

Android

Window.SetStatusBarColor (Android.Graphics.Color.ParseColor ("#FFFFFF")); // o cualquier otro valor hexadecimal en MainActivity.

iOS

El color de la barra de estado de iOS depende del Color de la barra de navegación, por lo que>

MainPage = new NavigationPage(new MyPage()) { BarBackgroundColor = Color.FromHex("000000"), BarTextColor = Color.White };

Haría una barra de navegación negra y una barra de navegación con texto blanco en la barra de navegación. Para cambiar el color del texto en la barra de estado, debemos establecer> <key>UIStatusBarStyle</key> <string>UIStatusBarStyleBlackTranslucent</string> en el Info.plist

UIStatusBarStyleBlackTranslucent significa texto blanco.

var statusBar = Windows.UI.ViewManagement.StatusBar.GetForCurrentView(); 

Donde el StatusBar tiene propiedades BackgroundColor, BackgroundOpacity, ForegroundColor.

---
What are the most used commands in your shell history?
Tags: discuss, linux, shell, bash
Published: 2018-07-04 18:55:46

---
title: What are the most used commands in your shell history?
published: true
description: A discussion about the most used shell commands and binaries of dev.to users
tags: [discuss,linux,shell,bash]
---
Recently I came across a [thread](https://www.reddit.com/r/linux/comments/8vzr3y/whats_the_most_frequent_terminal_command_you_use/) on reddit which asked users the most used command in their shell history.

My results:

```bash
     1  419  13.0489%    git
     2  265  8.25288%    cd
     3  239  7.44316%    sudo
     4  122  3.79944%    cat
     5  77   2.39801%    which
     6  76   2.36686%    dkr
     7  72   2.24229%    rm
     8  60   1.86858%    rg
     9  57   1.77515%    yarn
    10  57   1.77515%    nvim
```

Obviously `git` is my most used command because I ran it on my work laptop. It should be a lot more but I have been using prezto's `git` aliases lately. Other common commands are `dkr` which is an alias for `sudo docker` and `rg`, the binary for [ripgrep](https://dev.to/abhinav/rest-in-peace-grep-19h9).

I wonder how is it for the dev.to community?

Use this command from [linux.byexample.com](http://linux.byexamples.com/archives/332/what-is-your-10-common-linux-commands/) to list your most used commands:

```bash
history | awk '{CMD[$2]++;count++;}END { for (a in CMD)print CMD[a] " " CMD[a]/count*100 "% " a;}' | grep -v "./" | column -c3 -s " " -t | sort -nr | nl |  head -n10
```

I use zsh and it was not working for me because zsh's `history` command just prints a few most recent commands only. I had to tweak it a bit:

```bash
history 1 | cat | awk '{CMD[$2]++;count++;}END { for (a in CMD)print CMD[a] " " CMD[a]/count*100 "% " a; }' | grep -v "./" | column -c3 -s " " -t | sort -nr | nl | head -n10
# or
fc -l 1 | awk '{CMD[$2]++;count++;}END { for (a in CMD)print CMD[a] " " CMD[a]/count*100 "% " a; }' | grep -v "./" | column -c3 -s " " -t | sort -nr | nl | head -n10
```
How do you organise personal projects?
Tags: discuss
Published: 2018-07-04 18:40:41

---
title: How do you organise personal projects?
published: true
description: 
tags: discuss
---

I usually start coding straight away, but I'm starting to get a bit more organised because I'm finding I lose interest shortly thereafter. 

How do you organise your personal projects? Do you treat them like a client project with deadlines, and write documents on requirements? What helps you through a personal project beyond the desire/motivation to create something?
A bug in this site
Tags: meta
Published: 2018-07-04 18:29:50

---
title: A bug in this site
published: true
description: 
tags: meta
---

I found a bug!

```ruby
{title: this.should_not.have(quotes).around(itself)}
```

It seems that the site parses the `title:` and then puts quotes around it. Maybe this is actually a [Jekyll](https://jekyllrb.com/) error?


## UPDATE

As of 7/10/18 this bug has been fixed. Thanks to the devs!
Static / Fixed filenames for generated vue-cli builds
Tags: beginners, vue, javascript, buildtools
Published: 2018-07-04 18:21:32

---
title: Static / Fixed filenames for generated vue-cli builds
published: true
description: How to setup vue.config.js for static assets
tags: beginner, vuejs, javascript, buildtools
---

As you may know, the release of [vue-cli](https://cli.vuejs.org/) 3 is getting close (currently at RC3 status).

I really like the streamlined way of starting projects and having a good baseline for development (especially when trying to setup a good starting point in house, that has documentation and it's actively developed).

However the default setup isn't friendly with legacy projects because vue-cli implicitly adds a hash to the generated filenames. That's great if you're starting a new project/SPA because it's like a built in cache buster but doesn't help if you're trying to integrate it with your favourite c#/php/python/ruby etc application.

In order to change this let's quickly look over the following config
```js
let assetsDir = "assets";

module.exports = {
  assetsDir: assetsDir,

  configureWebpack: {
    output: {
      filename: assetsDir + "/[name].js",
      chunkFilename: assetsDir + "/[name].js"
    }
  },

  chainWebpack: config => {
    if (config.plugins.has("extract-css")) {
      const extractCSSPlugin = config.plugin("extract-css");
      extractCSSPlugin &&
        extractCSSPlugin.tap(() => [
          {
            filename: assetsDir + "/[name].css",
            chunkFilename: assetsDir + "/[name].css"
          }
        ]);
    }

    config.plugins
      .delete("html")
      .delete("prefetch")
      .delete("preload");
  }
};
```

Since `assetsDir` [isn't applied to custom filenames](https://github.com/vuejs/vue-cli/issues/1753), we do a small workaround defining a variable, and using that for our generated filenames.

We're then setting the javascript and the css filenames using their respective options and deleting the html plugin that generates the index.html file with it's 'dependencies' prefetch and preload.

Now you are free to use `npm run build --modern` and setup [Modern Mode](https://cli.vuejs.org/guide/browser-compatibility.html#modern-mode)

> An update:

>The official docs reference this setup now in a [cleaner way](https://cli.vuejs.org/config/#disable-hashed-filenames)
Updates for Code.xyz - your in-browser editor for building and integrating with APIs!
Tags: node, javascript, functions, saas
Published: 2018-07-04 17:59:13

---
title: Updates for Code.xyz - your in-browser editor for building and integrating with APIs! 
published: true
description: Updates for Code.xyz- your in-browser API editor! 
tags: nodejs, javascript, functions, saas 
---
Happy Independence Day 🇺🇸 to our American community (and happy belated Canada Day 🇨🇦!) And to those of you who are not celebrating but working on this day, still fighting for your own "freedom," keep at it 💪🏽! 

------
🤗😍🤓 Updates for code.xyz -the API editor. Now you can auto-save! No more worrying about losing your work!  🤗😍🤓  

{https://stdlib.com/blog/code-xyz-autosave}
Bulma Showcase Page
Tags: dev, showcase, html
Published: 2018-07-04 17:33:30

---
title: Bulma Showcase Page
published: True
description: A developer showcase page with their projects and blog.
tags: dev, showcase, html
---

![Screenshot of Bulma Showcase page](https://thepracticaldev.s3.amazonaws.com/i/sy414lpmibhd4wdc9sfz.png)

# Dev showcase page with Bulma CSS

A [developer showcase page](https://bulmadev.chkrishnatej.com/) with their projects and blog.

Using [Bulma CSS](https://bulma.io) the showcase page has been designed with vibrant colors. The tiles and cards showcase your work and blog posts.

## How is it built?

- The whole project has been built with using Bulma CSS and a small javascript for responsive naviagtion menu bar.

- Small fragments of code for few features is sourced from different developers which all the due credit has been given.

## How to use it?

- Clone the repo using this link
`https://github.com/chkrishnatej/bulma-dev-page.git`

- Update the names and links appropriately.

- Test it on your local machine.

- Serve it on the server.

## Github Pages

Github pages allows you to host your static sites for free. For setting up Github pages, please follow the [link](https://pages.github.com/).

You can even setup a custom domain for your Github pages. Follow the [custom domain in github pages](https://help.github.com/articles/using-a-custom-domain-with-github-pages/)

**P.S:**
All ears for idea/suggestions/changes for the page. Please leave your feedback in comments.
Reading Passwords from STDIN in PHP
Tags: php, passwords, security, stdin
Published: 2018-07-04 12:41:50

---
title: Reading Passwords from STDIN in PHP
published: true
description: I needed a PHP script to have access to a user's password. An environment variable didn't seem secure enough.
tags: PHP, Passwords, Security, STDIN 
---

Hi Everyone,

Recently, I had to create an [artisan command](https://laravel.com/docs/5.6/artisan) that submitted some data on behalf of a user. 

I needed it to have access to the user's password to do that.

My first thought was to store the password in an environment variable. I really did not want to do that, and preferred to make the user of the script enter the password every time it was necessary.

![](http://cdn.osxdaily.com/wp-content/uploads/2015/02/typing-password-into-terminal.jpg)

<center><small><u>[Secure Password Prompt](http://osxdaily.com/2015/02/04/terminal-wont-show-password-when-typed)</u><small></center>

## How it was done

It was important to ensure that the password was entered securely (invisible too), so I looked into how to and here's what I came up with.

```php
private function getPassword($prompt = "Enter Password:") {
    echo $prompt;

    system('stty -echo');

    $password = trim(fgets(STDIN));

    system('stty echo');

    return $password;
}
```

## How I understand it

The `stty` command, as I understand it now [sets the terminal properties](https://www.thinkage.ca/gcos/expl/stty.html).

- `stty -echo` sets the `echo` property to false, so the terminal will NOT echo the input it receives to the screen, rendering the password invisible

- `fgets(...)` retrieves input from a stream interface (STDIN).

- `STDIN` is the [input stream](https://en.wikipedia.org/wiki/Standard_streams#Standard_input_(stdin)) that `fgets` reads the input from 

- `stty echo` restores the `echo` property to true, so we can now see output on the screen again

I hope you learned something from this, as I did. Happy Coding. 😍
Build an Electron + Next.js app in 3 steps
Tags: javascript, electron, nextjs, typescript
Published: 2018-07-04 14:18:05

---
title: Build an Electron + Next.js app in 3 steps
published: true
description: Create an electron app with whole renderer process managed by Next.js
tags: javascript,electron,nextjs,typescript
---


```bash
# 1. Install
$ npm i -g nextron

# 2. Create nextron app (with template of `examples/with-javascript-material-ui`)
$ nextron init test-app --template with-javascript-material-ui

# 3. Run development mode
$ cd test-app
$ yarn (or `npm install`)
$ yarn dev (or `npm run dev`)
```

![nextron](https://i.imgur.com/trvnMJ6.png)

## Just released `nextron@0.7.5`.

- [npm](https://npm.im/nextron)
- [GitHub](https://github.com/saltyshiomix/nextron)

## Main Changes

- Fix almost all bugs
- Upgrade to `electron@^2.0.4`
- Upgrade to `next@6.1.1`
- Smaller dependencies
- Easy cli like `nextron init test-app`
- More examples (The screenshot above is a top page of `examples/with-javascript-material-ui`)

## Usage

### Install

```bash
$ npm install --global nextron
```

### Create Application

To create `<MY-APP>`, just run the command below:

```bash
$ nextron init <MY-APP>
```

### Create Application with Template

You can use `examples/*` sample apps as templating.

To create the `example/with-typescript` app, run the command below:

```bash
$ nextron init <MY-APP> --template with-typescript
```

### Run Electron with Development Mode

Run `npm run dev`, and nextron automatically launches the electron app.

```json
{
  "scripts": {
    "dev": "nextron"
  }
}
```

### Production Build

Run `npm run build`, and nextron outputs packaged bundles under the `dist` folder.

```json
{
  "scripts": {
    "build": "nextron build"
  }
}
```

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

![result](https://thepracticaldev.s3.amazonaws.com/i/4vrv7b66dr3iededpphp.png)

## TODO

- More examples
- More CLI options
	- ex1.) `nextron build --all`
	- ex2.) `nextron build --ia32 --win`
- Watch changes and hot reloading both main and renderer processes
minimal DI container in TypeScript
Tags: help
Published: 2018-07-04 13:29:17

---
title: minimal DI container in TypeScript
published: true
description: 
tags: help 
---

I tried to come up with the simplest possible, useful, async DI container I could think of, and here's the result:

```ts
function Container(provider) {
    const cache = {};

    const container = function (name) {
        if (!cache[name]) {
            cache[name] = provider[name](container);
        }

        return cache[name];
    }

    return container;
}
```

Totally trivial - you provide an object (`provider`) where each property is a function that receives the container and returns a Promise that resolves to a service.

Here's a simple use-case:

```ts
class UserCache { }

class UserService {
    constructor(private cache: UserCache) { }
}
```

And usage:

```ts
const container = Container({
    "cache": async c => new UserCache(),
    "user-service": async c => new UserService(await c("cache"))
});

// and a simple test:

container("user-service").then(service => {
    console.log(service);

    container("user-service").then(same_service => {
        console.log(service === same_service); // true
    });
});
```

You can [try it here](https://www.typescriptlang.org/play/index.html#src=function%20Container(provider)%20%7B%0D%0A%20%20%20%20const%20cache%20%3D%20%7B%7D%3B%0D%0A%0D%0A%20%20%20%20const%20container%20%3D%20function%20(name)%20%7B%0D%0A%20%20%20%20%20%20%20%20if%20(!cache%5Bname%5D)%20%7B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20cache%5Bname%5D%20%3D%20provider%5Bname%5D(container)%3B%0D%0A%20%20%20%20%20%20%20%20%7D%0D%0A%0D%0A%20%20%20%20%20%20%20%20return%20cache%5Bname%5D%3B%0D%0A%20%20%20%20%7D%0D%0A%0D%0A%20%20%20%20return%20container%3B%0D%0A%7D%0D%0A%0D%0A%2F%2F%20EXAMPLE%3A%0D%0A%0D%0Aclass%20UserCache%20%7B%20%7D%0D%0A%0D%0Aclass%20UserService%20%7B%0D%0A%20%20%20%20constructor(private%20cache%3A%20UserCache)%20%7B%20%7D%0D%0A%7D%0D%0A%0D%0Alet%20container%20%3D%20Container(%7B%0D%0A%20%20%20%20%22cache%22%3A%20async%20c%20%3D%3E%20new%20UserCache()%2C%0D%0A%20%20%20%20%22user-service%22%3A%20async%20c%20%3D%3E%20new%20UserService(await%20c(%22cache%22))%0D%0A%7D)%3B%0D%0A%0D%0Acontainer(%22user-service%22).then(service%20%3D%3E%20%7B%0D%0A%20%20%20%20console.log(service)%3B%0D%0A%0D%0A%20%20%20%20container(%22user-service%22).then(same_service%20%3D%3E%20%7B%0D%0A%20%20%20%20%20%20%20%20console.log(service%20%3D%3D%3D%20same_service)%3B%20%2F%2F%20true%0D%0A%20%20%20%20%7D)%3B%0D%0A%7D)%3B%0D%0A).

This is actually surprisingly powerful - for example, you can bootstrap multiple service-providers like this:

```ts
const container = Container({
    ...UserServices,
    ...WebServices,
});
```

What I can't figure out, is how to make it type-safe - I know I'll need generics and `keyof`, but I could really use some help in this area.

Any takers? :-)
JavaScript Quiz 
Tags: webdev, javascript, challenge
Published: 2018-07-04 12:30:03

---
title: JavaScript Quiz 
published: true
description: some crazy questions in JavaScript 
tags: webdev,javascript,challenge 
---

I will post some  questions in JavaScript from today onwards share your own solutions without running these code on your console.


>1. null === undefined

>2. null == undefined 

>3. 2+"4"

>4. 2-"3"

>5. ""+2

>6. +"2"
Comparison table of 5 datepicker web components
Tags: webcomponents, beginners, polymer, webdev
Published: 2018-07-04 11:51:54

---
title: Comparison table of 5 datepicker web components
published: true
description: A comparison table of 5 datepicker web components, containing their features and supported browsers.
tags: #webcomponents #beginners #polymer #webdev
---

I usually tested web components in my free time. This time, I tested some datepicker components and figured out I should make a short comparison table. The comparison includes some features, as well as, indicates which browser they are functioning properly (Chrome, Safari, Opera, Firefox, Edge, IE11). Mobile testing was performed on iPhone X.

There is also a more detailed [blog](https://vaadin.com/blog/web-component-wednesday-1-datepicker) version of these five datepicker components.

If you like this kind of blog, share or comment so I will make more of those in the future.

| name               | Mobile | I18n | Arrow Keys | Library        | Working     |
|--------------------|:------:|:----:|:----------:|----------------|-------------|
| [calendar-element](https://vaadin.com/directory/component/fooloomanzoodatetime-picker)    |    ✔   |   ✔  |      ✔     | Polymer#^2.0.0 | C,S,O,F,E,I |
| [range-datepicker](https://vaadin.com/directory/component/roxusrange-datepicker)   |    ✔   |   ✔  |      ✘     | Polymer#^2.0.0 | C,S,O       |
| [app-datepicker](https://vaadin.com/directory/component/motssapp-datepicker)     |    ✘   |   ✔  |      ✘     | Polymer#1.9 - 2  | C,S,O,F,E,I |
| [vaadin-date-picker](Check vaadin-date-picker on Vaadin Directory) |    ✔   |   ✔  |      ✔     | Polymer#^2.0.0 | C,S,O,F,E,I |
| [mp-calendar](https://vaadin.com/directory/component/mpachnismp-calendar)        |    ✔   |   ✔  |      ✘     | Polymer#^2.0.0 | C,S,O,F,E   |