teleren/devto huggingface dataset:
Next.js vs Gatsby for a portfolio website
Tags: dohackathon, react, gatsby, nextjs
Published: 2020-12-29 10:21:24

When choosing a React static site generator, there are two major choices, Gatsby and Next.js, with fairly different approaches.

## Advantages of Gatsby

**Plugins.** Gatsby has a huge range of plugins to make things simpler, including connections to CMSs and markdown processing.

**Image component.** Both frameworks now have an image component, but Gatsby has had one for much longer and so has had time to make it better.

## Advantages of Next.js

**I already know it.** Obviously this one won't apply to everyone, but there's a big advantage to just choosing the framework you're most familiar with as there's no learning curve.

**Increased flexibility.** Gatsby is very much about "The Gatsby way of building", providing a range of systems in which you can build your app, whereas Next.js is more like an extension of Create React App, making it easier to build a wider variety of applications.  Next.js also provides opportunities for having a backend through `getServerSideProps` and their API routes should I ever need to use it.

**Development experience**. Gatsby takes a lot longer to start the development server, which makes developing using it a somewhat painful experience on larger or more complex sites. 

**Links with companies to optimize performance.** As the most popular React framework, Next.js has seen contribution from Google and Facebook, using Next.js as the testing ground for new features.

## Conclusion

Overall, I decided to go with Next.js for my new site, and so far I'm very happy with my choice. Both solutions are good however, and you can't really go wrong either way.
Rate our GUI
Tags: gui, python
Published: 2020-12-29 10:16:26

I recently developed [HydraHeaders](https://hydraproxy.com/hydraheaders/), a multi-profile browser manager that can be used to launch (and emulate) multiple browsers/devices.

I am still looking to improve the GUI of our free tool.

What do you think of it and what could I add/improve?

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6fz4se4h3lgnsdqyak69.PNG)
N2 Coin — A Product of the N2 Platform
Tags: n2coin, ico, icopresale
Published: 2020-12-29 10:16:09

N2 Coin (ticker symbol: N2C) is a multi-functioning cryptocurrency. N2C can be used to benefit from various services on the N2 platform. The team behind N2 is currently working on the platform development, while the N2 Coin ICO pre-sale is live now.

Pre-sale Details
Ticker Symbol: N2C
1 N2C Price: 1 USD
Pre-sale Period: Dec 15, 2020 - Jan 31, 2021
Pre-sale Quantity: 450,000,000 N2C

N2 Ecosystem
The prime goal of the N2 ecosystem is to help banks upgrade to more secure & reliable systems and aid users to avail of both banking and crypto services on a unified platform.

N2 is the first company in the world to launch a decentralized GloFi (Global Finance) ecosystem. With GloFi, N2 is transforming the way the banks function across the globe. The ultimate aim is to make the business processes more efficient without disturbing the original structure, and N2 is keen on that.

A few of the services offered by the N2 Ecosystem are as follows:

1. Global account
2. Integrated trading platform
3. Point of Sale (POS) payments
4. Currency conversions
5. International transfers, and
6. Fundraising platform

Here’s the link to participate in the N2 Coin ICO pre-sale https://ico.n2coin.io/auth/signup

Follow N2 Coin on

https://www.facebook.com/n2coin

https://www.linkedin.com/company/n2coin/

https://www.instagram.com/n2coin/

https://twitter.com/n2_coin
Cash Register Manager | Javascript Build
Tags: javascript, 100daysofcode, webdev, codenewbie
Published: 2020-12-29 10:13:59

>
I'm trying to build various tools that helps us daily.
So, In any local store you can find Cash Register and I built it using Vanilla JavaScript.
>

# Cash Register Manager

![Cash Register Mockup](https://dev-to-uploads.s3.amazonaws.com/i/yt1v26dktbfvnxqij49s.jpg)
<small>This is first time I'm creating Mockup</small>

# [Live Demo](https://vaishnavme.github.io/builds-Javascript/Cash-Register/)
{% github vaishnavme/https://github.com/vaishnavme/builds-Javascript no-readme %}


I'm going to create series of post, with about Simple JavaScript apps. All of them are Open Source.

If you built your version of them please tag me, I would love to try them out.

Find any bugs or have any suggestion please Write to me.

#### Let's Connect 😄

[![Generic badge](https://img.shields.io/badge/Github-black.svg?style=for-the-badge)](https://github.com/vaishnavme)

[![Generic badge](https://img.shields.io/badge/DEV-black.svg?style=for-the-badge)](https://dev.to/vaishnavme)

[![Generic badge](https://img.shields.io/badge/Twitter-blue.svg?style=for-the-badge)](https://twitter.com/vaishnav21_?s=09)
LGTM Devlog 6: Sprint 1 plans
Tags: devjournal, github, git, python
Published: 2020-12-29 09:52:38

Ok, It's planning time. What am I going to do this week/sprint and aims?

I like to operate big-ish personal projects in sprints. It's not quite the kind of sprint I would use in actual teamwork since solo work means there's little need for a lot of it, but I've found working in sprints to be beneficial even for personal projects.

Now that I have the broad sketch of architecture figured out, let's start this sprint focusing on getting the Webhook receiver set up

# Webhook receiver?

![LGTM Architecture diagram](https://dev-to-uploads.s3.amazonaws.com/i/n9plg3nmpruo862hbier.png)
 
The job of the webhook receiver, for now, is very simple but very important: Watch for forks of our LGTM repo, and use this as a signal to start a new game. I _think_ this is the only thing we need it do, though there may be other things coming up in the future.

Therefore this week is a nice and light start to the project, and I will take some time to set up the repos and accounts that will be used later on.

# Sprint plan
Our plan for this "sprint" looks like this:

![Sprint plan](https://dev-to-uploads.s3.amazonaws.com/i/u5qagyg2pben4ne4d2tm.png)

By the end of the sprint (nominally a week), I hope to have all our accounts and repos setup across Firebase and GitHub; have one firebase function in there ready to receive hooks from GitHub to notify us of Forks (though the functions won't be actually doing anything yet, but ready to send it on), and usual repo templates set up - python tests, CI/CD, the usual.
I finally have done it (without sudo) - the catastrophic command
Tags: linux, help
Published: 2020-12-29 09:41:52

I mistaken `rm -rf /*` for `rm -rf *`; and didn't backup. I Ctrl+C after a while though, but

- Fonts and Pictures are gone
- `~/.ssh` is still there
- No, I don't have any important files that aren't somewhere else. I can easily reinstall Ubuntu

## Talking about prevention

- How do I periodically backup?
- How do I have stricter permissions / ban command combinations?
Avoid error with "locale-check" on Debian 20.04
Tags: linux, tutorial, bash
Published: 2020-12-29 09:35:34

## Summary

- Noticed I get the error `-bash: /usr/bin/locale-check: No such file or directory` every time I become `root` via `sudo su -` ay my Debian 20.04 Server.

## The Amendment

- The error seems to be from the file `/etc/profile.d/01-locale-fix.sh` and there is no package having the file for Debian 20.04 (Ubuntu does).

- So regardless the file is going to be added to the package `base-files` or I need to install another package, I decided to avoid the error in the way it starts working whenever the file is added to the server.

```
/etc/profile.d/01-locale-fix.sh
==========
# Make sure the locale variables are set to valid values.
# Hack: Added "if" statement because Debian 20.04 does not seem
# to have the file "/usr/bin/locale-check"
if [ -f "/usr/bin/locale-check" ];
then
    eval $(/usr/bin/locale-check C.UTF-8)
fi
```
Is pursuing the CKAD certification worth it?
Tags: kubernetes, ckad, certifications
Published: 2020-12-29 09:19:44

A few months back I was skeptical about pursuing certifications after I read [the article by Martin Fowler](https://martinfowler.com/bliki/CertificationCompetenceCorrelation.html) which alluded that certification may not imply competence. But I pursued the Certified Kubernetes Application Developer certification anyway because:

- it gave me a structured and time-boxed learning path for a complex technology with many topics to cover
- it validates my understanding of the technology and that the way I am using Kubernetes and its patterns are correct
- it gave me the motivation to learn aspects of Kubernetes that are not needed for the current apps I manage but those that will come in handy in the future
- from a recruitment perspective, it’s an effective way for non-technical recruiters to filter for candidates based on their requirements
- till date (Dec 2020), the CKAD exam conducted by CNCF, remains moderately difficult and hence its reputation is intact. The exam is focused on real-world scenarios and people pass the exams with multiple attempts.

I’m officially a Certified Kubernetes Application Developer (CKAD)! 


Follow me on Twitter [@RaghavRamesh](https://twitter.com/RaghavRamesh94) and DM me if you need tips on preparing for and passing the CKAD exam.
How to Transition to an Outsourced Team
Published: 2020-12-29 09:11:44

---
title: How to Transition to an Outsourced Team
published: true
description: How do you transition to an outsourced software development team? You might be looking to make room for your in-house developers to start on a new project - but still need to maintain your existing software. You could be questioning the extra costs of having employees working from home or other scenarios. We cover the fairly simple process for outsourcing in each of these scenarios and other factors you’ll need to consider.
tags: 
//cover_image: https://perceptionbox.io/wp-content/uploads/2020/12/1-2.png
---
How do you transition to an outsourced software development team? You might be looking to make room for your in-house developers to start on a new project - but still need to maintain your existing software. You could be questioning the extra costs of having employees working from home or other scenarios. We cover the fairly simple process for outsourcing in each of these scenarios and other factors you’ll need to consider.

Read full article - https://perceptionbox.io/business/how-to-transition-to-an-outsourced-team/
My Hacktoberfest SWAG has arrived
Tags: hacktoberfest, opensource, showdev, discuss
Published: 2020-12-29 08:39:36

Took a while but also sooner than I expected 😎

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9wb2rfdznn09zmntlv25.jpeg)

Thank you DigitalOcean, Intel Corporation & DEV.to for #hacktoberfest2020 !! This year was my first time joining the OSS community & contributed to 32 pull requests. 

It was a great learning experience and a nice step towards software development & also giving back to code that helped me in my career also.

I'm looking forward to next year & what else I can learn & grow as an engineer.
Placeholder title
Tags: dohackathon
Published: 2020-12-29 08:05:06

## What I built

### Category Submission: 


### App Link


### Screenshots


### Description
 

### Link to Source Code

### Permissive License


## Background
(What made you decide to build this particular app? What inspired you?)

### How I built it 
(How did you utilize DigitalOcean’s App Platform? Did you learn something new along the way? Pick up a new skill?)


### Additional Resources/Info
What Tech Stacks are Folks Using for New Projects?
Tags: discuss, startup
Published: 2020-12-29 07:48:13

I'm doing a bit of research for an upcoming article and potential content for a book down the road and I'm wondering what types of tech stacks people are looking at when starting a **new** project.

Example tech stacks would include:

- MEAN / MERN / MEVN
- .NET 5 Back End / Vue.js Front End / SQL Server Database
- PHP / MariaDB

I'm also curious what considerations you make when choosing a tech stack, though I understand for the vast majority of organizations a legacy tech stack is already in place.

I'm curious to see the variety of backgrounds you all have on this one as well as which are the most popular, so please comment and upvote other comments that represent your stacks well.
Exploring Studio Ghibli Movies API
Tags: api, javascriptprojects, javascript
Published: 2021-03-26 07:56:47

---
title: Exploring Studio Ghibli Movies API
published: true
date: 2020-12-29 07:26:57 UTC
tags: API,JavaScriptProjects,api,javascript
canonical_url: https://nikhilsawantse.com/exploring-studio-ghibli-movies-api/
---

*Whenever someone creates something with all of their heart, then that creation is given a soul.* 
– *The Cat Returns 2002* 

In this project I am exploring the Ghibli Studio movies api. You can get the detailed documentation of Ghibli Studio Movies api from here: https://ghibliapi.herokuapp.com/ As per the api documentation it does not require […]

The post [Exploring Studio Ghibli Movies API](https://nikhilsawantse.com/exploring-studio-ghibli-movies-api/) appeared first on [Nikhil Sawant](https://nikhilsawantse.com).
#Angular #covid19 #frontend #typescript
Published: 2020-12-29 06:48:09

i build covid app using angular10 framework. usually people say that angular is not good for spa's but i did not face any problem and worked with angular is amazing. and i am learning advance skills in angular.
this app is helpfull for getting covid19 data in numerical form and theoritical form.
#angular
link:https://iamsunil25.github.io/covid19-Angular-web/
Structured data in Python
Tags: python
Published: 2020-12-29 06:36:37

Some examples of structured data in Python are lists, sets, dictionaries, etc., its main feature is store a lot of items in a single variable.
Next i will to explain it with examples.

----

**Lists :** These can store different types of data and no matter if the elements are repited. It is represented with [ ], these are mutable it means that one list can change during execution.


```python
List_items_example = [1, 'cat', 1.23] 
```
if you want to get a specific item can access by index .
```python
print(List_items_example[1])

output : cat
```

**Sets :** These are very used for store items which are not repeated, not is possible access to an element by index, it is represented with { }, these are immutable.

```python
set_items_example = {'one', 'two',  3}
```
**Dictionaries :** These are different because each item is composed of one key and value, can access to a value by the key and no by index, these are mutable.
```python
dict_items_example = {'fruit': 'apple', 'number': 33, 'char': 'Z'}
```
Getting a value 
```python
print(dict_items_example['fruit'])

output : apple
```
test page
Tags: testing, devjournal, 100daysofcode, log
Published: 2020-12-29 06:12:02

test content

# Header
...
###### Header	H1 Header
...
H6 Header
*italics* or _italics_	italics
**bold**	bold
[Link](https://...)	Link
* item 1
* item 2	
item 1
item 2
1. item 1
2. item 2	
item 1
item 2
> quoted text	quoted text
`inline code`	inline code
```
code block
```

# Header
...
###### Header

*italics* or _italics_	

**bold**	


[Link](https://...)	


* item 1
* item 2


1. item 1
2. item 2


> quoted text	



`inline code`	



```
code block
```

:fire:

:arrow_down: :arrow_up:


1
2
3
4
5
6
7
8
9
10
Error: Could not find rake-x.x.x in any of the sources...
Run `bundle install` to install missing gems.

Published: 2020-12-29 05:55:54

Could not find rake-x.x.x in any of the sources...
Run `bundle install` to install missing gems.`

if using rbenv, run `rbenv rehash`

Source: https://stackoverflow.com/questions/9694219/after-installing-rbenv-and-changing-ruby-version-rake-no-longer-runs/21034433#21034433
When to use async and defer attributes in a script tag and why it is important
Tags: html, javascript, codenewbie
Published: 2020-12-29 05:26:58

Do you know the importance of `defer` and `async` attributes in the script tag?

When we load any webpage in the browser, the browser generates a DOM(Document Object Model) by parsing the document.

When there is no attribute(`defer` or `async`) to the script tag like this:

```js
<script src="index.js"></script>
<script src="script.js"></script>
```

then all the scripts are downloaded and executed one after the other simultaneously.

So it will block the parsing of the document until all the scripts are downloaded and executed and therefore it will take some time to load the page completely.

Therefore it's a common practice to add all the scripts before the end of the body tag so the browser will generate the DOM first and then all the scripts will be executed like this:

```js
<body>
 .
 .
 .
<script src="index.js"></script>
<script src="script.js"></script>
</body>
```

## Using defer and async

When we add the `defer` attribute to the script tag, the browser will download all the scripts included in the page but will not execute it until the DOM is created. 

So we can place all the scripts in the head tag with `defer` attribute and is an alternative option rather than placing all the scripts before the end of the body tag.

Scripts with `defer` added will execute in order.

The `async` attribute works the same as the default behaviour of script tag when there is no `defer` or `async` attribute specified like this: 

```js
<script src="index.js"></script>
```

This means it will stop the parsing of the document until all the scripts are downloaded and executed.

But the difference between `async` and `defer` is that `async` scripts will not execute in order so If we have 4 scripts included, any script will be executed at any time but that's not the case with `defer`.

So when the scripts are not dependent on each other we should use the `async` attribute.

**Knowing when to use `defer` and `async` is important because even if you have not used it, it is a famous question in an interview.**

## Conclusion

* `async` or `defer` attributes can be added to the script tag depending on the requirement
* adding `defer` attribute will make sure that all the scripts are downloaded but will not be executed until the DOM is ready
* adding `async` attribute is preferred when the scripts included in the page are not dependent on each other

**Due to many requests for the discount, the Christmas sale of 30% off for [Mastering Modern JavaScript](https://modernjavascript.yogeshchavan.dev/) book is extended till 31st December. So don't miss this last opportunity.**

**Check out the preview contents of the book [here](https://www.freecodecamp.org/news/learn-modern-javascript/).**

[<img src="https://cdn.buymeacoffee.com/buttons/default-yellow.png" >](https://www.buymeacoffee.com/myogeshchavan97)
Progress: Search
Tags: dohackathon
Published: 2020-12-29 05:13:50

## Search
A simple implementation of Django's [full text search](https://docs.djangoproject.com/en/3.1/ref/contrib/postgres/search/).

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

## Next steps
- Various bug fixes and improvements before submission
Markdown Editor for Common People?
Tags: markdown, wysiwyg, discuss, watercooler
Published: 2020-12-29 05:08:32

Just like this very platform, DEV.to is using a Markdown editor for writing posts, which is comfortable and might be preferable for `programmer`. There are some Markdown editor libraries today you can use for your web, one of them is [https://simplemde.com/](https://simplemde.com/). Because it's easy for us as a programmer to use and seems easy for web developers to implement and integrate it perfectly in their web, we tend to want to use it instead of using rich-text WYSIWYG.

But if we give the non-programming peoples this editor on their web, will they willing to learn to use it?
Angular Material Datepicker Format Example
Tags: angular
Published: 2020-12-29 04:03:27

Hi Bro

This article is focused on angular material datepicker change date format. This article goes in detailed on how to change date format in angular material datepicker. This article will give you simple example of angular datepicker format dd/mm/yyyy. you will learn angular datepicker format yyyy-mm-dd.

Read More: https://www.itsolutionstuff.com/post/angular-material-datepicker-change-date-format-exampleexample.html
Micro Frontends Patterns#8: Unified SPA
Tags: microservices, microfeontends, javascript
Published: 2020-12-29 03:32:26


Unified SPA is similar to Linked Application, but it navigates multiple SPAs.

![qmz7yj4upkzrzm3xdldz3f99x5uo](https://dev-to-uploads.s3.amazonaws.com/i/lafai3opwndinei5up1m.png) 

In the case of a simple hyperlink transition, it will be the same as a Linked Application. The transition between SPAs will be server-side rendering, so there will be a round trip.

There is another pattern for Unified SPA. It is the pattern of creating an App Shell layer that binds the SPAs together.

![dkzpm5ua79gig4kayjux94o7funr](https://dev-to-uploads.s3.amazonaws.com/i/5rbxoakcxmulrvi6ipxj.png) 

In this case, since the client-side rendering between SPAs is done in the App Shell layer, the performance overhead, which is one of the disadvantages of Linked Application, is reduced.

This can be achieved by using a library such as [single-spa](https://single-spa.js.org/) called meta-framework. An example code for the configuration part is shown below, which combines separately deployed applications.

```js
import { registerApplication, start } from 'single-spa';

registerApplication(
  'app2',
  () => import('@my-company/app2/main.js'),
  (location) => location.pathname.startsWith('/app2'),
  { some: 'value' }
);

registerApplication({
  name: 'app1',
  app: () => import('@my-company/app1/main.js'),
  activeWhen: '/app1',
  customProps: {
    some: 'value',
  }
});

start();
```

If you are interested in other libraries, please refer to `Reading List` which will be the last section of this series.

## Pros and Cons

Because it is an SPA, the interactivity of the Frontend will be improved compared to Linked Application, and the fact that you can achieve Micro Frontends by simply merging SPAs together is also a good thing. It is also possible to create common parts using the [Parcels](https://single-spa.js.org/docs/parcels-overview) mechanism of `single-spa`.

One of the disadvantages of Linked Application is that it tends to be a single point of failure in the application layer; if there is a bug in the App Shell layer, it will spread to the entire application, and the impact of version upgrades will be large.

## Summary

We looked at the Unified SPA pattern, which is an extension of the Linked Application pattern, and while introducing an App Shell layer has its disadvantages. As a simple Micro Frontends, this is the first one you can consider adopting.