teleren/devto huggingface dataset:
New Rails 6 App Without WebPacker
Published: 2021-08-28 05:10:41

Your new rails 6 app comes with webpacker by default. This means all your javascript is installed via yarn and managed by webpacker.
In some cases you will prefer using the old-style asset pipeline which has support for older libraries unlike the webpack.
As a result, you will need to bypass or ignore the default new rails installation and enforce the use of the asset pipeline manually.
This article is meant to give you a direct guide to all what you need.
1 - Start your new rails application ignore/skipping javascript installation.

     rails new [APP_NAME] --skip-javascript

2 - Setup javascript includes in the application layout

     <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

3 - Create assets/javascripts/application.js
      add the following files to require the necessary js libraries.
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript file within this directory, lib/assets/javascripts, or any plugin's
// vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file. JavaScript code in this file should be added after the last require_* statement.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require rails-ujs
//= require turbolinks
//= require_tree .

4 - Import the required css files

  /*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_tree .
 *= require_self
 */

5 - Setup app/assets/config/manifest.js

//= link_tree ../images
//= link_directory ../stylesheets .css
//= link_directory ../javascripts .js

6 - And done ...
Git commands I find very useful and why
Tags: git, versioncontrol, github
Published: 2021-08-28 04:51:11

1. `git checkout [some-branch] -- [some/file/path.ts]`
This will check out (and stage) that specific file from that specific branch into your local branch. This is great for working in teams where changes are being made in the same codebase in parallel. Suppose in another branch your teammate wrote a util that you can also use, or if you yourself want to get the latest version of a file to remove avoid unnecessary merge conflicts. An alternative to these scenarios is:

2. `git cherry-pick [commit-hash]`
Get code from a specific commit into your own branch. You can use the --no-commit flag to stage the changes before committing them to your branch (in which case the history/hash will be changed). Useful if you want to copy over an exact commit from another branch to your own. Again, useful working in teams. Also useful if you yourself committed changes to the wrong branch, and you want to bring those changes over to the proper branch. After which you want to do:

3. `git reset [--hard] HEAD~[n]`
Let's say you committed directly in master branch because you forgot to checkout of your own branch. Or you pulled into a local branch that was rebased in remote and now your history is all messed up. Lots of different scenarios, one easy fix. The --hard reset will get rid of all changes permanently, so use this with extreme caution. Not using the --hard option will just remove the commit. For merge commits n=1 will work, but once the commits pile on it might get more difficult to use. Nevertheless, very useful.

4. `git commit --amend`
For when you want to make a small change to your previous commit but don't want to create a new commit. If you haven't pushed the branch then it works fine, if already pushed then you'll need to `--force` it, since you're effectively rewriting history :)
Why I created the VSCodeTips community
Tags: vscode, community
Published: 2021-08-28 04:49:00

I'm a big fan of Visual Studio Code. I was an early adopter. I started using VS Code in 2015. I was working at a Microsoft technology based company and the project I was on was to include TypeScript, pretty new at the time even though TypeScript had existed since 2012.

The only editor to my knowledge at the time that supported TypeScript was VS Code. And so began my VS Code journey. In the early days, it was literally just an editor. There was no support for extensions. I kept on using it as I was on several other TypeScript projects between 2015-2017.

When extensions became available, it was the beginning of a [beautiful ecosystem](https://marketplace.visualstudio.com/vscode) of ways to extend VS Code.

Fast forward to 2021 and not only do we have extensions and themes, but amazing technologies like [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare-pack), [GitHub Codespaces](https://github.com/features/codespaces), and other spaces that provide a VS Code experience such as [GitPod](https://www.gitpod.io/), [Stackblitz](https://stackblitz.com/), and [CodeSandbox.io](https://codesandbox.io).

Whenever I go to edit code online now, I expect the VS Code experience. 😎

{%twitter 1425505817827151872 %}

Being a fan of VS Code, I decided to create a [vscodetips Twitter handle](https://twitter.com/vscodetips) back in September of 2017. Over the past 4 years, the vscodetips Twitter community has gotten modestly large at just over 5000 followers.

I work at [Forem](https://forem.com), where we build community software that powers sites like DEV and the [CodeNewbie community](https://community.codenewbie.org/). I put out a poll to see if folks would be interested in a community site to compliment the Twitter account.

{%twitter 1399586402812243970 %}

The majority of folks that responded seemed on board with a community site.

{%twitter 1431405466416992257 %}

All that to say [community.vscodetips.com](https://community.vscodetips.com) is live!
Animations
Published: 2021-08-28 04:08:46

We've started the Blue Ocean project. My team's client is building a website called Unlocking Wellness:

>Unlocking Wellness is a health-care web and mobile app that allows patients to find and assemble a team of providers who are specially trained to care for marginalized communities and people groups.

My role is to execute the animation of the site's logo, which is composed of three elements:

- The letter 'U', which starts out inverted to represent the loop of the lock.
- A square block that represents the body of the lock.
- The letter 'W' which resides within the body of the block.

The animation consists of flipping the U and moving it into position off to the side of the lock body. And the W will bounce in place.

Research

Animation is new to me. So this a great opportunity to flex my lean-and-apply skills.

The first step is to find some strategies or frameworks for creating animations. A teammate suggested looking at React Spring and another similar tool. I took a look and - cool stuff. I didn't know tools like these existed (although of course they do).

But I felt like the docs there were light on examples -- and I like examples. So I kept looking around for something a little closer to what I'm looking for. I ended up finding these two cool resources:

https://tobiasahlin.com/blog/curved-path-animations-in-css/
https://blog.fullstackdigital.com/how-to-create-an-animated-logo-with-svg-and-css-animations-dbf0802a47a1

These make me feel like my goals are achievable without a framework. These are some of the pertinent terms, which I need to explore: keyframes, transform, translate. SVGs also look like they're in the mix.
Host An App Locally
Published: 2021-08-28 03:46:10

I used to believe that we can't host an app locally and serve it to the world, as easily as we do with Heroku or Netlify.  Until I found this **[NGROK](https://ngrok.com)**. With ngrok we can still get a public URL like the URL we get after hosting our app with Netlify or Heroku. 

Very briefly, ngrok exposes local servers to the public internet. [More on how it works.](https://ngrok.com/product)

### Where all the places we can use.

When doing development locally, we need public URLs for testing certain things like,

* Exposing local web servers.
* A webhook URL. 
* Will need redirect_url for OAuth.

These are few things, I used ngrok for. You can check more use cases from here. [WHAT IT'S GOOD FOR](https://ngrok.com/product)

### To get started with ngrok.

1. [Download](https://ngrok.com/download) 
2. Navigate to terminal and hit the command  `ngrok http <port_number>` 

There you go, now your localhost will be assigned a public url. Which you can share with anyone in the world, to use your app. On the free plan, ngrok's URLs are randomly generated and temporary. If you want to use the same URL every time, you need to upgrade to a paid plan.

![Ngrok Server Output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vxseq17gfis8tmhucj1z.png) 

### Few more good things about ngrok, which I used.

* Inspecting traffic. 
* Replaying request. 

![Inspecting traffic](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hpk66z6782zzxiqlqx8n.png)

*This is just a kick-start guide for beginners with ngrok. This is my very basic understanding after a couple of days of usage. Please go through the [docs](https://ngrok.com/docs) to learn more.*
Create a Netflix clone from Scratch: JavaScript PHP + MySQL Day 33
Tags: php, javascript, webdev, tutorial
Published: 2021-08-28 03:19:07

Netflix provides streaming movies and TV shows to over 75 million subscribers across
the globe. Customers can watch as many shows/ movies as they want as long as they are
connected to the internet for a monthly subscription fee of about ten dollars. Netflix produces
original content and also pays for the rights to stream feature films and shows.

In this video,we will be inserting Category Data

{% youtube dZmzItV6Fs0 %}

In this video,we will be displaying Category Data

{% youtube BXfJwFvxHQQ %}


If you like my work, please consider
[![Buy me a coffee](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jm11knj7d8zwcvo150q2.png)](https://www.buymeacoffee.com/cglikpo)
so that I can bring more projects, more articles for you

If you want to learn more about Web Development, feel free to [follow me on Youtube!](https://www.youtube.com/c/ChristopherGlikpo)
100% off Udemy Programming Class Coupons
Tags: webdev, python, css, java
Published: 2021-08-28 03:06:25

1. Python 3 Master Course for 2021. [Enroll now](https://www.udemy.com/course/python-3-master-course-for-2021/?couponCode=TRY10FREE82109)
2. Learn Basic HTML, CSS & Javascript (Typescript) with Vue. [Enroll now](https://www.udemy.com/course/learn-basic-html-css-javascript-typescript-with-vue/?couponCode=LEARN_FAST)
3. Advanced Foundations of Python Programming | 2021 Training. [Enroll now](https://www.udemy.com/course/advanced-foundations-of-python-programming-complete-training/?couponCode=10D7E8C132A2B3E28A8A)
4. Full Stack Mobile Application Development - Master Class. [Enroll new](https://www.udemy.com/course/full-stack-mobile-application-development-master-class/?couponCode=4F08B037DCD24ACFA513)
5. Object Oriented Programming in C++ & Interview Preparation. [Enroll now](https://www.udemy.com/course/cracking-cpp-interview/?couponCode=CPPOOPFREE3)
6. Java Programming: Complete Beginner to Advanced. [Enroll now](https://www.udemy.com/course/java-programming-complete-beginner-to-advanced/?couponCode=DA96AFDF1779)

**Coupon will expire soon.**

Don't forget to visit [Codelapan](https://codelapan.com).
Elastic Beanstalk에서 플랫폼과 버전 동시에 업데이트
Tags: aws
Published: 2021-08-28 02:59:43


엘라스틱 빈즈토크는 이용할 때 아쉬운 점이 있었다. 바로 플랫폼 업데이트나 어플리케이션 버전 업데이트가 동시에 안되는 것이다.

**환경 URL 교체**라는 기능이 있지만 스테이지<sup>stage</sup>버전과 프로덕션<sup>production</sup>의 데이터베이스를 다르게 사용하는데, 이 부분을 어떻게 처리해야할지 고민하다 이직하면서 잊혀졌다.

그래서 플랫폼과 앱 버전을 동시에 업데이트 하는 방법을 설명하면
⠀
⠀

## 1. AWS CLI 설치
⠀
⠀

## 2. 명령어 입력
`aws elasticbeanstalk update-environment --environment-id [환경 식별자] --version-label [버전명] --solution-stack-name [플랫폼]`

예를들면 다음과 같다.
```bash
$ aws elasticbeanstalk update-environment --environment-id e-abcdefghij --version-label "20210828-2" --solution-stack-name "64bit Amazon Linux 2 v3.3.4 running Ruby 2.7"
```
⠀
⠀

## env.yaml
어떤 플랫폼을 사용할지 지정할 수 있다. 루트에 [env.yaml](https://docs.aws.amazon.com/ko_kr/elasticbeanstalk/latest/dg/environment-cfg-manifest.html)파일을 생성하고 설정할 수 있다.
다음처럼 만들 수 있다.
```yaml
AWSConfigurationTemplateVersion: 1.1.0.0
SolutionStack: 64bit Amazon Linux 2 v3.4.2 running Ruby 3.0
```

## 번외. 애플리케이션 버전 추가하기
https://aws.amazon.com/blogs/devops/creating-deployable-app-archives-for-elastic-beanstalk/
```bash
$ git archive --format=zip HEAD > myapp.zip
```
Did eslint only love my PC ?
Tags: eslint, react, npm, javascript
Published: 2021-08-28 02:43:12

---
canonical_url: "https://www.thangphan.xyz/posts/did-eslint-only-love-my-pc/"
---

**My leader**: *Thang, Let's config eslint for our app.*

**Me**: *Ok, I will do it immediately.*

Then as my leader said I went to config eslint for our project. While doing this work, I encountered an interesting problem that I would like to share with you.

### Problem

My project is a react app, and we need to have `eslint-plugin-react` in order to lint `React` code. There are two things that I thought It was interesting.

1. I did not install `eslint` yet. I only install `eslint-plugin-react`. But in my `node_modules` It had `eslint`.

2. My colleagues they also installed as the way I did. But in their `node_modules`, they didn't have `eslint` at all.

![Eslint Plugin React](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iylwsdc829stw49lin3z.gif)

Why is it? I didn't know what happened. 🥲

### Figure it out

In the first time, I was confused and did some stupid works without thinking 😂.

Some methods I did:

1. Remove `node_modules`, `package-lock.json` of other member.

2. Test this problem in PC of all members 😌.

3. Try to restart their PC, `What are you thinking? Thang.`

Hmm, No method above work. At that point, I understood the resolving problem without thinking is so dangerous. I wasted a lot of time and didn't achieve my goal.

_Thang, Keep calm. Let's think about problem!_
_Why is eslint installed in your PC?_
_Does eslint-plugin-react has some configs for that?_
_Should you take a glance at eslint-plugin-react module?_

I asked myself in order to find a way to help me resolve this problem. 

When I took a glance at `package.json` of `eslint-plugin-react`, I saw it has the config:

```
"peerDependencies": {
    "eslint": "^3 || ^4 || ^5 || ^6 || ^7"
 }
```
![peerDependency](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ufnjzvgw2awcovcibp67.gif)

Oh, It has `eslint`, wait a second what's `peerDependencies`. Hmm, it's a setting, in order to compatibility `eslint-plugin-react` with `eslint` which is declared in peerDependencies. So when I install `eslint-plugin-react`, `eslint` is hosted as well.

Ok, I understood a little bit. But `Why does only my PC has eslint?`. Read a little bit `npm Docs` and saw this.

![Version Checking](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bbl695fib6tielu17q0n.gif)

Maybe the problem is `npm` version.

Immediately, I checked `npm` version of all members. Wow! Their `npm` version is less than `7` and it makes `peerDependencies` go away. Then I tried to update their version to `v7` and of course, everything works properly.
My first freelance job
Tags: webdev, javascript, devops, webpack
Published: 2021-08-28 02:36:30

This is the continuation of my experience in my first freelancer job, I'll be brief.... after they had not paid me and I lost total contact with the client they called me yesterday 26-08-21 to tell me that they would pay me this Saturday (they said they had financial problems and that's why they had not made the payment) and that they would like to continue working with me but they would like to add two other programmers (without experience) to make an e-commerce which I don't see so convenient.
I answered them that yes, I will continue working with them but it will be under a contract previously signed by me, (after the bad experience I decided to make a contract to avoid that bad taste in my mouth again).
What do you think? should I continue working with these people? 
yes, no, why?
Thank you in advance for your comments !
Greetings!
5 Dice Straight
Tags: python, programming
Published: 2021-08-28 02:27:56

This is a simple program to draw a 5 dice straight using the graphics module created by John Zelle.

```python
# dice5.py
#   This program draws 5 dice to the screen depicting a straight (1,2,3,4,5).
# by: Scott Gordon


from graphics import *

# Create main window 100 X 200


def main():
    # Create grey background size 1000 X 200 pixels
    win = GraphWin("Dice as Straight", 1000, 200)
    win.setCoords(-10, -2, 10, 2)
    win.setBackground("grey")

    # Draw a single die to the screen at the leftmost edge.
    dice1 = Rectangle(Point(-9.8, -1.80), Point(-6.2, 1.8))
    dice1.setFill("white")
    dice1.draw(win)

    # Clone the remaining 4 dice
    dice2 = dice1.clone()
    dice2.move(4, 0)
    dice2.draw(win)

    dice3 = dice2.clone()
    dice3.move(4, 0)
    dice3.draw(win)

    dice4 = dice3.clone()
    dice4.move(4, 0)
    dice4.draw(win)

    dice5 = dice4.clone()
    dice5.move(4, 0)
    dice5.draw(win)

    # Assign the values to the dices by drawing small dots on them all
    dot1 = Circle(Point(-8, 0), .25)
    dot1.setFill("black")
    dot1.draw(win)

    dot2 = dot1.clone()
    dot2.move(5, 1)
    dot2.draw(win)

    dot3 = dot1.clone()
    dot3.move(3, -1)
    dot3.draw(win)

    dot4 = dot1.clone()
    dot4.move(8, 0)
    dot4.draw(win)

    dot5 = dot2.clone()
    dot5.move(4, 0)
    dot5.draw(win)

    dot6 = dot3.clone()
    dot6.move(4, 0)
    dot6.draw(win)

    dot7 = dot5.clone()
    dot7.move(4, 0)
    dot7.draw(win)

    dot8 = dot6.clone()
    dot8.move(4, 0)
    dot8.draw(win)

    dot9 = dot7.clone()
    dot9.move(0, -2)
    dot9.draw(win)

    dot10 = dot8.clone()
    dot10.move(0, 2)
    dot10.draw(win)

    dot11 = dot7.clone()
    dot11.move(4, 0)
    dot11.draw(win)

    dot12 = dot8.clone()
    dot12.move(4, 0)
    dot12.draw(win)

    dot13 = dot9.clone()
    dot13.move(4, 0)
    dot13.draw(win)

    dot14 = dot10.clone()
    dot14.move(4, 0)
    dot14.draw(win)

    dot15 = dot4.clone()
    dot15.move(8, 0)
    dot15.draw(win)

    win.getMouse()
    win.close()


main()

```
Create Flutter Icons from PNG Images
Tags: flutter
Published: 2021-08-28 02:25:55

I was having fun with flutter and I wanted to create some custom icons. If you already have SVG images, there are plenty of guides out there that can help you do it (for example, [How to add your own custom icons in Flutter made easy](https://dev.to/techwithsam/how-to-add-your-own-custom-icons-in-your-flutter-application-made-easy-1bnj). 

I unfortunately only had PNG images and this was where things got tricky. 

# Use GIMP to modify the PNG
First up I took the PNG and opened it in the GNU Image Manipulation Program called [Gimp](https://www.gimp.org/). Gimp is quite a complex tool and you may have to read up on how to make the following changes but it should be straight forward. All I did was to make some changes to the image to crop it to my selection and scaled the image to 600 by 600 pixels. I then saved the modified image as a PNG.

# Use Inkscape to convert the PNG to SVG
I then used the tool [Inkscape](https://inkscape.org/) to open the PNG. You now need to covert the PNG to a vector graphic. To do this, select "Path" -> "Trace bitmap". You may have to play with the various options depending on your image but because my image was good quality and black and white, the default options seemed to work fine. Note that the traced vector usually is placed over the top of the image, so just move the vector aside and delete the underlying image.

# Edit the SVG image in your favourite text editor
I had considerable difficulty getting a site that can create the icon font from SVGs to not throw up errors. The site is [FlutterIcon] (https://www.fluttericon.com/) and it kept giving me errors whenever I tried to drag and drop the SVG in to the webpage. I almost gave up until I decided to edit the SVG file in a text editor. The SVG is an XML document and all you need to do is open it in your favourite text editor and:
* Remove any XML attributes and elements that refer to "sodipodi"
* Remove the "metadata" XML element
* Delete the "defs" XML element
* Remove the "style" attribute from the "path" XML element
Make sure you only one "path" element. If not then something probably went wrong with the bitmap trace.

# Extract the ZIP file downloaded from FlutterIcon
Drag your SVGs into [FlutterIcon] (https://www.fluttericon.com/) and download the resultant ZIP file.
Extract the ZIP file and place the Dart file in your lib directory. 
Place the font directory at the top level of your flutter project directory.
Follow the instructions at the top of the Dart file to include the font in your pubspec.yaml.
Now you can use the resulting icons be prefixing MyFlutterApp to the name of the icon.
Using the Up bank API
Tags: programming
Published: 2021-09-02 22:06:23

---
title: Using the Up bank API
published: true
date: 2021-08-16 08:18:16 UTC
tags: programming
canonical_url: https://dils.blog/using-the-up-bank-api/
---

 ![Using the Up bank API](https://dils.blog/content/images/2021/08/up-banners.jpg)

Up is a mobile first digital bank built on top Bendigo Bank, runs on Google Cloud and made in South Melbourne.

## Moving Up

I started using Up Bank out of curiosity. I hadn't come across a neo bank before. I was just trying it out. I referred some friends onto it and we would do the lunch money splits on Up.

Later on when I realised Up doesn't charge international transaction fees like the big banks, I moved a few recurring payments over.

## Tax Time

I usually download CSV statements from the bank and run a few grep commands to get my claim totals.

This year when I was preparing my taxes I found that Up doesn't have CSV statements. I downloaded the PDF statements for reference but if I was going to move more transactions over I needed my CSV files.

## Up bank API

After some digging I found [their API](https://developer.up.com.au/). Great, now I can get the exact data I need and do whatever I want with it.

Getting a [personal access token](https://api.up.com.au/getting_started) was easy as scanning a QR code with the app. I fired up Postman and imported the following OpenAPI file and was off to the races.

```
https://raw.githubusercontent.com/up-banking/api/master/v1/openapi.json

```

I did not think the day that I could access my banking data through an API will come so soon. Better late than never I guess.

## References

- [Up API](https://developer.up.com.au/)
- [Announcing the Up API | Up - Upgrade your banking](https://up.com.au/blog/api_lets_hack_on_banking/)
- [Up | Digital bank | Upgrade your banking](https://up.com.au/)
- [$dilantha wants you to up your banking game](https://hook.up.me/dilantha) -- Referral link. Earns us both 5 bucks if you sign up.
- [Postman](https://www.postman.com/)
- [OpenAPI Initiative](https://www.openapis.org/)
ELI5 Memoized DOM
Tags: explainlikeimfive, help, webdev
Published: 2021-08-28 02:03:52

There have been many, many DOMs – Incremental DOM, Shadow DOM, Virtual DOM – But I'm not sure what the Memoized DOM is. I know what memoization is, and as far as my searches tell me that "DOM memoizing is caching the work of functions that modify the DOM". So isn't that supposed to be similar to VDOM?