teleren/devto huggingface dataset:
It's possible to pare JSON via DSL or dynamic input template in Golang 
Tags: discuss
Published: 2019-03-15 17:27:23

---
title: It's possible to pare JSON via DSL or dynamic input template in Golang 
published: True
description: I want to know it's possible or not if want to parsing JSON via DSL or something like 'template grep data for input'  
tags: #discuss
---

#Example 

## Input 

```
{
   "name" : "udomsak",
   "dataForm" : { 
     "attribute1": "myname is"
     "gender" : "male",
     "location": "Mars"
}

```

## Parser Language 

This parser language is Dynamic and does not need to compile in Struct in Golang. that mean can get from database or file use as parser. 

```
ParserGet:
  - name
  - dataForm.gender 
  - dataForm.location

```
## Example request 

```
ProjectA:

http://api.example.com/parser-rule/parser1
  - parser1 load from parser rule file :  "parser1.rule.conf"

ProjectB:
http://api.example.com/parser-rule/parser2
  - parser1 load from parser rule file :  "parser2.rule.conf"

```
What's your desk setup?
Tags: productivity, career, work, discuss
Published: 2019-03-15 16:25:34

---
title: What's your desk setup?
published: true
description: Share a photo of your office/desk/workspace and how you set it up!
tags: #productivity, #career, #work, #discuss
cover_image: https://thepracticaldev.s3.amazonaws.com/i/tcuztie9o984uur8qazr.jpeg
---

I'm always really interested in the setup of other people's desks/offices - I don't know if it's nosy, or that I don't feel 100% settled with my own situation. I'd love to see yours too! Here's a peek at where I work:

![Image of desk in home office](https://thepracticaldev.s3.amazonaws.com/i/7zkc2uicaf6hvf2pt57i.jpeg)

I work remotely, so this is my home office. Requisite coffee mug and water bottle, two notebooks for work ideas and personal project ideas, and my planner. A candle, a wall mounted monitor, and a balance disk on my chair are some of my favorite touches. (Plus my Funko friends - Bob Ross, Mister Rogers, Groot and Grunt.)

{% link https://dev.to/subbramanil/how-do-you-keep-your-desk-organized %}

Behind me is a treadmill/standing desk that I rotate off and on of, but it's not nearly as pretty as this yet ;)

(Selfishly, I'd love any tips on ergonomics you have since I'm always trying to combat TOS pain!)
How to avoid blank font
Tags: css, fonts, fontdisplay
Published: 2019-01-30 17:50:54

---
title: How to avoid blank font
published: true
tags: ['css', 'fonts', 'font-display']
---
Loading custom fonts is a bit tricky. There is already a great article on how to do it using `@font-face`: «[Bulletproof @font-face](https://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/)».

Unfortunately, the default behavior in many browsers when you load a custom font is to hide the text until custom font is loaded, which means that user doesn’t see the content(which is probably why he came to your website in the first place).

## Enter `font-display` property

`Font-display` is [supported](https://caniuse.com/#feat=css-font-rendering-controls) across all modern browsers(except edge) and allows you to choose between four following strategies for font loading behavior:
 - block
 - swap
 - fallback
 - optional

`block` behavior means that user sees blank font-face until custom font is loaded and is subsequently replaced by it.

`swap` behavior shows text content right away and loads in the background the custom font.

`fallback` is basically the same as block. The difference is that it gives less time to load font.

`optional` tries to swap font only if it is already installed in your OS.

## Which one is right for me

For this website I decided to go with more popular option, `font-face: swap`, but the best option always depends on context in which the webpage is loaded.
JavaScript Coding Challenges
Tags: javascript, coding, challenge
Published: 2019-03-15 15:45:56

---
title: JavaScript Coding Challenges
published: true
description: Collection of articles about different JavaScript Coding Challenges and their solutions.
tags: javascript, coding, challenge
cover_image: https://thepracticaldev.s3.amazonaws.com/i/nb1wtsoql3pydarfs751.png
---

When it comes to programming, I am a big fan of two things: **JavaScript** and **Coding Challenges**! And I can't be happier than when I'm able to combine these two! :smiley:

I've (re)started recently to not only play with different Coding Challenges on sites like HackerRank, CodeWars or CodeSignal, but I'm also writing my own solutions with explanation for these challenges on my [blog](https://www.florin-pop.com).

You can find a list of all the different Coding Challenges that I've tackled and solved using JavaScript:

- [Where do I Belong?](https://www.florin-pop.com/blog/2019/02/jcc-where-do-i-belong/)
- [Seek and Destroy](https://www.florin-pop.com/blog/2019/02/jcc-seek-and-destroy/)
- [Birthday Cake Candles](https://www.florin-pop.com/blog/2019/03/jcc-birthday-cake-candles/)
- [Beautiful Days at Movies](https://www.florin-pop.com/blog/2019/03/jcc-beautiful-days-at-the-movies/)
- [Regular Brackets](https://www.florin-pop.com/blog/2019/03/jcc-regular-brackets/)
- [Regular Brackets - follow-up](https://www.florin-pop.com/blog/2019/03/jcc-regular-brackets-follow-up/)
- [Create a Phone Number](https://www.florin-pop.com/blog/2019/04/jcc-create-a-phone-number/)

If you are interested in solving the challenges, make sure that you solve them on your own **before** reading the solution as this will help you learn much more in the long run. By doing so at the end you might end up having two solutions for the same problem, which is a *double* win! :wink:

I'm planning to write more blog posts in the future on this topic and I'd love to get your opinion on it. Is this something you are interested in reading? Are you also a fan of *Coding Challenges*? What about *JavaScript*?

All the feedback is highly appreciated! Thank you, amazing community of devs! :pray:

P.S. I'm going to update this list whenever I'm writing a new blog post, so if you are interested in reading more, make sure that you bookmark this post or you visit the [*challenges* section](https://www.florin-pop.com/tags/challenge/) on my blog often. (Or you can receive these posts directly into your inbox by clicking [here](http://eepurl.com/c28cHT)).
[GameDev] Snake
Tags: gamedev, indiedev, game, unity3d
Published: 2019-03-15 14:56:53

---
title: [GameDev] Snake
published: true
description: Game in the same style as a classic snake
tags: #gamedev #indiedev #game #unity
---

Hi everyone.


I've just released the new game but it looks like going to keep focus on adding extra nice features to the previous games for the next releases. Started to learn Adobe Animation looks like Flash that I used to use the years ago.

It's becoming harder to continue :() but now in free time planning to spend more for animation or find someone to help with it.


[https://play.google.com/store/apps/details?id=com.balconygames.snake](https://play.google.com/store/apps/details?id=com.balconygames.snake)

Hopefully, it looks good as time-killer app again. :)


Thank you for reading!

![screenshot1](https://thepracticaldev.s3.amazonaws.com/i/14fyjjrhqz2lmz7olh7y.png)
![screenshot2](https://thepracticaldev.s3.amazonaws.com/i/4ayjli3rat53x9hi035t.png)
Introducing the Fun Cloud Showcase #BlueCloudMirror
Tags: ai, cloud, kubernetes, serverless
Published: 2019-03-15 14:06:09

---
title: Introducing the Fun Cloud Showcase #BlueCloudMirror
published: true
description: Blue Cloud Mirror is a game where players need to show five specific emotions and do five specific poses in two levels. The faster, the better.
tags: AI, Cloud, Kubernetes, Serverless
---

Blue Cloud Mirror is a game where players need to show five specific emotions and do five specific poses in two levels. The faster, the better.

[Play the game.](https://blue-cloud-mirror.mybluemix.net/emotions) It only takes a minute. All you need is a webcam and a Chrome browser.

[Get the code from GitHub.](https://github.com/ibm/blue-cloud-mirror)

Here are my results:

[![game-results](https://thepracticaldev.s3.amazonaws.com/i/4x1pkckl44aq5bq19zmw.png)](https://thepracticaldev.s3.amazonaws.com/i/4x1pkckl44aq5bq19zmw.png)

The game uses key technologies of the [IBM Cloud](https://ibm.biz/nheidloff) and has three main parts:

* Core game: Implemented as serverless web application and via Cloud Functions since it is not accessed 24x7
* Users service: Implemented via IBM Cloud Private to avoid having the personal data in a public cloud
* Scores service: Implemented via Cloud Foundry Enterprise Edition to demonstrate developer productivity

The following diagram shows the key components:

[![diagram-overview](https://thepracticaldev.s3.amazonaws.com/i/toex6teumglq85958xbq.png)](https://thepracticaldev.s3.amazonaws.com/i/toex6teumglq85958xbq.png)

I’ve built Blue Cloud Mirror together with my colleagues [Thomas Südbröcker](https://twitter.com/tsuedbroecker) and [Harald Uebele](https://twitter.com/harald_u). Check out our [series of blog entries](https://github.com/ibm/blue-cloud-mirror#documentation-and-articles) about it.

You can also run the application locally. The setup shouldn't take longer than five minutes:


```
$ npm install -g @vue/cli
$ git clone https://github.com/IBM/blue-cloud-mirror.git
$ cd blue-cloud-mirror/game
$ yarn install
$ yarn run serve
```

[Try the Game!](https://blue-cloud-mirror.mybluemix.net/emotions)
Learning From Small Projects
Tags: discuss, wordpress, react
Published: 2019-03-15 13:49:23

---
title: Learning From Small Projects
published: true
description: Sometimes, building simple projects can be a great way to learn a new technology or try out a new idea while solving a problem. What are some of your projects like this?
tags: #discuss #wordpress #react
---

I was recently working on a project for a client where I was using Gatsby.js with a WordPress back-end. I'm using Netlify to host the Gatsby site which works well, but it needs to rebuild the site every time content is updated in WordPress.

My solution was to create a custom WordPress plugin which would make it easy to interact with Netlify and use a webhook to rebuild the site whenever a user updated content. In addition, I created a widget on the dashboard to see the current status of the Netlify site.

Building this plugin taught me more about building plugins for WordPress and has given me a tool to use in future projects where I need to use WordPress with Netlify (which I expect will become more often).

What little projects have you built to help learn a new technology or solve a small problem and help you move forward as a developer?

[![WP Trigger Netlify Build](https://thepracticaldev.s3.amazonaws.com/i/brzgtmngt68qtbkk28zv.png)](https://github.com/iamtimsmith/wp-trigger-netlify-build)
p.s. If you're interested in looking at or using the plugin, [it can be found here](https://github.com/iamtimsmith/wp-trigger-netlify-build).
What was your win this week?
Tags: discuss, weeklyretro
Published: 2019-03-15 13:42:37

---
title: What was your win this week?
published: true
description: Got to all your meetings on time? Started a new project? Fixed a tricky bug?
tags: discuss, weeklyretro
cover_image: https://cl.ly/188e843c2985/download/Image%202019-02-15%20at%202.36.37%20PM.png
---

Happy Friday!

Looking back at your week, what was something you're proud of?

All wins count -- big or small!

Examples of 'wins' include:

- Giving someone constructive feedback!
- Contributing to OSS
- Fixing a trickster bug
- Watering your plants...or whatever else that may spark joy 😄 🎉
Nodejs/Python on Android to build open source AI-powered video surveillance system DeepCamera
Tags: javascript, android, node, opensource
Published: 2019-03-15 13:31:04

---
title: Nodejs/Python on Android to build open source AI-powered video surveillance system DeepCamera
published: true
description: https://github.com/SharpAI/DeepCamera/tree/master/src/detector
tags: #javascript #android #node #open source
---
How Do You Name Your Boolean Variables?
Tags: discuss, beginners
Published: 2019-03-15 13:29:20

I've seen some absolutely confounding names in recent code reviews. Sometimes you need to know if Godzilla exists! Do you:

```js
const godzillaExists;
const doesGodzillaExist;
const godzilla;
```

Maybe it's more specific:

```js
const godzillaExistsInStore;
const godZillaInStore;
const hasGodzillaBeenStored;
```
Difference between encodeURI and encodeURIComponent
Tags: javascript, beginners, tutorial, webdev
Published: 2019-03-15 12:15:32

---
title: Difference between encodeURI and encodeURIComponent
published: true
tags: javascript, beginners, tutorial, webdev
canonical_url: https://yon.fun/difference-between-encodeuri-and-encodeuricomponent/
---

![Difference between encodeURI and encodeURIComponent](https://yon.fun/content/images/2019/03/confuse.png)

I was pretty sure I'm using **encodeURI** and **encodeURIComponent** rightly till I faced a big problem! LOL 😂. When I solved my issue, I finally understood what's the difference between them. So let's find out!

## What are they

As you may know, in javascript **encodeURI** and **encodeURIComponent** are used to encode _Uniform Resource Identifier_ (URI) by replacing each instance of certain characters by one, two, three, or four escape sequences representing the UTF-8 encoding of the character. (MDN)

## The difference

There aren't big differences, the unique difference is that encodeURI() function encodes _special characters_, except: `, / ? : @ & = + $ #` whereas encodeURIComponent() function encodes _special characters_ and in **additional the characters which encodeURI doesn't encode**!

## When and what to use

If you're encoding a string to put in a URL component (a query string parameter), you should use **encodeURIComponent**, and if you're encoding an existing URL, use **encodeURI**. It's simple! 😎

### Some references:
MDN [encodeURIComponent](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent).  
MDN [encodeURI](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURI).

Have you had any bad experiences with them by now?
What If Drivers Were Hired Like Programmers
Tags: career
Published: 2019-03-14 19:54:29

---
title: What If Drivers Were Hired Like Programmers
published: true
description: What if drivers were hired like software developers?
tags: #career
canonical_url: https://www.jitbit.com/alexblog/203-what-if-drivers-were-hired-like-programmers/
---

## What if drivers were hired like software developers?

**Job title:** car driver

**Job requirements:** professional skills in driving normal- and heavy-freight cars, buses and trucks, trolley buses, trams, subway trains, tractors, shovel diggers, modern light and heavy tanks currently in use in NATO countries.

Rally and extreme driving skills are highly desirable.

Formula-1 driving experience is a huge plus.

Knowledge and experience in repairing piston and rotor/Wankel engines, automatic and manual transmissions, ignition systems, board computers and car-audio systems by world-known manufacturers - obligatory. 

ABS, ABD, GPS, A/C, ACC, ESP, VVT and TDi.

Experience with car-painting and body repair is a plus.

The applicants must have certificates by BMW, General Motors and Bosch, but not older than two years.

**Education requirements:** Bachelor's Degree of Engineering.
Apium Academy is born: software development courses in Barcelona
Tags: apiumhub
Published: 2020-12-07 09:52:24

---
title: Apium Academy is born: software development courses in Barcelona
published: true
tags: Apiumhub
canonical_url: https://apiumhub.com/tech-blog-barcelona/apium-academy-born-software-development-courses-barcelona/
---

This monday 18th of March in Barcelona the **Frontend Architecture: Angular** course will begin, which will also mark the official birth of [Apium Academy](https://apiumacademy.com/), a new academic initiative focused on **software development**. **Apiumhub** is actively collaborating with this project, a project that has a clear goal: to offer **high quality software development courses** and with a practical, hands-on approach, where current issues will be tackled (and solved) by searching for optimal solutions following best practices.

One of Apium Academy’s particular traits is that it won’t offer your typical, run of the mill development courses you can find anywhere else. To that end, one of the academy’s main assets are its teachers, a team of leading software developers with varying backgrounds (frontend and backend developers, iOS and Android specialists, product owners, software architects. . .) that will teach these lessons based on their own professional experience, acquired after working on a plethora of different projects. Furthermore, the all share the same passion for the world of software development, and they’re in a constant process of learning and improvement, assuring that these courses will be up to date.

As we’ve already mentioned, the first course that Apium Academy will offer will focus on Frontend Architecture; to be more specifically, on Angular. Throughout these 4 week training, special attention will be paid so students learn to **properly work with Angular in a reactive way** , to architect code that’s scalable and maintainable, to test an application and to create a complex UI using best practices.

This course will consist of 8 sessions of 1 hour and a half each, so lessons will be pretty intense. These trainings offered by Apium Academy will have a hands-on approach, meaning that all acquired knowledge can be easily and immediately applied in actual situations and issues.

This course will be the first of many; in fact, there’s already an **Android Architecture** and a **Product Ownership** courses ready to be announced, both following the same hands-on principles and application of best practices.

If you’re curious about this initiative and want to sign up for one of these software development courses, or you just simply want to receive more information about Apium Academy as a whole, we strongly recommend that you visit their website, [Apiumacademy.com](https://apiumacademy.com/), or directly send an e-mail with any question or suggestion you might have at [info@apiumacademy.com](mailto:info@apiumacademy.com). Go for it!

The post [Apium Academy is born: software development courses in Barcelona](https://apiumhub.com/tech-blog-barcelona/apium-academy-born-software-development-courses-barcelona/) appeared first on [Apiumhub](https://apiumhub.com).
graphql2chartjs: Realtime charts made easy with GraphQL and ChartJS
Tags: graphql, charts, hasura, postgres
Published: 2019-03-15 09:49:11

---
title: graphql2chartjs: Realtime charts made easy with GraphQL and ChartJS
published: true
description: Use GraphQL as a data source to build realtime charts with ChartJS
tags: graphql, charts, hasura, postgres
canonical_url: https://blog.hasura.io/graphql2chartjs-realtime-charts-made-easy-with-graphql-and-chartjs/
---

![realtime chart with live data](https://storage.googleapis.com/graphql-engine-cdn.hasura.io/assets/graphql2chartjs/live-chart.gif)


[We](https://hasura.io) started using [ChartJS](https://www.chartjs.org) with GraphQL so that we could leverage GraphQL's realtime subscriptions to build realtime charts. Soon enough we realised that we can automate this process of restructuring the GraphQL data to a form that ChartJS expects.

> graphql2chartjs is an open source tool that reshapes your GraphQL data as per the ChartJS API. This makes building charts as easy as simply making a GraphQL query.

The idea behind this tool is to generate ChartJS compliant data object from your GraphQL response by simply adding a few aliases in your GraphQL query.

[*Check out a live demo here*](https://graphql2chartjs-examples.herokuapp.com/)

## Usage with Hasura

[Hasura](https://github.com/hasura/graphql-engine) gives you an instant realtime GraphQL API on an existing Postgres database. You can create views to capture analytics and aggregations on your database and instantly turn them into charts.
If you're using Postgres and Hasura, this is what using graphql2chartjs looks like:

![graphql2chartjs](https://storage.googleapis.com/graphql-engine-cdn.hasura.io/img/graphql2chartjs-explained.png)

Watch this video below to see a demo/tutorial of using Hasura with an existing Postgres database, creating views and building charts.

<div style="text-align:center">
  <a href="https://www.youtube.com/watch?v=153iv1-qFuc&feature=youtu.be" target="_blank">
    <img src="https://storage.googleapis.com/graphql-engine-cdn.hasura.io/assets/graphql2chartjs/g2c-youtube-embed.png" width="1000px" alt="youtube video demo">
  </a>
</div>


Continue reading: [https://blog.hasura.io/graphql2chartjs-realtime-charts-made-easy-with-graphql-and-chartjs](https://blog.hasura.io/graphql2chartjs-realtime-charts-made-easy-with-graphql-and-chartjs/)
Angular 9|8|7 Select Dropdown Examples with Reactive Forms
Tags: angular987, angularselectdropdown, multiselectdropdown, reactiveformsselect
Published: 2020-01-29 12:05:13

---
title: Angular 9|8|7 Select Dropdown Examples with Reactive Forms
published: true
tags: Angular 9|8|7, Angular Select Dropdown, multi select dropdown, reactive forms select
canonical_url: https://www.positronx.io/angular-9-select-dropdown-examples-with-reactive-forms/
---

Today I’m going to share with you how to work with **Angular 7 Select Dropdown**. We’ll learn to work with Angular select dropdown with Reactive Forms. In this tutorial i will show you how you can create, implement and validate select dropdown in your app.

## Understand SelectControlValueAccessor

The `SelectControlValueAccessor` is very useful directive, It is used to write select control values as well as listens to the select control changes. This directive works with the following value accessors: **FormControlDirective** , **FormControlName** , and **NgModel** directives.

#### Table of Contents

1. Angular Reactive Form Setup for Select Dropdown
2. Create Select Dropdown in Angular
3. Angular 7 Multiple Select Dropdown
4. Angular Select Dropdown Validation
5. Angular Select Option Change Event
6. Angular 7 Select Dropdown Full Example

## Angular Reactive Form Setup for Select Dropdown

Inject ReactiveFormsModule in `app.module.ts` file to work with select dropdown in Angular app.

```
import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [
    ReactiveFormsModule
  ]
})
```

#### `app.component.html`

```
<!-- Form starts -->
<form [formGroup]="registrationForm" (ngSubmit)="onSubmit()">

   <select class="custom-select">
      <option value="" disabled>Choose your city</option>
      <option>New York</option>
   </select>

   <button type="submit">Submit</button>
</form><!-- Form ends -->
```

#### `app.component.ts`

```
import { Component } from '@angular/core';
import { FormBuilder, Validators } from "@angular/forms";

@Component({
  // ...
})

export class AppComponent {

  constructor(public fb: FormBuilder) { }

  /*########### Form ###########*/
  registrationForm = this.fb.group({
    cityName: ['']
  })

  onSubmit() {
    alert(JSON.stringify(this.registrationForm.value))
  }

}
```

[Click Here to read More](https://www.positronx.io/angular-9-select-dropdown-examples-with-reactive-forms/)
How to call two different service in github or netlify?
Tags: discuss
Published: 2019-03-15 09:44:30

---
title: How to call two different service in github or netlify?
published: true
tags: discuss
cover_image: https://thepracticaldev.s3.amazonaws.com/i/680dh8tn9k1nj05zykge.jpeg
---

I have developed the website in reactjs and then my api is in nodejs. So i will want to access the two services. so i have deployed in github pages or netlify. In this time how to start the both service?

Anyone facing this problems?