teleren/devto huggingface dataset:
How I upgraded from angular 4 to 7
Tags: angular, upgrade
Published: 2020-03-14 06:26:52

We have an angular app with 4.0 version. And we needed to upgrade it to 7.
There is an angular upgrade guide https://update.angular.io/. However, it is worth noting the challenges faced and their solutions.In the process of upgrade there were a few takeaways which I want to share.

Here are the steps to upgrade.
1. check angular cli version using 
`ng --version`
The angular cli in my project was 1.3.0, and was throwing this warning 

Your global Angular CLI version (7.3.9) is greater than your local
version (1.3.0). The local Angular CLI version is used.

What does this mean?
There is a global version of angular cli and a local version of it installed. Since the global version of cli is higher than the local one, this warning is thrown.

Why do we need global version then?
Global version is needed to be able to create a new application using 
`ng new <app-name>`

2.Since I aimed to upgrade to angular 7, next step is to uninstall the local version of cli to the version needed for angular 7.Uninstall using following command
`npm uninstall @angular/cli@1.3.0`

3. upgrade to the desired version by checking whihc version of angular you need to install, else it will install the latest angular packages.
`npm install @angular/cli@7.3.9`

Note: cli 7.3.9 installs angular 7.2.0
There's a nice article that explains the angular cli version needed for the specific angular version to be installed. https://medium.com/@ferie/how-to-install-a-specific-angular-version-16d4766341f3

4.upgrade angular packages
`ng update @angular/core@7.2.0 `
when you do so, gives an error:-

`Package "codelyzer" has an incompatible peer dependency to "@angular/compiler" (requires "^2.3.1 || >=4.0.0-beta <5.0.0" (extended), would install "7.2.0")`

 Solution i tried: manually updated the codelyzer package from "codelyzer": "~3.1.1", to "codelyzer": "~4.5.0" 
 then tried the command again and it worked.

5. after correcting the above codelyzer issue, try this again
`ng update @angular/core@7.2.0`
it again says the same issue. then delete your node_modules folder and try again. This time it successfully upgrades the angular core package
in package.json

6.also upgrade angular material using
`ng update @angular/materials`

7.Now run the command 
`ng build --prod`
gives this error:
The build command requires to be run in an Angular project, but a project definition could not be found.
Solution: run the following command
 `ng update @angular/cli@7.3.9 --migrate-only --from=1.3.0`
 https://www.ozkary.com/2019/01/angular-serve-command-requires-angular-project.html
 This was the step missing and not mentioned in angular official upgrade guide.

Hope this helps and makes your upgrade process smoother
CSS filters apply to emojis
Tags: showdev, css, webdev
Published: 2020-03-14 05:59:44

---
title: CSS filters apply to emojis
published: true
description: I was sad there was no red panda emoji, then my wise friend told me, “to some zoologist all animals are pandas, just vary by color...”
tags: #showdev #css #webdev
---

A pointless but fun (for me) CodePen using CSS custom properties to adjust the `hue-rotate` CSS filter on the raccoon emoji. Because we don't have one for red pandas T_T

{% codepen https://codepen.io/huijing/pen/zYGWKdr %}

Also, the Whatsapp raccoon emoji feels cuter to me. But that's just my personal opinion. Windows version is also pretty cute.
How to Maximize Productivity Working From Home?
Tags: discuss, productivity, beginners, help
Published: 2020-03-14 04:07:02

Hey, everyone!

With all of the recent events, my company has decided to offer optional work from home days next week. I think this is absolutely the the right thing to help flatten the curve and I'm fortunate to be able to work in a field that allows me to do this.

I have some experience working from home once in awhile but never consecutive days or even a whole week.

My question is what tips or advice do you have to maintain productivity when working from home? I would love to hear feedback from any developers that are used to working remotely!

Thanks in advance!

-Steve
Starting building Kolam: A Keyboard driven subjunctive history editor
Tags: typography, webgl, webassembly, interfacedesign
Published: 2020-03-14 03:38:47

My eventual goal is to come up with a typeface editor in WebGL. But initially, I want to explore some UI ideas. As a first pass, I’m thinking of building an application that makes maximal use of keyboard for drawing activities. This is because I am charmed by the quick editing capabilities and replayability of macros provided by Vim.

![Vim Macros](https://dev-to-uploads.s3.amazonaws.com/i/9fq1gmitpcxso57431yr.gif)
Source: https://vimgifs.com/q/

There is a rudimentary example of this in [constraint.systems](https://web.archive.org/web/20200313112427/http://constraint.systems/).

![Etch](https://dev-to-uploads.s3.amazonaws.com/i/bcbn0i0bqc2qv96pjow3.gif)

There is also a cool app called [Goya](https://jackschaedler.github.io/goya/) that keeps track of the history and allows one to retract the work done with a previewable event history traversal.

![Goya Pixelart Tool](https://dev-to-uploads.s3.amazonaws.com/i/14dabfenmfxc3vb7pg0j.jpeg)

I want to see how an app that combines both of these capabilities, that is, keyboard driven editing with try replayable version histories and subjunctive results spawned out of them, would look like. **Keyboard driven editing** would enable a good amount of possibilities for quick prototyping and gradual refinement. **Replayable version history** will provide leverage to draw patterns or glyphs that needs to be drawn over and over again. Think Vim macros or the repeat command. **Subjunctive interfaces** will provide an opportunity to see what potentials multiple branches of histories hold. This is a good reading list by Jeffrey Guenther on [subjunctive interfaces](https://github.com/jeffreyguenther/alternatives-reading-list). He has also written a declarative dataflow language to test out his ideas called [Shiro](https://github.com/jeffreyguenther/shiro).

I am tentatively calling this app — Kolam. The name is derived from Kolam diagrams drawn in South India. I am creating a set of Malayalam glyphs on the side as part of [100 days of type](https://instagram.com/100malayalam) and I was inspired by the Kolam artwork done by [Nilay Chourikar](https://www.instagram.com/self_composed0809/) for 36DaysofType in sparking this name.

![Kolam](https://dev-to-uploads.s3.amazonaws.com/i/n5e5ncczxbyk48luccns.jpg)


These are my inspirations and I’m having a go at this by keeping all these in mind. The work I have carved out for me next is to build a grid - both a line grid as well as a dot grid. Drawing this will be my current task. Let’s see if I’ll be able to finish this by day end. I estimate around 2 ± 1 hour for task completion. I will log the details here once I'm through.

The Github repo is [here](https://github.com/prathyvsh/kolam) in case you guys want to check out on my progress.
Boilerplate for a Custom React Template
Tags: react, npm, webdev, productivity
Published: 2020-03-14 03:29:12

This post was inspired by the following post [here](https://dev.to/jimmymcbride/lambda-brownbag-how-to-make-and-publish-your-own-cra-template-10jo). After following the instructions I successfully created my own Custom React Template. But then I got to thinking well that's a bit tedious if I wanted to make another template so I figured why not make a quick boilerplate to speed things up a bit. Like the author of the previously mentioned article I am a [Lambda School Student](https://lambdaschool.com/).

You can get the boilerplate [here](https://github.com/ikeman32/cra-template-crabp), I did my best to keep it as simple as possible. Eventually I want to package it up into an npm package, but there is still much to learn.
Day 94 : When I Woke Up
Tags: hiphop, code, coding, lifelongdev
Published: 2020-03-14 03:28:19

_liner notes_:
- Professional : Whew...This week got me. Was pretty active. Add a change to the documentation. Cleaned up a demo I made. Created a proof of concept for our internal hackaton. Today, had a bunch of meetings. After everything, I took a nap! haha.

- Personal : When I woke up, I went to the gas station to fill up the van. Came back and started to work on the radio show. Totally forgot to do this post. haha.

![Overhead view of a beach at Big Sur, California with cliffs forming an opened circle](https://dev-to-uploads.s3.amazonaws.com/i/iw7qr9p28u1bw48v9j76.png)

I never know when to stop going through tracks. I start and the next thing I know, it's almost midnight! haha I really need to refactor my timer code. Going to wrap up soon.

Have a great night and weekend!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube xUNZW4KSj0o %}
JavaScript: the First 20 Years by Allen Wirfs-Brock and Brendan Eich
Tags: reflections
Published: 2020-03-14 03:00:44

---
title: "JavaScript: the First 20 Years by Allen Wirfs-Brock and Brendan Eich"
published: true
description: A link to the 190 page history of JS by its original creator and the editor of ES6.
tags: Reflections
slug: js-20-years
displayed_publish_date: "2020-03-12"
canonical_url: https://www.swyx.io/writing/js-20-years
---

Allen Wirfs-Brock (editor of ES6) and Brendan Eich (you know what he did) have published [the definitive 20 year history of JavaScript](https://zenodo.org/record/3707008). It is a 190 page treatment for [The History of Programming Languages Conference](https://hopl4.sigplan.org/), which only occur once every 13-15 years (1978, 1993, 2007, 2020). [It took them 3 years to write the final manuscript.](http://www.wirfs-brock.com/allen/posts/866)

Read it: https://zenodo.org/record/3707008

**If you have any interest in programming languages at all, you should read it.** Modern JavaScript, warts and all, is one of the biggest achievements of humanity, especially in the Information Age and the democratization of computing.

History won't stop here - HOPL-V in ~2035 might be more about visual programming languages and "[no code](https://webflow.com/blog/no-code-is-a-lie)" than it is traditional text editing. Every time programming gets easier, people get more infuriated, and yet the world keeps turning toward enabling more programmers. [The Future of Programming](https://www.youtube.com/watch?v=8pTEmbeENF4) is clear, even if we're never quite there yet.

That's it, that's pretty much all I want to blog today. I did write 1700 words on another blogpost, but that's currently in review.
How To Generate Folder Tree Structure In Windows 10


Published: 2020-03-14 02:51:40

​	Hello, if you want to generate your project structure in windows 10 just follow my step below

1. Go to the folder that you want to generate
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/f9hjgc4zbg6qigihrl91.png)
2. go to search bar and type cmd

   > than you will see the terminal

3. type this command in the terminal

   ```
   tree /f /a tree /f /a > tree.txt
   
   ```

   > You also can generate the file that you need Example: docs

4. then you can see your file

   > thank you and also forgive me for my English.
Python: How to Print Without Newline
Tags: faq, python
Published: 2020-09-08 20:29:38

---
title: Python: How to Print Without Newline
published: true
date: 2020-03-14 02:36:56 UTC
tags: FAQ,Python
canonical_url: https://www.parthpatel.net/python-how-to-print-without-newline/
---

Python is one of the most easiest language yet most powerful language to learn. Normally, one would start with **print**"hello world". No, you cannot start learning without that! Never!!

In python, you can print any value using print function. Yes! It's that simple. But there is one interesting problem. In most of the languages, if you want to print something on newline, you have to specifically specify that. Otherwise, it will always print in current line and not move to next/new line.

But, python by default always prints to newline. Now, that might become problem if you actually want to print on same line, isn't it? No worries. Let's see the solutions together.

Since, python has two popular but distinct versions ~ Python 2.x and Python 3.x, let's look into the solutions separately.

### Print without newline in Python 3

#### 1) Using print function

In python 3, you can print multiple times without newline by simply overriding end parameter in the print function. Basically, by default Python appends newline to print function but you can override it with empty string and it won't print to newline.

Let's see one example:

**Code:**

```
print("Hello World", end="")
print(" Again!")
```

**Output:**

```
Hello World Again!)
```

Let's try one more different example. We will use loop to print multiple integers separated by "." (and not newline ). Here, we are using end parameter to append "." at the end of print statement.

```
# python print on same line separated by "."
for i in range(1,10):
    print(i, end='.')
```

#### 2) Using "sys" Library

Okay. Honestly, I cannot think of any situation where you would prefer this over print function, but let's explore this solution at least for fun. You can import and use sys library in python 3 to print strings or variables in same line avoiding newline.

```
#Import the inbuilt sys library
import sys
#First Line of output
sys.stdout.write("Hello World")
#Second Line of output
sys.stdout.write(" Again!")
```

### Print without newline in Python 2

#### 1) Using print function

In python2, you can use print statement (yes, print is not a function rather a statement in python 2.x) with comma to prevent newline.

Let's see example:

```
print "Hello World",
print " Again!"
```

This is how you can print without newline in python 3 using  **end** argument and python 2 using **comma**. I hope you find it useful. Let me know in comments how you are using this trick.

**Also Read:**

- [Python: How to check if string contains substring](https://www.parthpatel.net/python-how-to-check-if-string-contains-substring/)
- [Python : How to check if list contains value](https://www.parthpatel.net/python-if-list-contains-value/)

The post [Python: How to Print Without Newline](https://www.parthpatel.net/python-how-to-print-without-newline/) appeared first on [Parth Patel - a Web Developer](https://www.parthpatel.net).
What are your favourite online remote working communities?
Tags: discuss
Published: 2020-03-14 01:37:14

---
title: What are your favourite online remote working communities?
published: true
description: A brainstorm of the online communities you can be a part of to make remote working more enjoyable.
tags: discuss
---

Given how quickly COVID-19 seems to be spreading globally, most of us tech workers will have become remote workers. If you're like me, this might be your first time when you'll be working remote for an extensive period of time.

The main challenge I can think of is that feeling of isolation when working remote, especially in the current climate where we're advised to stay at home more than usual.

What are some of your favourite online communities that you are a part of that may ease this transition?
How To Write Readable Code
Tags: programming
Published: 2020-11-02 08:45:01

---
title: How To Write Readable Code
published: true
date: 2020-03-14 01:30:00 UTC
tags: Programming
canonical_url: https://coderscat.com/how-to-write-readable-code
---

![write-readable-code.jpeg](https://coderscat.com/wp-content/uploads/write-readable-code.jpeg)

We spend more time on reading than on writing code. Readable code is essential. Here are my tips for writing readable code.

## Naming

Naming is the first thing we can improve on writing readable code.

If we put proper names to variables, functions, classes, code will easy to be understood. Remember to choose the more self-descriptive names for variables or functions.

Naming is not easy and needs some practice.

## Keep simple

> Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.
> 
> – Antoine de Saint-Exupery

Keep simple on every file or function. A class or function should do one thing or one similar thing only.

A function doesn’t contain too many lines of code.

## Organize code

Reading code is similar to reading a book. If a book is organized well, we know the subject of each chapter, we can skip some sections if necessary.

Organize code well means each file contains and only contains related lines of code; each module or directory contains related source code files.

## Write comments, but not too many …

Comments are helpful for understanding code, but too many comments will distract us.

It’s better to make comments not only restate the code.

So, in comments, we need to explain something outside of code.

## Imagine others will read your code

Imagine you are not writing code, but explain your purpose to others.

Try to read the code after you finished it.

The post [How To Write Readable Code](https://coderscat.com/how-to-write-readable-code) appeared first on [CodersCat](https://coderscat.com).
Python Operator Overloads
Tags: python
Published: 2023-01-06 01:37:26

---
title: Python Operator Overloads
published: true
date: 2020-03-14 00:49:28 UTC
tags: Python
canonical_url: https://brandonrozek.com/blog/pythonoverloads/
---

I wrote a [blog post about operator overloads](/blog/cppoverloads/) in C++. Luckily for Python it is heavily document in what is called the [Python Data Model](https://docs.python.org/3/reference/datamodel.html). Though for the sake of having content, I’ll share some of the ones that I heavily use in my classes.

| Operator | Method |
| --- | --- |
| `+` | ` __add__ (self, other)` |
| `==` | ` __eq__ (self, other)` |
| `len()` | ` __len__ (self)` |
| `str()` | ` __str__ (self)` |
| `hash()` | ` __hash__ (self)` |

Example Usage:

```
class Test:
	def __init__ (self, x):
        self.x = x
    def __add__ (self, other):
        return Test(self.x, other.x)
    def __eq__ (self, other):
        return self.x == other.x
    def __len__ (self):
        return len(self.x)
    def __str__ (self):
        return self.x
    def __hash__ (self):
        return hash(self.x)

```
[Request For Post] Your solution for auto publishing NPM packages?
Tags: requestforpost, continousdeployment
Published: 2020-03-14 00:14:10

## Backstory

I recently created an NPM module that while it's not hugely popular, has more downloads than I thought it would. I have a CI/CD setup on my gitlab to lint, test, generate a changelog, and publish. 

Three of those jobs work. Take a guess at which 3? That's right, linting, testing, and changelog-ing all work. 

All of the places I've found mention of CI/CD with Gitlab and NPM boils down to the following:

1. Either run `npm config set registry //registry.npmjs.org/:_authToken ${NPM_TOKEN}` and then running `npm publish` OR
2. doing basically the same thing, but instead adding the `//registry.npmjs.org/:_authToken=${NPM_TOKEN}` to a local `.npmrc` file.

I've tried both of these on my WSL Ubuntu install. Neither has worked. 

I found [this Stack Overflow post](https://stackoverflow.com/questions/54665511/how-do-i-publish-a-private-npm-package-with-gitlab-ci), and in digging through some links found someone who recommended setting `strict-ssl` to `false`. I can't say I'm comfortable with that.

## How do _YOU_ do it?

Most of the time my CI/CD stuff pertains to servers, not necessarily NPM modules, so I'm a little out of flavor here. I figure there has to be some way to do this _without_ turning off SSL? I'm holding off on updating my pipeline in the hopes that maybe there's something I missed in all my searching.
Covid 19 Updates from Vim, with Python!
Tags: vim, neovim, python
Published: 2020-03-13 23:54:44

---
title: Covid 19 Updates from Vim, with Python!
published: true
description: Use Vim airline and Python to display information about Covid 19
tags: Vim, Neovim, python
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/e7t22nl25n217zaaiv6v.png
---

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/zwm5lnh9bm8tld3ykbcj.png)
This was just a fun (and morbid) way to experiment with hacking on vim with Python.

If you have Vim compiled with Python and the [Airline](https://github.com/vim-airline/vim-airline) plugin installed, you should be able to just plop this into your `vimrc`:

:bulb: There is an updated version that works asynchronously below.
```vim
function! CovidUpdate()
python3 << EOF
from urllib import request
import json
import vim
def getCases():
  country = "US"
  res = request.urlopen("https://covid2019-api.herokuapp.com/country/%s" % country)
  string = res.read().decode()
  info = json.loads(string)[country]
  vim.vars["response"] = "Country: %s | Confimred:  %i | Deaths: %i | Recovered: %i " %  (country, info["confirmed"],  info["deaths"], info["recovered"])
getCases()
EOF

endfunction

call CovidUpdate()


" call airline#parts#define_function('foo', "CovidUpdate")
let g:airline_section_y = airline#section#create_right(['ffenc', response])

```

Thanks to [this](https://github.com/nat236919/Covid2019API) project for providing the API. 

:rotating_light: UPDATE :rotating_light: 

Threading a bit of python via the vim module is actually really easy!

Updated version:

```vim
function! CovidUpdate()
python3 << EOF
from urllib import request
import threading
import json
import vim
def getCases():
  country = "US"
  res = request.urlopen("https://covid2019-api.herokuapp.com/country/%s" % country)
  string = res.read().decode()
  info = json.loads(string)[country]
  vim.vars["airline_section_y"] = "Country: %s | Confimred:  %i | Deaths: %i | Recovered: %i " %  (country, info["confirmed"],  info["deaths"], info["recovered"])
vim.async_call(getCases)
EOF

endfunction

call CovidUpdate()
```

Note, the last line in the previous section: 
`let g:airline_section_y = airline#section#create_right(['ffenc', response])` 
is no longer necessary since that variable is set in the Python code. :brain:
Create API Rest with Laravel 7.X Passport Authentication And Implement Refresh Token (Part 3)
Tags: php, laravel, authentication, api
Published: 2020-03-13 23:30:25

In this part we want to implement the refresh token
## Step 1. Change api.php
we need to add refresh token route like this
```php
<?php

use Illuminate\Support\Facades\Route;

Route::post('login', 'UserController@login');
Route::post('register', 'UserController@register');
Route::post('refreshtoken', 'UserController@refreshToken');

Route::get('/unauthorized', 'UserController@unauthorized');
Route::group(['middleware' => ['CheckClientCredentials','auth:api']], function() {
    Route::post('logout', 'UserController@logout');
    Route::post('details', 'UserController@details');
});
```
## Step 2. Add refreshToken Function in UserController.php
We send request to "oauth/token" with Refreshtoken header and give access token and a new refresh token

```php
...
    public function refreshToken(Request $request) { 
        $refresh_token = $request->header('Refreshtoken');
        $oClient = OClient::where('password_client', 1)->first();
        $http = new Client;

        try {
            $response = $http->request('POST', 'http://mylemp-nginx/oauth/token', [
                'form_params' => [
                    'grant_type' => 'refresh_token',
                    'refresh_token' => $refresh_token,
                    'client_id' => $oClient->id,
                    'client_secret' => $oClient->secret,
                    'scope' => '*',
                ],
            ]);
            return json_decode((string) $response->getBody(), true);
        } catch (Exception $e) {
            return response()->json("unauthorized", 401); 
        }
    }
...
```
Like this
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/8f1y5bddj2d9aqngx4ol.png)

#### now you have all things that you need for api auth :)
#### if you have question you can ask it here :)
#### share it with your friends if you like it