teleren/devto huggingface dataset:
How to Avoid Traffic Loss during Migration from Magento 1 to Gatsby/Reactjs?
Tags: help
Published: 2021-03-02 17:36:08

**BIG QUESTION!**

A few years ago we switched from Commerce V3 to Magento 1. During this process our website lost 50% of the organic traffic. We believe this happened because of Google’s Reindexing of the full website. Our new website performed better on Desktop and Mobile, responsive layout and URL redirections from old URLs to the new ones. It was supposed to INCREASE traffic and instead we lost 50% of it. It has taken us 3+ years to bring the traffic back to where it was before. We are now ready to move to the next platform. Our current website does not meet the current Google Web Vitals metrics (Lighthouse V6) after the recent update.

We are looking to switch from Magento 1 to Gatsby/React JS and Azure Cloud Functions. We believe this could potentially bring us to the next level especially with Google organic search. However we do not want to go through the same painful loss of traffic. 

Our current traffic averages at about 150,000 unique visitors per month. We want to move up to 200,000 per month. We want to DRAMATICALLY improve our system for improvement but most importantly we do not want to go through the same headache of losing half of our traffic as we did before.

1. Is there anyone who has gone through this or a similar situation?

2. What should we be looking at in order to avoid the loss of any traffic during this migration?

3. What kind of possible problems should we expect to run into?

4. Should we consider other platforms for a large e-commerce website?

We are open to working on a partnership for someone with experience to supervise the migration.

Please send a private message for details or provide your contact information for future communications.
Delegating when only you can do the work
Tags: leadership, management
Published: 2021-03-02 17:33:33

---
title: Delegating when only you can do the work
published: true
description: Leaders often end up in the situation where they accumulated more responsibilities then they can execute alone. Delegation is the answer, but you can't just had someone a new task and expect them to succeed.
tags: leadership,management
---

_by [Trek](https://dev.to/trek) and [Sean](https://dev.to/endangeredmassa)_

---

Leaders often end up in the situation where they accumulated more responsibilities then they can execute alone. Delegation is the answer, but you can't just had someone a new task and expect them to succeed.

> **How do you delegate when only you can do the work?**

There are three steps to this no longer being your problem.

**Drive Collaboration:** The first step of delegation is collaboration. Identify a team member who you want to be able to do this task. Ask them to help you complete the task. The goal here is to get them comfortable understanding what you are doing and how you do it.

**Navigate Collaboration:** After the team member has a handle on the task, have them do the task while you assist. You are still there to make sure it's done properly, but make sure they are the one actually doing the work.

**Delegate Execution:** After the team member can handle the task without your help, delegate it!

You are still (probably) responsible for this task being completed, but not for executing it.

---

If you want to hear more about this and related topics, [sign up for our newsletter](https://lattice.fyi/)! We will never sell your information. We send ~1 email per week.
New Gatsby Course!
Tags: javascript, gatsby, beginners, webdev
Published: 2021-03-02 17:30:05

---
title: New Gatsby Course!
published: true
description: Announcing my brand new egghead course! Focused on all the newest features.
tags: javascript, gatsby, beginners, webdev
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uydh0lgvyu7lg6qpnto8.png
canonical_url: https://laurieontech.com/posts/gatsby-course-launch/
---

Launch day is here! I'm incredibly excited for you all to see the course I've been working on. It's been in production since this past summer but we wanted to wait until it could include the latest and greatest.

## Our community

The larger Gatsby community is incredible. There have been so many wonderful courses, tutorials and posts on working with Gatsby. Shout out to all of those content creators, I encourage you to check out their work and learn from them.

As a core engineer, I had a unique opportunity to develop a course based on the newest best practices. Something that could be useful to brand new users and existing users alike.

So without further ado, let's introduce you to the most up-to-date course out there.

## What's in it?

This course is designed to help you build a stand-alone developer blog, much like this one. However, the lessons are structured and titled to help you parachute into individual topics if you're looking for a quick reference.

### New Gatsby image plugin

An introduction to the brand new `gatsby-plugin-image` component. My team has been working on this for months and it releases today! Two examples of using it are included in this course, `StaticImage` using a url as your image source, and `GatsbyImage` for dynamic data coming from your MDX frontmatter.

This is the most performant way to use images across the board.

### File System Route API

Delete your `gatsby-node.js` file, you won't need it to create pages anymore! The route API is a great way to generate pages based on a collection and there is a lesson focused on it in this course.

### Interactive project initialization

This course makes use of `npm init gatsby` which gives you prompts for including Gatsby's most popular plugins out of the box. No more searching for the right starter and upgrading all the dependencies. This CLI experience downloads and configures all of the plugins in real time, ensuring you're getting the latest and greatest available.

### And so much more

- Working with MDX
- Taking advantage of the alpha Theme UI features
- Adding `react-helmet` and making an SEO friendly site, with social sharing images
- Accessibility through-out

Not to mention, it's all designed to work with Gatsby v3 out of the box. That's a lot of new features mixed with a foundation to help you build a dynamic and beautiful site.

## What's next?

Tell me what you think! I'd love you to take the course and build something. It's been a truly unique experience to develop an educational resource based on a codebase I contributed to so heavily. I hope you like it ❤️.

Ready to get started? [Check out the course here!!!](https://egghead.io/courses/build-a-developer-blog-with-gatsby-bd96)
Cara Mirroring Layar Android ke Sistem Operasi Linux
Tags: linux, android, programming, productivity
Published: 2021-03-02 17:21:58

Untuk beberapa keperluan kita terkadang butuh untuk menampilkan layar smartphone kita di layar PC atau laptop. Misalnya untuk presentasi aplikasi mobile kepada client atau hal lainnya. Bagi teman-teman yang menggunakan linux, bisa mengikuti cara berikut : 

* **Konfigurasi Android**

Langkah yang pertama, mengaktifkan fitur **Developer Options** pada perangkat Android Anda. Hal ini bertujuan untuk mengaktifkan pengaturan **USB Debugging** pada Andoroid. Untuk mengaktifkannya, **Settings > About Phone > Android Version.** Tap sebanyak 7 kali pada Android version, maka akan aktif menu Developer Options. Kemudian enable USB Debugging.

* **Install Adb dan Fastboot**

Langkah yang kedua, menginstall Adb dan Fastboot. 
```
sudo apt install android-tools-adb android-tools-fastboot
```

* **Install Scrcpy**

Untuk menampilkan layar Android di Ubuntu digunakan aplikasi utility bernama scrcpy yang dikembangkan oleh *Genymobile*, perusahaan yang sama yang mengembangkan emulator _Android Genymotion_.
```
sudo apt install scrcpy
```

* **Hubungkan Android ke Linux**

Langkah selanjutnya adalah hubungkan ponsel Android ke Ubuntu dengan menggunakan kabel USB.

* **Jalankan scrcpy**

Selanjutnya, jalankan scrcpy melalui terminal
```
scrcpy
```
Jika sukses, akan terbuka window aplikasi scrcpy dan menampilkan layar Android Anda. Selamat mencoba, yah!
A quick tutorial on using JSON-simple parsing JSON documents in java
Published: 2021-03-02 17:21:46

---
title: A quick tutorial on using JSON-simple parsing JSON documents in java
published: true
description: This simple tutorial will show you how to parse JSON in java using JSON-simple from Google. JSON-simple is a bit old now but very stable and tested by large and small companies. I use this framework every day, so making a tutorial was a no-brainer.
tags:
cover_image: https://i.ytimg.com/vi/TwxYNwkZ8Vs/maxresdefault.jpg
---

{% youtube TwxYNwkZ8Vs %}

This simple tutorial will show you how to parse JSON in java using JSON-simple from Google. JSON-simple is a bit old now but very stable and tested by large and small companies. I use this framework every day, so making a tutorial was a no-brainer.
Create your first Netlify Serverless Function (video)
Tags: serverless, netlify, tutorial, javascript
Published: 2021-03-02 17:19:35

Server-less functions are essentially server-side functions that are hosted on a third-party service. They are great as they essentially mean we can run them on someone else's server! All with the benefit of writing them in our own projects where the frontend code lives.

Netlify lets you deploy serverless Lambda functions without an AWS account, and with function management handled directly within Netlify. Your serverless functions are version-controlled, built, and deployed along with the rest of your Netlify site, and we will automatically handle service discovery through our built-in API gateway. This eliminates overhead and brings the power of Deploy Previews and rollbacks to your serverless functions.


We are going to build our first Netlify Serverless Function with 3 easy steps:

Step 1: Installing the Netlify command line interface
Step 2: File setup: so creating a directory to store your functions and writing a configuration file
Step 3: Learning the syntax

If you would like to use Netlify Functions in a real working example, please visit my Tik Tok Clone Video, in which we use them along with DataStax.

Other links:
If you would like to buy me a coffee, well thank you very much that is mega kind! : https://www.buymeacoffee.com/aniakubow

In this video I use TabNine as my A.I autocompletion tool. You can download it for free here: http://bit.ly/tabnine-free

Sign up for weekly coding tips from my newsletter partnership: https://bit.ly/JS-tips

You can also find me on:
Twitter: https://twitter.com/ania_kubow
Instagram: https://www.instagram.com/aniakubow

{% youtube n_KASTN0gUE %}
How To Backup Your VS Code Extensions And Settings
Tags: vscode, backup, bash, linux
Published: 2021-03-02 17:14:11

Backup your Visual Studio Code extension list and configuration files using Linux terminal.

Having the same working environment across multiple machines is always a good thing. This might be a case for your system configuration files (dotfiles) and your development tools alike. What I'm going to show you is a simple script that can help with the task of backing up your Visual Studio Code settings and extensions for use on your secondary PC, virtual environment or even your computer at work.

# Setting up the backup
For this article, I'm going to suppose that you have VS Code already installed on your system and want to backup the settings and extensions you've spent some of your precious time setting up. We'll be using the old trusty Linux terminal magic and VS Code's command line utility *code*.

Our basic command for exporting the list of extensions is going to look like this:

```
code --list-extensions | xargs -L 1 echo code --install-extension
``` 

The *code --list-extensions* command exports the list of installed VS Code extensions which we then pipe into xargs, this transforms each extension's name into an extension install command. The output of this command looks like this:

```
code --install-extension anseki.vscode-color
code --install-extension autsenc.laravel-blade-spacer
code --install-extension Dart-Code.flutter
``` 

As you see we've successfully transformed the extension names to installation commands via xargs. You can output these into a file like this:

```
mkdir /home/$USER/code-backup && cd /home/$USER/code-backup
code --list-extensions | xargs -L 1 echo code --install-extension > ext
``` 

Now we also need to export the configuration files. These usually reside in your .config directory. The config files are saved in JSON format, so to back these up, you would simply tar them and save them somewhere in the cloud. Alternatively, you could push these into a Git repo.

```
cd /home/$USER/.config/Code/User
tar -czf code-config.tar.gz *.json
mv code-config.tar.gz /home/$USER/code-backup
```

In your code-backup folder, you should have your config files in a tar archive and your extension install script as *ext*. If you want to restore these on another machine, you'd just copy the code-backup directory's contents over and reverse the process shown above (that is, untar the config files into VS Code config directory and run the *ext* script)

# Wrapping up
This was just a basic example of backing up your files. If you don't fancy writing backup scripts, you can check out my own full and a little enhanced implementation of this backup workflow over [here](https://github.com/Loupeznik/utils/blob/master/backup_utils/vscode-backup.sh). There is also a VS Code extension for synchronizing your settings called [Settings Sync](https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync) that synchronizes everything for you into a GitHub Gist.
Page Transition Using GSAP & Barba
Tags: javascript, html, 100daysofcode, css
Published: 2021-03-02 16:59:46

the day 72 of challenge #100DaysOfCode 

Page Transition Using GSAP & Barba

Demo : https://page-transitionjs.netlify.app/index.html

Code : https://github.com/saidMounaim/100DaysOfCode/tree/main/Day72
Creating a Github comment from Netlify
Tags: javascript, github, netlify
Published: 2021-03-02 16:58:10

Using [octokit](https://octokit.github.io/rest.js/v18) its possible to interact with Github from CI pipelines.  The example below adds a comment to a PR.

```javascript
const {
  env: { OWNER, ACCESS_TOKEN, REPOSITORY_URL, REVIEW_ID, PULL_REQUEST },
} = require('process');

function init() {
  const { Octokit } = require('@octokit/rest');

  const octokit = new Octokit({
    auth: ACCESS_TOKEN,
  });

  return {
    createComment: async (comment) => {
      const config = {
        owner: OWNER,
        repo: REPOSITORY_URL.split('/').pop(),
        issue_number: REVIEW_ID,
      };

      await octokit.issues.createComment({
        ...config,
        body: comment,
      });
    },
  };
}
```

And here's how you might use that in a Netlify plugin.
```javascript
module.exports = {
  onSuccess: async () => {
    const { createComment } = initialiseGithub();
    await createComment('The Netlify build has succeeded');
  },
  onError: async () => {
    const { createComment } = initialiseGithub();
    await createComment('The Netlify build has failed');
  },
};
```
March LeetCoding Challenge 2021 — Day 1: Distribute Candies
Tags: algorithms, 100daysofcode, computerscience, programming
Published: 2021-03-02 16:57:31


## **Problem Statement**

Alice has n candies, where the ith candy is of type candyType[i]. Alice noticed that she started to gain weight, so she visited a doctor.

The doctor advised Alice to only eat n / 2 of the candies she has (n is always even). Alice likes her candies very much, and she wants to eat the maximum number of different types of candies while still following the doctor's advice.

Given the integer array candyType of length n, return *the **maximum **number of different types of candies she can eat if she only eats *n / 2 *of them*.

**Example 1:**

    **Input:** candyType = [1,1,2,2,3,3]
    **Output:** 3
    **Explanation:** Alice can only eat 6 / 2 = 3 candies. Since there are only 3 types, she can eat one of each type.

**Example 2:**

    **Input:** candyType = [1,1,2,3]
    **Output:** 2
    **Explanation:** Alice can only eat 4 / 2 = 2 candies. Whether she eats types [1,2], [1,3], or [2,3], she still can only eat 2 different types.

**Example 3:**

    **Input:** candyType = [6,6,6,6]
    **Output:** 1
    **Explanation:** Alice can only eat 4 / 2 = 2 candies. Even though she can eat 2 candies, she only has 1 type.

## **Solution**

Here we have to find the maximum number of different types of candies that can be eaten by following the constraints. The solution is pretty simple.

At first, we will calculate the total number of different candies. If this number is less than total amount of candies/2 , we can directly return it. If it is greater than return total amount of candies/2 because they will be different.
{% gist https://gist.github.com/sksaikia/66e7c2f871d4ab91c2b52d6f6af07503.js %}
Time Complexity: O(n), n is the array size

Space Complexity: O(n), n is the array size

The code can be found here
{% github sksaikia/Leetcode %}
Find dead code in JavaScript/CSS projects
Tags: javascript, css, maintenance
Published: 2021-03-02 16:47:47

Here are some techniques that I use to find unused code to delete so I keep my projects healthy.

# ES Modules

The following modules can find unused files and `export` statements:

- https://www.npmjs.com/package/find-unused-exports
- https://www.npmjs.com/package/unimported

They all have CLI that can be invoked via `npx`. They require little to no configuration. They don't depend on any sort of bundling tools, so they can be used in most JS projects.

I find the detection reliable. In the worst-case scenario, a bundler can detect when a file or an export is missing at build time.

# ESLint

The following ESLint rules help me finding unused code:

- https://eslint.org/docs/rules/no-constant-condition
- https://eslint.org/docs/rules/no-unused-vars
- https://eslint.org/docs/rules/no-unreachable

It's safe to delete everything that ESLint has detected. The configuration `"eslint:recommended"` enables those rules.

## CSS

For stylesheets, I use this module to find unused CSS selectors:

- https://www.npmjs.com/package/purgecss

I assume the reliability depends on the flavor of your code. I used it in AngularJS projects and got a couple of false positives. However, it does help me to identify which areas of the codebase have been neglected.

# node_modules

_Based on my experience and understanding of `package-lock.json` using npm v6_, re-creating the lockfile (without necessarily updating `package.json`) can tidy the dependency tree of a project:

```sh
rm -rf node_modules package-lock.json
npm install
```

Installing modules starting from `package.json` will get you the most updated dependencies (both direct and transitive). When you add or update modules of a project, transitive dependencies are not always updated since they can still satisfy the new constraints. So updating everything may dedupe packages as the likelihood of shared modules increase.

Re-creating a lockfile is risky. It is worth reviewing the diff to understand which packages have changed.
UI Dev Newsletter #46
Tags: webdev, html, css, javascript
Published: 2021-03-02 16:46:35

- [The WebAIM Million](https://bit.ly/37XmTxW)
WebAIM shares the annual accessibility analysis of the top 1,000,000 home pages.


- [What the heck, z-index??](https://bit.ly/2O8zc3m)
Josh Comeau explores stacking contexts, one of the most misunderstood mechanisms in CSS.


- [JavaScript Debounce Example – How to Delay a Function in JS (ES6)](https://bit.ly/3uHUrK7)
Ondrej Polesny explains all about debounce function in JavaScript and how to create it.


- [Hiding Content Responsibly](https://bit.ly/3e0FVar)
Kitty Giraudel shows all the ways to hide something through HTML or CSS and when to use it.


- [Barebones CSS for Fluid Images](https://bit.ly/3b0oh4O)
Zach Leatherman explores how CSS properties width and max-width interact with width, height and scrset attributes.


- [Finally, a CSS only solution to :hover on touchscreens](https://bit.ly/3e9qz3J)
Mezo Istvan explores recent CSS L4 Media Queries to distinguish touchscreen devices.


- [The Very First CSS Report About CSS File Sizes and File Count](https://bit.ly/3kyd7aq)
Silvestar Bistrović shares how and why CSS Auditors started and how they published the first CSS report about file sizes in FPL.


- [Fontjoy](https://bit.ly/3r6Idsq)
Generate font pairings in one click.



Happy coding!

[Subscribe to the newsletter here!](https://bit.ly/34155z3)
Design Apps Training Exercise version Mobile
Tags: android, mobile, design, ui
Published: 2021-03-02 16:44:55

### Start Page
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jxsfsfqsy55vm692ec3k.png)
### Login
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mfl52e1uqk7kmxlfklqs.png)
### Register 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/afff17wveplu77ssspk5.png)
### Dashboard
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l4g80xed4ch3pq6qe09z.png)

This design is not finished yet. Please advise me. Thank you!
Tricks with less
Tags: howto, cli
Published: 2021-08-09 15:55:13

---
title: Tricks with less
published: true
date: 2021-03-02 16:41:00 UTC
tags: howto, cli
canonical_url: https://jay.gooby.org/2021/03/02/tricks-with-less
---

[`less`](https://linux.die.net/man/1/less) is one of those utilities I use day in and day out, and it's easy to forget that it has some [really powerful features](https://unix.stackexchange.com/questions/31/list-of-useful-less-functions).

## Case-insenstive searching
Nine times out of ten, I `less` a file and then start finding lines using the `/` command. You can make this case-insentive if you enter `-I` and hit return - you'll see a prompt saying `Ignore case in searches and in patterns  (press RETURN)`

Then when you search using `/` or `?` you can be confident that you won't miss something due to case sensitivity.

## Filtering
Even more useful is filtering; you can strip out all the lines you don't care about by typing `&` - you'll get a `&/` prompt where you can enter your filter text. Say you have an nginx access log:

```
107.174.242.123 - - [02/Mar/2021:05:15:07 -0800] "GET /2021/01/04/hello-2021 HTTP/1.1" 200 7073 "https://jay.gooby.org/" "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.18 Safari/537.36"
104.199.125.198 - - [02/Mar/2021:05:15:33 -0800] "HEAD / HTTP/2.0" 200 390 "https://t.co/Pp644lxwd6" "-"
64.225.34.92 - - [02/Mar/2021:05:16:16 -0800] "GET /feed.xml HTTP/1.1" 200 13370 "-" "Feedbin feed-id:2056147 - 2 subscribers"
40.77.167.97 - - [02/Mar/2021:05:24:34 -0800] "GET /robots.txt HTTP/1.1" 200 4785 "-" "Mozilla/5.0 (compatible; bingbot/2.0; +http://www.bing.com/bingbot.htm)"
64.225.34.92 - - [02/Mar/2021:05:26:56 -0800] "GET /feed.xml HTTP/1.1" 200 13370 "-" "Feedbin feed-id:2056147 - 2 subscribers"
13.66.139.48 - - [02/Mar/2021:05:29:23 -0800] "GET / HTTP/1.1" 200 7706 "-" "Mozilla/5.0 (compatible; bingbot/2.0; +http://www.bing.com/bingbot.htm)"
```

You can hide anything that isn't a HEAD request by typing `&` and then at the `&/` prompt enter `HEAD`

```
104.199.125.198 - - [02/Mar/2021:05:15:33 -0800] "HEAD / HTTP/2.0" 200 390 "https://t.co/Pp644lxwd6" "-"
```
## Use `less +F` as a replacement for `tail -f`

How many times have you been tailing a file with `tail -f` and then wanted to search for something, so you end up quitting the tail and then `less`ing it instead? I used to do this all the time, until I discovered that `less` has a tail mode. Use it like this:

`less +F /some/file`

You can ctrl-c to exit the tailing mode and then use all the above tricks to filter and search, and then when you're done, press shift-f to go back to tail mode.