teleren/devto huggingface dataset:
Useful VS Code extensions for Web Dev..
Tags: vscode, webdev, webpack
Published: 2020-09-20 04:29:29


## Tools

### [Color Highlight](https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight)

- styles css/web color codes in code.

![](https://rajasekharguptha.github.io/assets/images/webdvscodeextensions/color_highlight_extension.PNG)

### [Prettier Code Formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)

- You can achieve **Auto Format on Save**

- Suppports JavaScript , TypeScript , Flow , JSX , JSON\*,CSS , SCSS , Less, HTML , Vue , Angular, GraphQL , Markdown , YAML

  - Install Prettier extension and enable **Format on Save** in VS Code settings.

![](https://rajasekharguptha.github.io/assets/images/webdvscodeextensions/AutoFormatOnSave-min.gif)

### [Auto Rename Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag)

- Automatically rename paired HTML/XML tag as you change them

![](https://rajasekharguptha.github.io/assets/images/webdvscodeextensions/autorenametag-min.gif)

### [Html Css Support](https://marketplace.visualstudio.com/items?itemName=ecmel.vscode-html-css)

- Auto Completion of css ,scss classes , html attributes    
  - Class attribute completion.
  - Id attribute completion.

### [CSS Peek](https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek)

- **Ctrl+click** on class names takes to class in CSS/SCSS/LESS files

![](https://rajasekharguptha.github.io/assets/images/webdvscodeextensions/css_peek-min.gif)

### [IntelliSense for CSS class names in HTML](https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion)

- CSS class name completion for the HTML `class` attribute

![](https://rajasekharguptha.github.io/assets/images/webdvscodeextensions/css_classname-min.gif)

### [HTML Preview](https://marketplace.visualstudio.com/items?itemName=tht13.html-preview-vscode)

- Previews html as you type

![](https://rajasekharguptha.github.io/assets/images/webdvscodeextensions/html_preview.PNG)

### [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)

- Launch a local development server with **live reload** feature for static & dynamic pages.

![](https://rajasekharguptha.github.io/assets/images/webdvscodeextensions/live-server-min.gif)

## UI plugins

### [Atom Theme](https://marketplace.visualstudio.com/items?itemName=akamud.vscode-theme-onedark)

- for those who love **Atom** Text Editor Theme like me

![](https://rajasekharguptha.github.io/assets/images/webdvscodeextensions/atom_theme.png)

### [Material Theme](https://marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-material-theme)

- Cool looking theme

![](https://rajasekharguptha.github.io/assets/images/webdvscodeextensions/material_theme.png)

### [Material Icons](https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme)

- displays icons according to file extensions

![](https://rajasekharguptha.github.io/assets/images/webdvscodeextensions/material_icons.PNG)
google logo with just html & css
Tags: html, css, webdev, tutorial
Published: 2020-09-20 03:36:35

So, here's how to create the Google logo with just HTML and CSS.

First, place a `div` in your html with an `id` of `google`.
```html
<div id="google"></div>
```

Then, hop into css and input the following code.
```css
#google {
  position: relative;
  border-top: 100px solid #EA4335;
  border-right: 100px solid #4285F4;
  border-bottom: 100px solid #34A853;
  border-left: 100px solid #FBBC05;
  border-radius: 50%;
  background-color: #FFFFFF;
  width: 300px;
  height: 300px;
  padding: 0;
  margin: 10vh auto 0;
}
```
That should leave you with a circle that has 4 of the Google's color. To turn that into a 'G', input the code below.

```css
#google::before {
  content: "";
  z-index: 100;
  position: absolute;
  top: 50%;
  right: -95px;
  transform: translateY(-50%);
  width: 245px;
  height: 100px;
  background: #4285F4;
}

#google::after {
  content: "";
  z-index: 101;
  position: absolute;
  border-top: 200px solid transparent;
  border-right: 200px solid #FFFFFF;
  top: -100px;
  right: -100px;
  width: 0;
  height: 0;
}
```
Voila, you just created the Google logo using only HTML and CSS. ✌️
How to change the commit history in GitHub?
Tags: discuss, help, github, git
Published: 2020-09-20 04:06:54

I have tried `git rebase` in interactive mode to squash commits. I have also tried `git reset` in soft mode, then made a single commit. 

It seems to have changed my `git log`. But when I need to push to GitHub, It says could not push, I need to pull first due to divergent branches.

After pulling and then pushing, when I go to GitHub, I find that the **number of commits has only increased**.

How can I change the history on the commits page of a GitHub repo?

I need help !! Be the first to answer here ( in comment ) or in [Stack Overflow](https://stackoverflow.com/questions/63975540/how-to-change-the-commit-history-in-github)
Components in react🔥
Tags: react, javascript, beginners
Published: 2020-09-20 03:25:22

 React has two types of components function component and class components. The component composed together to form an upper-level component.

#Function vs class component

function components are defined as the javascript function 
where the pros parameter contains the property of the component.

```javascript
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
```

The class components are defined as the class and are extended with the react component.

```javascript
class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}
```

# Composition of the component

the component can be combined together to form an upper-level component.

```javascript
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}
```
Make the component as much as you can split it. If you do that you can reuse the component in others so split it.
hello world
Tags: hello
Published: 2020-09-20 03:21:37

"hello world" o "hola mundo", traducido al español. El primer mensaje que nos hacían generar por consola o en cada nuevo lenguaje para programar que nos disponíamos a aprender y que nuestro profesor nos recalcaba que lo escribiéramos para no caer, según él, en la "maldición del programador". Es necesario comentar que, como principiantes, el temor a contraer tal tipo de maldición sería muy nefasto para nuestra formación como profesionales TI .
De manera que, nos acostumbramos siempre a generar en primer lugar el dicho mensaje para lograr ser, en el futuro y con constancia, buenos programadores .
conforme  se avanza en esta profesión, los tropiezos y dificultades que conlleva resolver problemas , y no poder encontrar la solución pertinente, nos hacía caer en el "síndrome del impostor". 
Así es, talvez este síndrome(síndrome del impostor), sea en realidad la verdadera "maldición del programador". Por fracazar en un intento no quiere decir que seamos malos en lo que hacemos, y si lo somos, debemos de sacrificar más tiempo en perfeccionar nuestros métodos o poner mayor énfasis en la forma en que estamos procesando la información que consumimos cada día.
De cualquier modo, si de resolver problemas se trata, tan solo hay que buscar en la web, ya que no somos los primeros programadores del mundo y con seguridad le ha ocurrido a algún colega con anterioridad.
asique, a no caer ni en la "maldición del programador" ni en el "síndrome  del impostor", porque el objetivo es convertinos en un mejor desarrollador. 😉💪
Am I the only one seeing possibilities with React Nil?
Tags: discuss, react, reactnil
Published: 2020-09-20 03:14:14

---
title: Am I the only one seeing possibilities with React Nil?
published: true
description: 
tags: discuss, react, reactnil
//cover_image: https://direct_url_to_image.jpg
---

Have you checked out [React Nil](https://github.com/pmndrs/react-nil) yet? Any ideas for what you can build with it?

@kayis's posts on "Fullstack Frontend" fresh on my mind, my thoughts immediately start expanding on what I've already been doing to target multiple frontend platforms with shared codebase (React Native + React Native Web + Electron) for the last few years, in this case envisioning a subsection of shared (non-UI) React components that can also be used to lay out corresponding API endpoints, simplifying the API design process. I'm already sharing some backend logic between Node and Electron, so this just takes it a step further.
Pair Programing with vi and tmux
Tags: vim, productivity, linux, tutorial
Published: 2020-09-20 02:09:10

Working remotely is really the only way to do things moving forward.  However, it is more difficult to pair program when you are not sitting side by side at the office.  There are some nice tools out there that make this remote pair programing easier.  But they are GUIs and slow and I want speed!  So here is what I have done to pair program effectively.

## Requirements
1. [tmux](https://github.com/tmux/tmux)
2. vi or terminal based editor
3. ssh enabled box

## Setup
First only pair program with those you trust to be on your machine.

### Add users to `~/.ssh/authorized_keys`

```
command="tmux attach -t pair -r" public_ssh_key1
command="tmux attach -t pair -r" public_ssh_key2
command="tmux attach -t pair -r" public_ssh_key3
```

- **Note you might need to provide the full path to tmux here.**

### Add tmux read only toggle to ~/.tmux.conf

```
bind-key R switch-client -r
```

### Set window size so windows don't bounce in ~/.tmux.conf

```
set-option -g window-size smallest
```

### Port forward port 22
Since we are going to use vanilla ssh to pair program we need to port forward port 22 to the machine you are going to pair on.

In my case I setup a dynamic DNS using [duckdns](https://www.duckdns.org/)

### sshd_config
We need to tell sshd to use ssh keys instead of passwords
Add or update the following in `/etc/sshd_config`

```
PasswordAuthentication no
ChallengeResponseAuthentication no
```

### Setup tmux pair session
Now that things are ready to go we made it so connections can only connect to tmux sessions labeled `pair`.

This requires that `tmux new -t pair` be created before anyone can connect.

So host computer will setup the `tmux new -t pair` and the client(s) would then `ssh user@ddns.org`  Once a peer has connected they connect in readonly mode.  To toggle edit mode just `ctrl+b R`.  And again to go back to readonly mode.

There are many different ways to set this up and get running but this is the basic idea.  I have been pair programming with way for quite some time and it is very fast and low latency.

Exit the session as a client with `ctrl+b d`.  If the host closes the session all peers will be disconnected.

## Closing notes
With `tmux 3.2` or greater you can setup multipane edits.  As an example one can split panes `ctrl+b %` and when a peer connects the host can work in the pane on the left and the peer can work in the pane on the right etc.

Simply modify the command in the `~/.ssh/authorized_keys` file to look like this.

`~/.ssh/authorized_keys`
```
command="tmux attach -t pair -r -factive-pane" public_ssh_key1
command="tmux attach -t pair -r -factive-pane" public_ssh_key2
command="tmux attach -t pair -r -factive-pane" public_ssh_key3
```

## Add on fun
Have a quick read on my post about [tmux-dimming](https://dev.to/casonadams/ditch-iterm-for-alacritty-and-tmux-5ane) to enhance the pair programming experience.
Learning Regex in Javascript Part 1
Tags: beginners, javascript, computerscience
Published: 2020-09-20 01:28:20

Today I'll be discussing the intimidating regex. Regex, or regular expressions are a sequence of characters that are used to define a search pattern. The search pattern is most often used in string searches to find or replace certain sections of a string.

###**Making a Regex Object**

In javascript there are two different methods to create a regex. The first is using the constructor provided by javascript,  `new RegExp()`. Here's a quick example.

![RegExp constructor](https://dev-to-uploads.s3.amazonaws.com/i/v0p3uytoh3g8pu8udw8g.png)

The other way is by creating a literal. Here's an example.

![Literal contructor](https://dev-to-uploads.s3.amazonaws.com/i/18849vzrmckuh3ovoko1.png)

###**Regex Methods**

Javascript has four helpful methods that can be used with regex objects.
* match
* test
* replace

Match is called on a string and takes an input of a regex object. It returns an array with any characters that matched the regex.

Test takes an input of a string and returns a boolean that indicates if the string had any matches with the regex.

Replace is used on a string, takes a regex object and a string as input and returns the new string with any sections that matched the regex replaced by the specified string.

![Test cases](https://dev-to-uploads.s3.amazonaws.com/i/vti6xkazflu93lqsslxt.png)

###**Brackets, Hyphens**

If you use brackets around your regex you'll look for a single character. If you use a hyphen you'll look for anything in that range.

![Brackets and hyphens](https://dev-to-uploads.s3.amazonaws.com/i/elott7iva5dm5cawr1if.png)

###**Flags**

Flags can be added to to the end of a regex to change what is returned. In javascript the usable flags are,
* i, ignore case
* g, global match (find all)
* m, multi line

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

Thanks for reading! Next week I'll continue to go through more complex uses of regex. The code for this lesson can be found [here](https://github.com/123JackCole/Regex/blob/master/regex.js).
👋 Hi there
Tags: webdev, python, iosshortcuts, devjournal
Published: 2020-09-20 01:22:57

I’m Brandon Da Silva and this is my first post on DEV! I’m a Toronto-based web designer and developer. I’m currently working as a contractor at Manulife Canada where I focus mainly on designing and building campaign landing pages in my Digital Marketing Specialist role.

My other passions include music and photography but one overarching theme that I carry through everything is dev. Whether that’s programming a sequence into a synthesizer to make a melody or drum beat, or it’s creating a Node app to help me archive and distribute my latest photography work; I’m always using some aspect of my dev experience to help.

Some of my latest projects and hacks have involved using coding apps on my mobile devices to help automate the everyday, monotonous tasks. I’ve been using apps like iOS Shortcuts and Pythonista to make this happen.

My goal for this blog is to share some of these projects I’m working on but, I think more importantly, is to learn from this wealth of knowledge this community brings. I’m so stoked to be here and looking forward to sharing and learning with you all! 🙌

**Ask me anything!** If you wanna get to know me more, leave a comment!
variaveis em javascript.
Tags: javascript, studie, beguiner
Published: 2020-09-19 23:06:20

Comentei no meu último post que faço um bootcamp na IGTI.
 Hoje vi algumas vídeo aulas postadas sobre variável, coisa simples de como declarar variável, nada de mais,  uma coisa que tem me ajudado muito nos estudos é copiar tudo o que o professor explica. No VScode você tem a ferramenta de anotação que da para facilmente usa-la na hora de estudar uma nova linguagem.
  Todos nós sabemos que escrevendo e praticando aprendemos  com facilidade, então se você abusar dessa ferramenta na hora de seus estudos, anotar tudo vai fixar bem em sua mente e com certeza ficará cada vez mais fácil de aprender.
  Já a segunda aula foi os tipos de variável como string, inteiro, decimal, etc.
  O professor explicou detalhadamente para que serve cada tipo de variável, e como imprimir ela no terminal.
Chapter 8: My Listings Page - Django 3...2...1...Takeoff! Series
Tags: django, python, webdev, tutorial
Published: 2020-09-20 00:54:31

In this chapter, we’ll create a page where we can keep track of our listings, add new listings, edit, and delete them too.

**My Listings URL**

Open urls.py and add the following code. 

![Screen Shot 2020-09-19 at 8.44.38 PM](https://dev-to-uploads.s3.amazonaws.com/i/pc95mv1hpy9d5dyrgb1d.png)
 
We have been repeating multiple times the process of creating pages. The process will not change much, so if there’s nothing new to explain, I will just add the code and go to the next section. 

**My Listings View**

![Screen Shot 2020-09-19 at 8.45.12 PM](https://dev-to-uploads.s3.amazonaws.com/i/0ulf9dh1ikrm87jyz077.png)
 
**my_listings = Listings.objects.order_by('-list_date')**

The entire my_listings view is just a copy of the all_listings view. This is the case because we haven’t created users yet, so at this point all listings belong to one person. Once we have different users creating listings, then we’ll come back to fix this view.

**My Listings Template**

Create a template called my_listings.html in the templates folder and add the following code.

![Screen Shot 2020-09-19 at 8.46.33 PM](https://dev-to-uploads.s3.amazonaws.com/i/qlmx5b14zq92udlj9lve.png)
 
**a class="btn" href="% url 'listings:detail' my_listing.id %">View/a**

Similar to the listings page, if users want to see a particular listing in detail, we can point them to the detail listing page that we have already created. Don’t forget to pass the ID, in this case, we use my_listing.id because my_listing is the variable being used in this particular template. 

We also added two more buttons that we’ll activate in the following chapters which let users edit and delete their listings. Finally, we added the link to the new_listing page, so that users can create listings from this page rather than having the option in the navbar.

**Navbar Revisited**

Make some changes to the navbar, so that we can have the link to my_listings page.

Open base.html and change the code as follows.
 
![Screen Shot 2020-09-19 at 8.47.28 PM](https://dev-to-uploads.s3.amazonaws.com/i/d7ztbbi0xpa02vnju9ui.png)
 
After you make the changes, the navbar should have my listings instead of new listing. Once you go to my listings page, you’ll see a page like the one below. 

![h](https://dev-to-uploads.s3.amazonaws.com/i/dt9j455zzimuks5mee08.png)
 
Test the link to view the details of each listing. The other two links edit and delete are disabled for now. Disregard the style for now, we’ll make it look pretty soon.

If you're enjoying the series and want to support, you can find the entire book below.

[*Django 3…2…1…Takeoff! Kindle*
](https://www.amazon.com/Django-Takeoff-Quick-Learning-Development/dp/B08HB1CWHW/ref=tmm_pap_swatch_0?_encoding=UTF8&qid=&sr=)

[*Django 3…2…1…Takeoff! Paperback*
](https://www.amazon.com/Django-Takeoff-Quick-Learning-Development/dp/B08HB1CWHW/ref=tmm_pap_swatch_0?_encoding=UTF8&qid=&sr=)
Django ORM Optimization Tips #1 select_related
Tags: python, django, database, sql
Published: 2020-09-20 00:54:20

This is gonna be django performance series
>*The Best Way to Learn is to Teach*


#### I'm a man of few words
So let's start with example of Users and Cities models.



```python
# models.py

class City(models.Model):
    name = models.CharField(max_length=63)


class User(models.Model):
    fullname = models.CharField(max_length=127)
    city = models.ForeignKey(City, on_delete=models.SET_NULL, null=True)
```



And this is our `serializers`

```python
# serializers.py
class CitySerializer(serializers.ModelSerializer):
    class Meta:
        model = City
        fields = ('id', 'name')


class UserSerializer(serializers.ModelSerializer):
    city = CitySerializer()

    class Meta:
        model = User
        fields = ('id', 'fullname', 'city')
```


And this is our `views`
```python
# views.py
class UserListView(ListAPIView):
    serializer_class = UserSerializer
    queryset = User.objects.all()
```


So if you looked to the queryset `User.objects.all()` its sql is 
```sql
SELECT "users"."id","users"."fullname","users"."city_id" 
FROM "users" 
```

It is not efficient because for each user you are going to access database to select user city for the nested serializer `CitySerializer` , It is (n+1) queries

#### Solution: use [select_related](https://docs.djangoproject.com/en/3.0/ref/models/querysets/#select-related)

after changes queryset will be `User.objects.select_related('city')`
sql:
```sql
SELECT "user"."id","user"."fullname", "user"."city_id","city"."id",
"city"."name"  FROM "user"
LEFT OUTER JOIN "city" ON ("user"."city_id" = "city"."id")
```

So now it is just one query
Newbie to Full-Stack Developer with The Odin Project
Published: 2020-09-20 00:19:56

I previously uploaded this post to my [Medium](medium.com/@qbobb) profile but figured this might be a better audience for encouragement and accountability. 


Over the last 4 years, I have flirted with web development constantly. I chipped away at FreeCodeCamp’s Responsive Web Design Certification, paid for two full years of CodeCademy Pro, thought about signing up for Treehouse.

I even had a mid-COVID-19 quarantine crisis and enrolled in a Data Science Bootcamp at General Assembly. The bootcamp was hell. I lasted 6 weeks before admitting that I was not remotely prepared to use Statistics, Python, Pandas, and the fundamentals of Machine Learning in a paid position– full-time. I panicked, dropped out, and continued clicking through the mountains of modules at FreeCodeCamp.

Then I found The Odin Project.

The Odin Project (TOP) seemed too good to be true. It was FREE, self-paced, gave access to live support through Discord, and required students to set up an integrated development environment (IDE). It was absolutely packed with outside resources which meant that it was designed for genuine engagement and self-discovery. And most importantly (to me), it required students to begin using the CLI immediately. TOP was the only truly robust, free program that taught students how to code as they would IRL. Without sandboxes.

I read a few reviews and decided to start off with the Full Stack Ruby on Rails track. I’m one week in and still (re)reviewing the fundamentals of HTML and CSS. Only this time I actually feel like I’m learning– AND remembering things!

I wrote this post as a “hello world” to introduce my personal web development journey. I mostly plan to use it as a space to write tutorials for myself, share things that I find interesting/useful, and hold myself accountable in making real progress.

Ideally, I would like to complete TOP in its entirety within a year. However, if I don’t complete it at that pace I’m not going to beat myself up.

This time I'm committed to making consistent progress, and I'm looking to find encouragement and guidance along the way.