teleren/devto huggingface dataset:
How to swap JS variables with destructuring
Published: 2021-03-27 21:53:46

This swap trick for some reason always borns that phrase in my mind: 'Listen, son, you know there is a couple of techniques for swapping and they look correct, readable etc. - but now Dad will show you the old trick...'

The task is super-simple - just to swap two variables values

Usually it requires some temporal variable as a storage while you do your `let a = b;`
```javascript
let a = 1, b = 2, temp = a;

a = b;
b = temp;
```

So, in ES6 we've got **Array Destructuring** - simple thing for allocation some array elements as variables in one line of code:

```javascript
[firstElem, secondElem] = [1, 2, 3, 4]; //variables for 1 and 2
```

Example above don't require to create the variables before destructuring operation, but on the other hand no one tells it's forbidden:

```javascript
let a = 1;
let b = 2;

[a, b] = [2, 1];
```

And that really makes the whole trick, instead of tempo variable, we can use array to place our variables in reversed way:
```javascript
[a, b] = [b, a];
```

This is not really just wins you one line of code, but might conceptually be a better solution, when you need to do some other operations with variables

```javascript
[a, b] = [b, a].map(item => item * 2)
```

####That's it, thank you for reading, the swapping example will play some role in my next articles so consider it small teaser to future posts
What do you call a person who does full-stack dev, DevOps, UX design, product design and everything else?
Published: 2021-03-27 21:41:27

### "A Single Parent?"

To the software you're building, you are basically a single mom or dad.

> "I came up with the product and designed the logo, branding, the landinage page, and UI. Then I designed the UX and did some user testings. Then I coded the frontend, backend, then some scripts to deploy them. I made Youtube videos and Instagram posts to promote it. Tomorrow morning, I have a sales Zoom call. I hope they buy it. I'm like a single mom, here."

But it sounds fun but not enough. We need something else that sounds more professional.


### "A solopreneur?"

But anybody can be a soloprenuer and don't have to work on a load balancer.


### "A person who is not good at anything."

Haha. Yes, I'm guilty. But come on.


### "A generic small startup dev?"

GSSD? I don't know. That's too long.


### "I propose Watchmaker."

I still like to call myself a craftsman. Watchmakers were the heroes of craftsmanship back in the days. 

Watchmakers designed, made and sold watches from their workshop.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6gj42sgsptelffdfm1q1.jpg)

If you put a computer in front of that guy in the picture, I won't be able to distinguish myself from him.

We are essentially the digital watchmakers.

Yeah, let's call us watchmakers.
Summary of what Happens When You Type a URL Into Your Browser
Tags: performance, webdev, beginners
Published: 2021-03-27 21:23:00


Have you ever wondered what happens behind the screen when you enter a URL into your browser? Well, I was just as curious a few days ago and decided to look it up. Here’s a quick summary of what I found.

**Step 1** — When a URL is typed into a browser, the browser searches locally for the domain name IP address in the Domain Name System (DNS). The search is done as follows:
* First, the browser cache is searched.
* Then the Operating System (OS) cache is checked.
* Then the router cache is checked.
* Lastly, the Internet Service Provider(ISP) cache is searched.

**Step 2** — After the browser has received the domain name IP address, it connects to the server using TCP protocol.

**Step 3** — Then, the browser sends an HTTP request to the server.

**Step 4** — The server sends an HTTP response back to the browser.

**Step 5** — The browser renders the response eg HTML.

**Step 6** — The browser then sends subsequent requests as needed to the server to get the embedded links, javascript, images in the HTML and then repeats steps 3 to 5.

This is all there is to it.

If you found this article helpful, please leave a heart or a comment. If you have any questions, please let me know in the comment section.

Also, don’t forget to follow me for more articles. Thank you.
My website is open-source w/Gatsby!
Tags: gatsby, blog
Published: 2021-03-27 20:53:22

I build my homepage with [gatsby](https://www.gatsbyjs.com/ "gatsby") ([starter-blog](https://www.gatsbyjs.com/starters/gatsbyjs/gatsby-starter-blog "starter-blog")). The repository is source code for [beratbozkurt.net](https://beratbozkurt.net/ "beratbozkurt.net")

## Features

- Blog post with markdown
- Show your favorite projects
- Share your photos with flickr
- Dark mode
- Webmention.io support

## Reach to repo

You can reach the repo and more details on my repo. https://github.com/berat/homepage
SvelteKit is in public beta
Tags: svelte, javascript, sapper, webdev
Published: 2021-03-27 20:38:41

After five months and hundreds of commits, you're finally invited to try out the SvelteKit beta. Starting a new project is easy:

```javascript
# create the project
mkdir my-app
cd my-app
npm init svelte@next

# install dependencies
npm install

# start dev server and open a browser tab
npm run dev -- --open
```
You'll find documentation at [kit.svelte.dev/docs] (https://kit.svelte.dev/docs). The source code is available at [github.com/sveltejs/kit](https://github.com/sveltejs/kit). Issues and pull requests are disabled while Svelte Team finishes getting all house in order, but they'll be making it fully open in the near future.

Details on easy deployment to Vercel, Netlify, Begin or as a node app or a static site at [kit.svelte.dev/docs#adapters](https://kit.svelte.dev/docs#adapters). 

If you have a [Sapper](https://sapper.svelte.dev/) app that you'd like to migrate to SvelteKit, you'll find instructions at [kit.svelte.dev/migrating](https://kit.svelte.dev/migrating). 

You can find more details and the official Svelte Team and Rich Harris announcement at [SvelteKit is in public beta](https://svelte.dev/blog/sveltekit-beta).

*Photo by <a href="https://unsplash.com/@kerenfedida?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Keren Fedida</a> on <a href="https://unsplash.com/s/photos/crowd-sun?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>*
GitHub Cheatsheet is for You
Tags: technology, cheatsheet, github, oscheatsheet
Published: 2021-04-02 18:36:27

---
title: GitHub Cheatsheet is for You
published: true
date: 2021-03-27 20:14:46 UTC
tags: Technology,cheatsheet,github,oscheatsheet
canonical_url: https://centocode.com/github-cheat-sheet/
---

![Github cheatsheet](https://centocode.com/wp-content/uploads/2021/03/8341g68g1v7y.png)

you can clone this repo from github: 
[Github Link](https://github.com/sunanda35/cheat-sheets/blob/master/GitHub%20cheat%20sheet.md).

You can also find many other cheatsheet like docker, os etc from this git repo:
[Cheatsheet repo](https://github.com/sunanda35/cheat-sheets)



The post [GitHub Cheatsheet is for You](https://centocode.com/github-cheat-sheet/) appeared first on [CentoCode.com](https://centocode.com).
Google URL inspection tool is not the same as Page Speed Insights
Tags: google, seo, bots
Published: 2021-03-27 19:58:58

---
title: Google URL inspection tool is not the same as Page Speed Insights
published: true
description: 
tags: Google, SEO, bots
//cover_image: https://direct_url_to_image.jpg
canonical_url: https://www.echowaves.com/post/google-url-inspection-tool-is-not-the-same-as-page-speed-insights
---

I already blogged about the importance of [always inspecting your Single Page App with Google URL Inspection tool](https://www.echowaves.com/post/always-use-google-s-url-inspection-tool-when-launching-a-new-site) . Here is another interesting thing I recently discovered while troubleshooting SPA issues.

Unfortunately I have forgotten my own advice and stopped using the **URL Inspection Tool** after every release. Instead, I've been using another tool called **Page Speed Insights**, which also comes from **Google developer tools** and can be found here:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1lhqkho7yi5q15agb7vf.png)

The tool is actually pretty cool -- shows you a lot of information about what's wrong with your SPA and gives you practical advice how to correct the issues. Thanks to this tool I was able to get the *Page Load Score index* of my [What I Saw](https://www.wisaw.com) app to 98, which is excellent and should have tremendous impact on SEO -- exactly what I wanted:

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

It even shows how your SPA is rendered by Google (see on the right side of the previous screenshot, it's kind of small, but you can get an idea). And this is what lulled me into believing that everything is OK with my App and that it looks perfectly fine to the **Google crawler** as well. Was I wrong? Yes. 

After couple of weeks of optimization effort and countless releases, which, I thought, were improving my app, I tried to use Google **URL Inspection tool** again, and was shocked to see the following result:

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

As one can see -- the page looks broken. It took me couple of hours to figure it out. It looked fine in every type of browser I tried on desktop and mobile. But every time I ran it through the Google **URL inspection tool**, the result was consistent -- the page looked all messed up. Turns out I had explicitly specified a height value in the CSS style for a `<div>` that wraps the `<img>`  tag. After removing it from my code, everything started to look as it should:


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

Why would Google use different rendering engines for the **URL inspection**  and for the **Page Speed Insights** tools? I'm sure they have a good reason. In the meanwhile, I use both tools after every release -- this is the only way to make sure your page is fast to load and looks beautiful to your users, as well as to the web crawlers.
Professional project implementation skillset
Tags: designthinking, remotecommunication, projectmanagement
Published: 2021-03-27 19:38:27

It takes a consistent collaboration and a detailed and clear plan to build a project that addresses a certain problem in an adequate manner and convenient time. Below I am going to share with you how to use the design thinking approach and communication skills for a better project implementation plan.

The first step is a thorough understanding of the problem you're trying to solve. This involves getting in touch with your customer and empathetically putting yourself in their shoes, conducting numerous researches, and deep analysis on the details of the challenge they are facing. This facilitates generating great creative solutions ideas which the next step. The product management team, UI/UX designers, and developers get together with all information gathered in the first step and use them to tackle the challenge with multiple ideas.

Subsequently, prototyping and testing come in place to find accurate solutions from the previously generated ideas. Customers provide their feedback and the product is readjusted accordingly.   


Moreover, communication is a major key since we have different personas in product development from managers, designers, and developers. Therefore the best communication practices should be taken into consideration with a high priority. Preparing ahead of time for the meetings is crucial. Ensuring stable connectivity, setting up an undistractable environment, minding body gestures and postures and voice comfortability helps to have smooth and organized virtual calls.  

In conclusion, while developing the real estate app, we used the design thinking approach to explicitly understand what we were going to develop and how we were going to do it in a short period of time. Also, we applied professional remote communication tips to have well-organized zoom calls that would save us time to write code and build cool features. This proves that the aforementioned approach and best practices are profitable.
Sinatra Where Coders Are Found
Published: 2021-03-27 19:11:57

So this is it, already my second project. This project was definitely way different than my last one but in such an amazing way. This project made me realize how much I love coding and pursuing my career as a software engineer. This project consists of a series of workouts a user can review as long as the individual is logged in. The individual at the start of the project has two options one to log in and one to create an account. If the user does not have an account he/she will not be able to use any functionalities of the website even if they try to manually type in the endpoints. Once the user has created their account they'll be able to go into the site and be able to course through the pre-installed workouts and read the description so the user can be informed on how the exercises are done. If the user would like to create their own workout they'll have the full ability to add and edit the custom workouts! and the great part about this is that it'll only be shown to their specific workout page and not any other user who has created one as well. One of the biggest challenges had to be getting the security of the site full proof and not having any bugs where the user can delete my whole database or the pre-saved workouts I provided for the user, but with a little bit of patience, I managed to understand where I was going wrong and update my code to fix it. Furthermore, this project did not only help me build my skills in programming but taught me the importance of being detailed and precautions so my site won't be faulty and put my site and other user's information at risk.
How I kicked sleeping to meet deadline!
Tags: challenge, todayilearned, watercool, writing
Published: 2021-03-27 18:50:54

_9:00 AM or 10:00 PM, my bedtime._
Yeah, I sleep early but I wake up early too, _5:00 AM_. 
It’s better to sleep __6__ to __8__ hours, that’s what doctors say. 
> The beginning of health is sleep.

#### Well, what about meeting deadlines?  

Something that builds trust in people is keeping promises you make with them, promises begin with deadlines.
If you can’t meet me at the right place in the right time, I can’t trust you will deliver my money to someone I send you to.  

I had a deadline, to be presenting a __demo__ in __4 days__ and I lost _1_ because I forgot my cable at the office.  

I tried to meet my deadline though it was tough with only __3 days to work__.  

But here is what I learned from that experience:  

> 1. First intend to meet your deadlines. (Don’t plan to postpone)
2. Eat your ugliest frogs first. (Begin with the most challenging tasks)
3. Ask for a help. (My friend @niyodusengaclement helped me a lot)
4. Don’t panic. (Just take it is, you are not God, you will do what’s just possible)
5. Prepare in advance. (Don’t learn to dance at the show time)  

Well, I was intended to meet my deadline, _that’s why I spent whole night working to meet it_.  

It was amazing how I spent __24 hours + 1 day__ working straight and I was just me (Super)  

But I _can’t_ wish to spend other nights.
Instead, I will make sure I will meet my deadlines without that hardship, by preparing myself in advance like _studying things earlier and having all requirements_.  

Don’t work over night. Sleep early, wake up early. __"Work is half of health"__. _(But no life without work)_  

Again, my thanks goes to [Awesomity Lab](https://awesomity.rw/) and [Code of Africa](https://www.codeofafrica.com/EN).
Let's talk RESTful Routes
Tags: coding, http, crud, mvc
Published: 2021-03-27 18:34:49

While starting on my Sinatra project I was literally lost on my routes felt like I was inside a maze wandering around without finding an end. here where I realized I need to go back to my reading and review what I had learned in the lessons. join me and let's figure it out together the way out of this maze.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3orh89g1709ibb6pgryz.png)

Let's start with what is REST? (Representation State Transfer) is an architectural style for defining our routes. It is a way of mapping HTTP routes and the CRUD functionalities. then what are Routes? are the code that is responsible for listening and receiving requests and then deciding what to send back. and for last what is CRUD? when building an application, we want to provide the four basic types of functionality. There must be a way to Create, Read, Update, and Delete resources.

for example, The internet would be a really confusing place without a convention for how to handle URLS - to delete an Instagram photo might be www.instagram.com/delete-this-photo, but Twitter might be www.twitter.com/remove-this-tweet. Without a specific convention to follow, it would be hard to create new content, edit content, and delete it. this is where RESTful conventions come in, to provides a pattern where users and developers can consistently manipulate data and be on the same page.

The 7 RESTful routes. let's use my code routes as an example,

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1ef0mdvlymygct4cxygq.png)

I also noticed that browsers behave a little strangely as it relates to PUT, PATCH and DELETE requests, in that they don't know how to send those requests.so in order to get them to send we need to hide the request inside a Form, that delete and edit need to be submitted via POST requests. see an example below.



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


the form must include a hidden input field that will submit our form via delete. The second line above is what does this for us.


These 7 routes will get any web app started. You’ve got all the basics to use CRUD actions and the RESTful routes to create, read, and manipulate data.


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

By following this pattern, you don’t have to reinvent the wheel every time you build a new CRUD app. The routes and method names have already been decided is like following line exits inside the maze that someone already left behind for us to follow that way we can easily go in and out without getting lost. 

thank you for joining me and together we were able to find the exit to start coding!
Yummyplan🍞📅 got some updates!
Tags: showdev, webdev, vue, javascript
Published: 2021-03-27 18:30:36

A few weeks ago, I launched Yummyplan, a meal planning app for an entire week. But as with every project, its life time has only just started. Here's what's new and what has changed:

# All the updates

## New domain🚀

Instead of the github.io domain, Yummyplan is now available on https://yummyplan.app/ - easier to memorize and type.

All old links will redirect, but there might be some issues with localStorage not being able to recover your data, so, if you installed the PWA, make sure to download your data in the Settings first.

## More accessibility💙: Spanish translation + OpenDyslexic

Thanks to awesome contributors [OscarRivasGonzalezProg](https://github.com/OscarRivasGonzalezProg) and [josevill](https://github.com/josevill), Yummyplan is now also available in Spanish.

Also, the settings now offer the option to switch the entire Yummyplan (and its downloads, such as grocery list and meal plan) to OpenDyslexic.

## Ingredient categories and grocery list download📥

The grocery list now groups items by their category: Fruits, veggies, beverages, meat/fish, baking supplies and some more categories are available. This aims to help users organize their grocery trip even faster.

Also, the grocery list can now be downloaded as PDF, allowing for better sharing or printing.

## Ticking off✔️ grocery items

The grocery list now allows you to tick off items that you don't need to buy (got it at home already, a friend will bring you some of theirs, you expect a delivery with it, ...). Those items are then excluded from the grocery list download to make sure you don't accidentally buy it anyways.

## Searchable ingredient select when editing meals🔍

We had the issue ourselves at home: We have nearly 150 different ingredients in our list. Searching those for the one's we need can be tedious, so vue-search-select was added to the app to make adding new meals a little less time-intensive.

## Several bug fixes🐛

There were a few bugs, some of them related to installing the PWA on Firefox, some of them related to the drag&drop feature of the week plan.

## Some UI updates and the newest version of Tailwind👁️

User [Reaper](https://dev.to/barelyhuman) suggested to use a font that's more subtle and makes the design look a lot nicer. Thank you for this! Also, a Tailwind update and some smaller changes to the frame make the app look "well-rounded" (not in a literal sense, though)

# Wait, what's Yummyplan?

In case you haven't heard about it yet, you can read up a bit more about it here:

{% post thormeier/yummyplan-an-app-to-plan-meals-for-an-entire-week-5f41 %}

I hope that those updates make Yummyplan even more useful. Have a nice weekend and thank you for reading!
Raspberry Pi Setup
Tags: raspberrypi
Published: 2021-03-27 18:24:17

### 1. Install Operating System on SD Card
The most straight forward way to install any Operating System on your Raspberry Pi is through the [official Raspberry Pi Imager](https://www.raspberrypi.org/documentation/installation/installing-images/README.md). It comes with all the tools needed to prepare and flash an SD card with the Operating System you want to install. 

### 2. Enable SSH access
To enabled SSH we need to add an additional empty file called `ssh` to the SD card's root directory after is has been flashed with the image.

```sh
touch ssh
```

### 3. Enable Wifi
To enable Wifi create a file in the root of boot called: `wpa_supplicant.conf`. Then paste the following into it:

```sh
country=US
ctrl_interface=DIR=/var/run/wpa_supplicant GROUP=netdev
update_config=1

network={
    ssid="NETWORK-NAME"
    psk="NETWORK-PASSWORD"
}
```

### 4. Eject the micro SD card
### 5. Boot the Raspberry Pi
After booting up your device, you can connect to it via SSH by using its IP address.

```sh
ssh pi@[Raspberry Pi IP address]
```

The default username is `pi` and the standard password is `raspberry`.

It's highly recommended to change the password on the first connection. You can do this and configure many other useful things in the handy Raspberry Pi Config tool:

```sh
sudo raspi-config
```

### 6. Update and Upgrade
Start by updating and upgrading the system. This ensures you install the latest version of the software.
Open a terminal window and run the command:

```sh
sudo apt-get update && sudo apt-get upgrade
```

### 7. Assign the .local Domain to Your Raspberry Pi
If you’re using your Raspberry Pi to host anything on your network, you might want to assign it a `.local` domain. With this, you’ll immediately be able to access your by a domain rather than remembering its IP address.

If you create a `.local` address for your Raspberry Pi you’ll be able to access your Pi using a simple web address.

To do this you need to install Avahi Daemon on your Raspberry Pi:

```sh
sudo apt-get install avahi-daemon
```

Once the installation process is complete, you don’t even have to reboot the device. Your Raspberry Pi will begin immediately recognizing local network queries for its hostname (by default “raspberrypi“) at raspberrypi.local.

### 8. Install git
Sooner or later you will most likely end up needing git, so you can install it now.

```sh
sudo apt install git
```

### Disclaimer
This may not be the best way to do it, but it is the way I use and it works for me 😊

This article will be updated as soon as something changes in this process.

If you do something different and you think it is better, do not hesitate to let me know.