teleren/devto huggingface dataset:
Angular Version 9 and NG Upate 9.0.7 -> 9.1.3
Published: 2020-04-25 19:20:26

Every time; or so it seems, whenever I get into updating Angular, e.g. *ng update* I always seem to encounter warnings or errors, of which I have zero knowledge.

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

This is what I saw this morning when going from 9.07=>9.13

What's interesting is that only the @angular/devkit core and schematics modules update.  

```
Angular CLI: 9.1.3
Node: 12.14.1
OS: win32 x64

Angular: 9.1.3
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.901.3
@angular-devkit/build-angular     0.901.3
@angular-devkit/build-optimizer   0.901.3
@angular-devkit/build-webpack     0.901.3
@angular-devkit/core              9.1.3
@angular-devkit/schematics        9.1.3
@ngtools/webpack                  9.1.3
@schematics/angular               9.1.3
@schematics/update                0.901.3
rxjs                              6.5.4
typescript                        3.7.5
webpack                           4.42.0
```
We have no clue as to whether this configuration will work, nor do we know with looking into the other 901.3 versions if they should be updated. We simply have to trust the update command did it right.

This was my post package.json

```
{
  "name": "angular9",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~9.1.3",
    "@angular/common": "~9.1.3",
    "@angular/compiler": "~9.1.3",
    "@angular/core": "~9.1.3",
    "@angular/forms": "~9.1.3",
    "@angular/platform-browser": "~9.1.3",
    "@angular/platform-browser-dynamic": "~9.1.3",
    "@angular/router": "~9.1.3",
    "rxjs": "~6.5.4",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.901.3",
    "@angular/cli": "~9.1.3",
    "@angular/compiler-cli": "~9.1.3",
    "@angular/language-service": "~9.1.3",
    "@types/node": "^12.11.1",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^5.1.2",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~2.1.0",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.2",
    "protractor": "~5.4.3",
    "ts-node": "~8.3.0",
    "tslint": "~5.18.0",
    "typescript": "~3.7.5"
  }
}

```
In the end this update worked. I just ignored the messages.
DAY TWO/STILL IN CHAPTER ONE
Tags: vue, vuetify, womenintech, Womenwhovuetify
Published: 2020-04-25 19:18:10

I am anxious to get in to the nitty gritty of development but I'm still in the early stages and need to get these little details nailed down before I can jump in the deep end of learning anything about coding. So I'm still preparing my computer for the inevitable. 

Next, I installed VS Code Extensions. I kind of strayed away from the book for this one. John had written a blog post awhile back that was extremely helpful and had a list of all the extensions I needed in one place. <[https://medium.com/vuetify/productivity-in-vue-part-1-de56e9c1d97d](https://medium.com/vuetify/productivity-in-vue-part-1-de56e9c1d97d)>

I just went down the list and installed each one. 

In other news, I came across this really awesome VS Code cheat sheet for hotkeys and I'm absolutely obsessed with it! <[https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf](https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf)> I told John to add it to the book somewhere if he hasn't already. 

He can move around VSCode so fast it's insane. #DevGoals! Back in the day, when I was a bank teller at the beginning of my banking career, I was the fastest teller because I memorized all the hotkeys and would almost never touch my mouse. That's seriously my goal here! 

Now, lets talk about snippets! I've heard the core team talk about snippets and I smiled and nodded, but today I learned and realized how awesome they are! 😆

Snippets: Blocks of code that are repeatedly used. A snippet is created to streamline blocks of code that are commonly used so that you don't have to repeat yourself and save time. There are apparently devs who have created plug-ins and extensions of snippets but I am going to be using snippets related specifically to Vuetify. 

I started typing a code example into VS Code and John noticed that it defaulted to "Plain Text" at the bottom. By clicking the language at the bottom, I was able to change it to Vue, so now VS Code knows I'm writing a Vue file. Minor detail. 🙄 Other wise it thought it was just a text file. 🤷‍♀️

![https://i.imgur.com/5qyYtbg.png](https://i.imgur.com/5qyYtbg.png)

I typed out an example of a Vue Component's basic structure ^^^ Isn't it a beautiful block of code?? :heart eyes: 

From what the book says, we will create countless component files that will look like some form of the code above. So, snippets are used to save time and then expand where the code is defined. 

I think I'm really going to like using snippets! 

Alrighty! Looks like I'm just about done with chapter one! Woohoo! I installed and configured VS Code, learned some awesome keyboard shortcuts, installed extensions, and learned about snippets! In chapter 2, I get to create a new application 😱 

Sounds like Chapter 2 is where it starts to get fun! Or super challenging... I guess we'll see.
DatePicker para formularios en Flutter
Tags: flutter, widget, datepicker
Published: 2020-04-25 19:12:23

Sin duda una de las sorpresas que tuve el otro día fue encontrarme que no hay un componente en Flutter para mostrar una fecha y ser integrado en un formulario.
Vamos a ver lo simple que es hacer esto en Flutter para un caso muy concreto cuyo resultado es el siguiente.

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

<figcaption>Picker habilitado</figcaption>

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

<figcaption>Picker deshabilitado</figcaption>

Para ello necesitaremos solo 3 sencillos pasos.

## Construir Picker habilitado
Tendremos una Row con el Texto a mostrar, y el icono que muestre que se pueda hacer click sobre ella. Además lo metemos dentro de un InputDecorator y un InkWell para que tenga aspecto de TextFormField.
{% gist https://gist.github.com/omartinma/47a8631b18982f4115d7a586dd40f13e %}


## Construir Picker deshabilitado
Aquí yo utilizo un TextField que tenga estilo disabled.
{% gist https://gist.github.com/omartinma/d5f25e16744380467261b0f7c47dea8f %}


## Evento para seleccionar la fecha
Nuestro _getDatePickerEnabled al hacer onTap llama a _selectDate que simplemente hará uso de la función que viene en Material showDatePicker que muestra un Dialog con un calendario.

{% gist https://gist.github.com/omartinma/7c27269f364baa6e3c2f8895da466082 %}


Como veis es muy sencillo hacer componentes que aún no están incluidos en Flutter sin la necesidad de instalar ninguna dependencia.

Espero que os sirva y para cualquier duda podéis escribirme en mi [Twitter](https://twitter.com/oscar__martin).
Progress: sending sms
Tags: twiliohackathon
Published: 2020-04-25 19:03:11

Teammate not responding on chat? Send them a quick sms.

Command format: `/sms NUMBER MESSAGE_BODY`

![sms-draft](https://dev-to-uploads.s3.amazonaws.com/i/89yk4oucxx635pjkhnvh.png)
![sms-sent](https://dev-to-uploads.s3.amazonaws.com/i/gvo0ubqdz253oupnyzcl.png)
![sms-received](https://dev-to-uploads.s3.amazonaws.com/i/842atsmcrzeg52p33f7h.jpg)
What's the worst advice for a junior developer?
Tags: advice, developer, junior, senior
Published: 2020-04-25 18:50:31

After the last article, I think we got many valuable suggestions that each and every one of us could apply when starting out as developers (and not only). So, this time I am curious: what was the worst advice you ever received as junior developers or what do you believe is bad advice in general?

*photo source: fauxels/ Unsplash*
**Maybe some of the previous advice resonates with you so you can read all about it here:**
{%link https://dev.to/cilvako/what-advice-would-you-give-to-junior-developers-4p8j %}
Run InspectCode in your GitHub Actions
Tags: githubactions, resharper, codequality, devops
Published: 2020-04-25 18:49:10

---
title: Run InspectCode in your GitHub Actions
published: true
canonical_url: https://izsak.net/weblog/1166/run-inspectcode-in-your-github-actions/
description: Setup a ReSharper Command Line Tools environment for use in GitHub actions.
cover_image: https://jozefizsocdn.blob.core.windows.net/izsaknet-wordpress/weblog/media/2020/04/github-actions-setup-image-1.png
tags: githubactions, resharper, codequality, devops
---

When you build .NET projects and you are using GitHub Actions to build your code, you cna now run code inspections with **InspectCode** without hassle.

**InspectCode** is a tool from the free **ReSharper Command Line Tools** (CTL). It can do solution-wide analysis of .NET code.

To use it in GitHub Actions, just add this code to your workflow file:

```yaml
steps:
- uses: goit/setup-resharper@v1
  with:
    version: '2020.1'
- run: InspectCode SolutionFile.sln
```

The **goit/setup-resharper** action will download the ReSharper CTL and cache it locally (using the **actions/tool-cache**). ReSharper tools will be added to the %PATH% variable so you can use them anywhere in your build scripts.

As ReSharper CTL tools are supported on Windows, Linux and macOS (versions 2019.3 and newer) you can use the also for non-Windows builds. The setup action supports any ReSharper CTL newer then 2018.2.

Go to [GitHub Marketplace](https://github.com/marketplace/actions/setup-resharper-command-line-tools) to use this action, or checkout the source code at https://github.com/goit/setup-resharper
How to clarify technical issues for all engineers
Tags: productivity, beginners, tips, troubleshooting
Published: 2020-04-25 18:16:43

#Introduction
Hi, I am a technical support engineer. My job is to help out customers having issues on windows desktop such as Office applications, networking and GPO management.

I would like to share with you how to clarify technical issues.

#Clarifying the issue
For the sake of my job, I receive many technical inquiries and most of users' issue descriptions are such as "Office application crashes", "Outlook has an account issue" and "IE is not working".

These descriptions are not so good because 5W1H (Who, What, Where, When, Why, How) are not included. I believe clarifying 5W1H helps all types of engineers communicate better when an issue occurs.

##Who: 
How many users are affected by the issue.
*ex, 5 users of 100 are affected.*

##What: 
What version of the software are showing the issue.
*ex, Windows 10 Version 1909 (18363.778), Office 365 ProPlus Version 2003 (12624.20466)*
Note that typing "winver" in search box shows your windows OS version.

##Where: 
Where are the users affected by the issue. 
*ex, Inside the company network as other not-affected PCs.*

##When: 
When users see the issue. 
*ex, once in a day.*

##Why: 
Why users see the issue. 
ex, this configurati*on modified recently.*

##How: 
How to reproduce the issue. 
*ex, provide a screenshot.*
[PSR](https://dev.to/nanmei365/psr-steps-recorder-a-windows-preinstalled-screenshot-capturing-tool-afi) may help to share the reproducing steps.


Hope this article helps your technical communication better.
My hands on experience of Shell Scripting in DevOps.
Published: 2020-04-25 18:06:17

Shell Scripting is the fundamental to automate your task related to files management through batch files. It acts as an insulating layer between kernel and user and therefore considered as powerful programming language.

As a DevOps professional, and my personal point of view, I prefer shell script to organize my daily work, like automating mail when code is delivered in production environment, automatically assigned work to team through organization application written in Java and give daily update status about task and build process. This is just a core part of designing the process and patterns more reliable, resilient and distributable.Apart from it, shell scripting also comes handy in effective make use of various devOps tools.
I preferably automate throughout my build process using shell script by writing batch files and then create pipeline in Groovy in Jenkins, which picks jobs, run batch files and execute sequentially. Currently, I am learning Docker and Docker Swarm and looking to integrate in my build process in Jenkins. This enables every team members in my projet to use the docker image from the docker hub in case if updated application is failed due to some kind of code error. So, this makes the application always available even in down time of updated one.

So, You can see that how I enable my work with such powerful scripting language and makes not only everything automate but also process oriented, result oriented, team collaboration and reliable in down time. I hope this sneak view of my work highlights you with some good stuffs of my work.
Hacking together a quick multiplayer browser game to play during lockdown
Tags: webdev, javascript, python, azure
Published: 2020-04-25 17:50:45

# Hacking together a quick multiplayer browser game to play during lockdown
This is a little web game I knocked together this week to play with friends during lockdown. We were looking for an easy to play simple version of Yatzy and all of the ones we were finding required linking your social media, going through long tutorials and had micro-transactions.

So I spent my evenings this week knocking together a simple multiplayer web app version to play.

[And here's a link to what I created - Yatzy](https://yatzyonline.azurewebsites.net/)

![Demo Video of Game](https://www.dishy.dev/articles/images/YatzyWide.gif)

## The philosophy of it
I was inspired by the CodeNames game you can play at [horsepaste.com](https://www.horsepaste.com/) which is a simple easy to play implementation of the game. You just come up with a unique game code, and anyone who has that code can join.

![Yatzy Login Screen](https://www.dishy.dev/articles/images/yatzy-login-screen.PNG)

## The architecture
The rough architecture of the game looked like this. 

![Application Architecture Overview](https://www.dishy.dev/articles/images/app-architecture-overview.PNG)

- [Bulma](https://bulma.io) is a really clean, simple to use CSS only front-end framework. It resizes really nicely onto mobile devices.
- A bit of [JQuery](https://jquery.com/) was used to provide dynamic behaviour for the front-end. I know JQuery very out of style at the moment but I like how quick you can get up and running it with, and I didn't feel my app was complex enough to need React/Angular/Vue.
- The logic of the game was implemented with a basic Python [Flask](https://flask.palletsprojects.com/) app. 
- And I used [Azure Table Storage](https://azure.microsoft.com/en-gb/services/storage/tables/) to handle managing game state, scores, player lists etc. It's a simple documentDB store and its very cheap compared to SQL DBs on Azure.

## Conclusions
I've been pretty pleased with the results. Nothing ground breaking, but a very playable experience.

I'll be doing more articles going forward about performance, some of the horrible hacks used to get it going and some reflections on what I learned. But for now if you want to have a play on the game you can [do so here - Yatzy](https://yatzyonline.azurewebsites.net/).
I got this error while installing react app. What's the solution?
Tags: react, installationerror
Published: 2020-04-25 17:21:14

throw e;
  ^

Error: No valid exports main found for 'D:\Programming\react\stores\node_modules\is-promise'
    at resolveExportsTarget (internal/modules/cjs/loader.js:611:9)
    at applyExports (internal/modules/cjs/loader.js:492:14)
    at resolveExports (internal/modules/cjs/loader.js:541:12)
    at Function.Module._findPath (internal/modules/cjs/loader.js:643:22)
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:941:27)
    at Function.Module._load (internal/modules/cjs/loader.js:847:27)
    at Module.require (internal/modules/cjs/loader.js:1016:19)
    at require (internal/modules/cjs/helpers.js:69:18)
    at Object.<anonymous> (D:\Programming\react\stores\node_modules\run-async\index.js:3:17)
    at Module._compile (internal/modules/cjs/loader.js:1121:30) {
  code: 'MODULE_NOT_FOUND'
}

Aborting installation.
  node  has failed.

Deleting generated file... node_modules
Deleting generated file... package.json
Done.
Script to move from Bitbucket Hg to Git
Tags: bitbucket, mercurial
Published: 2020-04-25 17:10:20

[Bitbucket was born as a Mercurial hosting](https://en.wikipedia.org/wiki/Bitbucket#History), and now the service [is being stripped of Hg](https://bitbucket.org/blog/sunsetting-mercurial-support-in-bitbucket) by Atlassian. Atlassian warned that it will just remove the repos. It doesn't seem to care [to archive them](https://code.google.com/archive/). That's why you are here. 

To use the script, you will need to edit `REMOTE` variable to point to your remote Mercurial repository. When your run the script, it will download [`hg-git`](https://foss.heptapod.net/mercurial/hg-git), clone and convert your repo, and drop you into the shell in newly converted `git` repository, which you can immediately `git push` to GitHub, GitLab or another hosting of your choice.

```bash
#!/bin/bash

set -x

REMOTE=ssh://hg@bitbucket.org/rainforce/pyrobot
NAME="$(basename $REMOTE)"

mkdir /tmp/"$NAME"
cd /tmp/"$NAME"
hg clone https://foss.heptapod.net/mercurial/hg-git
hg clone "$REMOTE"

mkdir "$NAME"-git
(cd "$NAME"-git &&
 git init)

(cd "$NAME" &&
 hg bookmarks hg &&
 hg --config extensions.hggit=../hg-git/hggit push ../"$NAME"-git)

(cd "$NAME"-git &&
 git checkout -b master hg &&
 $SHELL)	
```
[Mercurial is still awesome](https://engineering.fb.com/core-data/scaling-mercurial-at-facebook/).
Create image upload function in Google Firebase
Tags: firebase, node
Published: 2020-09-12 16:14:07

---
title: Create image upload function in Google Firebase
published: true
date: 2020-04-25 17:00:00 UTC
tags: firebase,nodejs
canonical_url: https://narongdej.dev/blog/en/2020/04/26/create-image-upload-function-in-google-firebase
---

I want to start a new hobby, where I post the solution to something I can’t find 2-3 google away. If I can’t Google and find my solution in one-shot. I’ll write a short tutorial about it. So here comes the first in this blog.

If you want to create an upload image endpoint inside Google Firebase (Cloud functions), then here is one way you can do it.

```
import * as functions from 'firebase-functions';
import * as Busboy from 'busboy';
import { tmpdir } from 'os';
import { join } from 'path';
import { createWriteStream, unlinkSync } from 'fs';
import * as FileType from 'file-type';
import * as admin from 'firebase-admin';

admin.initializeApp(); // It will automatically authenticate

export const uploadImage = functions.https.onRequest(async (request, response) => {
  const busboy = new Busboy({
    headers: request.headers,
    limits: {
      fileSize: 2 * 1024 * 1024, // max image size to 1 MB
      files: 1 // Limit to one file upload
    }
  });

  let filepath: string = "";
  const _tmpdir = tmpdir();

  busboy.on('file', (fieldname, file, filename, encoding, mimetype) => {
    filepath = join(_tmpdir, filename);
    const writeStream = createWriteStream(filepath);
    file.pipe(writeStream);
  });

  busboy.on('finish', async () => {
    const fileType = await FileType.fromFile(filepath);
    console.log(fileType);
    if(!fileType || !(fileType.mime === "image/jpeg" || fileType.mime === "image/png")) {
      unlinkSync(filepath);
      response.status(500).send({
        'error': 'Invalid file',
        'code': 'invalid_upload_file'
      });
      return;
    }

  await admin.storage().bucket().upload(filepath, {
    // Support for HTTP requests made with `Accept-Encoding: gzip`
    gzip: true,
    metadata: {
      // Enable long-lived HTTP caching headers
      // Use only if the contents of the file will never change
      // (If the contents will change, use cacheControl: 'no-cache')
      cacheControl: 'public, max-age=31536000',
    },
  });

    response.send({
      'status': 'Upload successful'
    });
  busboy.end(request.rawBody);
});
```

_I’m new to Google Firebase and Cloud functions, so this might not be the best way to do it, but it works_

So what we did was

1. Process the form data using busboy
2. Store the image in a temp directory
3. Upload the image using `firebase-admin` storage module

## But what about multiple files upload at once?

You can modify this line

```
    limits: {
      ...
      files: 50 // <--- or remove it to allow infinity
    }
```

and instead of replacing `filepath` you create an array of file paths instead. After that, process the `filepaths` array accordingly in

```
 busboy.on('finish', async () => {
   ...process the array
 });
```