teleren/devto huggingface dataset:
Unofficial VS Code Snippets for AWS Amplify
Tags: aws, vscode
Published: 2020-07-23 16:08:16

---
title: Unofficial VS Code Snippets for AWS Amplify
published: true
description: making my own vs code snippets helpers for working with AWS Amplify
tags: AWS
cover_image: https://user-images.githubusercontent.com/6764957/88311465-7b199b00-cd43-11ea-8623-e56769e24197.png
---

AWS Amplify is a [full stack serverless](https://www.oreilly.com/library/view/full-stack-serverless/9781492059882/) framework that helps frontend/mobile developers rapidly build with scalable AWS components. In the month-plus since [joining AWS](https://www.swyx.io/writing/hello-aws/) I have found myself needing to look up and copy and paste a bunch of code snippets from [the docs](https://docs.amplify.aws/cli). This is usually a sign that [there's something to automate](https://xkcd.com/1205/).

Amplify must accommodate multiple frontend frameworks and platforms so we can't lean on convention to save code - so the next best thing is to write snippets! I use VS Code so I wrote this set of snippets for myself. This is my first time making a snippets extension (so I needed to read [the extension docs](https://code.visualstudio.com/api/working-with-extensions/publishing-extension) first), but it wasn't too hard to figure it out, especially when prototyping snippets with [easy-snippet, recommended by Scott Tolinski](https://twitter.com/stolinski/status/1285605384191913991?s=20).

## The Snippets Extension

You can install it by looking for "Amplify VSCode Snippets" in the VS Code extensions tab, or [click here](https://marketplace.visualstudio.com/items?itemName=sw-yx.amplify-vscode-snippets).


![image](https://user-images.githubusercontent.com/6764957/88311465-7b199b00-cd43-11ea-8623-e56769e24197.png)


You can look for a gif demo in the [GitHub repo](https://github.com/sw-yx/amplify-vscode-snippets) - it's 10mb so I'm not including it here for your bandwidth's sake.

> Note: There is an [older extension](https://marketplace.visualstudio.com/items?itemName=aws-amplify.aws-amplify-vscode) where you can [find more snippets here](https://github.com/aws-amplify/amplify-js/wiki/VS-Code-Snippet-Extension#full-code-block-snippet-documentation).

## Results

With these snippets, I was able to [livecode 2 CRUD apps in 1 hour](https://www.youtube.com/watch?v=0Js5O5a4bQ4) in the recent ThisDotLabs JavaScript marathon! I'm still not too practiced yet, so it's not something I'm that proud of, but I feel a lot more productive already with them! 

You're welcome to [propose snippets or fork it for your own use](https://github.com/sw-yx/amplify-vscode-snippets)!
A Micro FrontEnd Journey
Published: 2020-07-23 16:07:41

###  What we need

A scalable, modular, dev-ops friendly, enterprise grade web app hosting platform (ie. Shell) which will compose multiple SPAs side-by-side and allow them to communicate with each other under a single website brand.  

![Micro FrontEnds composition](https://dev-to-uploads.s3.amazonaws.com/i/pnh753p5xhnoy9hmzeib.png)

### MFE features

* Single Page Apps (SPAs) should follow Micro Services development principles, hence each SPA can be also called Micro FrontEnd following the same terminology.

* MFEs should be lightweight and should focus on one business workflow (e.g one for Accounts, one for Recipients, one for Making Payment, one for Statements ...) 

* They can be developed using different UI Frameworks ( React, Angular, Vue, Svelte ) depending on application requirements or team's skillsets. 

* They should share a common look and feel via modular CSS, they can also share common functionality via WebComponents  

* They live independently, developed, versioned, deployed separately. Should not clash with each other when composed, no global pollution, double loading React or conflicting versions. 

* They are lazy loaded at runtime (they have to implement a common interface), by the hosting shell app. 

* They manage their own App state but also raise / subscribe to events so they can communicate with each other.

### Shell features

* The security context (login / logout / session monitor, permissions), 

* Lazy loading and layout of MFEs at runtime when routed

* Lifecycle management of each MFE as they get mounted or unmounted.

### What have we used to build this

* [Lerna](https://lerna.js.org/) to organise our sample code as a [monorepo](https://en.wikipedia.org/wiki/Monorepo) to manage independent MFEs in a single repository for convenience. In a multi team environment, this may not be desirable. 
* Lerna behind the scenes uses [Yarn workspaces](https://classic.yarnpkg.com/en/docs/workspaces) to link multiple package dependencies and install all MFEs and Shell in one go using `yarn install`

* [SystemJS](https://github.com/systemjs/systemjs) Dynamic ES Module loader polyfill (which will eventually be replaced with es-modules when all browsers support import-maps). SystemJS is like AMD allows multiple assets to be dynamically loaded on demand.

* [SingleSPA](https://single-spa.js.org/) to register and manage individual MicroFEs implemented with different FWs ( React and Svelte example here)   

### Where is the code
[Micro FrontEnds Base](https://github.com/bgorkem/mfe-base)

ReadMe documentation should give you all the know-how you need

### Links 

* [Microfrontends.org](https://micro-frontends.org/)

* [Cam Jackson's article on Martin Fowler website](https://martinfowler.com/articles/micro-frontends.html)

* Also inspired from Jack Harrington's Youtube posts 

{% youtube wxnwPLLIJCY %}
{% youtube wU06eTMQ6yI %}
[Solved] “Treating warnings as errors because of process.env.CI = true”
Tags: webdev, javascript, netlify, devops
Published: 2020-07-23 15:10:03

Did deploying your code to netlify failed and in logs you are getting 
**Treating warnings as errors because of process.env.CI = true**
![Error](https://miro.medium.com/max/4764/1*C2ChAVEUzGn45yx5ATgyoQ.png)
If yes then you are at the right place. I'll help you fix this error within seconds. Before showing you the fix let's first have a glance at the root cause of this error.

### **What is this error all about?**
Beginning on _June 15, 2020,_ Netlify started a gradual rollout of **_adding the environment variable CI to build environments, with the value of true_**. This environment variable, short for Continuous Integration, is commonly set in various CI environments like Travis CI and Github Actions, among many others. The ecosystem has largely agreed to use this environment setting to detect when a build is executing in a CI environment, as opposed to a local development environment.

This setting allows many common libraries to detect a CI environment and change behavior accordingly. One such behavior is the disabling of progress “spinners” that while useful in a local development terminal, can render poorly when operating in a log streamed CI environment.

Because of this some libraries now interpret what were previously just warnings as hard errors and halt the build. The intention is that developers should not ship potentially broken configurations, but the downside is that builds that successfully completed previously started failing after this change.

### **The fix**
If your build is breaking after this change, you can disable this behavior by unsetting the CI variable in your build. For example, the following will unset CI for the NPM command:
`CI= npm run build`
* Log in to [Netlify](https://app.netlify.com/)
* Choose your `app` and click on `Site settings`
* Navigate to `Build & Deploy`
* Under `Continuous Deployment` select `Edit settings`
* Update `Build command` to
```
CI= npm run build
       or
CI=false npm run build //OP mentioned below in comments
```

If you are using `netlify.toml` to set the build command, update it as such:
```
...
  command = "CI= npm run build"
...
```
*Rebuild you deployment
Now you should see `Production: master@c215c12 Published` 😉
GitHub Profile AMA
Tags: codeland, ama
Published: 2020-07-23 16:00:28

We are excited to support CodeNewbies, a wonderful community of programmers and people learning to code. We are here to help you get off to the right start with your [GitHub Profile README](https://dev.to/m0nica/how-to-create-a-github-profile-readme-1paj). Drop a question below about how you can enhance your profile to share your programming journey.
Landlord Spotting in City Data
Tags: data, react, python, webdev
Published: 2020-07-23 15:55:40

---
title: Landlord Spotting in City Data
published: true
tags: data, react, python, webdev
canonical_url: https://medium.com/@noahcote/landlord-spotting-in-city-data-e07fad2b5dc5
cover_image: https://miro.medium.com/max/2000/1*QSithSEUTaOw8ZU_z-6gMw.jpeg
---

[Landlord Spotting in City Data](https://medium.com/@noahcote/landlord-spotting-in-city-data-e07fad2b5dc5) was first published on [Medium](https://medium.com/).
jQuery Ajax Image Upload with Animating Progress Bar
Tags: javascript, codedeyo, jquery, adeleyeayodeji
Published: 2020-10-03 14:12:40

---
title: jQuery Ajax Image Upload with Animating Progress Bar
published: true
date: 2020-07-23 15:51:36 UTC
tags: javascript,codedeyo,jquery,adeleyeayodeji
canonical_url: https://medium.com/@adeleyeayodeji/jquery-ajax-image-upload-with-animating-progress-bar-1e42b5771c60
---

![adeleyeayodeji](https://cdn-images-1.medium.com/max/1024/1*7Lrvui2RM9U8ug4Cd35WFw.jpeg)<figcaption>adeleyeayodeji</figcaption>

It is a feature that most of the developers ignore. It should be seen as part of the functionality.

Image/file upload should always have a progress bar. The users cannot sit in the dark and keep guessing about the background progress.

When the user requests the server to perform some operation, it is good to show them about the progress. It is a good UI/UX behavior. The progress bar is one of the best ways to show the status of the in-progress operation.

Get started with jQuery Ajax Image Upload Animating Progress Bar with my simple Ajax Widget

Download Below:  
[https://github.com/adel…/Ajax-Image-Upload-WIth-Progress-Bar](https://github.com/adeleyeayodeji/Ajax-Image-Upload-WIth-Progress-Bar?fbclid=IwAR1dzotk1jFIV_oVkXvOXOJm3zTgDAtOXV0LfA51_AyEB9JDPOyK0DEdAcA)

Happy [Coding](https://www.facebook.com/codinghtml? __tn__ =%2CdK-R-R&eid=ARD6P5iPhjKHqwmWhFfm_jjX3NJda5rii1Ib69N49l7tPXq2ZjXVtiWJJev48AylkkAb-twhw5C9wc7U&fref=mentions)
Which Language do you  Find the hardest ? 
Tags: codenewbie, beginners, webdev, productivity
Published: 2020-07-23 15:47:40

I guess as a beginner in programming, we tend to be so much in a hurry that we forget to give some languages the patience and time it needs.

Today, I would like you to share the programming language that you found hard when you started programming .

Some would say Javascript, I would say Javascript cuz I rushed it and didn't give myself enough time to really understand the concept.

What about you ???
Should sponsors be able to hide comments on their posts?
Tags: meta, discuss, codeland
Published: 2020-07-23 15:43:53

---
title: Should sponsors be able to hide comments on their posts?
published: true
description: 
tags: meta,discuss,codeland
---

[GitHub is sponsoring CodeLand](https://dev.to/github/hi-we-re-github-and-we-re-excited-to-be-at-codeland-32dg), and have the expected friendly DevRel spokesperson, announcement thread, raffle for early access to new stuff, and the like.

I'm not going to belabor [the issues I have with GitHub](https://www.theverge.com/2019/10/9/20906213/github-ice-microsoft-software-email-contract-immigration-nonprofit-donation). Suffice to say that when I asked the friendly DevRel spokesperson @bdougieyo how he felt about his company's collaboration with the US government's Immigration and Customs Enforcement agency (ICE) it was in good faith -- I'm genuinely interested in hearing how he does or doesn't grapple with his employer's ethics!

Instead of answering, ignoring, or even brushing me off with patter about how donations to nonprofits absolve GitHub of responsibility, he used the post author tools to hide my comment. And _that_ I have a problem with: it crosses the line between GitHub using DEV to whitewash its reputation, and DEV providing tools to _help_ GitHub whitewash its reputation.

If a comment on a sponsor post violates no rule, sponsors shouldn't be able to hide it for mere political expediency. They're here to attract attention and drum up business; if their practices mean that that attention isn't all as positive and uncritical as they'd like, that's for them to handle -- not DEV.

What do you think?
Code Newbie Codeland Connections
Tags: codenewbie, codeland, webdev, beginners
Published: 2020-07-23 15:40:06

Hey I am Tracy. I would love to connect to all code newbies going through #100daysofcode. Drop your social accounts in the comment section and let's follow each other and grow to be amazing developers.

#### You can follow me on 
+ Twitter at [TracyCss](https://twitter.com/TracyCss)
+ My [Github](https://github.com/muchirijane)

<img src="https://i.ibb.co/kS3pSW9/Git-Hub-Pic.png" alt="Git-Hub-Pic" border-radius ="100px" height = "200px" width = "200px">

#### some of the PDFs from the speakers
+ [Saron Yitbarek](https://drive.google.com/file/d/1xDKfzUvXIInCm-jLRWM_83VZ4wfjFPfY/view?usp=sharing) - What I learned from 6 years of building CodeNewbie.
+ [Erika Heidi](https://drive.google.com/file/d/1EccWHvCQaJDyzwlkoK0R5L-1-7ENer8Q/view) - Art of Programming.
+ [Josh Puetz](https://drive.google.com/file/d/1k_rV-eDjw6ftAmoS4Wu2LAuTtlw9W5rb/view) - Salary Negotiation for people that hate to negotiate.
+ [Paula de la Hoz](https://drive.google.com/file/d/1Yv828fgErcAQFnLLQzCsWbaxFvxfcS3w/view) - Freedom of Security
+ [Vaidehi Joshi](https://drive.google.com/file/d/1R2E8_Akxw_sASVN7tjzBn9GxMEzkln5z/view) - The cost of data 
+ [Nick Palenchar](https://palencharizard-public.s3.amazonaws.com/The+Whale%2C+the+Container%2C+and+the+Ocean.pdf) - The Whale, the Container and the Ocean - A Docker Tale
+ [Ben Halpern](https://drive.google.com/file/d/123bOprMOU8UvbT9fPYSivsHmadeqDvAA/view) - why Forem is special
+ [Rukia Sheikh-Mohamed](https://drive.google.com/file/d/1qPs0TT37HofBVLwmhZdEInV_QjqQonL9/view) - 5 Steps to Getting Unstuck
VS Code May & June 2020 Release Highlights Video
Tags: vscode, javascript, webdev
Published: 2020-07-23 15:31:02

---
title: VS Code May & June 2020 Release Highlights Video
published: true
description: Highlights of some of the latest features found in the May and June 2020 releases of Visual Studio Code.
tags: discuss,vscode,javascript,webdev
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/0r0nqk6lulki71k3n53j.png
series: vscode-release-2020
---

## May & June 2020 VS Code Release
You can read through the [May release notes](https://code.visualstudio.com/updates/v1_46?WT.mc_id=devto-blog-brcl) and the [June release notes](https://code.visualstudio.com/updates/v1_47?WT.mc_id=devto-blog-brcl) to find out more about them or watch this video to see some of the highlights from it.

{% youtube CPGGAbA8Tpo %}

### Features Highlighted

#### May 2020
- [Pinned Tabs](https://code.visualstudio.com/updates/v1_46?WT.mc_id=devto-blog-brcl#_pin-tabs)
- [Sash Size Configuration](https://code.visualstudio.com/updates/v1_46?WT.mc_id=devto-blog-brcl#_sash-size-configuration)
- [Cross File Undo](https://code.visualstudio.com/updates/v1_46?WT.mc_id=devto-blog-brcl#_cross-file-undo-for-closed-files)

#### June 2020
- [New JavaScript Debugger](https://code.visualstudio.com/updates/v1_47?WT.mc_id=devto-blog-brcl#_new-javascript-debugger)
- [Source Control View & Sort](https://code.visualstudio.com/updates/v1_47?WT.mc_id=devto-blog-brcl#_view-and-sort)
- [ARM64 Builds](https://code.visualstudio.com/updates/v1_47?WT.mc_id=devto-blog-brcl#_stable-windows-arm-builds)
- [Browser Support](https://code.visualstudio.com/updates/v1_47?WT.mc_id=devto-blog-brcl#_browser-support)

Editing by @dhanishgajjar

What's your favorite feature or improvement in this month's release? Share it below 👇
How to use npm "concurrently" module in package.json file
Tags: javascript, node, react
Published: 2020-07-23 15:30:28

Hey I am following an online course for blockchain based cryptocurrency network. Repository for course is https://github.com/15Dkatz/cryptochain. in package.json file, dev script is as follow...
`"dev": "npm run dev-client & npm run start-redis && cross-env ENV='development' nodemon index.js"`, which is to start both front-end (react) and back-end (epress) servers, by using `npm run dev` command in terminal. but for me it is running only front-end that is `npm run dev-client`, which means only first part of dev is running. To run both commands concurrently, I installed `npm i concurrently` module. But I am confusing about syntax of `dev` with `concurrently`. Suggest me what syntax should be used for above dev script along with concurrently. especially how `cross-env ENV='development'` can be concatenated???
100 DaysOfCode Challenge
Tags: 100daysofcode, challenge, codenewbie, python
Published: 2020-07-23 15:21:12

Hey everyone, My name is Banji and I'm a junior python developer, so yeah I'm a newbie and still learning python and I know there's a long journey for me but I love this way and I decided to make coding as a habit for myself, so I accepted 100DaysOfCode challenge and I hope to do this great challenge as hard as I can to improve my programming skills and learn new stuff through this way....
so My goals for this challenge in 100 Days are:

 1. Solving At least 2 Problem from https://exercism.io/
 2. Learning Django and Flask(after 30Days)
 3. Learning PostgreSQL(after Django/Flask)
 4. Coding At least 1 hour, every single day!

an I'll share my cods on https://Gitlab.com and my progress on https://dev.to .
so It would be so nice if you have any suggestion or advice and developer or programmer to help me in this way or maybe you can say that my goals are terrible or whatever that you think that I can improve, just let me know cause that would be my pleasure to hear from you and read your comments.
Thank you for reading my Post ;)
Happy Coding :)
Using DateTemplates in SwiftUI for custom date formatting
Tags: swift, swiftui, dateformatting
Published: 2020-07-23 15:18:01


[DateTemplates](https://github.com/eneko/DateTemplates) is a library that provides a simple way to generate date formatting templates that can be used to format dates in all Apple platforms and Linux. With a declarative Swift syntax that's easy to read and natural to write, `DateTemplate` works seamlessly with `DateFormatter`.

In SwiftUI, we can use it to easily format dates inline with out view code:

```
Text(
    DateTemplate()
        .dayOfWeek(.full)
        .month(.abbreviated)
        .day()
        .time()
        .localizedString(from: entry.timestamp)
)
```

![Using DateTemplate in SwiftUI](https://dev-to-uploads.s3.amazonaws.com/i/85vfyhksdaouevzvzkwx.png)

Visit [https://github.com/eneko/DateTemplates](https://github.com/eneko/DateTemplates) for more examples and documentation.
Changing the default branch name on GitHub
Tags: codeland, git, github, blacklivesmatter
Published: 2020-07-23 15:11:50

---
title: Changing the default branch name on GitHub
published: true
description: How to use git to change your github default name to not be master
tags: codeland, git, github, blacklivesmatter
//cover_image: https://direct_url_to_image.jpg
---
While the tech industry struggles to address injustice in our society, a small step you can take today is to remove the use of "Master/Slave" terminology from your tools.

git still calls the default branch of repositories 'master', a holdover from BitKeeper, [which had both master and slave branches](https://mail.gnome.org/archives/desktop-devel-list/2019-May/msg00066.html). 

It's a bit surprising that this is a bit difficult to stop naming branches 'master'! While you can create a copy of 'master' with a new name, you can't delete 'master' without using the GitHub web interface.

From the cli you can move your branch to a copy (named 'main' in this example) with 

`git branch -m master main`

then push it to GitHub with

`git push origin main`

But master will still be on GitHub, and you can't delete it since it's the default branch! You'll need to go to github.com and go to Settings>Branches to change the default. Only then can you delete the branch from github with 

`git push origin --delete master`

So how do we make sure that  all future repositories we create don't use 'master'?

Thankfully [André Arko](https://andre.arko.net/2020/06/06/changing-git-and-githubs-default-branch-name/) wrote a useful post on the subject

```bash
function git() {
  command git "$@"
  if [[ "$1" == "init" && "$@" != *"--help"* ]]; then
    git symbolic-ref HEAD refs/heads/main
  fi
}
```

With this, every time we initialize a repository with `git init` we will immediate move it to use the branch name 'main'
React Hooks: Get prevState values
Tags: react, hooks, reacthooks
Published: 2020-07-23 14:44:18

No intro! Let's learn how to get the prevState values using react hooks. 

I will create a button that increases count value showing previous and current count value using react hooks.

For the final code, go to the end of the post.

Create a react app: 
```bash 
npx create-react-app myapp
```

Then, move to the newly created project and hit
```bash  
npm start
```

Open up your browser and enter the link below ```
http://localhost:3000
```

You should see something like this:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/dosvcvv4ddyb02eqb79w.png)

Now, open the project in your favorite text editor. 

Now, edit the App.js and make a button that increases a value of count. So the App.js will look like this.
```jsx
function App() {

  const [count, setCount] = React.useState(0)

  const _increaseCount = () => {
    setCount(count + 1)
  }

  return (
    <div className="App">
      <div>Current Count Value: {count}</div>
      <button onClick={_increaseCount}>Increase Count</button>
    </div>
  );
}
```



After saving, you will see an update in your browser:

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

Now, create a custom hook ``usePrevious`` that will return the previous state value of any parameter passed into it.

```jsx
//custom Hook
function usePrevious(data){
  const ref = React.useRef();
  React.useEffect(()=>{
    ref.current = data
  }, [data])
  return ref.current
}
``` 

And get previous state count value as:
```jsx
  var prevCount = usePrevious(count)
```
Then, use the ``prevCount`` variable inside the return statement as: 

```jsx
<div>Previous Count Value: {prevCount}</div>
```

So, now the job is done and app should look like below and you should be able to see previous and current state count values.

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

Final code for App.js would look like this:

```jsx
import React from 'react';
import './App.css';

//custom Hook
function usePrevious(data){
  const ref = React.useRef();
  React.useEffect(()=>{
    ref.current = data
  }, [data])
  return ref.current
}

function App() {

  const [count, setCount] = React.useState(0)

  const _increaseCount = () => {
    setCount(count + 1)
  }

  const prevCount = usePrevious(count)

  return (
    <div className="App">
      <div>Previous Count Value: {prevCount}</div>
      <div>Current Count Value: {count}</div>
      <button onClick={_increaseCount}>Increase Count</button>
    </div>
  );
}

export default App;
```
Here is youtube video doing the same stuff:

YouTube: {% youtube EdeBLPZad-o %}

Feedbacks appreciated...