teleren/devto huggingface dataset:
VS Code on my Phone (How I did it)
Tags: webdev, tutorial, beginners, vscode
Published: 2020-12-03 02:54:49

I setup vscode on my mobile and started coding. Normally programming like this is only possible on a desktop. 

But there is a great way to start doing HTML, CSS, JS right on your phone, tablet, via WiFi or Internet!

This was fun!

This was used with the package: *Code Server*
https://github.com/cdr/code-server

It can be done with literally two lines of code:
Installation:
```
curl -fsSL https://code-server.dev/install.sh | sh
```
Bring it online:
```
code-server --link
```

Of course, if you don't have a physical machine, you can still run this up on a free Amazon and Google cloud platform on the free tier. This allows you to run VS Code on iPad, iPhone, Android,  etc.

I have a full video that is covering the whole setup if you're interested.

{% youtube UFxVvrrufsA%}

Here is the Twitter post which went off with lots of comments!!!
{% twitter 1334140600761737219 %}

## Follow and support me: 
Special thanks if you subscribe to my channel :)
* [🎞️ Youtube](https://www.youtube.com/channel/UCvM5YYWwfLwpcQgbRr68JLQ?sub_confirmation=1)
* [🐦 Twitter](https://twitter.com/adrian_twarog)

## Want to see more:
I will try to post new great content every day. Here are the latest items:
* [Adobe XD to Fully Responsive WordPress Site](https://dev.to/adriantwarog/adobe-xd-to-fully-responsive-wordpress-site-16e0)
* [Adobe XD to HTML Full Process](https://dev.to/adriantwarog/adobe-xd-to-html-full-process-ao6)
* [Full Tutorial on how to use SASS to improve your CSS](https://dev.to/adriantwarog/full-tutorial-on-how-to-use-sass-to-improve-your-css-57on)
* [Creating a Mobile Design and Developing it](https://dev.to/adriantwarog/creating-a-mobile-design-and-developing-it-5c4o)
S3E4 Learn JMeter Series - Precise Throughput Timer
Tags: webperf, testing, tutorial, performance
Published: 2020-12-03 02:51:21

Welcome to Learn JMeter Series!

In this Season 3, Episode 4, you will learn following:

🔹 Precise Throughput Timer

{% youtube 5ovDI8Hanuc %}

☑ Buy me a tea 🍵 : https://www.buymeacoffee.com/qainsights
☑ [My Blog](https://qainsights.com)
☑ [My Udemy Course](https://www.udemy.com/course/performance-testing-using-truweb)

{% github QAInsights/Learn-JMeter-Series%}
JavaScript string methods #2
Tags: javascript
Published: 2020-12-03 02:44:10

**In the name of Allah**
As we studied yesterday about indexOf() method and bracket notation in javascript today I want to teach something different that's a whole sentence that we can find separate characters index.
Here is a demo of it:
```
let greeting='Hello how are you';
//now want to find the index of how
//look when we want to find the index of how the indexOf() method //returns the first index of the string it means return the index //of h which is the first character in how string.
console.log(greeting.indexOf('how'));
//result -> 6
```
*Notice whitespace behaves as character.
Look at this example
```
let greeting='Hello how are you';
console.log(greeting.indexOf(' '));
//result -> 5
```
# How to check if a sentence contains a character
we can use indexOf() method to find if a character is available or used in our sentence.
*Notice when a character is not available in our sentence the indexOf() method returns -1 which denotes that that character isn't used in your sentence.
we can use indexOf() method to check whitespace in our password or something else.
Here is a demo we check if whitespace is available in our password or not.
```
let password='ehgjt ertr94';
console.log(password.indexOf(' '));
//result -> 5
```
as we see whitespace is in our password.
Here is the second password that there isn't any whitespace in our password.
Here is the demo:
```
let password='1234fjgjdlf';
console.log(password.indexOf(' '));
//result -> -1;
```
which implies there isn't whitespace in your password.
we can as well use length() method to check the length of our password or username. I will teach you this trick when we reach conditional statements in Javascript.
# split(separator: string | RegExp, limit?: number)
This method converts a string into an array or list.
The separator means that from which character I should split that string into an array and the second part means how many characters you want to be in your list.
As you see there is Regex which is a big title we will teach you.
Here is a demo of my claim:
```
let introduction='Hello my name is ahmad';
let stringList=introduction.split(' ');
// I targetted the whitespace it means my string should be split when the split method finds whitespace and the second part is optional which is the number of character or string to be in your list
console.log(stringList);
//result ->['Hello','my','name','is','ahmad'];
```
- we can use any other character as a separator.

Here is an example:
```
let greeting='my,name,is,kamal';
let stringList=greeting.split(',');
//here i targetted ',' as a separator.
console.log(stringList);
//result -> ['my','name','is','kamal']
```
you can experiment more on split() method.
Tomorrow I will teach you more about split() method.
See you soon.
How I code in 2020
Tags: tools, stack, editor, workflow
Published: 2020-12-03 02:18:59

---
title: How I code in 2020
published: true
description: Here's are the things I personally use to help me get work done!
tags: tools, stack, editor, workflow
---

Here's what I use on my personal computer!

## Operating System

I run [Pop!\_OS 20.10](https://pop.system76.com/) on my main laptop.

It's based on Ubuntu and it's the fastest and most productive Linux distribution that I've ever used!

## Development Tools

### [Visual Studio Code](https://code.visualstudio.com/)

My main code editor. It's has an easy to use layout, very customisable and is widely supported!

### [Git](https://git-scm.com/)

I use this for Version control

Thanks to Git, I can code features in parallel using feature branches.

If something goes wrong with my code, I can easily revert back to a working state.

### [Starship](https://starship.rs/)

I love the enhancements that it adds to my terminal!:

- Color-coding
- Developer environement information
- Current git status
- and more...

### [Firefox](https://www.mozilla.org/firefox)

Not only is it an excellent browser, I'm also a big fan of the developer tool sections available there:

- Accessibility: Makes it much easier to test for [WCAG requirements](https://www.w3.org/WAI/standards-guidelines/wcag/)
- (Web) Console: There's an option to open a side bar that let's you easily write multi-line JavaScript code.

Also, it's one of the only browsers that reads that gets the "prefers-color-scheme" value from the Pop!\_OS, (As far as I'm aware)

## Design Tools

### [Figma](https://www.figma.com/files/)

I make mockups and protoypes here before I start writign code that involves a UI.

By the way, it's **free** and works on all operating systems since it's browser-based!

<br>

I hope you've found some tools that help you with your work.
Are you applying for the co-ops or internship or full-time job in Software?
Tags: career, codenewbie
Published: 2020-12-03 02:14:49


Are you applying for the co-ops or internship or full-time job in Software?

I heard a lot of complaints about, companies don't reply or not give you any answers! Yes or No!

If you want to improve the application process speed, make sure you include or provide the below points:

1. Why are you #interested in the development or the position?

2. Must include the #numbers from your past projects! (Something interesting and eye-catching, yes it helps.)

3. Tell something #unique about you that helps to understand, you're a quick learner and enthusiastic about your work.

4. Include a personal #website, GitHub link, project links (ex. Kaggle or reference past projects) that showcase your real projects. Make sure you include a couple of them.
If you don't have one, then I believe focus and work on yourself and then apply for any position. (It'll drastically improve the processing speed and probability)

5. If you send a message on LinkedIn, #sell your story in a nice way and not PLEASE for your talent and work you've done. Proud of it!

Good Luck.


---

I have added my portfolio links for your reference. You can follow and connect me on:

[Website](https://vatsalshah.in) | [GitHub](https://github.com/vatsal2210) | [LinkedIn](https://www.linkedin.com/in/vatsalnshah/) | [Blog](https://vatsalshah.in/blog)

If you like my stuff and hate spam, I can send my upcoming articles to your inbox. One-click unsubscribe anytime — [Click here to join my newsletter](https://vatsalshah.substack.com/subscribe) 💌

If you’re feeling generous today, you can [buy me a coffee](https://www.buymeacoffee.com/vatsalshah) ☕
How to center an element in HTML using CSS Flexbox and CSS grid.

Tags: html, css, flexbox, cssgrid
Published: 2020-12-03 01:59:39

I have seen many developers struggling to center an element on the webpage using CSS. There are many applications where we want our HTML element to be at the center of the page. Usually, login or register forms are kept at the center of the webpage for a better user experience.

In this article, I will help you with two ways to place an element at the center of the page by using CSS Flexbox and CSS grid.

Consider an example where we just have a single form element in our HTML page and we have to center the same. The HTML code for this will be as below.

```
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Center Form Element</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <form>
      <h4>Login Form</h4>
      <label for="email">Email ID:</label>
      <input type="text" placeholder="Enter your Email" name="email" id="email"/>
      <label for="password">Password:</label>
      <input type="password" placeholder="Enter your your password"name="password"/>
      <button>Login</button>
    </form>
  </body>
</html>
```

Considering our body tag as a parent and form tag as a child we can center the form element by adding either of the following code snippets in our styles.css file

###Centering an element using CSS Flexbox

```
body{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
```

###Centering an element using CSS Grid

```
body {
  display: grid;
  place-items: center;
  height: 100vh;
}
```

Please note `height: 100vh` is given to make sure that the body is taking the full height of the webpage.

Happy Reading!
3 ways to add CSS to your HTML web page
Tags: html, css, style
Published: 2020-12-03 01:02:06

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1fqm0208zete2rl42r66.jpg)

You all must be aware of the analogy about HTML, CSS, and Javascript that is being made with the human body. If HTML is the bones, then CSS is the muscle and javascript is the brain of the webpage. 

There are millions of websites available on the internet, the only way for a website to stand out from others is its styling and interactivity. HTML pages without styles are just word documents getting displayed on the browser. So styles play a very crucial role in the development of any website.

Styles can be added to any HTML page in three ways: **Inline, Internal, and External**.

Let's get into the details for these three ways and how to apply the same on our web page.

**Inline CSS**

For inline styles, we use the style attribute of the HTML tags. CSS is passed as a string to the style attribute which adds the styles to the tags.

For example: If we want to make our web page background blue with inline CSS, we can write something like this:

```
<body style="background-color: blue"></body>
```
But it is a best practice to separate styles from the HTML tags that is the reason internal and external CSS comes into the picture.

**Internal CSS**

For Internal CSS, a style tag is used in which all the styles related to the webpage are added. This style tag is added in the head tag of the page so that the styles are added even before the HTML document is rendered.

For example: If we want to make our web page background as blue with internal css, we can right something like this:

```
<head>
    <style>
      body {
        background-color: blue;
      }
    </style>
 </head>
```
 
Internal CSS does its job but imagine a scenario where we have to use the same styles for more than one page. In this case, if we use internal CSS it will lead to writing the same code twice, to overcome this external CSS is being used.

**External CSS**

In external CSS we use a separate file with a .css extension where we write all our styles. This CSS file can be used by multiple webpages by using a link tag which is added under the head tag.

For example: If we want to make our web page background as blue with external CSS, we have to make changes in two files.

First, we will add all our styles to our CSS file, for our example, it will be styles.css

```
body{
     background-color: blue;
}
```

Then we will link this css file to our html file as follows:

```
<head>
  <link rel="stylesheet" href="styles.css">
</head>
```

To get more understanding of this I would suggest applying the same by creating small projects.

Happy Styling!
Different Ways of Styling With React
Tags: react, javascript, webdev, css
Published: 2020-12-03 00:04:40

---
title: Different Ways of Styling With React
published: true
date: 2020-12-03 00:03:06 UTC
tags: React,JavaScript,webdev,CSS
canonical_url: https://h.shadowtime2000.com/different-ways-of-styling-with-react
---

## Different Ways of Styling With React

There a couple different ways you can style your React components.

We will go over:

1. `style` attribute
2. Just `import`ing `.css` files
3. CSS modules
4. CSS-in-JS

### `style` Attribute

React supplies a `style` attribute you can use on plain elements. An example:

```jsx
function MyComponent() {
	return (
		<>
			<div style={{ color: "red" }}>Red div!</div>
		</>
	)
}
```

This approach is not recommended because it is not as performant compared to the other options. You can [read more about it on the React docs](https://reactjs.org/docs/dom-elements.html#style).

### Just `import`ing `.css` files

**NOTE** This only works when you are using a module bundler which supports CSS.

Some module bundlers allow you to just `import` `.css` files and it will apply appropriate transformations so it is available in your app.

```jsx
import "./my-component.css";

function MyComponent() {
	return (
		<>
			<div className="my-component">This is my component</div>
		</>
	)
}
```

### CSS modules

**NOTE** CSS modules are built on PostCSS so you must make sure you bundler is configured for that.

CSS modules let you "import" your `className`s into your app and it will append a unique hash to each of them at build time to make sure they are unique.

```css
.mycomponent {
	color: red;
}
```

```jsx
import styles from "./my-component.module.css";

function MyComponent() {
	return (
		<>
			<div className={styles.mycomponent}>This is my component</div>
		</>
	)
}
```

### CSS-in-JS

CSS-in-JS is a pattern which allows you to write your CSS in JS and it will create unique hashes for those `className`s which get appended to the styles.

You can read more about CSS-in-JS [in an article I wrote](https://h.shadowtime2000.com/what-is-css-in-js).

## Conclusion

We have gone over 4 different ways to style React components:

1. `style` attribute
2. Just `import`ing `.css` files
3. CSS modules
4. CSS-in-JS
Remote working: team and company culture
Published: 2020-12-03 00:02:01

---
title: Remote working: team and company culture
published: true
description: Remote working is a matter of company and team culture, more than gadgets or moving to the beach.
tags: 
main_image: ![A team joining hands](https://dev-to-uploads.s3.amazonaws.com/i/fbkf5evwb4s0b33stjho.jpg)
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/fbkf5evwb4s0b33stjho.jpg
---
Many companies had to move remote this year 2020 due to the COVID pandemic.
But remote working is not just picking up your computer and going somewhere other than the office.
In my humble opinion, and after years of remote working, it's not as easy as that.

I'm not talking about work from home, but about the concept of remote working: 
Distributed teams across the world, different languages, cultures, timezones, work schedules, etc.

Remote working should imply a communication skills learning process.

The following are some of the things anyone working remotely should take into account:
- Communication is asynchronous, especially when team members work at a different timezone than yours. It implies the team should be organized to reduce dependencies or to tackle these time gaps.

- Meetings should be scheduled if the topic to discuss is not urgent:
Attendants will be able to prepare the meetings, reading the topics to talk about, investigate, find out if someone else should attend, etc. in advance.

- Meetings, especially daily updates, should have a fixed duration and shouldn't be exceeded. Otherwise, it's difficult to focus on the topic of the meeting.

- Reading and learning about the culture and the country of your teammates is a good idea: You will be able to understand better your teammates. And it always leads to a better, more inclusive, and diverse team.

- Physical meetings, team buildings, etc. are important to create a great company culture and to keep the teams joint.
(I know We are in a global pandemic, so this one cannot be applied now)

- A quick call is a much better idea than writing 15 comments in a pull request or a chat conversation.
And by the way, the tone of a written message is easier to be misunderstood.

Again, that's just my opinion and my experience.
Advent of Code 2020-03 with R
Tags: rstats, adventofcode
Published: 2020-12-15 20:34:11

---
title: Advent of Code 2020-03 with R
published: true
date: 2020-12-03 00:00:00 UTC
tags: rstats, adventofcode
canonical_url: https://colinfay.me/aoc-2020-03/
---

Solving Advent of Code 2020-03 with R

[Disclaimer] Obviously, this post contains a big spoiler about Advent of Code.

## Instructions

### Step 1

- The input is a map (x, y), where `.` is a square, `#` is a tree.

- We can move this way: 3 right (x + 3), 1 down (y - 1).

- The y repeats itself indefinitely.

- We start from the top left corner (coordinate x = nrow(map), and y = 1).

- We move until we’ve reached x == 1, i.e by taking nrow(map) steps.

- How many trees `#` have we met along the way?

### Step 2

Repeat this but modify the step schema.

Find the complete instructions at:[https://adventofcode.com/2020/day/3](https://adventofcode.com/2020/day/3).

## R solution

### Part one

```r
library(purrr)

n_trees <- function(
  by_x = 1, 
  by_y = 3
){
  ipt <- read.delim( "2020-03-aoc.txt", header = FALSE, stringsAsFactors = FALSE)
  # Building the path
  # x need to go from 1 to nrow(ipt), 1 by 1
  x <- seq(1, nrow(ipt), by = by_x)
  # y needs to start at 1, and go by 3 steps until we have length(x) steps
  y <- seq(1, by = by_y, length.out = length(x))
  list(
    x = x, 
    y = y
  ) %>%
    pmap_dbl(~ {
      # Which x step are we in?
      row <- ipt[..1,] 
      # If the row isn't wide enough, expand it until it is
      # There is probably a better way to do that but I'm not 
      # sure I want to spend 5 minutes trying stuff that will
      # save me half a micro second
      while(nchar(row) < ..2){
        row <- paste0(row, row)
      }
      # Split the damn thing
      row <- strsplit(row, "")[[1]]
      # look for the y, is it a tree?
      if (row[..2] == ".") return(0)
      if (row[..2] == "#") return(1)
    }
    ) %>% sum()
}
n_trees()

## [1] 278
```

### Part two

```r
data.frame(
  x = c(1, 1, 1, 1, 2),
  y = c(1, 3, 5, 7, 1)
) %>%
  pmap_dbl(~ n_trees(..1, ..2)) %>%
  reduce(`*`)

## [1] 9709761600
```
What is React Fast Refresh?
Tags: nextjs, react, blogvent, javascript
Published: 2020-12-03 17:59:15

---
title: What is React Fast Refresh?
published: true
date: 2020-12-03 00:00:00 UTC
tags: nextjs, react, blogvent
canonical_url: https://www.netlify.com/blog/2020/12/03/what-is-react-fast-refresh/
---

Hello friends, and welcome to Blogvent, day 3!

Chances are if you’ve looked at the latest React updates or Next.js v10, you’ve seen the term “Fast Refresh” thrown around. This is a new feature that doesn’t affect your users as much, _but_ it makes your developer experience much better.

React Fast Refresh replaces React Hot Loader. React Hot Loader, before, wasn’t the most perfect thing. It lived outside of React, and led to some not-ideal debugging experiences. React Fast Refresh, however, has an updated API that is faster, handles errors better, _and_ preserves state across re-renders.

So what does that mean? Let’s say that you have a simple counter component:

```jsx
import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <>
      <p>You clicked the button {count} times.</p>
      <button onClick={() => setCount(count + 1)}>
        Count!
      </button>
    </>
  );

```

And, let’s say that you hit the “Count!” button 5 times, and then you decide to add a simple change, like a new line of code.

```jsx
import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <>
      <h1>Counter Example</h1>
      <p>You clicked the button {count} times.</p>
      <button onClick={() => setCount(count + 1)}>
        Count!
      </button>
    </>
  );

```

In this example, if you were to look at your browser page before without Fast Refresh, you would have to click the button 5 times again before seeing that previous state. Now, with Fast Refresh, that count would stay at 5!

This is obviously a very simplistic example, but if you think about the possibilities of a game state, user preferences, forms, client-side navigation… there’s so many problems here that Fast Refresh solves!

It also reloads the page automatically once syntax or runtime errors are resolved, and does a full reload when you update something outside of the React tree (because it’s more deeply integrated with React itself). Keep in mind, Fast Refresh only works for function components out of the box, not class-based components.

## I wanna try it!

Check out [this repo](https://github.com/cassidoo/next-netlify-starter) if you’d like to see a Next.js v10+ starter project (which has Fast Refresh automatically enabled), or click this button below to clone+deploy a new Next.js project right away:

[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/cassidoo/next-netlify-starter&utm_source=github&utm_medium=nextstarter-cs&utm_campaign=devex)