teleren/devto huggingface dataset:
3 ways to prevent browser stylesheet caching
Tags: css, caching, stylesheet, ruby
Published: 2021-02-13 19:14:55

Here are three ways to make sure that any changes made to your stylesheet, are reflected on your local server. 

The first time I built a Sinatra MVC app, I had issues with the stylesheet. After importing my CSS files, I could preview changes made to my stylesheets by refreshing my browser. But after a couple of hours, I started to notice that changes made to the stylesheet were not being applied to my project.

Later I came to find out that my browser was caching my stylesheets; which is why I was not able to view the changes made to my CSS files. Luckily there are a couple of workarounds for this. 

## 1. Adding a version parameter when importing stylesheet


When importing your stylesheet, it may look something like this.

```ruby
<link rel="stylesheet" href="/stylesheets/main.min.css" />
```

All you need to do is add a version `URL parameter` to the end of your href like so `?version=1`.

```ruby
<link rel="stylesheet" href="/stylesheets/main.min.css?version=1" />
```

The browser will notice the new version and stop caching the stylesheet. All changes in your stylesheet will be reflected in your browser. The only downside is that this fix is not permanent. Eventually, the browser will cache the stylesheet again(typically every eight hours for me). If this is the case all you need to do is increment the version by one; from `?version=1` to `?version=2`.


## 2. Disable caching in Chrome

If you are using Google Chrome, you have the option to disable caching. The only downside is that caching will be disabled as long as your developer tools are open.

1. Open developer tools; `Option + ⌘ + J` (on macOS), or `Shift + CTRL + J` (on Windows/Linux).
2. Click on the `Network` tab, typically located along the top.
3. Click the checkbox for `Disable cache` right under the Navigation tabs(near to top)

![Screen Shot 2021-02-13 at 1.52.35 PM](https://dev-to-uploads.s3.amazonaws.com/i/gu8zrozsaze5x0l66jat.png)

## 3. Hard reload browser 

Instead of refreshing your browser, you will be hard reloading your browser. All browsers have different ways of hard reloading the page. Feel free to check out the link below to find the short cut keys for hard reloading your browser. 

https://www.getfilecloud.com/blog/2015/03/tech-tip-how-to-do-hard-refresh-in-browsers/#.YCghas9KgTs

Hope this article was helpful!
Liquid Distortion Image Hover Effects
Tags: javascript, html, css, 100daysofcode
Published: 2021-02-13 19:13:03

the day 55 of #100DaysOfCode Challenge

Liquid Distortion Image Hover Effects Using HTML5, CSS & JS 

Demo : https://liquid-effect.netlify.app/

Code : https://github.com/saidMounaim/100DaysOfCode/tree/main/Day55
Free up disk space by running these docker commands
Tags: docker, devops, advanced, tips
Published: 2021-02-13 18:59:28

If you are using Docker, every now and then your disk gets filled up with dangling docker images and volumes. Simple run the following commands to get rid of them and open up disk space on your machine:

```bash
# remove dangling images
docker rmi -f $(docker images -f dangling=true -q)

# remove dangling volumes
docker volume rm $(docker volume ls -qf dangling=true)
```

I am starting a newsletter focused on teaching hands-one backend and infrastructure through building micro-projects.
Follow me on Twitter for the announcement: [hossein761](https://twitter.com/hossein761)
Read Code in Style with GitHub 1s
Tags: watercooler, slimcoder
Published: 2021-02-13 18:58:35

---
title: Read Code in Style with GitHub 1s
published: true
description: 
tags: watercooler, slimcoder
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/grwrg3xciwc7tkeyxuth.jpg
---

I'm not satisfied nor interested to read code from the github.com official website directly so most of the time I clone a repository and open it in visual studio code to read code and review code.

But a few days back, I found a solution to this which is github1s.com it user interface is similar to vscode so guess what? 

No more repository cloning for code read, I can now read it directly from my browser sounds cool right? 

Here is how you can use github1s:

![GitHub1s](https://dev-to-uploads.s3.amazonaws.com/i/7y9hay5gjb0ji4plko0c.gif)

Github1s looks great right? You can also read private repository code by adding an access token within its setting.
150 followers? Maybe you'll see this...
Tags: design, development, education
Published: 2021-02-13 18:39:55

## Lately - it seems like there's just way too much content - and well, we understand why no one sees anything we right!

But SOME people have... and since you hit that 'follow' button - you must have seen something we wrote that spoke to you.

So --- 

## We want to just tell it to you straight:

There are a few spots left in our March session of [Design for _The Web_](https://perpetual.education).

We promise the best web design/development education there is --- and if you know anyone who wants to get into the field - as fast as possible - with the most in-depth and fun education - with the most human and personal support... 

Then please - 

## take 2 minutes to pass it on. 

**You can even get paid**. Because - fuck Facebook. We'd much rather give **you** the money.

[https://perpetual.education/get-paid-to-match-students](https://perpetual.education/get-paid-to-match-students)

Our current group is very diverse - but we will be giving priority to women and people of color for these last spots.

## That's all!!! 

Just asking for help saving the world. 

Future _you_ will benefit from a world with more properly trained designers and developers.
Must have Firefox extensions for privacy and security.
Tags: firefox, privacy
Published: 2021-02-13 18:34:00

Hi
These extensions really help with privacy and security.

**#0 Search Engine**
Change your Search Engine, switch to #DuckDuckGo
https://duckduckgo.com/spread

Initially you will hate switching because the results won't show up as per your needs, but the search engine improves as you use it.

**#1 Browser**
Okay I know this post is about Firefox but recently I've heard a lot about [Brave browser], and it also has an award system that gives you BAT(Basic Attention Token) which is a better way to support content creators. You can read about that [here](https://brave.com/brave-rewards/)

**#2** **[NoScript](https://addons.mozilla.org/en-US/firefox/addon/noscript/
)** 

Okay so this Extension by default Blocks all the Nasty Scripts that could potentially steal data, you can choose to disable or trust the website by clicking on the extension

**#3** **[DuckDuckGo Privacy Essentials](https://addons.mozilla.org/en-US/firefox/addon/duckduckgo-for-firefox/)**

The will essentially block browser trackers, plus provides an option to enable site privacy protection.

**#4** **[Auto-tab discard](https://addons.mozilla.org/en-US/firefox/addon/auto-tab-discard/)**

This is a bit off-topic, but helpful if you have a lot of tabs open.
Auto Tab Discard a lightweight extension that automatically reduces the memory load of open—but inactive—tabs. This also helps portable devices to save battery.

**#5** **[HTTPS everywhere](https://addons.mozilla.org/en-US/firefox/addon/https-everywhere/)**

Its 2021 if your website is not using HTTPS you should install SSL or use something like Letsencrypt or Cloudflare. This plugin redirects all the websites to HTTPS, you can disable the redirection per website or completely.

**#6** **[Popup blocker ultimate](
https://addons.mozilla.org/en-US/firefox/addon/popup-blocker-ultimate/)**
The name says it all, useful to block annoying popups.

**#7** **[Adblocker](https://addons.mozilla.org/en-US/firefox/addon/adblocker-ultimate/)**
One Stop Adblocker

That's all. I use these extensions on a daily basis.
Hope this helps.
มี CentOS Stream Container Image ให้ใช้แล้วนะ
Tags: linux, centos, thai
Published: 2021-02-13 18:30:35

จากจุดเริ่มต้นของการประกาศเปลี่ยนแปลงของ CentOS ที่จะไม่มี version ที่ rebuild มาจาก Red Hat Enterprise อีกแล้วในสิ้นปี 2021 แต่จะมีแต่รุ่นที่เป็น CentOS Stream โดย CentOS ใช้คำว่า "CentOS Project shifts focus to CentOS Stream"
ในช่วงนี้สัญญาณของความเปลี่ยนแปลงก็เห็นชัดขึ้นอีก มีการสร้าง Container Image ในรุ่นของ Stream ไว้ให้คนที่ทำงานกับ Container Technology ให้ได้ใช้งานกันเรียบร้อย หากสนใจจะใช้งาน สามารถ pull image ได้จากที่ `quay.io/centos/centos:stream`

**ทดสอบ pull image ของ centos:stream**
```zsh
❯ docker image pull quay.io/centos/centos:stream
stream: Pulling from centos/centos
95efbc6c0025: Pull complete
927653fd3e6b: Pull complete
71e5f9e90ef1: Pull complete
Digest: sha256:517798299340b0ddc377b4f7502f4a42ff6876e4f15b514db01b8fc8c3850559
Status: Downloaded newer image for quay.io/centos/centos:stream
quay.io/centos/centos:stream


❯ docker image pull quay.io/centos/centos:stream8
stream8: Pulling from centos/centos
Digest: sha256:517798299340b0ddc377b4f7502f4a42ff6876e4f15b514db01b8fc8c3850559
Status: Downloaded newer image for quay.io/centos/centos:stream8
quay.io/centos/centos:stream8


❯ docker image ls quay.io/centos/centos:stream
REPOSITORY              TAG       IMAGE ID       CREATED      SIZE
quay.io/centos/centos   stream    de9f93110166   5 days ago   355MB


❯ docker image history quay.io/centos/centos:stream
IMAGE          CREATED        CREATED BY                                      SIZE      COMMENT
de9f93110166   5 days ago     /bin/bash                                       154MB
<missing>      5 days ago     /bin/sh -c #(nop) LABEL io.openshift.tags="b…   0B
<missing>      5 days ago     /bin/sh -c #(nop) LABEL io.openshift.expose-…   0B
<missing>      5 days ago     /bin/sh -c #(nop) LABEL io.k8s.display-name=…   0B
<missing>      5 days ago     /bin/sh -c #(nop) LABEL description="CentOS …   0B
<missing>      5 days ago     /bin/sh -c #(nop) LABEL summary="Provides a …   0B
<missing>      5 days ago     /bin/sh -c #(nop) LABEL com.redhat.license_t…   0B
<missing>      5 days ago     /bin/sh -c #(nop) LABEL com.redhat.component…   0B
<missing>      5 days ago     /bin/sh -c #(nop) LABEL maintainer="The Cent…   0B
<missing>      2 months ago                                                   4.72kB
<missing>      2 months ago                                                   201MB     Imported from -
```

ยังรักยังชอบกันอยู่ ก็ลองทดลองและทดสอบ CentOS Stream Container Image กันดู หรือ ลองหา Distribution ใหม่ก็มีให้เลือกใช้อีกมากมาย ... สุดท้ายเวลาก็คงพาทางเลือกมาให้เราเอง

#####มูลค่าความสุข
What technology are you interested in learning in 2021?
Tags: discuss, career, learning, technology
Published: 2021-02-13 18:18:15

---
title: What technology are you interested in learning in 2021?
published: true
tags: discuss,career,learning,technology
cover_image: https://images.unsplash.com/photo-1599008633840-052c7f756385?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80
---

We're a month and some change into 2021 now. I don't like the set goals at the new year I kind of continuously set/achieve goals throughout the year. Sometimes my interests change or I try something and I really don't care for it, so why stick with it?!

What technology or topics are you interested in learning this year? 

Here is my list:

- Kubernetes
- Next.js
- AWS (EC2, Lambda, S3, DynamoDB, Amplify)
- Tensorflow.js
- Shopify
Generating QR Codes using Python
Tags: python, beginners, tutorial
Published: 2021-02-13 18:11:12

QR Codes are helpful in a lot of scenarios. For example, let's say you're making a social app where users interact with each other via visiting their profiles. Generating a QR Code for each profile will make it really easy for the users to share their profile. QR codes are also used in retail stores for redirecting to a payment gateway, or for simply sharing a link. In this article, I'll walk you through how you can simply create QR codes with couple of lines of code with the `pyqrcode` package.

## Setting Up
As I've mentioned before, we'll be using the `pyqrcode` package to generate the QR code for us. You can install it with pip simply by running the following command,
```
pip install pyqrcode
```
We'll need another module for saving the QR code in the file system, let's install it too.
```
pip install pypng
```

## Generating the QR code
Here's the code for generating the QR Code, it's pretty simple.
```python
# Import pyqrcode
import pyqrcode
# URL or string which will represent the QR code
url = "https://dev.to/supanthapaul"
# Generate QR code
qr_code = pyqrcode.create(url)
```
Now we have the QR code generated which is of type `QRCode` from `pyqrcode`. One thing to note is, we can add additional parameters to the `create` function like `error`, `version`, `mode`. If you want to learn more, you can see the documentation page [here](https://pythonhosted.org/PyQRCode/create.html).  
Okay, we generated the QR code but there's no way for us to view it. Let's save the QR code to our file system as png!
```python
# ...
qr_code.png("image.png", scale=8)
```
This will save our QR code as `image.png` in our current directory. `pyqrcode` uses the `pypng` package under the hood to save the QR code as a png. The *scale* parameter sets how large to draw a single module. By default one pixel is used to draw a single module which will make the code too small to be read efficiently. Increasing the scale will make the code larger.  
you can add additional parameters like `module_color` and `background`, read more about rendering the QR codes [here](https://pythonhosted.org/PyQRCode/rendering.html).

## Wrapping up
As you can see, it's extremely easy to generate and save QR codes with `pyqrcode`. If you wanted to generate QR codes for your mobile app, you can create a Python API that returns a QR code image for a particular link. If you want to know how to create web APIs using Python, I've written an article about [Getting started with FastAPI to quickly create APIs using Python](https://dev.to/supanthapaul/getting-started-with-fastapi-create-apis-quickly-using-python-2a9f). Do check that out!  

If you'd like to chat with me about anything technology or just say hi, you can [Connect with me on LinkedIn](https://www.linkedin.com/in/supantha-paul-5977041b8/) or [Find me on Twiiter](https://twitter.com/supanthapaul). My DMs are open!  

Also, here's the generated QR code of my dev.to profile!
![QR Code](https://dev-to-uploads.s3.amazonaws.com/i/m37fs3311fg45jkz4dbf.png)
JS Test #10: null + undefined
Tags: beginners, learn, javascript, codenewbie
Published: 2021-02-13 18:03:10

![js-test-10](https://learn.coderslang.com/js-test-10.png)

What’s the difference between `null` and `undefined` in JavaScript? What will be logged to the console?
.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

In the first line, we evaluate `null === null` and the result is `true`.

In the second line, we evaluate `undefined === undefined` and the result is `true` once again.

In the third line, however, we need to understand what the result of `null + undefined` is. For JavaScript, it’s hard to make sense of what it should be, so it evaluates this expression as `NaN`.

Now, is `NaN` equal to `NaN`?

And the answer is - **NO**.

In JS `NaN` is the only value that’s not equal to itself.

---

**ANSWER**: The output is going to be `true`, `true`, and `false`.

[Learn Full Stack JavaScript](https://js.coderslang.com)
JS Test #11: Scope
Tags: javascript, learn, codenewbie, beginners
Published: 2021-02-13 18:00:23

![js-test-11](https://learn.coderslang.com/js-test-11.png)

Variables with the same name in JavaScript? What will be logged to the console?
.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

In the first line, we see an array `animals` that holds 5 strings.

The length of this array is used in the loop condition, so the loop will continue spinning up to the point when `i` becomes equal to `5`.

Inside of the loop, a new array is declared with the same name `animals`. There are no issues with such a declaration and no errors will be thrown.

It’s important to remember, though, that the value `animals.length` in the loop condition is attributed to the external array with 5 elements but the `console.log` picks up the inner array, which has only 2 elements in it.

Once we go `out of bounds` there will be no error like in `C++` or `Java`. Instead, we’ll get `undefined` as the result of the last 3 iterations of the loop.

---

**ANSWER**: The strings `Whale`, `Dolphin` will be logged to the console, followed by `undefined`, `undefined`, `undefined`.
Why I'm studying Software Engineering
Tags: programming, webdev, devops
Published: 2021-02-13 17:58:37

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

  From the start the Pandemic changed everything. I had just graduated from grad school and was looking forward to finding a job right after. There was no doubt in my mind that this was the next step but there was always a fear lurking in the back of my mind that I wasn't ready or qualified to work. What the Pandemic did in the beginning was amplify my worries and shrivel my confidence in myself. With constant rejections and no direction, I began drown in my fears and no matter how much comfort others gave me, it was blocked by the negativity. 

After that phase, I stopped to rethink my goals. First, I had to remind myself that I went to grad school because I wanted to be in education. Second, I had review what interests I leaned towards by the end of graduation. Third, I had to look at why and for whom I wanted to help. 

During the Pandemic, I began to tutor English to kids residing in Asia. From an underprivileged background, I could feel that they had vigor and motivation to study online. More importantly, they knew how important English was to their future. Working with them required me to expand my creativity in sustaining their motivation and help me learn the real beauty of learning online. By creating a hybrid of online and analogue pedagogy, I could see the students motivation never faltering. It was surprisingly personable experience that was almost as real. Soon my thought lingered to the questions:

Could these virtual lessons help them in the real world? How? And do they leave tangible impact on the student?

These were all questions that begun to re-spark my passion. 

![download](https://dev-to-uploads.s3.amazonaws.com/i/90ee2thtx3lssc91becf.jpg)

It was from tutoring that I could solidify that I want to join the Education Technology field. So what's my goal? I'd like to enhance the online learning experience. My experience showed me that online learning has the potential to connect unexpected people together and even have a meaningful experience. 

Why software engineering?

For the short-term goal, I want to create websites that enhance my student's learning experience. But for the long term, I would like to continue discovering how web design can cater more towards the human experience in online learning and transfer the virtual experience into the real world.
Usar variables en css
Tags: css, codenewbie, spanish
Published: 2021-02-13 17:49:30

#Introducción
Hace un tiempo que los ficheros css permiten gestionar valores de la estética de la web mediante variables. Esas variables se pueden definir en otro fichero css, como por ejemplo en variables.css, o en el propio fichero css en el que tenemos todo el estilo de nuestra web.

Da igual como decidamos hacerlo porque el funcionamiento será el mismo.

#Código
Todas nuestras variables deben estar encapsuladas dentro de la etiqueta :root y precedidas por --, quedando de la siguiente manera:
```css
:root {
  --main-bg-color: #0000
}
```
Esta etiqueta root siempre debe estar antes del código css en el que usaremos las variables, esto quiere decir que si lo importamos en el HEAD de nuestra web, se debe importar antes que el fichero css en el que se usarán las variables:
```html
<link rel="stylesheet" href="variables.css">
<link rel="stylesheet" href="mystyle.css">
```
Otra forma es usando en @import dentro de nuestro mystyle.css:
```css
@import 'variables.css';
```
Si en nuestro caso no queremos tener dos ficheros y únicamente usar el mystyle.css las primeras líneas de ese fichero deben ser la etiqueta :root, quedado de la siguiente manera:
```css
:root {
  --main-bg-color: #0000
}

.fondo {
  background-color: var(--main-bg-color);
}
```
#Conclusión
Si no queremos usar scss u otros sistemas de estilos con más funcionalidad o queremos hacer más fácil trabajar con ficheros css muy largos y en los que para cambiar un color se deben editar varias etiquetas, debes usar variables y verás como la complejidad a la hora de editar el estilo de tu web es mucho más sencillo.
100DaysOfCode — Day 03
Published: 2021-02-13 17:43:55

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

In day 3, I started “Learn How To Code: Google’s Go (golang) Programming Language” course by Todd McLeod from udemy.com. Section 1 (Introduction) and Section 2.

End of day 3 of 100DaysOfCode.
100DaysOfCode — Day 02
Tags: 100daysofcode, go, docker, kubernetes
Published: 2021-02-13 17:41:15

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/94e8ux4byz3mdr82f8v5.png)

In day 2, I started creating a simple service and Dockerfile. See the code here https://github.com/MoatazBurhan/Grunderound. To test this code, install Docker first. Follow this document to instructions: https://docs.docker.com/get-started/.
Go Code

This code simply reads your URL path and display it in the browser.

```go
package main

import (
   "fmt"
   "html"
   "log"
   "net/http"
)

func main() {

   http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
      fmt.Fprintf(w, "redirecting to link based on %q", html.EscapeString(r.URL.Path))
   })

   log.Fatal(http.ListenAndServe(":8081", nil))
}
```

Dockerfile

```
FROM golang:1.15.8
RUN mkdir /app
ADD . /app
WORKDIR /app
RUN go build -o main .
CMD ["/app/main"]
```

Deploying the Application
```
$ git clone https://github.com/MoatazBurhan/Grunderound
$ docker build -t go-service .
$ docker run -d -p 8080:8081 go-service
```

If you open up http://localhost:8080 within your browser, you should see that the application is successfully responding with redirecting to link based on "/".

End of day 2 of 100DaysOfCode.
100DaysOfCode — Day 01
Tags: 100daysofcode, docker, go, kubernetes
Published: 2021-02-13 17:36:21

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

Here is my progress in my 100DaysOfCode challenge:

The plan is to build a micro-services project in GoLang using Doctor and Kubernetes. Until today I am open to suggestions about what the project is going to be. I am leaning toward building a website that allows the users to shorten their long links.

Here is what I accomplished in day one:

I picked a name for the project, Grunderound. In the book, Unbirthday by Liz Braswell, Grunderound is a place of nonsense in Wonderland. When I asked my daughter for name suggestions, she suggested this name from the book she is reading. It is a place where you look for secrets, “you grunder around looking for the right wrong”, explains the Mad Hatter in the book.

I created a repository for the project in my github space. Honestly this is my first side project that I plan to work on it seriously. The repository is almost empty currently: https://github.com/MoatazBurhan/Grunderound

I struggled a little when choosing the type of license to use. Maybe it is too early to make a decision about that. I do not know. I am always foggy in this area. I felt like I should either use MIT or GNU GPL V3. After reading about the differences in https://choosealicense.com/ I ended up choosing MIT. Please comment with your opinion if your think this is not the best choice.

I started thinking about the project layout. Note that I am new to all the technologies I am using in this project (Go, Docker, and Kubernetes). So I do not really know what I am doing. I started reading Jin Feng’s suggestions in Go Microservice with Clean Architecture: Application Layout. I will continue on this tomorrow.

End of day 1 of 100DaysOfCode.