teleren/devto huggingface dataset:
Combining ls and shuf ... ... and more
Tags: bspwm, pywal, shell, linux
Published: 2022-05-15 16:36:47

## Introduction
[Portuguese version](https://dev.to/voyeg3r/combinando-o-ls-com-o-comando-shuf-and-more-379i)

Some commands do not generate any output list, authough dealing with lists from other commands, the [shuf command](https://linux.die.net/man/1/shuf) is one of these. If I want to get a random image name from my wallpapers dir I do:


```sh
ls -1A ~/img/backgrounds/* | shuf -n 1
```

The above command could be used to create a variable and be used as other command argument, in this particular case a command that, based on your wallpaper color, will set your terminal colorscheme:

```sh
sudo pip3 install pipx
pipx install pywal
```

The [pipx](https://pypa.github.io/pipx/) command installs your python modules in a sandbox, avoiding namespaces clashes. After installing [pywal](https://pypi.org/project/pywal/) you will have a `wal` command, using it I have created this shell script line:

```sh
/home/sergio/.local/bin/wal -i "$(ls -1A ~/img/backgrounds/* | shuf -n 1)"
```

Change the path and system variables accordingly, after that open up a new terminal and run the following command:

## Update!

Watching [more videos](https://www.youtube.com/watch?v=J_jfjnK-ZFY) about pywal I have learned that you do not need to use the `shuf` command, just give a directory to the `wal` command and it will choose a random image from there, but the knowledge on using shuf will eventually

```sh
wal --preview
```

This way every time you run the command...

```sh
wal -i "path-of-your-wallpapers"
```

...you will see a preview of your terminal theme.

In the case of my "tiling window manager", the bspwm, I have a shortcut on my `sxhkdrc`:


```sh
# change background
super + b
    /home/sergio/.local/bin/wal -qi ~/img/backgrounds/ 
```

Also one line on my `bspwmrc`

```sh
/home/sergio/.local/bin/wal -qi ~/img/backgrounds/ 
```

Finally I have one line on my crontab that runs the same script every five minutes:

```sh
# crontab -e
# vim:et:sw=4:ts=4:cms=#%s:
# >/dev/null 2>&1   <- used to preven sending e-mail's
# env | grep -i display  to get your DISPLAY variable
# otherwhise feh will not be abble to change your background
# source: https://superuser.com/a/1122245/45032
DISPLAY=':0'
SHELL=/bin/sh
PATH=/sbin:/bin:/usr/sbin:/usr/bin:/home/sergio/.dotfiles/algorithm/shell/bash/
XDG_PICTURES_DIR=/home/sergio/img
WALLPAPER_DIR=$XDG_PICTURES_DIR/backgrounds/
WAL=/home/sergio/.local/bin/wal
MAILTO=""
*/5    *    *    *    *  $WAL -qi $WALLPAPER_DIR
# */5    *    *    *    *  feh -z --bg-fill /home/sergio/img/backgrounds/*
# */5     *     *     *     *  wal -i "${XDG_PICTURES_DIR}/backgrounds/$(ls ${XDG_PICTURES_DIR}/backgrounds | shuf -n 1)"
#*/30    *    *    *    *  mpg123 /home/sergio/music/drink-water.mp3
```

## Randomization in other apps:

Many utilities have their own flag for randomization, the `mpg123` for example has a `-Z` flag for that.

For those apps that do not have randomization we can also use a shell trick ...

```sh
echo $((RANDOM % 10))
```

... Where 10 is the maximum randomized number possible
Host static css, javascript, json, xml and txt files online for free
Tags: css, javascript, json, hosting
Published: 2022-05-15 16:18:12

If you are looking to host your static files online for free, get started with [staticsave.com](https://staticsave.com/).

It follows a paste hosting method, where users can either paste their code or type their code to the text field provided and submit to host it online, rather than the widely used uploading method.

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

The process is very easy for anyone to get start. First you need an account to start using the service. We offer onetap signin using Google Account.

After logging into the account, you will be able to create a custom (basically a folder), from there you will have options to add pages to the folder name.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0l0elzjxijut0bfk7dzk.jpeg)

Specify the filename and filetype there and click on add new page. Your specified static page will be created. There you can either paste your content or type it. And submit to save the content. 

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

Users will have the option to host the content in 3 modes namely public, unlisted, private. Private hosting is currently available to Premium users.

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

If the user need to update the static file content. They can simply update the content anytime by pasting new content or typing it and submit for save it online.

Watch the below Youtube video to know how to host your static files with StaticSave website:
{% embed https://www.youtube.com/watch?v=MtEYm2DpSME %}

Head over to the [Pricing page](https://staticsave.com/pricing.php) to know the features we provide for the free and paid plans.
Laravel Filament in SQL SERVER : Error [Missing parameter: record]
Published: 2022-05-15 16:02:22

I installed Laravel Filament and followed some tutorials. Then I tried it using sql server. I already have my database table but when I create a filament resource and click the menu then I encounter this error : ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o4xm1wylbe2bo7bpyp3g.png)
So the first thing I do is to google for this error. But it seems that no one has encountered it yet. So I tried to solve it on my own. What I found out is that filament is looking for an id in the table with small i while I use capital I. 
This is my table: 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qsdd13jf9dkp2s0y5lto.png)
So I changed the Id in my table into id, like this :
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9z16un5si3duf5pqnojw.png)
 and the error goes away.

Hope this helps.

**Thanks guys.**
Quick resizing an image on MacOS
Tags: image, resizing
Published: 2022-05-15 15:48:07


---
title: Quick resizing an image on MacOS
published: true
description: A quick way to resize the image without installing any new tool
tags: image, resizing,
//cover_image: https://direct_url_to_image.jpg
---

I found a very handy way to resize an image without installing additional tool on macOS.

# Add Hotkey to trigger `Adjust Size...` feature in App `Preview`
The default image preview app has an awesome resize feature. What I do is just trigger it by using a global shortcut.

Got to **System Preferences → Keyboard → App Shortcuts**, then add `Preview` with this new global hotkey to app `Preview`, see screenshot

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

# Double click to open an Image in `Preview`
Use hotkey **⌘ + ⇧ + c**, to trigger the `adjust size` feature in `Preview`, then select the size and save it. Job is Done !!!
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9zits69txyegngr4i6gh.jpg)
Free 12 new Chakra UI components - TemplatesKart
Tags: react, webdev, showdev, chakraui
Published: 2022-05-15 15:35:03

Let's find out 12 new chakra-ui components that I have added to [TemplatesKart](https://templateskart.com) website recently.

## Links
Website: [TemplatesKart](https://templateskart.com)
Github Repo: [TemplatesKart Code](https://github.com/MA-Ahmad/templateskart)

## Components overview

1. [Milestones](https://templateskart.com/components/milestones)
  * With cards on both sides
  * With cards on one side
  * With icons year-wise

2. [Pricing](https://templateskart.com/components/pricing)
  * Single tier
  * Two tiers

3. [Sidebars](https://templateskart.com/components/sidebars)
  * With header
  * Without header

4. [Page Sections](https://templateskart.com/components/page-sections)
  * CTA banner
  * Mission section
  * Overview section

5. [Features](https://templateskart.com/components/footers)
  * With cards
  * Simple 2 columns

## Some Components Screenshots

*Milestones*
![Milestones Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yhhfbq6z6ruq8gdxmpoy.png)

*Pricing*
![Pricing Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5af055dli2s6cz9s9qw1.png)

*Sidebar*
![Sidebar Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z5twxqzulothluzs6es3.png)

*Overview section*
![Page section Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4qrlcv6a7si7wjr46g8m.png)

*Features*
![Features Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bga9bqyx1eh9jqgqzyd9.png)


**Show your support**
Give a ⭐️ on Github if you like my work! 🙏
Show/Hide desktop items on MacOS
Tags: shell, desktop
Published: 2022-05-15 15:21:25

---
title: Show/Hide desktop items on MacOS
published: true
description: Just quick show/hide the desktop items on MacOS
tags: shell, desktop
---

I am a minimalist and I prefer to have a very clean desktop without any items. But I wanna be able to find/open the files in `finder` in the folder **~/Desktop**.

To make it possible, I just create two aliases: `deskon` and `deskoff`.

```
alias deskon='defaults write com.apple.finder CreateDesktop -bool true && killall Finder'
alias deskoff='defaults write com.apple.finder CreateDesktop -bool false && killall Finder'
```

# `deskoff`
by using command `deskoff`, I can hide all items from desktop to have a clean desktop with only wallpaper. But the hidden files are still shown in `finder` app on the path `~/Desktop`.

 ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/38setm1rxio6ou4by0qx.jpg)
 

# `deskon`
by using command `deskon`, I can show the items again.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oc5c7wz4aydbp2lwintl.jpg)
SnyPy - Open source on-prem code snippet manager
Tags: webdev, productivity, opensource, programming
Published: 2022-05-15 15:11:26

[SnyPy](https://snypy.com/) is a side project I started about 4 years ago in my free time as I was learning Angular and digged deeper into building single page applications. Due to work and lack of time the release of the application has been postponed, but recently it had the first stable release and we are now on version `1.1.2`

The [next release](https://github.com/snypy/snypy-frontend/milestone/3) `1.2.0` is also in progress.

* Source: https://github.com/snypy
* Demo instance: https://app.snypy.com/
    * Demo user: demo/EeCh2uWe

![Screenshot of SnyPy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ybg81fbrce0h5jt09jcj.png)

Please be kind, the project still requires documentation and tutorials, but I would appreciate feedback, questions or further suggestions.
Combinando o ls com o comando shuf ... "and more":
Tags: bspwm, pywal, terminal, shell
Published: 2022-05-15 14:48:25

## Introdução

[English version](https://dev.to/voyeg3r/combining-ls-and-shuf-and-more-2api)


Alguns comandos não geram uma lista de arquivos ou de sua saída, embora lidem com listas geradas por outros comandos, o [shuf](https://linux.die.net/man/1/shuf) (embaralhador) é um desses exemplos, se desejo pegar o nome de uma imagem aleatória no meu diretório de imagens eu faço:

```sh
ls -1A ~/img/backgrounds/* | shuf -n 1
```

O comando acima pode ser usado para criar uma variável a ser usada em outro comando, no caso um comando que além de setar o seu papel de parede, baseado nas cores do wallpaper, vai configurar as cores do seu terminal.

```sh
sudo pip3 install pipx
pipx install pywal
```

O comando [pipx](https://pypa.github.io/pipx/) instala seus programas em um sandbox, evitando conflitos no namespace. Após instaldo o pywal você terá um comando `wal`, usando ele criei o seguinte script:

```sh
/home/sergio/.local/bin/wal -i "$(ls -1A ~/img/backgrounds/* | shuf -n 1)"
```

Altere o caminho de acordo com o seu sistema e usuários, após isso abra um novo terminal e rode esse comando:

## Atualização!

Assistindo [vídeos sobre o pywal](https://www.youtube.com/watch?v=J_jfjnK-ZFY) descobri que na verdade não é necessário usar o comando shuf ou qualquer outro para pegar uma imagem aleatória, apenas fornecendo o caminho da pasta dos papeis de parede o `wal` escolherá uma imagem aleatoriamente, contudo o conhecimento adquirido com o `shuf` fica, como dizem os norte americanos: "in the back burner", guardado, como por exemplo para escolhar uma música aleatória em um momento qualquer.

```sh
wal --preview
```

Assim cada vez que você rodar o comando ...

```sh
wal -i "caminho-do-arquivo
``` 

... você verá um preview de como ficará o tema do seu terminal.

No caso do meu "tiling window manager" o bspwm eu tenho um atalho no sxhkdrc:

```sh
# change background
super + b
    ~/.local/bin/wal -qi ~/img/backgrounds/
```

também uma linha no início do `bspwmrc`:

```sh
~/.local/bin/wal -qi ~/img/backgrounds/
```

E finalmente eu tenho uma linha no meu crontab que roda esse mesmo script a cada cinco minutos:

```sh
# crontab -e
# vim:et:sw=4:ts=4:cms=#%s:
# >/dev/null 2>&1   <- used to preven sending e-mail's
# env | grep -i display  to get your DISPLAY variable
# otherwhise feh will not be abble to change your background
# source: https://superuser.com/a/1122245/45032
DISPLAY=':0'
SHELL=/bin/sh
PATH=/sbin:/bin:/usr/sbin:/usr/bin:/home/sergio/.dotfiles/algorithm/shell/bash/
XDG_PICTURES_DIR=/home/sergio/img
WALLPAPER_DIR=$XDG_PICTURES_DIR/backgrounds/
WAL=/home/sergio/.local/bin/wal
MAILTO=""
*/5    *    *    *    *  $WAL -qi $WALLPAPER_DIR
```

## Aleatoriedade em outros comandos

Para escolher uma música aleatoriamente eu poderia rodar o seguinte comando:

```sh
mpg123 $(ls **/*.mp3 | shuf -n 1)
```

Mas mesmo o comando `mpg123` tem a opção `-Z` que também faz a escolha aleatória
Drop-down iTerm2 in macOS
Tags: iterm2, terminal
Published: 2022-05-15 14:44:31

---
title: Drop-down iTerm2 in macOS
published: true
description: Access iTerm2 as drop-down everywhere you need it
tags: iterm2, terminal,
//cover_image: https://direct_url_to_image.jpg
---

# Prerequisite
We have already installed `iTerm2` on Mac.

## Config Hotkey
At first, set hotkey to open `iTerm2` terminal window instantly.

Go to **Preference → Keys → Hotkey**, and check the **show/hide all windows with a system-wide hotkey** checkbox and choose the hotkey combination. My personal key: **⌥ + empty-space**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eep4ci06t63z9qs7is1c.png)


# Exclude `iTerm2` from Tab-switcher
 
Go to **Preferences → Appearance**, and check **Exclude from docker and ⌘-Tab Switcher**.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5bkogehh54saeanfuwqi.png)

# Config the window in `iTerm2` profile
🔥 Now config the correct window size and position in profile
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ks1i01vf7kdx7ahrgaw2.jpg)
 
 

# Run `iTerm2` on startup
Go to **System Preferences → users and groups**. Then choose default user and go to **Login Items** tab. Add `iTerm2` as new item to run it on startup.

# Done !
Now we can open iTerm2 everywhere, just enter **⌥ + empty-space**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b22e5qhrqpk61qtwktie.jpeg)
Some Motivation!
Tags: learning, strong
Published: 2022-05-15 14:34:42

Not writing something technical today. I am working on learning more about [markdoc](https://github.com/markdoc/markdoc) from Stripe but also how to use React Native and RevenueCAT extension for Firebase. 

But I'll just add a simple motivation image for people learning to program, struggling with life, and other stuff. Stay strong!

![motivational-quotes-design-template-8f0084fca5ee44ef3ed8bad052c9173a_screen.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1652625172007/qfDvkUOjY.jpg)
Watch Props in Vue/Nuxt Composition API
Tags: vue, nuxt, compositionsapi, devjournal
Published: 2022-05-15 12:55:39

Watch dynamic props inside setup method in [Nuxt3](https://v3.nuxtjs.org/) or [Vue3](https://vuejs.org/guide/components/props.html#prop-validation) [CompositionAPI](https://vuejs.org/guide/extras/composition-api-faq.html)


```Vue
<script lang="ts" setup>
import { defineProps, watch } from 'vue'

const prop = defineProps({
  value: { default: '', type: [String, Number] },
})

watch(
  () => prop.value,
  () => {
    console.log('prop value changed', prop.value)
  }
)
</script>

<template>
  <div>{{ value }}</div>
</template>

```
connect-redis on Docker with Password
Tags: webdev, docker, node, redis
Published: 2022-05-15 12:33:32

I want to share the solution to use [connect-redis](https://www.npmjs.com/package/connect-redis) with a password on Docker.

# Problem
I use redis@v4.
[connect-redis official website](https://www.npmjs.com/package/connect-redis) provides the following code. However, this code does not work correctly on Docker using docker-compose. This code does not include password settings. It is also one of the problems.
I guess that this container connects to `localhost` on the setting of this code. So it might be its cause.

```js
const session = require("express-session")
let RedisStore = require("connect-redis")(session)

// redis@v4
const { createClient } = require("redis")
let redisClient = createClient({ legacyMode: true })
redisClient.connect().catch(console.error)

app.use(
  session({
    store: new RedisStore({ client: redisClient }),
    saveUninitialized: false,
    secret: "keyboard cat",
    resave: false,
  })
)
```

# Solution
[redis](https://www.npmjs.com/package/redis) on npm website provides me to solve these problems.
It indicates the following code. So I try to make a code according to this code.

```js
createClient({
  url: 'redis://alice:foobared@awesome.redis.server:6380'
});
```

The contents of this URL are the following.
```
redis[s]://[[username][:password]@][host][:port][/db-number]
```
Of course, this is an URL; you should not use "/," "+," "&" and "?".
`host` is a service name that is written on `docker-compose.yml`.
The following is a sample code.
You must add `legacyMode:true` to `createClient` argument. The process does not escape from store process if you do not add this option.

```js
const RedisStore = require("connect-redis")(session);

// redis@v4
const { createClient } = require("redis")
console.log(env.REDIS_PASS);
// let redisClient = createClient({host: 'redisdb', port: 6379, legacyMode: true, password: env.REDIS_PASS })
let redisClient = createClient({url: `redis://${env.REDIS_USER}:${env.REDIS_PASS}@${env.REDIS_HOST}:${env.REDIS_PORT}`, legacyMode: true})
redisClient.connect().catch(console.error);
```

The description of each vairable on this code is the following.

```
REDIS_USER=user name（default value is "default"）
REDIS_PASS=password
REDIS_HOST=host name (It is written to docker-compose.yml)
REDIS_PORT=port number（default value is 6379）
```

---

This original article is the following that is written by me. This article was translated from Japanese to English.
{% embed https://zenn.dev/akira_kashihara/articles/3ec664e15f561d %}
Beautify Github Profile
Tags: github, beginners, programming, tutorial
Published: 2022-05-15 11:45:19



## Hello friends 🖐️

how are you ? If you want to make the look of your github profile more beautiful, you have come to the right place

This repository helps you to have a more beautiful and attractive github profile, and you can access a set of tools and guides for beautifying your github profile. 

You can access this repository via the following link: 👇

[github ](https://github.com/rzashakeri/beautify-github-profile)
3 Best Image Optimization Online Website Tools
Tags: image, imageoptimizer
Published: 2022-05-15 11:41:40

Images are more than just a decoration for your website. They can make or break the conversion rate of your website.

The following are 5 best image optimization online website tools that you can use to optimize images:

## 1) Image Optimizer

ImageOptimizer net is a free online tool that optimizes images and reduces the size of the file without compromising on quality.

ImageOptimizer.net is a free online tool that optimizes images and reduces the size of the file without compromising on quality. It provides a range of options to reduce image size by up to 50% with just one click, including JPEG optimization, PNG optimization, GIF optimization, and SVG optimization.

## 2) Compressor io

Compressor io is a free online tool that optimizes images and makes them responsive.

Compressor.io is an online tool that compresses images and makes them responsive, so they can be used on any screen size without compromising on quality.

It can reduce the file size of an image by up to 10 times without losing any quality. It also provides options for resizing, cropping, and adding watermarks to images which are not available in other tools like Photoshop or Gimp.

It also has a drag-and-drop interface which allows you to upload your images directly from your desktop or mobile device and start optimizing it in just seconds.

## 3) Tinypng

TinyPNG is a web-based image optimizer that takes PNG and JPEG images and reduces their file size without losing any quality.

It is a web-based application that is easy to use. You can upload your images from your computer or you can drag and drop them onto the TinyPNG website.

The app will then automatically optimize them for you, so you don't have to worry about the technical details of file size optimization yourself.
HTML - HTML text fundamentals
Tags: mdn, html, programming
Published: 2022-05-15 11:17:24

## HTML text fundamentals

### Structure in text

One of HTML's main jobs is to give text structure so that a browser can display an HTML document the way its developer intends. We can add structure to a page of text by adding headings and paragraphs, emphasizing words, creating lists, and more.

- `<h1> - <h6>` - headings
- `<p>` - paragraph
- `<ul> <ol> <li>` - unorderd list, ordered list, list
- `<em>` - emphasis
- `<i> <b> <u>` - italic, bold, underline

### <mark>What is semantics HTML?</mark>

The HTML semantics refers to the tags that provide meaning to an HTML page rather than just presentation. It makes HTML more comprehensible by better defining the different sections and layout of web pages.

### <mark>What are semantic elements?</mark>

A semantic element clearly describes its meaning to both the browser and the developer. Examples of non-semantic elements: `<div>` and `<span>` - Tells nothing about its content. Examples of semantic elements: `<form>`, `<table>`, and `<article>` - Clearly defines its content.

### <mark>Why do we need semantics?</mark>

- It makes web pages more informative and adaptable.
- It allows browsers and search engines to better interpret content.
Every web developer must learn Svelte JS
Published: 2022-05-15 11:12:18

Playlist Here 
https://www.youtube.com/watch?v=lxzyI4WoffM&list=PLT5Jhb7lgSBMqIuNda0gGNEiMS-ahGJM1

Svelte was developed first in 2016 by Rich Harris, the graphics editor at The New York Times. He is also known for having developed:

- Ractive, a UI library
- Rollup, a bundler module
- Buble, an ES2015 transpiler

Svelte is getting more popular because its syntax is more native to javascript, it does not have any complex things with it and its easy to understand.

It does not have virtual dom, instead compiling code into tiny, pure Vanilla JS. 

!['sevelte js'](https://d33wubrfki0l68.cloudfront.net/5cab4dadee6872dbd369010de70c3df2324857e8/752c6/assets/images/svelte_popular.webp)

Instead of talking here i have covered all these in my videos 30 + videos on Svelte JS with all different apps and concepts 

- Base Syntax and core features
- Conditionals and loops
- Looking more into Reactivity
- Food Menu Dashboard with Svelte JS
- Diver deeper into components
- Working with Forms
- Managing data in stores (all different type store)
- write custom store 
- HTTP Requests
- Using special Elements
- Routing and SSR with Svelte Kit
- Deploying App
- Additional Parts
- Auth using Auth0
- Integration with BE APIs

https://www.youtube.com/watch?v=lxzyI4WoffM&list=PLT5Jhb7lgSBMqIuNda0gGNEiMS-ahGJM1

{% embed https://www.youtube.com/embed/lxzyI4WoffM %}