teleren/devto huggingface dataset:
JSCD: New Wheels Not Needed
Tags: beginners, webdev, rails, career
Published: 2019-03-14 18:27:52

---
title: JSCD: New Wheels Not Needed
published: true
cover_image: https://thepracticaldev.s3.amazonaws.com/i/nitzzmcyfzb9b0p45ptv.jpg
tags: beginner, webdev, rails, career
series: Journal Of A Second-Career Dev
---

This week at my new job, I was once again reminded of the differences between coding alone and coding as part of a team.

One of my tickets required me to add a new column of data (indicating whether some products offered a free trial) to an existing table. If a free trial was available, a green checkmark was displayed; if not, a greyed-out checkmark was shown instead. 

![Green and Greyed-Out Checkmarks](https://thepracticaldev.s3.amazonaws.com/i/08oycgdc7gkpjr6y4vrc.png)

In our database, each product has a `free_trial?` attribute 't' for "true", or 'f' for "false". Eager to demonstrate my Ruby skills, I dived into building and implementing a new method to accomplish my task. But then (thankfully!) I paused and asked myself: _"Self, why not check to see how the green and grey checkmarks were generated for other table columns?"_ I found the following code block:

```ruby
<% @aspects.each.with_index(1) do |aspect, index|%>
    <td class="aspect-<%= index %>">
      <span class="icon-circle  <%= green_or_grey(@product_aspects[product.id], aspect.feature) %>">
        <i class="gg-check"></i>
      </span>
    </td>
  <% end %>
```

The key snippet is the `span` statement which contains the `green_or_grey` method. This method returns `true` if `aspect.feature` is included in the `@product_aspects[product.id]` array. However, in my case, I wasn't checking to see if an array contained an item; I was checking to see if an attribute was equal to 't' or 'f'.

I was stumped for some moments, before I realized that I could reference a one-element array containing the product's `free_trial?` attribute, and then pass in 't' as my second argument. Then the `green_or_grey` method would return `true` if `product.free_trial? == 't'`:

```ruby
<%= green_or_grey([product.free_trial?], 't') %>
```

During code review, my teammates warmly commended me for figuring out a way to use the existing method (and of course I felt all warm and fuzzy inside lol). More importantly though, I felt proud of myself for taking the time to understand, respect and re-use the code I'd been given. In the moment, creating new code may feel easier and promise a certain level of progress, but could end up bloating and complicating your codebase unnecessarily.
video game ep2 source control and .gitignore
Tags: thetealpickle, gamedev, beginners, unreal
Published: 2019-03-14 18:25:00

---
title: video game ep2 source control and .gitignore
published: true
description: 
tags: #thetealpickle #gamedev #beginners #unreal
---

ep2 Source control and .gitignore

When you're working with Unreal, should we commit everything?
What NEEDS to be committed and what doesn't?
Weeknotes #4
Published: 2019-03-16 02:20:35

---
title: Weeknotes #4
published: true
tags: 
canonical_url: 
---

## Monday

Hmm… guess I missed last week. Stress sunk it’s claws into me.

Sore back. I’m feeling so old. Did some babysitting. Grateful for a big blessing on our family.

Cleaned up inboxes and task lists.

## Tuesday

Business development and networking.

Created a “hire-me” page which required further integration of the CMS on systematicui.com as well as creating a twitter card.

## Wednesday

Can’t stop reading about [inv.tech](https://inv.tech). What a fascinating company, so completely transparent.

Completely trapped by over a foot of snow. Winter is still here.

## Thursday

So, I built an interesting script for generating a Nuxt website from a static HTML file. It’s not that hard but it is interesting. Nuxt will lose any static payload data once it’s done with hydration, assuming that you will make an API call after hydration. That’s a bit of a pain, so you have to write your dynamic generation-time data into a JSON file and then embed it in your output JS with webpack `require()` assignment.

## Friday

🌞🌤❄️🌬☔️[cool emoji weather library](https://www.npmjs.com/package/emojiweather) parses text and picks an emoji.

Started watching [https://www.invisionapp.com/design-system-manager/expert-advice/heartache-design-scale](https://www.invisionapp.com/design-system-manager/expert-advice/heartache-design-scale)

I ordered contacts with an app. Pretty neat experience, but it’s still amazing how often multi-step forms lose state or experience similar bugs.

[https://blog.prototypr.io/what-do-you-need-to-know-before-starting-a-design-system-448158acc084](https://blog.prototypr.io/what-do-you-need-to-know-before-starting-a-design-system-448158acc084)

[https://medium.com/invisible-reports/why-report-in-public-d4b94306a52f](https://medium.com/invisible-reports/why-report-in-public-d4b94306a52f)
Building a Custom Docker Image
Tags: docker, beginners, ubuntu, devops
Published: 2019-03-14 18:16:40

---
title: Building a Custom Docker Image
published: true
tags: Docker,Beginner,Ubuntu,DevOps
canonical_url: 
---

 ![Building a Custom Docker Image](https://images.unsplash.com/photo-1536686155419-e5b11eb5d515?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjExNzczfQ)

Going to break up my record catalog posts with a quick hit about Docker Images. I've had to do this a lot lately and I've struggled to find a quick, concise post on it.

## The Problem

I need a docker image that has Node, NPM, Go, and Git installed on it. I could combine images and do some magic that way, but I would much rather have my own image that has everything I need and is configured in a way I know.

## The Solution

I'll start with the Ubuntu 18.04 image as my base. It's pretty stripped down, but is a system I'm familiar with.

```
docker run -it --name base ubuntu:latest
```

This will pull the image and give you shell access into the Ubuntu image.

```
root@66894d551112:/#
```

Now that we're in our shell, we can update and install the pieces we need.

```
apt update && \
apt upgrade && \
apt install -y git && \
apt install -y nodejs && \
apt install -y npm && \
apt install -y golang-go
```

This will take a minute or two to run. Once it finishes, exit the shell. This will stop the container from running. This is also a good opportunity to create any environment variables or folders you may need.

Now you can commit the status of the container to an image.

Let's check to make sure we have the name and ID of the container:

```
docker ps -a
CONTAINER ID IMAGE         COMMAND     CREATED       STATUS                   NAMES
66894d551112 ubuntu:latest "/bin/bash" 5 minutes ago Exited (0) 2 seconds ago base
```

Then you can use the commit command.

```
docker commit <containerName or containerID> <imagename:<tag>>
```

So in this case it would be:

```
docker commit 66894d551112 baseimage:latest
```

At this point, you have a base image on your machine that you can use. If you need it to be available to your team or your CI pipeline, you can put it in docker hub using `docker tag` and `docker push`.

```
docker tag baseimage:latest probablynotian/baseimage:190314.0
docker push probablynotian/baseimage:190314.0
```

Going forward, you can reference this image anywhere. This makes your `Dockerfile` a lot easier to work with.

**I hope this helps!**

_(If you want to use this image, I have it up on my [public docker hub account](https://hub.docker.com/r/probablynotian/baseimage).)_
CRA typescript is compiling slow
Tags: help, typescript, vscode, react
Published: 2019-03-14 17:43:17

CRA with typescript is bit slow even after `"skipLibCheck": true`. Mostly I find hitting F5 better than waiting for the page to auto reload.
 
Also the intellisense and error detection just stop working many times. I need to close the VS Code to get it fixed.

Is there any config, extensions or anything can help for this?

Thanks

CC: @swyx
Laxxx.js - create beautiful animations when you scrolllll!
Tags: javascript, html, css, animation
Published: 2019-03-14 17:30:55

---
title: Laxxx.js - create beautiful animations when you scrolllll!

published: true

description: Harness the power of scrolling and make your websites come alive!

tags: javascript, html, css, animation
---

Hey! I've just created a js lib that I'd like some feedback on.

I wanted to create a simple way to animate elements when a user scrolled down a webpage to make it feel tactile and fun! The library is easy to set up, you can use presets or define your own custom animations. 

If anyone wants to give it a whirl and let me know how you get on that'd be amazing. 

There's a demo [here](https://alexfox.dev/laxxx/)
Add the github is [here](https://github.com/alexfoxy/laxxx)
Angular 9|8|7 Radio Buttons Example
Tags: angular, angularradiobutton, radiobuttons, reactiveforms
Published: 2020-01-29 12:39:12

---
title: Angular 9|8|7 Radio Buttons Example
published: true
tags: Angular, angular radio button, radio buttons, reactive forms
canonical_url: https://www.positronx.io/angular-radio-buttons-example/
---

In this tutorial, I am going to answer how to work with **Angular Radio Buttons**. As we know, there are 2 form types in Angular, template-drive form and reactive form.I’ll teach how to integrate radio buttons in a template-driven form and reactive form in an Angular app. 

We’ll start with Template-driven form it is based on `NgModel` and `NgForm` directive. Whereas reactive form takes help of FormBuilder and FormControl classes to manage form elements.

#### Table of Contents

1. Working with Radio Buttons in Template-driven Form in Angular
2. Template-driven Radio Buttons Validation
3. Radio Buttons with Angular Reactive Forms
4. Reactive Forms Radio Button Validation
5. Set Radio Button Selected in Angular

## Working with Radio Buttons in Template-driven Form in Angular

Before working with radio buttons in template-driven form, we need to activate `FormsModule` service in angular app. This service allows you to work with template-driven form in Angular. Go to `app.module.ts` file and paste the following code.

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

@NgModule({
  imports: [
    BrowserModule,
    FormsModule
  ]
})
```

#### Implementing Radio Buttons in Angular Template Driven Form

We are going to create radio buttons in Angular template. We’ll use `ngModel` directive, this directive communicates with `NgForm` directive.

```
<!-- Form starts -->
<form #myForm="ngForm" (submit)="templateForm(myForm.value)" novalidate>

   <div class="custom-control custom-radio">
      <input id="male" type="radio" class="custom-control-input" value="male" name="gender" ngModel>
      <label class="custom-control-label" for="male">Male</label>
   </div>

   <div class="custom-control custom-radio">
      <input id="female" type="radio" class="custom-control-input" value="female" name="gender" ngModel>
      <label class="custom-control-label" for="female">Female</label>
   </div>

   <button type="submit" class="btn btn-danger btn-lg btn-block">Find out gender</button>
</form><!-- Form ends -->
```

#### Getting Radio Buttons Value in Angular Component Class


[click here to read more](https://www.positronx.io/angular-7-radio-buttons-example/)
How to Detect Browser using Javascript?
Tags: javascript
Published: 2019-03-14 11:27:58

---
title: How to Detect Browser using Javascript?
published: true
description: I would like to share some useful tutorial which you cant find it anywhere. Now a days all  web based application requires video and audio chat capabilities for real time communications. Here, I will show you how to detect browser using javascript & WEBRTC?
tags: javascript
---
![Detect browser using javascript](https://thepracticaldev.s3.amazonaws.com/i/set8bax927tkcs54m6ui.png)

read more - [https://w3lessons.info/how-to-detect-browser-os-resolutions-speakers-microphone-webcam-using-javascript/] (https://w3lessons.info/how-to-detect-browser-os-resolutions-speakers-microphone-webcam-using-javascript/)
Developing and Securing GraphQL APIs with Laravel
Tags: graphql, laravel, php, api
Published: 2019-03-14 11:09:48

---
title: Developing and Securing GraphQL APIs with Laravel
published: true
description: Learn how to develop GraphQL APIs with Laravel and how to secure them with Auth0.
tags: #graphql #laravel #php #api
canonical_url: https://auth0.com/blog/developing-and-securing-graphql-apis-with-laravel/
---
GraphQL and Laravel pair like wine and cheese 🍷🧀

Get started with GraphQL in Laravel by building an API that provides a list of wines from all over the world.

[Read on 🤸🏻‍♀️](https://auth0.com/blog/developing-and-securing-graphql-apis-with-laravel/?utm_source=dev&utm_medium=sc&utm_campaign=graphql_laravel)

![Developing and Securing GraphQL APIs with Laravel](https://thepracticaldev.s3.amazonaws.com/i/cixljf77caxecw1zfyl3.png)
Native HTML: Lazyloading Revisited
Tags: html, css, lazyload, whatwg
Published: 2019-03-14 10:38:48

A couple of months ago I did a post about a new exciting attribute coming to the spec that allowed native lazyloading if you'd like to read that post first you can find it here.

{% link https://dev.to/link2twenty/native-html-lazyloading-3ai4 %}

## Why revisit this?

The proposal has changed a lot in the last 2 months a few of us agreed that `lazyloading='auto|on|off'` felt a little clunky and a WebKit engineer, @othermaciej, proposed a new syntax `load='auto|eager|lazy'`, which is what the proposal suggests now.

You can read the full discussion here.

{% github https://github.com/whatwg/html/pull/3752 %}

## How does the proposal stand now?

>The attribute provides a hint to the user agent to aid in deciding whether to load an element immediately or to defer loading until the element will be viewable, according to the attribute's current state.

>**lazy**
Indicates a strong preference to defer fetching the element's resource until it will be viewable 

>**eager**
Indicates the element's resource must be fetched immediately, regardless of viewability

>**auto** *default*
Indicates that the user agent may determine the fetching strategy

>The attribute's missing value default and invalid value default are both the auto.

## How does that look practically?

I've updated my example from the previous post to reflect the new state of things.

```html
<!-- 
  this image will not be fetched until it 
  is in the viewport, meaning the page loads
  faster and uses less data.
-->
<img src="https://via.placeholder.com/150" load="lazy" />

<!-- 
  this image will be fetched as soon as the
  page opens, this is how website work currently
-->
<img src="https://via.placeholder.com/150" load="eager" />

<!-- 
  this image will probably work the same as eager
  but there is space for interpretation
-->
<img src="https://via.placeholder.com/150" load="auto" />

<!-- 
  If the load value is invalid or missing
  the attribute will default auto
-->
<img src="https://via.placeholder.com/150" load="bar" />
<img src="https://via.placeholder.com/150" />
```

## Close

The reason I felt it was important to revisit this was to show you that no matter where you are in your career you have a say in the future of the platform the people over at whatwg want to get the spec right and your unique perspective might be what they're missing. Don't be afraid to look at future specs, ask questions and make suggestions.

Thank you for reading, do you prefer this iteration of lazyloading over the last?
❤🧠🦄🦄🧠❤🧠
apiwha
Tags: whatsapp, ruby, gem
Published: 2019-03-14 10:00:34

---
title: apiwha
published: true
description: ruby wrapper around ApiWha API.
tags: whatsapp,ruby, gem
---

Hi i just implemented a little ruby wrapper around ApiWha API http://www.apiwha.com. Take a look at:

https://github.com/davidesantangelo/apiwha

APiWha allow you to manage whatsapp via API. 

**Send text messages or media**

Allows you to send messages to any destination that wrote to you. You can send parameters by GET or POST method (POST parameters as form-data).

**Pull messages**

Allows you to pull the messages you received and sent.
NodeJS Rest Express MongoDB and more: typescript, passport, JWT, socket.io, HTTP2, async/await, nodemailer, templates.
Tags: node, javascript, webdev, mongodb
Published: 2019-03-14 09:19:58

---
title: NodeJS Rest Express MongoDB and more: typescript, passport, JWT, socket.io, HTTP2, async/await, nodemailer, templates.
published: true
description: 
tags: node, nodejs, javascript, webdev
---

Hey there!

Have you tried to set up a backend NodeJS app with typescript, passport, JWT, socket.io, HTTPS, HTTP2, async/await, nodemailer, templates, pagination, docker, yada yada !@#$%^&*() ?

Hope I didn't scare you away with those jargons :)
If you're still there, welcome onboard!

I have spent quite some time surfing around looking for the right NodeJS backend setup for my webapps but I haven't quite found the one that fits all of my needs. So here we go, same old same old introduction:

NodeJS Rest Express MongoDB (REM) - a production-ready lightweight backend setup.

Ready? Go...

```
 Typescript      Express 4.15       CORS     Helmet    DotEnv   joi (validation)   forever
  Mongoose 4.9    Passport  JWT      Await
  Tslint          Apidoc    Docker   Husky    Morgan    Travis   Windows (Powershell)
  Tests
            Mocha  Chai     Sinon    istanbul
  MORE:
            HTTPS           HTTP2 (spdy)      Socketio 2.1       Init DB Data
            Slack message   Nodemailer        Mailgun            Email Templates    Forgot Password
            VSCode Debug    Dependabot        Codacy             File upload (multer)
      API
            API response    (data, meta: limit, offset, sort)    Transform res
            apiJson         Pagination query      Regex query    Whitelist fields in response
            mstime          API response time     Stack trace in Response
```

Hope that one didn't hurt your eyes also :] (hey, you're still here with me right?)

Ok, I admit that I'm not good at writing these stuff.
How about a link if you're still interested in all of those jargons and want to set up a robust backend app?

{% github ngduc/node-rem %}

Hope you find it useful. Drop me a line below if you have questions/feedbacks.
Thanks!
Generating code to call a request from Postman
Tags: api, webdev, postman
Published: 2019-03-14 07:52:36

---
title: Generating code to call a request from Postman
published: true
description: Using postman to generate the request code in postman
tags: #api #webdev #postman
---

Postman is one of the best tools I have used to call, test and debug my API(s). This morning when I was going through something, I found two brilliant features in postman I wasn't aware of. Postman can generate some request calling code for you and can generate documentation as well. For those who aren't aware, Yes that's true!

I have created a sample API in C#, which looks like this:

```
// POST api/values
[HttpPost]
public ActionResult<string> Post([FromBody] string value)
{
   return ""+value+" is posted";
}
```

Now to call this API in Postman, it will look something like this:

![Post API](https://thepracticaldev.s3.amazonaws.com/i/wdbgp8776odxf8cmxxcf.PNG)

Now, to generate some code on to call this request, there is a Code button on the top right. Click on it to see the options where you can see a no of languages to generate the code. It looks something like this:

![Code button in postman](https://thepracticaldev.s3.amazonaws.com/i/7uho0wceo18wit7sxwbb.PNG)

When you click on this code button, a pop-up menu like this will appear:

![Code clicked](https://thepracticaldev.s3.amazonaws.com/i/xuxcmoo9yzj662y7apvy.PNG)

Now, you can see there is a code snippet and a drop down from where you can select a no of options, as to for which you want to generate the code. The options available are:

![code_options](https://thepracticaldev.s3.amazonaws.com/i/vxgc74yaygat8xfhpxn1.PNG)

Now, click on any of the options, where you will see the code. Copy the code and paste it in your IDE and run!

It would look something like this:
![code_snippet](https://thepracticaldev.s3.amazonaws.com/i/4l68b2j27kbz6dsysrhi.PNG)

It's done! As simple as that.
CSS/JS coverage in Chrome
Tags: performance, chrome, css
Published: 2019-03-14 05:13:57

---
title: CSS/JS coverage in Chrome
published: true
description: using the coverage feature in chrome dev tools for performance improvements
tags: performance, chrome, css
---

From Chrome version 59 onwards, the developer tools expose a new Coverage tab(next to Console). This basically shows that given all the JS/CSS that gets loaded on the how much of it is actually used.

![coverage-tab](https://developers.google.com/web/updates/images/2017/04/coverage.png)

You will be surprised to see the percent of unused code that gets shipped over the wire. In big projects/teams over time code keeps getting added and no one takes the time to actually check if all what's getting skipped to the user is actually needed. This causes performance bottlenecks and in many cases loss of potential business.

The great part of the tool is that does not only give a percent of unused code but actually also shows what code it is. Using this information it becomes easy to identify code that can be removed.

![source-code](https://developers.google.com/web/updates/images/2017/04/coverage-breakdown.png)

Each line of code is color-coded:

* Solid green means that line of code executed.
* Solid red means it did not execute.

_Off course not everything in red can be removed. There will be code that runs on user actions._

One simple way to get to it, is `shift + cmd + p`(on a mac) and then type `coverage`. 

_The command palette has a bunch of pretty useful utilities._

We use this tool pretty often in our development as well as performance tuning. `Performance` should not be taken as an afterthought, but rather tackled during the development cycle itself.

A fellow coworker rights puts its `Performance is the new Accessibility` 
{% twitter 1105570003934273536 %} 

Let's all chip in to make the web accessible to everyone.
Angular PWA to Google Play store, using Trusted Web Activity
Tags: angular, firebase, pwa, webdev
Published: 2019-08-13 04:33:00

---
title: Angular PWA to Google Play store, using Trusted Web Activity
description: PWA (Progressive Web Apps) are becoming more mainstream, allowing web applications to run as if they are native applications on your devices. Something that has been missing is the ability to list these applications in a centralized developer store. With the new introduction of TWA (Trusted Web Activity) you are now allowed to create a native application and APK file from a trusted PWA. Which means you can now delivery your PWA directly from the Google Play Store
published: true
tags: angular, firebase, pwa, webdev
canonical_url: https://ajonp.com/lessons/angular-pwa-to-google-play-store-using-trusted-web-activity/
cover_image: https://res.cloudinary.com/ajonp/image/upload/w_1000,h_420/v1552593285/ajonp-ajonp-com/16-angular-pwa-to-playstore/angular-pwa-to-playstore.jpg
---

> Original Post: https://ajonp.com/lessons/angular-pwa-to-google-play-store-using-trusted-web-activity/

{% youtube db9Y5jyparA %}

Angular PWA to Google Play Store Coming soon….