teleren/devto huggingface dataset:
Day 11 -  API Project: REST Countries Part I
Published: 2020-09-25 16:57:29

I wanted to take a few days building an application to add to my portfolio. In comes the REST countries project from [Frontend Mentor](www.frontendmentor.io). You can check out my progress [here](https://github.com/josno/rest-countries-api-with-color-theme-switcher-master).

Looking at the requirements there is a list page to filter by region and a detail page. So I peeked around the REST countries documentation and found that I can pull all countries at once or look them up one by one. 

This is an example response for pulling all countries:
![Example](https://dev-to-uploads.s3.amazonaws.com/i/wlqp2eolbphqabm2qg70.png)

But looking at the style guide closely, I only needed name, country, population, capital, and region. I did not need all of the other information to show in the country list!

I try to pull the least amount of information as I can from an API then format the information I need before setting it in state.

![useEffect screengrab](https://dev-to-uploads.s3.amazonaws.com/i/xcg0wdhb3dx1sgpozj9e.png)
<figcaption> This is for the country list page </figcaption>

I mapped out the items in the list to a child component and ended up rendering this:

 ![countries list](https://dev-to-uploads.s3.amazonaws.com/i/739cgiev8cswdcx4o2is.png)

## What I Learned
When dealing with APIs and documentation I think it's easy to try to get the information as quickly as possible. But taking some time to go through documentation and ask questions like if there are more efficient ways to pull something can help with efficiency. 

## How This Can Help Me
It was good practice on consuming a new API in a thorough way.

Onto the next challenge!
Refactor vs Port vs Rewrite
Tags: basics, refactor, codequality
Published: 2020-09-25 16:50:48

---
series: Basics
---

I hear "refactor" used when developers mean port or rewrite far too often. It's important to use specific terminology here because each of these carries different risks and does different things for your application.

# Refactor
- Risk: Low
- Benefit: Readability, manipulability

As the most effective tool for creating a more understandable code base, refactors are low-risk and high reward. A refactor is taking some portion of the code and, without changing functionality, improving the code in some way. The area of improvement is most often readability or speed.

We understand that when we write code the first time, it won't be laid out well. Just like writing a book, or painting a wall, you're going to have to go over the code multiple times in order to get a well-organized code base.

Make refactoring part of your routine. The better your code base is, the easier it will be to add new features. Reduce the risk of refactoring with sufficient testing. If you're using unit tests, make sure you write for the very outside like Ian Cooper mentions in [this talk](https://youtu.be/EZ05e7EMOLM).

# Port
- Risk: Medium
- Benefit: Tech debt decrease

Porting code is taking code from one language, framework, technology and changing (or upgrading) it. In a port, you leave the code as close to the original as possible while following new syntax rules.

Make sure you're doing a port for the right reason. Ports are more exciting than refactors, but don't produce the same results. Ports decrease tech debt. That could mean less security liabilities or better abstractions, but 90% of the time the code is the same or harder to work with. 

Be disciplined with your ports. If you're anything like me, you'll want to perform a port at least once a month. Before you do, make sure the area of the application you're going to port is easy to read. If it's not, refactor your code first so that the port is easy and less risky.

# Rewrite
- Risk: Extreme
- Benefit: ...

> "A complex system that works is invariably found to have evolved from a simple system that worked. A complex system designed from scratch never works and cannot be patched up to make it work. You have to start over with a working simple system."
\- John Gall

Rewrites are by far the trickiest to pull off successfully. They can be good when the portion of the system you're trying to rewrite is small enough that you know exactly how it's supposed to act and the code is 10x more complicated than it's responsibilities. Rewrites differ from refactors because refactors take the existing code and improve it, while rewrites throw away the old code before starting on the new.

Instead of rewriting code, learn better refactoring techniques. Most of the time, you can make small improvements to the code until it is in a readable-enough spot to make more significant changes safely. If you're dead set on a rewrite, make sure you have sufficient testing.

# Where to go from here
Go research code smells. Practice refactoring every day. Whenever you can, leave the code base better than you found it.
Clone an object or array (Shallow Cloning)
Tags: javascript, webdev, beginners, codenewbie
Published: 2020-09-25 16:50:29

**Note: This method is for `shallow cloning`.**

```
const obj = {
  name: 'xyz',
  age: 20
};

const objCopy = obj; // objCopy would still point to the same object.
// i.e., If obj.age is changed (obj.age = 35;),  
// objCopy.age will also be 35

// To clone the object,
// Solution 1 - Use the spread operator. 
const objCopy = {...obj};

// Solution 2 - Object.assign() 
const objCopy = Object.assign({}, obj);
```

---

**Thanks for reading 💙**  
Follow **@codedrops.tech** for daily posts.  
[Instagram](https://www.instagram.com/codedrops.tech/) ● [Twitter](https://twitter.com/codedrops_tech) ● [Facebook](https://www.facebook.com/codedrops.tech/)

Micro-Learning ● Web Development ● Javascript ● MERN stack ● Javascript  
**[codedrops.tech](https://www.codedrops.tech/)**
Chris & Chris Talk Serverless Landscape
Published: 2020-09-25 16:03:17

> To learn what is possible today with the Serverless architecture especially for frotend developers, join us at [Create:Serverless](https://aka.ms/createserverless). Chris and Chris will discuss the current state of Serverless landscape and how it is empowering developers.

My favorite thing about the Jamstack is how it opens the world of Frontend developers to endless possibilities and opportunities. Previously we would identify as people who just wrote code to run on browsers and that was cool…ishhh.

These days we do [more than the job description](https://full-stack.netlify.app/) including setting up APIs on clouds and connecting to third-party services, feels good 😉 . (This is totally a Henry Danger reference). 

According to Laurie Voss’s "[The State of the JAMstack in 2020](https://www.youtube.com/watch?v=nPcSxIkt5-I)" survey revealed 44% of developers have been using it for a year, with 37% using it for 1-2 years. Eleven percent of the respondents reported they have been leveraging JAMstack for 4 or more years. This means that the adoption rate is increasing rapidly. 

Frontend developers live and breathe JAMstack and putting into consideration that "A" stands for API as well as the fact that according to the same survey a lot of developers love JAMstack because it is "easy", then there must be something that makes building APIs more approachable. Serverless!

[Gartner’s Arun Chandrasekaran](https://www.gartner.com/smarterwithgartner/the-cios-guide-to-serverless-computing/) says **serverless adoption** is inching close to the 20% this year.  The nature of **serverless** continues to mature as a programming model for writing apps but he also says the definition of serverless is expanding to include the operating model.

Sounds cool right? I’ll be breaking down the implications of all of this with the help of an awesome friend.  What’s better than one Chris?….. Two Chris! (haha).

I will be joined by [Chris Coyier](https://twitter.com/chriscoyier) 🎉


# How can I hang out and chat about Serverless in the Jamstack? 

**Event** : Create:Serverless [https://createserverless2020.splashthat.com/](https://createserverless2020.splashthat.com/)
**Title:** Keynote: Chris & Chris talk Serverless Landscape
**Timing:** 30 September 2020, 8:15AM – 8:45AM PST
**Co-speaker:** Chris Nwamba
**Topic/context:** Chris and Chris shares about the Serverless landscape in 2020.


# Come hang out with us 

We would love for you to be there as we will be discussing the  **“Three Factor App"**, The state of Serverless, Serverless Database and trends to watch out for in serverless functions. 


I am really excited to have this session and I hope you are as excited about the future of serverless as I am. 

Feel free to leave questions as comments and we will be happy to chat with you here.
Ask Octopus - Can I get a list of upgradable Tentacles?
Tags: octopus, tutorial, devops, api
Published: 2020-09-25 16:03:01

---
title: Ask Octopus - Can I get a list of upgradable Tentacles?
published: true
description: You have a number of tentacles spread across targets and workers. You want to easily get a list that can be upgraded. What do you do? Find out in this Ask Octopus!
tags: octopus,tutorial,devops,api
series: Ask Octopus
---

You have a number of tentacles spread across targets and workers. You want to easily get a list that can be upgraded. What do you do? Find out in this Ask Octopus!

{% youtube AcD9W4LPWeE %}

Do you have a question about how to use Octopus? Email advice@octopus.com and someone from our team will get you an answer. You might even see it in a future episode.

Join our community slack at https://octopus.com/slack
My plans for Hacktoberfest 2020
Tags: watercooler, hacktoberfest
Published: 2020-09-25 15:59:54

I have just registered for Hacktoberfest 2020. This will be my 3rd year doing it. 4 Pull Requests are required to fulfill the requirements. I'm going to be focusing on 3 areas during October.

First is [Meteor.js](https://www.meteor.com). I want to primarily tackle two of the following:
1. [`insertMany` support](https://github.com/meteor/meteor-feature-requests/issues/7) for Mongo packages. This has been bugging me for quiet a while, but I think it is only now that I can try to tackle it.
2. Additional MongoDB commands integration
3. Upgrade to [Node.js v14](https://github.com/meteor/meteor-feature-requests/issues/402)
4. Accounts packages improvements. This will probably be a few PRs. First will be modernization. Another one is adding deletion functionality - this means accounting for delete calls from social media providers like Facebook and adding delete link to authentication e-mail. This will only trigger if a delete function is provided so that the app can account for it. This goes also hand in hand with increased [GDPR support](https://github.com/meteor/meteor-feature-requests/issues/246).

Second area of focus for me will be in Meteor Community Packages. I don't have any specific points here like for Meteor, but I want to focus on standardization of the packages and wiring them up to CI as much as I can. Few of the packages have an issue or two that can be done relatively quickly, which I will if no one takes after the first week of Hacktoberfest (so that new comers have a chance).

Lastly I want to do some work on [Literary Universe](https://www.literaryuniverse.com) which will culminate with upgraded story editor and I will hopefully finish in time to do a showcase video for [Meteor Impact](https://impact.meteor.com). Since this is not a public project it will not count towards Hacktoberfest in anything but spirit.

What are your plans for Hacktoberfest 2020?

--------
If you like my work, please consider supporting me on [GitHub Sponsors ❤️](https://github.com/sponsors/StorytellerCZ).
Operation Code at The Muse
Published: 2020-09-25 15:58:21

This spring we were honored to connect with [Operation Code](https://operationcode.org/) to host their April Meetup. Operation Code is a non-profit organization serving America’s veterans and their families to help them to sort out their next steps after their service - or sometimes, while they’re still serving. Helping people to find their passions and turn them into fulfilling careers is exactly what we do at The Muse, and we were delighted to pitch in. This being Operation Code, Engineering and Product were particularly excited to get involved.

How do you transition into the civilian workforce as a developer? Senior Application Engineer [Richard Dillman](https://www.linkedin.com/in/richarddillman/) moderated a panel of Musers to explain how to master the technical job search, and how to maintain that success once hired. Director of Talent and Acquisition [Lillian Landrum](https://www.linkedin.com/in/lillianlandrum/) shared how candidates can stand out in the selection process. Manager of Client Project Management [Danielle Incontrera](https://www.linkedin.com/in/danielle-incontrera-diflorio-62ab1445/) discussed how people on the technical side can more effectively communicate with product about goals and timelines. Account Manager [Christina Giordano](https://www.linkedin.com/in/giordanochristina/) explained how engineers help in both sales and client acquisition at The Muse. 
Director of Engineering [Peenak Inamdar](https://www.linkedin.com/in/peenakinamdar/) fielded questions on what skills developers need to have on his team and how we at The Muse determine if a candidate’s skills meet those needs.

Following Peenak’s remarks, Associate Product Manager [James Mayr](https://www.linkedin.com/in/jamesbmayr/) gave a presentation on [Google Tools for Product and Engineering](https://docs.google.com/presentation/d/1IJx9REna-iJaYgezXwxI0pQBtkG79EWVrJZwrRy3_Fk), an overview of how developers can use Google tools such as Optimize, Analytics, Tag Manager, Lighthouse and Google Search Console to monitor site performance, dynamically add or modify content, and develop approaches to increase speed and reliability. We spent quite a bit of time on accessibility and usability too.

Afterwards there was more pizza and more networking amongst all, with the most popular topic being breaking into the developer role as a fresh code camp graduate. Our conversation carried well past our 9PM target with some of us not leaving until well past 10.

Meetups and Operation Code are both great ways to meet people you otherwise might not, learn new skills, and possibly make a connection for a new career.

Check out the full video of the event
{% youtube zcSWBPCHqk0 %}
#CodepenChallenge Exploding Bombs and Candies
Tags: codepen, html, css, showdev
Published: 2020-09-25 15:35:17

<p>This is a simple nested <code>&lt;detail&gt;</code> and <code>&lt;summary&gt;</code> tags.</p>

<p>I used emojis for the content, that is why, there is a possibility that the shown icons are different from the screenshot I provided, and the viewer's system.</p>

<p>The system I used for the screenshot is Windows 10. So far I tested it only on KDE, and Android Chrome.</p>

<p>I haven't tested on other browsers, except Firefox, but the animation of exploding candies only works on Chromium-based browsers.</p>

<p>I haven't used any Javascript for the functionality. All of there are just functioning with the native HTML, and CSS. Although, I used Javascript to render the HTML codes.</p>

{% codepen https://codepen.io/takaneichinose/pen/jOqdJKX %}
I built a VSCode extension to help you creating Hugo Themes
Tags: hugo, vscode, showdev, opensource
Published: 2020-09-25 15:28:37

I am a big fan of static sites and for sure when they use [Hugo](https://gohugo.io/). At the moment I have four websites running on Hugo. My [personal website](https://www.eliostruyf.com), a [sticker shop](https://pimpyourowndevice.com) which I run with Luise Freese, a [URL shortener for Instagram](https://pyod.shop) which we use for our shop, and internal work-related site.

All of them have their own theme, and that is also where I started to see some room for improvement. When I started to create these themes, it felt like the early days of when I started my development career a long time ago. Just a notepad and writing some PHP. These days we have the `go to definition` option and this is exactly what I was missing in VSCode for creating and managing Hugo themes.

## Hugo Themer

This week I thought, why not create a VSCode extension to help me and others out with Hugo themes creation, and so **Hugo Themer** was born.

In the preview version of the extension, I have added support for `go to definition`. Or better said, open the partial by `ctrl+click` or `right-clicking` and choosing `go to definition` on the partial line.

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

## Find it on the VSCode marketplace

The first version has been published as a preview to the VSCode marketplace - [Hugo Themer](https://marketplace.visualstudio.com/items?itemName=eliostruyf.vscode-hugo-themer).

## Other extensions

If you are interested, I have a couple of other extensions available in the store like: [Front Matter(https://marketplace.visualstudio.com/items?itemName=eliostruyf.vscode-front-matter) to make it easier to maintain the metadata (front matter) of your articles in VSCode.

You can check out the whole list here: [marketplace profile](https://marketplace.visualstudio.com/publishers/eliostruyf).

## Feedback

See something which is not working, or have an idea which can be added to the extension? Feel free to provide me this feedback
Sum without highest and lowest number with JavaScript 
Tags: javascript, 100daysofcode, codenewbie, codewars
Published: 2020-09-25 15:22:04

{% youtube chI3mSM93C4 %}

To solve this problem, we'll take 3 different approaches.
Enjoy the video 😀🙏

Also written version https://losseff.xyz/katas/017-sum-without-highest-and-lowest-number/javascript/
Setup Next.js with Typescript , Jest and React Testing Library
Tags: react, typescript, testing, nextjs
Published: 2020-09-25 15:13:23

## Why?
[Next.js](https://nextjs.org/) is a super cool React framework, that gives you an amazing developer experience. In this episode, I'll show you how to set it up with Typescript, Jest and React Testing Library.

## Setup
To set up the project we'll need to follow these steps:

* to create Next app, from your terminal run
```shell
npx create-next-app
```
* install typescript as well as react and node types
```shell
npm install typescript @types/react @types/node -D
```
* install jest, react testing library, babel-jest, @testing-library/jest-dom and types for jest
```shell
npm i jest @testing-library/react @types/jest babel-jest @testing-library/jest-dom @testing-library/user-event @testing-library/dom -D
```
* create config files for typescript and babel
```shell
touch tsconfig.json
touch .babelrc
```
* add to the babel config file
```json
{
  "presets": ["next/babel"]
}
```
* create `jest.config.js` and `jest.setup.ts` files
```javascript
// jest.config.js
module.exports = {
  setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
  testPathIgnorePatterns: ['<rootDir>/.next/', '<rootDir>/node_modules/'],
};
```
```typescript
// jest.setup.ts
import '@testing-library/jest-dom';
```
* start the app so next can configure typescript
```shell
npm run dev
```
#### BONUS
If you're going to use CSS modules, make sure you also include these steps:
* install [`identity-obj-proxy` package](https://www.npmjs.com/package/identity-obj-proxy)
```shell
npm i identity-obj-proxy -D
```
* update `jest.config.js` file to look like this
```javascript
module.exports = {
  setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
  testPathIgnorePatterns: ['<rootDir>/.next/', '<rootDir>/node_modules/'],
  moduleNameMapper: {
    '\\.(scss|sass|css)$': 'identity-obj-proxy',
  },
};

```


Now we are good to go, you can start changing your component from `.js` to `.tsx` and building your awesome app.
Private Go modules on a privately hosted github instance
Tags: go, github
Published: 2020-09-25 15:09:39

Go modules are highly dependant on github to fetch modules, it is fine in most cases as tons of modules are available publicly on it.

It can get tricky when you got your private Go libraries that are not hosted on github.com. Here is a simple solution to pull them from your git instance without breaking the fetching of public dependencies on Github.

This will only work on Go 1.13 with the introduction of GOPRIVATE env.

## Create your private lib

Create a simple private repo at your instance with that form:
your.hosted.github.instance.com/my_organization/privatelib

Add one file containing a sample Go file, named for example, lib.go:

```
package privatelib

import "fmt"

func MyPrivateCall() {
  fmt.Println("My super secret lib!")
}
```

Don't forget the capital letter at the start of your exported resources (functions, enums, structs...) to mark them as exported, in this example MyPrivateCall() will be exported.


## Generate a token in your github instance

You can generate tokens with this direct link : https://your.hosted.github.instance.com/settings/tokens/new

Always get the least privileges needed for your token (can read private repos).

## Use your private lib in your main project

In your main Go project, you can now import your private lib at the top of the file:

```
package api

import (
    "fmt"
    //...

    privatelib "your.hosted.github.instance.com/my_organization/privatelib"
)

// ...


func myApiHandler() {
    privatelib.MyPrivateCall()
}

```

We need to indicate to go mod to inject our credentials when a module hosted on https://your.hosted.github.instance is parsed in go.mod :

```
go env -w GOPRIVATE=your.hosted.github.instance
go config --global url."https://your_username:your_token@your.hosted.github.instance.com".insteadOf / "https://your.hosted.github.instance"
```

Replace your_token by the token generated in step 2.

Now we fetch and build :
```
go mod download
go build ...
```


I hope that was useful :)
Is it common for developer to loose passion to learn new things ?
Tags: discuss, help, productivity
Published: 2020-09-25 15:05:15

---
title:Is it common for developer to loose passion to learn new things ?
published: true
description: 
tags: #discuss,#help,#productivity
//cover_image: https://direct_url_to_image.jpg
---


When I started my career as a software developer. I found myself in front of a vast ocean of knowledge. And I had that drive to learn as many things as possible. I wanted to..

> Change the world, one line of code at a time.

Now fast forward to 2020.It feels like I have lost that drive. I am finding it difficult to focus on learning new things and frequently procrastinating on my side projects.


Do most of the developer go through such phase ? What 
are the possible reason a developer ends up in such situation?

And most important how one can overcome this phase ?

![Help](
https://media.giphy.com/media/xT1R9KOVFHgympU5qg/giphy.gif
)