teleren/devto huggingface dataset:
Angular i18n  Markup Collision
Tags: angular, i18n
Published: 2020-05-30 22:50:23

[i18n](https://angular.io/guide/i18n) is tightly coupled with HTML markup. I had a couple of issue wherein Dev-A edited the markup then Dev-B triggered translation scripts. Dev-B was confused because there are translation items modified but don't belong to his intended changes.

####Issue A - Newline formatting

Original Content

```html
<div class="login-alert"i18n="Login Page|Validation message">Password is required.</div>
```

Modified Content (for some IDEs, they autoformat newlines)

```html
<div class="login-alert"i18n="Login Page|Validation message">
   Password is required.
</div>
```

Notice that `Password is required` is now on its own line. Once we run `i18n-extract`, it will generate a new hash id for this item.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ulsvypgxk7uvzi3n4gnp.PNG)

####Issue B - Changes on text content

Taking the same item on A, let's remove the "." then run `i18n-extract`.

```html
<div class="login-alert"i18n="Login Page|Validation message">Password is required</div>
```

It generated a new hash id for the above changes.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/t8nbo8qi1d1jy1l4voro.PNG)

###Workaround

I created a console application in C# that will format xlf files and ignore whitespace changes. This will execute `i18n-extract` and proceed on processing xlf files. Running this tool will prevent new hash id creation. Here is the [source code](https://github.com/jengfad/angular-i18n-xlf-formatter). 

###Conclusion
With this in mind, we should always check our changes if affected existing translation items by running `i18n-extract` before pushing it.
Practical Python Programming - Online course
Tags: python, top7
Published: 2020-05-30 14:47:49

## Course Details:

Folks, the legendary David Beazley has released a free, online course on [practical python programming](https://dabeaz-course.github.io/practical-python/Notes/Contents.html)! It was initially content for an in-person training, now online and free for everyone.

Course page: https://dabeaz-course.github.io/practical-python/Notes/Contents.html

## About the author:

[David Beazley](http://dabeaz.com/) is a very well known member of the Python community. His PyCon talks are extremely interesting and teach you a lot about the workings of Python and building some incredible stuff in 3 hours.

Some of my favorite talks:

### Keynote: A Talk Near the Future of Python

Live code a web-assembly interpreter in one hour!

{% youtube VUT386_GKI8 %}

### Python Concurrency From the Ground Up: LIVE!

[A live-coding session](http://pyvideo.org/pycon-us-2015/python-concurrency-from-the-ground-up-live.html) exploring various concurrency models in Python

### Keynote: Builtin Superheroes

Solve common data  manipulation problems using Python's built-in types.

{% youtube lyDLAutA88s %}

### Lambda Calculus

Learn lambda calculus and derive the powerful Y-combinator using Python

{% youtube pkCLMl0e_0k %}
Help w/react
Tags: react, node, git
Published: 2020-05-30 15:48:49

So I don't know what's going with my computer, everyone I ask is saying this is strange and they never seen it before so I hoping someone here can help me before i just buy another computer lol...jk


This screenshot you see here is what happens after i run "npm create-react-app <name of my folder>


idk why it just stays there and it only gives three files in stead of giving me all the file i need for the react app (like public, SRC).

If someone sends me the folder with all the correct files Im able to run the react app and work on it, the issue is that Im not being able to create for some reason and my OCD is really killing me on this. 

Please and thank you! :)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/8ruse43ql5lk36d3rw6q.jpg)
100 Days of SwiftUI — Day 10
Tags: 100daysofswiftui
Published: 2020-05-30 20:24:28

---
title: 100 Days of SwiftUI — Day 10
published: true
date: 2020-05-30 20:24:03 UTC
tags: 100daysofswiftui
canonical_url: https://zeitschlag.net/100-days-of-swiftui-day-10/
---

[Day 10](https://www.hackingwithswift.com/100/swiftui/10) was about classes. In my opinion, Paul did a terrific job in explaining the differences between classes and structs.

At least I think I actually understood that these two types handle mutability differently. I never thought about that, to be honest. Everytime I did it the wrong way, the compiler complained and I changed it without basically knowing why I was doing this.

![Actual footage of me coding](https://zeitschlag.net/content/images/2020/05/43erwk.jpg)

Thank you again for the optional, but nevertheless really interesting additional information.

BAM! 10% done — and I'm still enjoying it more than I thought of in the beginning, to be honest 🙃

<!--kg-card-end: markdown-->
Screen commands
Tags: linux, todayilearned
Published: 2020-05-31 00:26:53

Screen is useful for running long scripts on linux virtual machines where you don't want to risk termination due to a disconnection.

The following commands are all you will ever need, probably. Most of the time.

download: `sudo yum install screen`
list sessions: `screen -ls`
start session: `screen`
detach from session: `ctrl a + d`
re-attach: if there is only one session running you can do `screen -r` else do `screen -ls` and get the desired session id and do `screen -r <SESSION_ID>`
kill session from inside the session: `ctrl a + k + y`
enable vertical scrolling: `ctrl a + ESC`

A lovely cheatsheet I forked from someone wiser than I, who also forked it from someone before them:
https://gist.github.com/aarobender/a503231e83b862c3757ab6527bdfc812
My New Personal Website!
Tags: webdev, vue, ux
Published: 2020-05-31 01:23:58

*Code hosted on [GitHub](https://github.com/Sergix/sergix.net)*

<hr>

## It's finally done!

After about a week-and-a-half of design and development, [my personal portfolio site has been completed.](https://www.sergix.dev/)

Currently, it only shows off a few designs and a couple websites I've worked on, but I really enjoyed building it and maybe starting a new personal blog.

## Stack

The site was built with -

[Gridsome](https://gridsome.org/) static site generator
[Tailwind](https://www.tailwindcss.com/) for styling
[Netlify](https://netlify.com/) for hosting
[Figma](https://figma.com/) for UI prototyping


For those of you who don't know, Gridsome is an awesome static site generator for Vue. If you're interested in making a personal site and love Vue, it's the way to go!

All the blog posts are written in plain markdown and pulled in via the [Gridsome filesystem plugin](https://gridsome.org/plugins/@gridsome/source-filesystem) and the [GraphQL layer Gridsome provides](https://gridsome.org/docs/data-layer/).

![Landing page screenshot](https://dev-to-uploads.s3.amazonaws.com/i/xnk6kw1949r2bcgql62n.png)

## Future features

I'm looking to add -

[Web monetization](https://webmonetization.org/)
[Fathom analytics](https://usefathom.com/)
Comment system (might roll my own via [Netlify Functions and AWS](https://www.netlify.com/products/functions/))

...and hopefully some other interesting features in the future!

## Thanks for reading! God bless!

<hr>

*Contact me at [hello@sergix.dev](mailto:hello@sergix.dev).*
#40daysofHybridCloud
Tags: cloudcomputing, hybridcloud, machinelearning, devops
Published: 2020-05-31 02:25:26

Hey Everybody !! Long time no see :)

Today we will see an amazing post out there that is being the part of amazing community like dev.to and I encourage all the people out there to join such communities .

As we all know in situation like which we are facing right now that is Covid-19 , its very important for all of us to come together , help each-other out and continuously improve ourselves on day to day basis.

I want to share my experience of being a part of one more such community started by LinuxWorld Informatics Pvt Ltd and Indian Innovation & Entrepreneurship Community in the guidance or mentor-ship of Mr.Vimal Daga who is well known Technologist and World Record Holder . 
I have been part of various training given by Mr. Vimal Sir  like :

-1  **MLOps(Machine Learning Operations)**
-2  **DevOps Assembly Lines** 

which I started during this lock-down period due to covid-19 situation .

Now being a part of one more such training :- 

> ##**Hybrid Multi Cloud Training - AWS + Terraform + OpenStack + Kubernetes**
which will be great learning for me .


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/bi52h8rolszo3h6q58lm.jpg)


With this I have decided to share my learning with you all which will be the part of #40daysofHybridCloud  in this I will be sharing my daily practicing and learning of cloud computing from very basics to an Expert level . Keeping it short I will be very happy if you all can be part of this journey with me and this allow me add value to you all by sharing my activities .

Thanks,
Happy Learning :)

######cloudComputing
######machinelearning
######devops
######mlops
######40daysofHybridCloud
Must Have Vim Plugins
Tags: vim
Published: 2020-06-14 18:28:52

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/8es3m9p3fyh1px8xrn1a.png)
In this post, I will talk about top vim plugins which everyone should have. 

<a href="https://github.com/preservim/nerdtree"><b>Nerdtree</b></a> Nerdtree is a file explorer for the vim editor. Once you have nerdtree installed, it is easy to navigate through sub directories and files. 

<a href="https://github.com/ctrlpvim/ctrlp.vim"><b>Ctrlp</b></a> Ctrlp is a fuzzy file finder. Ctrlp is a great utility to find files in a current directory and sub directories. You can use find files based on fuzzy logic or vim's regular expressions. With Ctrlp, you don't have to get out of vim. Ctrlp also keeps track of previously opened files.   
<a href="https://github.com/tpope/vim-surround"><b>Vim-surround</b></a> Surround.vim is all about "surroundings": parentheses, brackets, quotes, XML tags, and more.  The plugin provides mappings to easily delete, change and add such surroundings in pairs.

<a href="https://github.com/embear/Vim-foldsearch"><b>Vim-foldsearch</b></a> This plugin is must have plugin if you deal with large files. It makes searching through files very effective. When you search a word or pattern using vim-foldsearch, it folds the lines which don't have pattern matched and only show the lines with patterns.  

<a href="https://github.com/nelstrom/vim-visual-star-search"><b>Vim-visual-star-search</b></a> This is small plugin but very useful. This allows you to select some text using Vim's visual mode and then hit *
and # to search for it elsewhere in the file.  For example, hit V, select a strange sequence of characters like "$! $!", and hit star.  You'll find all other runs of "$! $!" in the file.

<a href="https://github.com/altercation/vim-colors-solarized"><b>Vim-colors-solarized</b></a> Great plugin to select from pre-configured color schemes. 

<a href="https://www.usessionbuddy.com/post/How-To-Rename-Multiple-Files-Using-Vim/"><b>Vim rename multiple Files</b></a> There are multiple plugins to do this. Please checkout the above post to know more about these plugins.
Spread operator
Tags: javascript, beginners
Published: 2020-06-01 03:29:16

If you're looking to conveniently make a shallow copy of objects in javascript(meaning one level deep), my recommendation is to use the spread operator. 

From MDN: **Spread syntax allows an iterable such as an array expression or string to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected, or an object expression to be expanded in places where zero or more key-value pairs (for object literals) are expected.**

It looks like this: 

```js
let array = [1,2,3]
let arrayCopy = [...array]
console.log(arrayCopy)
// expected output: [ 1, 2, 3 ]
```

Spread syntax effectively goes one level deep while copying an array. Therefore, it may be unsuitable for copying multidimensional arrays,

We can take the content for objects and copy them as well, like so:

```js
let obj = {id: 234}
let objCopy = {...obj}
console.log(objCopy)
// expected output: { id: 234 }
```

Another way to use the spread operator is to pass it into a function call:

```js

let func = (x,y,z) => {
  console.log(`${x} + ${y} + ${z} = `,x+y+z)
}
let array = [1,2,3]
func(...array)
// expected output: 1 + 2 + 3 =  6
```

We can also concatenate arrays easily:

```js
let arr1 = ["a","b","c"];
let arr2 = ["d","e","f"]
let arr3 = [...arr1,...arr2]
console.log(arr3)
// expected output: ["a","b","c","d","e","f"]

```

So there you have, an easy and effective way to take and manipulate the contents of an object. For deeper copies, I suggest using well known js libraries such as lodash.
What are the initial things to do if you have an idea for a startup?
Tags: discuss, startup
Published: 2020-06-01 05:07:12

---
title: What are the initial things to do if you have an idea for a startup?
published: true
description:

tags: #discussion #startup
cover_image: https://images.unsplash.com/photo-1504805572947-34fad45aed93?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80
---
Improving Side Projects For Others to Use
Tags: csharp, dotnet, development
Published: 2020-07-07 19:53:25

I'm a previous post I talked about ImprezGarage, a petrol expense and vehicle maintenance tracker application, that I started working on a few years ago to showcase what I can do. This is so that any potential jobs I applied for, the hiring managers and recruiters could actually see what my code is like.

At the start of 2020 I felt that it was time to actually put myself and it, out there. Not just on my portfolio site, or resume, but to the world. 

This first started with a major UI update. The original UI I had done, was intended to look like an all in one dashboard with sections. This would allow the user to see their petrol expenses and the maintenance history in one clean view.

However, I was never really happy and I felt it looked very amateurish. Therefore, I started using Pinterest to get inspirations and create boards of ideas and colour palettes. I eventually stumbled across a few designs and put them together to create a better interface. One which I am so much more happier with.

Another side to improving the application was to work on its stability. Now at work this isn't a problem, you make quality work that performs well and handles any errors or crashes well, if they happen at all.

However, I hadn't done this here. ImprezGarage was crashing constantly and I use it myself to help keep track of how much I am spending on the car. So even I was irritated by it. After sorting out the UI, I started working through using it as a new user and creating bug reports for myself, just like my days as a QA Tester. Each of these got placed into my Todoist project and I slowly worked through them. 

Once the major ones were out of the way I published the application, and setup the website to showcase the app to the world (www.imprezgarage.com).

One of the biggest things I've done recently is upgrade from .Net Framework 4.6.1 to 4.8, so that I can make use of more up to date features that Microsoft bring in. Doing this will also allow me to potentially move over to .Net Core and eventually .Net 5.

I also make use of the Prism library, I think it's an amazing library that helped me learn to break up code more and also make use of design patterns, when I first got into software development as a profession and not just a hobby. I've used it at work and on ImprezGarage. However, I was still using a much older version of that too. Therefore, now I have upgraded to their latest version and I intend on keeping up to date more often with that going forward.
Internet Explorer Coding Issues
Published: 2020-06-13 11:58:00

There's a special place in my heart for Internet Explorer memes but it's always a pain to deal with its quirks. Below are some of its issues:

*I'll add something to this list every now and then because IE is awesome.*

- `angular` - Don't put (click) methods on `<i>`.

- [.includes() won't work.](https://stackoverflow.com/questions/36574351/includes-not-working-in-internet-explorer)

- [IE caching is always on](https://support.microsoft.com/en-ph/help/234067/how-to-prevent-caching-in-internet-explorer)

- `d-flex` - messed up layout if child elements aren't inside a `<div>`

```html
<!-- Won't work -->
<div class="d-flex">
   <button>Button 1</button>
   <button>Button 2</button>
</div>

<!-- Will work -->
<div class="d-flex">
   <div>
      <button>Button 1</button>
   </div>
   <div>
      <button>Button 2</button>
   </div>
</div>
```

- `d-flex` - d5e90f5e3995cf99442cb8b638fd910557c2526c
Let’s get started with Spring Boot Docker Image Creation.
Tags: spring, docker, java
Published: 2020-06-01 11:32:28

The release of Spring Boot 2.3 has brought with it some cool new features like Java 14 support, Graceful Shutdown, Liveness and Readiness probes, Docker Image Creation, etc. 

In this blog post, we’ll discuss how developers can create Docker images using Spring.

**Prerequisites:**
 
* Basic knowledge of Spring Boot and Docker
* Docker Daemon
* Bash like Shell

Ready with the prerequisites? Let’s take a look at how convenient it is to create docker images using spring. I’m using Gradle but it’s just as easy to do with Maven.

First, create a new Spring Boot project using [start.spring.io](https://start.spring.io/#!type=gradle-project&language=java&platformVersion=2.3.0.RELEASE&packaging=jar&jvmVersion=1.8&groupId=me.jysh&artifactId=spring-boot-docker&name=spring-boot-docker&description=Demo%20project%20for%20Spring%20Boot%20Docker%20Image%20Creation&packageName=me.jysh.spring-boot-docker&dependencies=web) and add a dummy endpoint for testing your functionality.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1644mr9fwspcnixa3u4p.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/20v2q8dbb0xdbaqa4hmz.png)

Now simply run one of the below commands based on your project type.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2b4ld3t02mqo6dqd7qtc.png)

or if you’re using maven:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/cqvt82v5uragyoq3z3dw.png)

It will take a little time to run the first time around, but subsequent calls will be quicker. You should expect to see something like this in the build logs:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6qr9629aogb9vzeyahqf.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/r6gic7x8hywbfqwiitip.png)

Your docker image listing should be listing these entries by now. (Please ignore the 40 years ago created date it’s a weird bug.)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3jr7y88qd9il90tzwasg.png)

Run spring-boot-docker image in detached mode, hit your endpoint, and voila! You can see your application greeting the Universe!

![Hello Universe!](https://dev-to-uploads.s3.amazonaws.com/i/pzakpq014c2xxyjdflj0.png)

Ah, what sorcery is this! Utilizing it, you could quickly deploy your local application to the production environment and enjoy the same level of consistency. You could also use Spring Boot Devtools with this, but you gotta say your goodbyes to Immutable Containers.

Although this is what spring offers out of the box, you can also customize the image creation process also reduce the size of the image being created by it.

This post answers how we can leverage Spring Boot Docker Image creation functionality to create a docker image. In the next post, we’ll take a deeper dive into the working of this functionality.
Digital Ocean deployment automation is simple
Tags: devops, python, digitalocean, ansible
Published: 2020-06-01 12:35:05

I built a [git hosting service called Hosted Gitea](https://hostedgitea.com/) and discovered that automated deployment of VPS boxes on Digital Ocean is super simple. Here is how I got it working.

When a customer signs up a chain of events is set in motion:

 * Their details are stored.
 * A background task starts.
 * Use the [Digital Ocean API](https://developers.digitalocean.com/documentation/v2/) to create a fresh Ubuntu VPS box.
 * Use the [Gandi DNS API](https://doc.livedns.gandi.net/) to point a domain name at the box.
 * Run some [Ansible](https://www.ansible.com) scripts to provision Gitea on the new box.

The Digital Ocean API part consists of just a handful of function calls using [python-digitalocean](https://github.com/koalalorenzo/python-digitalocean):

```python
from digitalocean import Droplet, Manager

# get our DO API token from an environment variable
token = environ.get("DIGITALOCEAN_ACCESS_TOKEN") or exit("DIGITALOCEAN_ACCESS_TOKEN is not set.")

manager = Manager(token=token)
ssh_keys = manager.get_all_sshkeys()
droplet = Droplet(token=token, ssh_keys=ssh_keys ... etc.)
droplet.create()

# then you can wait for the droplet to be created:
actions = droplet.get_actions()
for action in actions:
    if action.type == "create":
        while action.status != "completed":
            sleep(2)
            print("Waiting for box to deploy.")
```

It's as simple as that to launch a new VPS box and wait for it to come online. After this step there are a few other things that happen like emails being sent, Ansible scripts to set up Gitea etc. but the part of bringing a new box online is done.

> Photo by [Todd Cravens](https://unsplash.com/@toddcravens) on Unsplash.
Day 26 of #100DaysOfCode: [OAuth2.0] integrate ReactJS and Django with Social login (Facebook)
Tags: 100daysofcode, oauth, react, django
Published: 2020-06-01 14:46:28

## Introduction
We have mentioned that how to make endpoints with [JWT authorization](https://medium.com/a-layman/build-single-page-application-with-react-and-django-part-3-use-jwt-with-drf-and-tests-endpoints-6a6275fb09d9). Also, we have introduce [how to connect ReactJS with Django](https://medium.com/a-layman/build-single-page-application-with-react-and-django-part-1-connect-react-app-with-django-app-dbf6b5ec52f4).

What if we want to enable social login for social media like Facebook?
This article will introduce the process to exchange the access token from Facebook to JWT for authorization.

## Details
Please refer to my article. 
There are four roles, Django server, ReactJS client, Facebook authorize server, and the user.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/15jclpgu3epdfpc8nado.png)

https://medium.com/a-layman/exchange-facebooks-access-token-to-jwt-from-django-drf-server-for-social-login-1bf7d1801cb7

## Articles
There are some of my articles. Feel free to check if you like! 
* My blog-posts for software developing: https://medium.com/a-layman
* My web resume: https://jenhsuan.github.io/ALayman/cover.html
* Facebook page: https://www.facebook.com/imalayman