teleren/devto huggingface dataset:
Would You Use Vanilla JavaScript (No Framework) On a Project?
Tags: javascript, webdev, podcast
Published: 2022-08-11 00:31:00

{% spotify spotify:episode:7IeWXVtz83FtXmWbh0KX3M %}

## What is HTML All The Things?

HTML All The Things is a [web development podcast](https://www.htmlallthethings.com/) and [discord community](https://discord.com/invite/jweMCx9) which was started by Matt and Mike, developers based in Ontario, Canada. 

The podcast speaks to web development topics as well as running a small business, self-employment and time management. You can join them for both their successes and their struggles as they try to manage expanding their Web Development business without stretching themselves too thin.

---





## What's This One About?

This week, Matt and Mike discussed whether vanilla JavaScript is viable on modern projects. Vanilla JavaScript is of course the language that the browser understands, but with the increasing complexity in many of today's web development projects, frameworks like React, Vue, and Svelte have seemingly taken over as the tools of choice for web developers. Should you use a framework, or should you use vanilla JavaScript? 

## Topics and Timestamps

- Introduction | 2:00
- Why use a JavaScript Framework? | 11:40
- Matt and Mike Discuss when and why they use/don't use frameworks | 36:00 

## Reference Tweet

{% twitter https://twitter.com/htmleverything/status/1556989103534706688 %}

## Thank you!

If you're enjoying the podcast consider giving us a review on [Apple Podcasts](https://podcasts.apple.com/us/podcast/html-all-things-web-development-web-design-small-business/id1412209136) or checking out our Patreon to get a shoutout on the podcast. 

**[Support us on Patreon](https://www.patreon.com/htmlallthethings)**


You can find us on all the podcast platforms out there as well as

[Instagram (@htmlallthethings)](https://www.instagram.com/htmlallthethings/)
[Twitter (@htmleverything)](https://twitter.com/htmleverything)
[TikTok](Html All The Things)
Should Everybody Learn to Code?
Tags: career, society, education
Published: 2022-08-11 00:26:00

[dojo]: https://www.codingdojo.com/
[kodumaro]: http://kodumaro.cacilhas.info/2022/08/should-code.html
[helloworld]: https://www.rosettacode.org/wiki/Hello_world/Text
Original post from [Kodumaro][kodumaro].

![Yes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dt2z7dyr9l5yekbehlrw.png)

I’ve seen for long lots of blog posts and YouTube videos addressing this topic, invariably answering a loud NO. However, considering how far technology has changed your lives and how important Computing knowledge has become to us, I must disagree just as loudly.

But it would be shallow if I’d stay stuck to the beginning question, so let’s dive deeper.

### Should everybody learn how to code?

Of course yes: coding is the new times table, who can’t code is held hostage by how can… and also by technology companies.

You need to know the basics of Computing and programming to break free.

Those people saying you don’t need to learn how to code are bad developers afraid that, if everybody learns to code, they’re gonna lose their jobs.

Keep it in mind.

### How to learn?

Once you’ve decided to learn to code, you may ask how. Well, there’s only one way to do that: practising.

Start by choosing a programming language – try a few ones, write some [“Hello, World!”][helloworld]’s, see which language feels more natural for you.

Do some [coding dojos][dojo]. Practice, practice, and practice.

And buy books! Acquire books about any technology you like. Don’t be afraid of complex concepts, they usually are simpler than they look at first sight. You just need to get used to them.

### Should I stick with a programming language?

Definitely **NO**.

Bad programmers are gonna try to entice you into a programming community, avoid them!

Those guys are passionate about technology, and programming is **NOT** about technology, it’s about solving problems.

When one’s in love with a programming language or community, it starts believing in lots of misconceptions, which leads you to non-sense technology wars.

Run away from them!

Learn your first programming language, then the second one, then the third… learn as many as you can. Until at some point you’ll stop learning programming languages and start understanding programming patterns.

It’s all about programming patterns.

### 🚲 → 🏍️ → 🚗 → 🏎️

Nope… nope… nope…

This is **lie** programming gurus tell to fool their managers. It’s impossible to turn a bike into a motorcycle, or a motorcycle into a car! You end with a **wagon pulled by a motorised bike** – a real mess.

You can build a bike as <abbr title="proof of concept">PoC</abbr>, and put it online, but you’ll have to start from scratch to create the definitive car (or app) if you want an actual production product. What you get when you create a PoC is time to create the product and, more importantly, the knowledge to do it.

### But I don’t wanna work programming!!

That’s okay. You don’t need.

As well as you don’t need to become an accountant just because you’ve learned basic math.

Learn to code just because. It might be useful at some point – or not.
A tool for showing disk usage. (Linux, macOS and Windows)
Tags: go, disk, diskusage, tooling
Published: 2022-08-11 00:04:00

Use the go to develop a tool to display the current disk usage.
https://github.com/chenquan/diskusage
If you like or are using this project to learn or start your solution, please give it a star⭐. Thanks!


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m6mrrvmbxbn0hkq2z4pt.png)

## ❗installation

```shell
go install github.com/chenquan/diskusage@latest
```
## 👏how to use
```
$ diskusage -h
A tool for showing disk usage.

Usage:
  diskusage [flags]

Flags:
  -a, --all             display all directories, otherwise only display folders whose usage size is not 0
  -c, --color string    set color output mode. optional: auto, always, ignore (default "auto")
  -d, --depth int       shows the depth of the tree directory structure (default 1)
      --dir string      dir path (default "./")
  -f, --filter string   regular expression filter (default ".+")
  -h, --help            help for diskusage
  -t, --type strings    only count certain types of files  (default all)
  -u, --unit string     displayed units. optional: B(Bytes), K(KB), M(MB), G(GB), T(TB) (default "M")
```
## 👀example
1. Only files named Doc or docx are counted: `diskusage -t doc,docx` or `diskusage -f ".+\.(doc|docx)$"`
2. The maximum display unit is GM: `diskusage -u G`
3. Supports color output to pipeline: `diskusage -c always | less -R` or `diskusage -c always | more`
How to add a zoom in effect with CSS
Tags: appsyncmasterclass, css3
Published: 2022-08-11 08:20:48

---
title: How to add a zoom in effect with CSS
published: true
date: 2022-08-10 23:00:38 UTC
tags: AppSyncMasterclass,CSS3
canonical_url: https://theburningmonk.com/2022/07/how-to-add-a-zoom-in-effect-with-css/
---

As I rebuild the landing page for the [AppSync Masterclass](https://appsyncmasterclass.com/), I wanted to add a zoom-in effect to some of the images, like this:

![](https://theburningmonk.com/wp-content/uploads/2022/07/zoom-in-effect.gif)

After some googling and a bit of experimentation, this is what I ended up with.

```
<figure class="img-hover-zoom">
  <figcaption>...</figcaption>
  <img src="...">
</figure>
```

When it’s hovered over, the <img> tag would scale up. To make this transition smoother, you can use [CSS transition](https://www.w3schools.com/css/css3_transitions.asp).

```
.img-hover-zoom img {
  transition: transform 0.2s ease-out;
}

.img-hover-zoom:hover img {
  transform: scale(1.2);
}
```

But this alone isn’t enough, because the image would [overflow](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow) from the parent container.

![](https://theburningmonk.com/wp-content/uploads/2022/07/zoom-in-effect-2.gif)

So for the <figure> tag, use `overflow: hidden` to stop the overflow.

```
.img-hover-zoom {
  overflow: hidden;
}
```

And voila, you get a nice zoom-in effect when hovering over an image :-)

The post [How to add a zoom in effect with CSS](https://theburningmonk.com/2022/07/how-to-add-a-zoom-in-effect-with-css/) appeared first on [theburningmonk.com](https://theburningmonk.com).
my git aliases: please = git force --with-lease
Tags: devjournal, git, alias
Published: 2022-08-10 23:11:00

how many times did you face this ?

```shell
git push
```

and it fails, and it's normal because git prevents you to update a branch while you would break everything

## Some of you may do this, *DO NOT !*

```shell
git push --force
```

it's dangerous as you can nuke someone else changes and mess the repository for everyone else than you.

Please note that `git push` tells you it will cause problem, and by using `--force` you are telling it, you don't care at all.

`--force` may be useful is some narrow, restricted and very rare situation, but on daily basis you don't want to use it.

## Some others, more careful, are using this

```shell
git push --force-with-lease
```

Read the following articles about `--force-with-lease` vs `--force`:

- https://stackoverflow.com/questions/52823692/git-push-force-with-lease-vs-force 
- https://www.delftstack.com/howto/git/git-push-force-with-lease/

## Some really careful (and using git version over 2.30) are using this

```shell
git push --force-with-lease --force-if-includes
```

Here is an [excellent article about `--force-if-includes`](https://stackoverflow.com/questions/65837109/when-should-i-use-git-push-force-if-includes) 

The differences are really slightly, but they added it for good reasons.

## ok, but then ?

There is unfortunately no git config to ask git to always uses `--force-with-lease` whenarticle

g changes.

one way to achieve it is to use an alias

```
[alias]
please = push --force-with-lease --force-if-includes
```

So next time you will face an error with `git push`, you may ask very politely with `git please` alias

I'm not sure from where I got this alias, maybe a coworker.

By writing this post, I found a possible source article
https://www.freecodecamp.org/news/git-please-a182f28efeb5/
[Resolved] WordPress - Error in DataBase Connection or Access denied for user@'localhost' ?
Tags: wordpress, database, php, hostgator
Published: 2022-08-10 23:09:00

## Situation:
Website migrated from one host to another using UpDraft. Admin able to login on WordPress dashboard. 

Homepage/ FrontEnd shows, Connection Error! Access denied for user@localhost. 

## What I did?
changed ` wp-config.php `
after hours of meddling around and changing multiple times username and password on ` wp-config.php ` which shows DataBase connection error.
Optimized and repair DataBase didn't help. 

## What Resolved?
**Disabled the  all plugin and activate one by one. **

Hosting Provider:[ HostGator](shorturl.at/syQ17)
Variáveis CSS
Published: 2022-08-10 23:02:35

Quando estamos desenvolvendo e estilizando as páginas, nós conseguimos perceber algumas repetições no arquivo do CSS, e quanto mais o projeto cresce, mais pode ser difícil a manutenção.

E por ser um problema recorrente, os criadores de pré-processadores CSS como o SASS adicionaram variáveis, mas o uso do SASS, por exemplo, adiciona mais um passo de processamento. Por isso, foram criadas as variáveis CSS e para usá-las é bastante simples.

Desenvolvi um pequeno projeto apenas para demonstrar como declarar as variáveis e utilizá-las.

## Estrutura do arquivo HTML

```
<body>

  <div class="container">
    <main class="children">
      <h2>Variáveis CSS</h2>
      <blockquote cite="https://developer.mozilla.org/pt-BR/docs/Web/CSS/Using_CSS_custom_properties">Variáveis CSS são entidades definidas por desenvolvedores, contendo valores específicos para serem reutilizados ao longo do documento. São configuradas usando esta notação (ex: --cor-principal: black; ) e são acessadas usando a funcão var() (ex: color: var(--cor-principal); )</blockquote>
    </main>
  </div>

</body>
```

## Como declarar as variáveis do arquivo CSS
As variáveis são declaradas na pseudo-classe _:root_, como no exemplo abaixo.

```
:root {
  --background: #700353;
  --background-alternative: #ffbfb7;
  --text-color: #320d6d;

  --h2-font-size: 3.8rem;
  --blockquote-font-size: 1.6rem;

  --border-radius: 10px;

  --padding: 4rem;
}
```

## E como eu posso usar as variáveis declaradas?
Para usar as variáveis é bastante simples, basta colocar var(nome-da-variável) no valor da propriedade.

```
.children {
  width: 50rem;
  height: 50rem;
  background: var(--background-alternative);

  text-align: center;
  padding: var(--padding);

  color: var(--text-color);

  border-radius: var(--border-radius);
}

.children h2 {
  font-size: var(--h2-font-size);
}
```

## Preview do projeto
![Um container na cor rosa, com o título Variáveis CSS e uma breve explicação do que são as variáveis](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8ttxnkijzubcxlcv4k2e.png)

O link com o código completo no github é esse [aqui](https://github.com/IsaacJBS/css-variables).

Minhas redes:
[Linkedin](https://www.linkedin.com/in/isaac-jbs/)
[Twitter](https://twitter.com/isaacjbs)

Fonte: 
[MDN](https://developer.mozilla.org/pt-BR/docs/Web/CSS/Using_CSS_custom_properties#primeiros_passos_com_vari%C3%A1veis_css_2)


Espero ter ajudado a tornar seu desenvolvimento mais fácil e rápido.
<img width="100%" style="width:50%" src="https://media.giphy.com/media/7DzlajZNY5D0I/giphy.gif">
Day 611 : Still Standing
Tags: hiphop, code, coding, lifelongdev
Published: 2022-08-10 23:01:26

_liner notes_:
- Professional : The day started off pretty great. Answered some messages from some folks. Good feedback on some things. Then I went to record a video for an upcoming conference. I had the bright idea that I should record it outside. So created a quick project that would scroll the script I wrote so I could read off it like a teleprompter. Great. I set everything up on a table. Cue the narrator saying "It was in that moment when he knew he effed up!" haha. A strong wind came and blew my laptop off of the stand. I had a little hope that everything would be fine, but nope! The screen was broken and when I plugged in an external monitor, nothing showed up and the touch bar wouldn't light up. I felt so terrible. I've never broken a work laptop ever. Told my manager and my manager's manager and they were both cool. Said to contact IT and tell them for what the next steps would be. I made the ticket and IT said they were sorry it happened and would send a laptop to me overnight. Wow! Still feel a little bad, but glad everyone was really understanding. So, I'm still standing. I finished recording the video and edited a few different variations and sent it to be reviewed.

- Personal : Started working on how I wanted to store the data so that they would show on a new page I created in my side project. I already have the front end set up to look for the endpoint where the data will live. I created a graphic to share on social media.

![View of a mountain chain covered in pine trees stretching into the distance in Rarău Mountains, Romania](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qh5rks6fiqp2h5r7gnup.jpg)

The plan is to get the data saved in a way so that it knows to show in the page I created. Then style the data on the frontend and then create the actual real stories that will generate the data and start it all off. I want to set up a draft tweet so I can just send it in the morning.

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube wD_IA3zsoEc %}
my git aliases: wip, uncommit and unammed
Tags: git, devjournal, alias
Published: 2022-08-10 22:52:00

In my previous post, I talked about my [amend and append aliases](https://dev.to/ccoveille/my-git-aliases-amend-and-append-1l5c)

Here I will talk about other aliases that are useful.

```
[alias]
    wip =      commit --message 'wip' --no-verify
    uncommit = reset --soft "HEAD~1"
    unamend =  reset --soft "HEAD@{1}" 
```

These syntaxes differ from HEAD^1, I never remember them, or what they mean. So aliases are definitely useful.

## wip

commit with a simple message and bypass git hook if there are any.

### How to use it

This can be used to commit:

* staged files 

```shell
git add foo/bar
git wip
```

* file(s) passed in parameter o

```shell
git wip foo/bar
```

* or everything

```shell
git wip -a
```

The same way you may have used `git commit -a`

### when do you need wip ?

* when you have local changes you want to commit in the current branch before switching to another.
* in some use case when rebasing, and you know you will have conflicts.

## uncommit

This helps to uncommit the last committed changes.

Please note this will nuke your commit, and your commit message will be lost.

So you can use `git log --format="%B" -n 1` before launching `git uncommit`

### How to use it

```shell
git uncommit
```

no parameter is needed

### when do you need uncommit ?

* when you used `git wip` and want to uncommit.

so you committed things, changed branch, did things, then switched back to the branch were you used `git wip`.

* when you know your last commit is crap

## unamend

### How to use it

```shell
git unamend
```

no parameter is needed

### when do you need unamend ?

* when you added changes to a commit, but you made a mistake

so you did something like this

```shell
git commit filea
git amend folderb fileb
```

here you notice you made a mistake, but you don't want to use uncommit that would nuke the commit message and first commit, you only want to restore to the state before you used git amend.

So you can simply type this.

```shell
git unamend
```

And you will be back to the state you were before amending.

Then you can use `git reset fileb` or `git reset -p` to remove some files or changes from the index.

Note: `git unamend` works perfectly for reverting `git append` changes, as the only difference with `git amend` is the fact you may have updated the commit message or not
I’ve been building animations 👀😅
Published: 2022-08-10 22:44:36

**So, it’s been a while..**
My last post I built my very first game out of JavaScript. Since then I took some personal time, I had a birthday, held a charity fundraiser and continued to learn and build things..

I’ve been working on my responsive development and within this course I learnt about animations.. of course I’ve touched on them before, keyframes, easing-in, easing-out blah blah but this time I was like damn! Animations, why did I breeze past this last time! 👀

I love front end development, the possibilities with HTML and CSS Styling alone 🤩 it’s like painting or drawing but in code. 

So I recently built 2 animations, one is a scene, there’s a cheeky animation to begin with and then it’s interactive after that, the second is a silly tiny violin inspired to me by an annoying friend who I told one day I’d build him a tiny violin for his troubles 😂 

**My Animated Landscape** 
It’s browser or minimum landscape tablet only just because it’s an animated scene, it’s built in HTML, CSS and some jQuery. The images are free SVGs from a google search.  
[Animated Landscape](https://animation-landscape-madebywillo.netlify.app/)


**My Tiny Violin**
It works all devices, so it’s mobile friendly 🙂 
It’s built in just HTML and CSS. 
The images are SVGs and the music is also from a google search but is credited in the footer. 

[Tiny Violin](https://tiny-violin-madebywillo.netlify.app/)

I had a TON of fun building these, I hope you enjoy them also! 😅 

The code for them is linked on the webpages, feel free to have a nose
Day 123: The Photoshop project
Published: 2022-08-10 22:34:12

Hi!
Today I can say that I focused more on Yesterday Photoshop project because I was not happy with the progress I ended up starting it over again but after many trials it ended up great. I also made new progress on the searching feature from yesterday but it's still not fully complete but it will be tomorrow 
I just need to rest first (so tired)

Signing off
my git aliases: amend and append
Tags: git, devjournal, alias
Published: 2022-08-10 22:28:00

Here are now of my best git alias buddies:

```
[alias]
amend=commit --amend --edit
append=commit --amend --no-edit
```

* amend: add changes to last commit
* append: same as amend without having a need to make change in the commit message

Here, I'm assuming the last commit is a local commit.

## how to use them

### Forgotten changes

let's say you need to send modification on two files, but you forgot one file.

So now last commit file A, and you need to add the change from file B

use `git append path/fileb` to add them to last commit.

### Typo or forgotten things in the last commit message

Simply use `git amend`, the editor will be reopened.

### Forgotten file

Let's now say, you added the changes and committed them, but you forgot a file that is not followed by git.

Simply add it with `git add path/fileb` then run `git append` (or amend if you want to add things to commit message)


## how to set them up

If you want to add these aliases, run this:

```shell
git config --global alias.amend "commit --amend --edit"
➜ git config --global alias.append "commit --amend --no-edit"
```
Finding mean, median, and mode using SQL.
Tags: sql, datascience, beginners, database
Published: 2022-08-10 22:10:10

It is very often that we need to calculate averages in our data for various analysis tasks. It quite easy when it come to calculating Mean, Median and Mode in tools such as Excel with the help of inbuilt functions. 

In this this blog we will discuss ways to calculate these values using just SQL.


Let us consider table below to find mean, median, and mode of salaries department wise for all the departments.

```
╔═══════╦════════╦════════╗
║ empid ║ deptid ║ salary ║
╠═══════╬════════╬════════╣
║ 1     ║ 1      ║ 12000  ║
╠═══════╬════════╬════════╣
║ 2     ║ 2      ║ 3400   ║
╠═══════╬════════╬════════╣
║ 3     ║ 3      ║ 45000  ║
╠═══════╬════════╬════════╣
║ 4     ║ 4      ║ 1320   ║
╠═══════╬════════╬════════╣
║ 5     ║ 4      ║ 5600   ║
╠═══════╬════════╬════════╣
║ 6     ║ 2      ║ 2700   ║
╠═══════╬════════╬════════╣
║ 7     ║ 1      ║ 12000  ║
╠═══════╬════════╬════════╣
║ 8     ║ 3      ║ 34000  ║
╠═══════╬════════╬════════╣
║ 9     ║ 4      ║ 4600   ║
╠═══════╬════════╬════════╣
║ 10    ║ 1      ║ 9000   ║
╠═══════╬════════╬════════╣
║ 11    ║ 1      ║ 13000  ║
╠═══════╬════════╬════════╣
║ 12    ║ 2      ║ 12000  ║
╠═══════╬════════╬════════╣
║ 13    ║ 4      ║ 1320   ║
╠═══════╬════════╬════════╣
║ 14    ║ 3      ║ 24000  ║
╠═══════╬════════╬════════╣
║ 15    ║ 3      ║ 45000  ║
╠═══════╬════════╬════════╣
║ 16    ║ 2      ║ 3400   ║
╠═══════╬════════╬════════╣
║ 17    ║ 2      ║ 1230   ║
╠═══════╬════════╬════════╣
║ 18    ║ 1      ║ 15000  ║
╚═══════╩════════╩════════╝
```

Finding mean is quite easy as it is just the average of all the salary for a department and we can use the AVG function for that.


```
SELECT deptid
	,AVG(SALARY) AS mean_salary
FROM employee
GROUP BY deptid
```

Calculating mode of salary for each department will be a bit tricky as we don't have inbuilt SQL functions for that.

Steps for it are :

1. For this we start by calculating salary count for each unique salary in each department.

2. Then we rank the salary by its frequency (salary count) in each department.

```
salary_counts AS (
    SELECT deptid,
        salary,
        COUNT(salary) AS salary_counts
    FROM employee 
    GROUP BY deptid, salary 
)
-- ranking salaries by frequency
, mode_salaries AS (
    SELECT deptid,
        salary,
        RANK() OVER( PARTITION BY deptid ORDER BY salary_counts DESC ) AS salary_counts_rank
    FROM salary_counts
)
SELECT deptid,
    salary as mode_salary
FROM mode_salaries
WHERE salary_counts_rank = 1
```

For calculating median of salary for each department **PERCENTILE_DISC** SQL function along with GROUP can help us calculate that.

```
median_salaries AS (
    SELECT deptid,
        PERCENTILE_DISC(0.5) WITHIN GROUP(ORDER BY salary) AS median_salary
    FROM employee
    GROUP BY deptid
)
SELECT deptid,
    median_salary 
FROM median_salaries
```

And that is how we can calculate mean, median, mode in SQL.