teleren/devto huggingface dataset:
HTML + CSS +JS = Aplicación funcional
Tags: html, javascript, css
Published: 2021-12-27 02:01:00

🎉 **En mi primer posteo en esta comunidad** quería compartir _una aplicación funcional desarrollada en HTML, CSS & JS_ para el Hotel en el cual trabajo en mi ciudad Ushuaia, Argentina.

🤖 Una de las _tareas repetitivas que quería automatizar_ durante mi turno es la de **enviar mensajes con novedades a los huéspedes del hotel**. Para ello desarrollé esta mini aplicación que ya tiene información y un diseño predeterminado. 

> Actualmente esos mensajes se imprimen en papel y se envían departamento por departamento, práctica que de a poco estamos reemplazando por mensajes por WhatsApp. Pero eso es otra historia.

En [codepen.io](https://codepen.io) dejo el código completo y cada uno con sus comentarios para que lo analicen.

Usé:
* HTML para la maquetación del diseño
* CSS y [Bootstrap](https://getbootstrap.com/) para _ponerlo bonito_
* JS para que cuando se haga click en el botón "Continuar", muestre la página de impresión y procese la información del formulario.

{% codepen https://codepen.io/viktormorales/pen/JjrMPRR %}

Esta aplicación es la base de una aplicación un poco mayor, ya que **la idea final es que** cuando se hace click en "IMPRIMIR":
1. Imprima el mensaje,
1. Lo guarde en una carpeta,
1. Y también guarde el registro en una base de datos para consultas posteriores.

🙋‍♂️ Este artículo es un servicio para aquellos lectores que están iniciando en estas tecnologías puedan ver un uso sencillo y aplicable a la vida real.

¡Saludos!
Can't recall everything you type?
Tags: productivity, performance, github, opensource
Published: 2021-12-27 01:59:38

<h2 align="center">
<a href="https://github.com/z-shell/zi">
<img src="https://raw.githubusercontent.com/z-shell/zi/main/docs/images/logo.png" alt="Logo" width="60" height="60"></a></h2>

---

### Step 1

<div align="center"><h3>

Install ❮ [ZI](https://github.com/z-shell/zi) ❯ or any other plugin manager for Zsh.

</h3>

### Step 2

Install [H-S-MW](https://github.com/z-shell/H-S-MW) - it has a feature called context viewing. It also will bind `Ctrl-R` to a widget that searches for multiple keywords in `AND` fashion. In other words, you can enter multiple words, and history entries that match all of them will be found. The entries are syntax highlighted. In most cases it provides a sense as commands would be suggested by AI and if your history is optimized in most cases it takes 1 to 3 key presses to command get suggested - which actually been typed months ago and even if only typed once.

Example to optimize history in Zsh. Place to your .zshrc:

```shell
# Remove older duplicate entries from history.
setopt hist_ignore_all_dups
# Expire A Duplicate Event First When Trimming History.
setopt hist_expire_dups_first
# Do Not Record An Event That Was Just Recorded Again.
setopt hist_ignore_dups  
# Remove superfluous blanks from history items.       
setopt hist_reduce_blanks
# Do Not Display A Previously Found Event.
setopt hist_find_no_dups
# Do Not Record An Event Starting With A Space.
setopt hist_ignore_space
# Do Not Write A Duplicate Event To The History File.
setopt hist_save_no_dups
# Do Not Execute Immediately Upon History Expansion.        
setopt hist_verify
# Allow multiple sessions append to one zsh command history.           
setopt append_history
# Show Timestamp In History.
setopt extended_history
# Write to history file immediately, not after shell exit.
setopt inc_append_history
# Share history between different instances of the shell.
setopt share_history    
```

### Step 3

Customize it to suit your needs. (add following to your `.zshrc`)

```zsh
# Number of entries to show (default is $LINES/3).
zstyle ":history-search-multi-word" page-size "8"                      
# Color in which to highlight matched, 
# searched text (default bg=17 on 256-color terminals)
zstyle ":history-search-multi-word" highlight-color "fg=yellow,bold"
# Whether to perform syntax highlighting (default true)
zstyle ":plugin:history-search-multi-word" synhl "yes"                 
# Effect on active history entry.
# Try: standout, bold, bg=blue (default underline)
zstyle ":plugin:history-search-multi-word" active "underline"
# Whether to check paths for existence
# and mark with magenta (default true)
zstyle ":plugin:history-search-multi-word" check-paths "yes"           
# Whether pressing Ctrl-C or
# ESC should clear entered query
zstyle ":plugin:history-search-multi-word" clear-on-cancel "no"
```

---

How many keystrokes does it take to find the command you were looking for? :)

Explore more: https://z-shell.pages.dev
Profile Card
Tags: codepen
Published: 2021-12-27 01:58:52

<p>This Profile Card, actually created for <a href="https://harunpehlivantebimtebitagem.site123.me/" target="_blank">HP IT GROUP (TEBIM TEBITAGEM) TTGRT</a> 

{% codepen https://codepen.io/harunpehlivan/pen/wrBVaX %}
Envato Remix Competetion
Tags: codepen
Published: 2021-12-27 01:53:06

<p>My Envato Remix contest submission.</p>

<p>Check out the contest details here: <a href="https://hpitgroup.glitch.me/" target="_blank">HARUN PEHLİVAN</a></p>

{% codepen https://codepen.io/harunpehlivan/pen/LzppYX %}
Hi There !
Tags: codepen
Published: 2021-12-27 01:31:12

<p>Hey here is just a prototype of profil card using material design :)
Selected by MaterialUp : 
<a href="http://www.materialup.com/harunpehlivantr" target="_blank">
HARUN PEHLİVAN
</a></p>

{% codepen https://codepen.io/harunpehlivan/pen/eGNjyL %}
Interactive profile card
Tags: codepen
Published: 2021-12-27 01:22:36

<p>This one is created with Material Design guides in mind, but I wanted to make something more than usual Material Design cliche. So, I made it look like it's out of glass instead of paper. And it's draggable, drag it around to check the background blur effect. Then, make sure to click on the info icon to check the card animation.</p>

{% codepen https://codepen.io/harunpehlivan/pen/MEaYOM %}
CSS Profile Card
Tags: codepen
Published: 2021-12-27 01:16:13

<p>The Profile Card  via HTML&amp;CSS</p>

<p>Liked demo?</p>

<p>You can help me to create new demos in one of the following ways:</p>

<ul>
<li> share link with friends</li>
<li> follow me</li>
<li> donate me some money on tea and cookies, please (<a href="https://harunpehlivan.tumblr.com" target="_blank"> HARUN PEHLİVAN </a>)</li>
</ul>

{% codepen https://codepen.io/harunpehlivan/pen/pWJrQz %}
2022 M1 Mac -Quick Setup
Tags: beginners, productivity, codenewbie, tutorial
Published: 2021-12-27 00:30:43

Did anyone else get a new laptop this holiday season? 👀
Here are the steps I follow to get setup quickly!


## 1. Show hidden folders
`chflags nohidden ~/Library
defaults write com.apple.finder AppleShowAllFiles YES
defaults write com.apple.finder ShowPathbar -bool true
defaults write com.apple.finder ShowStatusBar -bool true
`

## 2. Install brew
`/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"`

* Check your path and make sure path includes your brew location.
 * Check path: `echo $PATH | tr ":" "\n"\n`
 * Brew location: `which brew`
    * (Probably something like `/opt/homebrew/bin`)
 * If the location is missing, then add it to your `~/.zshrc`, like this: `export PATH=/opt/homebrew/bin:$PATH`

## 3. iTerm & OhMyZsh & Starship
* iTerm: `brew install --cask iterm2`
* OhMyZsh: `$ sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"`
* Starship: `brew install starship`
  * `echo 'eval "$(starship init zsh)"' >> ~/.zshrc`
  * (Install font & then change font in iTerm settings)
    * `brew tap homebrew/cask-fonts`
    * `brew install --cask font-hack-nerd-font`

## 4. Node & AWS CLI (for AWS development)
* `brew install node@16`
* `curl "https://awscli.amazonaws.com/AWSCLIV2.pkg" -o "AWSCLIV2.pkg"`
* `sudo installer -pkg AWSCLIV2.pkg -target /`
* `aws configure` (assuming you already have credentials)
* `npm install -g aws-cdk`
* To enable auto-complete, add these to `~/.zshrc`
  * `autoload bashcompinit && bashcompinit`
  * `autoload -Uz compinit && compinit`
  * `complete -C '/usr/local/bin/aws_completer' aws`

## 5. Java 
* For M1, use: https://www.azul.com/downloads/?os=macos&architecture=arm-64-bit&package=jdk

## 6. Other Apps
* Rectangle (window management): https://rectangleapp.com/
* VSCode: https://code.visualstudio.com/download


Let me know if you have other tips/questions! 😊
Top 10 Programming Languages You Must Know In 2022🔥
Tags: programming, python, javascript, machinelearning
Published: 2021-12-27 00:19:41

In this blog we are going to see top 10 best programming languages for 2022. We will see which programming language is best and their features and application. If you like my post then follow me. Lets Start:-👇

[Top 10 Programming Languages You Must Know In 2022](https://codexashish.blogspot.com/2021/12/top-10-programming-languages-you-must.html)

[Best Websites for Blogging](https://codexashish.blogspot.com/2021/12/10-best-free-blogging-sites-in-2022.html)

##Complete Roadmap 2022:-
[Python Complete Roadmap 2022](https://codexashish.blogspot.com/2021/12/complete-roadmap-of-python-programming.html)
[Machine Learning Complete Roadmap 2022](https://codexashish.blogspot.com/2021/12/complete-roadmap-of-machine-learning.html)
[C++ Complete Roadmap 2022](https://codexashish.blogspot.com/2021/12/complete-roadmap-of-c-programming.html)
[Java Complete Roadmap 2022](https://codexashish.blogspot.com/2021/12/java-complete-roadmap-2022.html)
[Data Structure Complete Roadmap 2022](https://codexashish.blogspot.com/2021/12/complete-roadmap-of-data-structure.html)


##Some Laravel Tutorial for developer:
[Laravel 8 Interview Questions and Answers in 2022 (Part #1)](https://codexashish.blogspot.com/2021/12/laravel-8-interview-questions-and.html)
[Laravel 8 Interview Questions and Answers in 2022 (Part #2)](https://codexashish.blogspot.com/2021/12/laravel-8-interview-questions-and_22.html)
[Advance Laravel 8 Interview Questions and Answers 2022](https://codexashish.blogspot.com/2021/12/advance-laravel-8-interview-questions.html)
[Everything About Laravel 8 Composer 2022 | Composer in Laravel 8](https://codexashish.blogspot.com/2021/12/everything-about-laravel-8-composer.html)
[Laravel Jetstream vs Laravel ui  vs Breeze](https://codexashish.blogspot.com/2021/12/laravel-jetstream-vs-laravel-ui-vs.html)

##Python Concept and Projects:-
[10 Best Python Libraries For Machine Learning](https://codexashish.blogspot.com/2021/12/10-best-python-libraries-for-machine.html)
[Alarm Clock in Python with GUI](https://codexashish.blogspot.com/2021/07/alarm-clock-in-python-with-gui.html)
[Tic Tac Toe Game Using Pygame in Python](https://codexashish.blogspot.com/2021/06/tic-tac-toe-game-using-pygame-in-python.html)

**Thankyou for reading my blogs.**
#####My Website:
[CodexAshish](https://codexashish.blogspot.com/)
How to customize Makefile created by ExtUtils::MakeMaker
Tags: perl, make, makefile
Published: 2021-12-26 23:35:34

How to customize Makefile created by <a href="https://metacpan.org/pod/ExtUtils::MakeMaker">ExtUtils::MakeMaker</a>?

The answer is to define a "My::postamble" subroutine that return added the content of the Makefile.

See current SPVM <a href="https://github.com/yuki-kimoto/SPVM/blob/master/Makefile.PL">Makefile.PL</a>.

<b>dynamic</b> section is used if you want to do something just after the default process of "make"


```
sub MY::postamble {
  
  # The content of Makefile
  my $make_rule = '';
  
  # Compile native and precompile codes of standard modules
  unless (grep { $_ eq '-DSPVM_DONT_COMPILE_CORE_MODULES' } @defines) {
    # Native compile make rule
    $make_rule .= SPVM::Builder::Util::create_make_rule_native('Fn');
    $make_rule .= SPVM::Builder::Util::create_make_rule_native('Hash');
    $make_rule .= SPVM::Builder::Util::create_make_rule_native('Time');
    $make_rule .= SPVM::Builder::Util::create_make_rule_native('Unicode');
    
    # Precompile make rule
    $make_rule .= SPVM::Builder::Util::create_make_rule_precompile('Fn');
    $make_rule .= SPVM::Builder::Util::create_make_rule_precompile('List');
    $make_rule .= SPVM::Builder::Util::create_make_rule_precompile('ByteList');
    $make_rule .= SPVM::Builder::Util::create_make_rule_precompile('ShortList');
    $make_rule .= SPVM::Builder::Util::create_make_rule_precompile('IntList');
    $make_rule .= SPVM::Builder::Util::create_make_rule_precompile('LongList');
    $make_rule .= SPVM::Builder::Util::create_make_rule_precompile('FloatList');
    $make_rule .= SPVM::Builder::Util::create_make_rule_precompile('DoubleList');
    $make_rule .= SPVM::Builder::Util::create_make_rule_precompile('StringList');
    $make_rule .= SPVM::Builder::Util::create_make_rule_precompile('StringBuffer');
    $make_rule .= SPVM::Builder::Util::create_make_rule_precompile('Hash');
    $make_rule .= SPVM::Builder::Util::create_make_rule_precompile('Unicode');
    $make_rule .= SPVM::Builder::Util::create_make_rule_precompile('Regex');
  }
  
  # Create precompile tests
  my @test_files;
  find(
    sub {
      if (-f $File::Find::name) {
        my $rel_path = $File::Find::name;
        $rel_path =~ s|^\Q$FindBin::Bin/||;
        if ($rel_path =~ /(\.t|\.pm|\.spvm|\.c|\.cpp|\.h)$/) {
          push @test_files, $rel_path;
        }
      }
    },
    "$FindBin::Bin/t/default"
  );
  my $test_files_str = join(' ', @test_files);
  $make_rule .= "dynamic :: $test_files_str\n";
  $make_rule .= "\tperl t/copy_default_to_precompile.pl\n";
  
  return $make_rule;
}

1;
```

In case of other useful modules such as <a href="https://metacpan.org/pod/Dist::Zilla">Dist::Zilla</a>, I don't know the way. If you know it, write the comments.
tailwindcss | grid |  grid cols-{value} | justify-items-{start,center,end}
Tags: tailwindcss, tutorial, webdev, programming
Published: 2021-12-26 23:35:16

tailwindcss | grid |  grid cols-{value} | justify-items-{start,center,end}
https://youtu.be/I4wCW4dLkcU
If you liked our content help us by subscribing on the channel and leaving a nice comment
Como otimizar execuções do Jest limitando uso de CPU
Tags: javascript, jest, test, testing
Published: 2021-12-26 23:34:58

**Introdução**
Usando Jest como ferramenta de teste em aplicações JavaScript, nota-se que são recorrentes problemas relacionados à performance. Dependendo da quantidade de test suits, mesmo uma maquina com bom hardware não parece ser suficiente para se ver livre de lentidão e eventuais travamentos do sistema.

Este problema está diretamente relacionado com a forma que o Jest faz uso dos recursos do sistema, e pode ser facilmente otimizado limitando a quantidade de threads envolvidas no processo usando a flag `--maxWorkers`

**Funcionamento do Jest em sua máquina**
Por padrão, o Jest não possui otimizações relacionadas ao uso de CPU. Ao rodar os testes, o Jest recruta uma thread para a execução da CLI, e as demais threads são todas usadas para o processamento dos casos de teste.

A ausência de um uso inteligente de threads da CPU resulta em um subaproveitamento do hardware disponível, causando problemas de desempenho.

Para controlar o uso que o Jest faz dos recursos da sua CPU, basta passar a flag `--maxWorkers=` seguido do número de threads que você deseja utilizar no processamento dos casos de teste ou de um valor em porcentagem.

**Otimizando uso de threads**
Em todos os casos que eu testei o desempenho passando o parâmetro `--maxWorkers=50%` foi superior à execução padrão que busca sempre usar o máximo de threads possível.

O número ótimo de workers pode variar de acordo com sua máquina e testes que você está realizando. Então a melhor maneira para encontrar a melhor configuração é testar todas as possibilidades.

Primeiramente você precisa saber o quantidade de threads que seu computador têm, para saber este número baste checar no site da fabricante do seu processador, ou se estiver em um ambiente Linux, rodar o seguinte comando:

```
$ lscpu | egrep '^CPU\('
```
No meu caso tenho 8 threads.

Agora basta testar em todos os casos possíveis, comparar os tempos e obter o número de threads ideal para o seu caso particular.

Este é o comparativo dos tempos que eu obtive testando um exemplo com 72 test suits e 361 casos de teste:

```
Time:        58.017 s // npm run test -- --maxWorkers=1 

Time:        37.701 s // npm run test -- --maxWorkers=2 

Time:        35.077 s // npm run test -- --maxWorkers=3

Time:        30.460 s // npm run test -- --maxWorkers=4

Time:        41.258 s // npm run test -- --maxWorkers=5

Time:        48.251 s // npm run test -- --maxWorkers=6

Time:       294.039 s // npm run test -- --maxWorkers=7
```


**Conclusão**
A performance do Jest pode ser facilmente melhorada ajustando uma única configuração, com a flag `--maxWorkers`. No meu caso, a quantidade ideal de workers para o melhor funcionamento do Jest foi de 4 threads.
How to Setup Tailwind 3 on Rails 7
Tags: rails, tailwindcss
Published: 2021-12-26 23:33:48

_Update: Tailwind documentation has since added the [installation steps with Rails](https://tailwindcss.com/docs/guides/ruby-on-rails)._

---

Even though the official Tailwind documentation has [installation instructions](https://tailwindcss.com/docs/installation/framework-guides) for various client-side frameworks, it is missing one for Rails. Most of the online tutorials work with the older versions of Tailwind. With [version 3](https://tailwindcss.com/blog/tailwindcss-v3) released a few days ago, I thought it'd be nice to have an up-to-date guide for Rails developers trying to set Tailwind 3 on a Rails app, so here it goes. 

**Step 1: Install Tailwind CSS**

Run the following command from the root directory of your Rails application, which installs the Tailwind package.

```
npm install -D tailwindcss
```

**Step 2: Initialize Tailwind**

By default, Tailwind will look for a `tailwind.config.js` file at the root of your project where you can define any customizations. The following command generates a `tailwind.config.js` file in your Rails application. 

```bash
npx tailwindcss init
```

**Step 3: Configure the source template paths**

The content section is where you configure the paths to all of your HTML templates, JS components, and any other files that contain Tailwind class names.

Modify the generated `tailwind.config.js` file to include all the HTML, JS and ERB files under the `app` directory. 

```javascript
module.exports = {
  content: ["./app/**/*.{html,js,erb}"],
  theme: {
    extend: {},
  },
  plugins: [],
}
```

**Step 4: Add Tailwind directives to the CSS**

Tailwind is made up of a few different pieces: a reset stylesheet, the utility classes, and functions that make working with Tailwind easier. 

In the `app/assets/stylesheets/application.css` file, add the following Tailwind directives. 

```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

**Step 5: Start the Tailwind CLI build process**

Run the following command from the root directory of your Rails application. This will watch for the changes in the view files. 

```
npx tailwindcss -i app/assets/stylesheets/application.css -o app/assets/stylesheets/wind.css --watch
```

**Step 6: Add Tailwind to the HTML**

Finally, in the `application.html.erb` file, add the reference to the generated stylesheet file.

```erb
<!DOCTYPE html>
<html>
<head>
  <title>Blog</title>
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <%= csrf_meta_tags %>
  <%= csp_meta_tag %>

  <%= stylesheet_link_tag 'wind', media: 'all', 'data-turbolinks-track': 'reload' %>
  <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
```

That's it! You have now set up Tailwind in your Ruby on Rails application. 

Original Post: [How to Setup Tailwind 3 on Rails](https://akshaykhot.com/setup-tailwind-on-rails/)
How to split time to learn web app development
Tags: webdev, react, tailwindcss, beginners
Published: 2021-12-26 23:13:09

The proportion I find to be good is as follows:

Programming concepts 20%
Object Oriented programming 20%
CSS 15%
JQuery, Angular, Ember, Vue, Svelte, or React 10%

HTML 5%
Javascript 5%
Typescript 5%
Functional programming 5%
State management 5%

JS DOM interaction 2%
SCSS 2%
BEM 2%
Git 2%
Jira 2%

You can notice that most of the time should be spent on core programming concepts. CSS is underestimated while it is very powerful. It is worth to spend substantial time to learn it in and out.

There is also a merit to spend some time to learn a framework / library.

There is little time allocated to JavaScript and Typescript and comparably everything else. Compared to previous ones, these don’t need so much time to learn.

You can also notice I didn’t include CSS frameworks because I don’t find too much value in learning them. It is nice to use them, but with limited time to learn everything it is the least important thing.

And yeah, BEM is listed because eventually I find it useful. 2% of time is a little bit too much.

If you have questions post them below.

And if you want to read more about how to become 10x developer, follow me!
Ionic Framework v6 VueJS And Firebase - Authentication Flow Using Pinia For State Management
Tags: pinia, ionic, firebase, vue
Published: 2021-12-26 23:10:34

Source code walkthrough for a template for Vuejs authentication flow using firebase for authentication, latest [Ionic Framework](https://ionicframework.com/docs) version 6, and [Pinia for State Management](https://pinia.vuejs.org/).

We are also using the newest version of [Firebase](https://firebase.google.com/docs/web/setup?authuser=0) in this template, the APIs have changed a bit but the examples in the application try to make it easier

The Video Covers
------
- How to manage the authentication flow with state management in Pinia 
- Keep the user state and profile information there. 
- Manage authentication guards in the vuejs router utilizing state variables.
- Updating data in your application views as the data is refreshed in firebase. Using collection listeners and updating the Pinia State.

{% youtube XWHdFQPkS9Q %}

Template Source Code
------

{% github aaronksaunders/ionic-v6-firebase-tabs-auth %}

---
Looking for support with your cross-platform mobile solution using Ionic Framework? Contact Me at my company Clearly Innovative Inc for a free 30-minute Consultation
www.clearlyinnovative.com

Links
---------
- Pinia Video - https://youtu.be/sKGh2wp4QfM
- Pinia Documentation - https://pinia.vuejs.org/
- Source - https://github.com/aaronksaunders/ionic-v6-firebase-tabs-auth


Follow Me 
-------------------------------------------
twitter - https://twitter.com/aaronksaunders
github - https://github.com/aaronksaunders
udemy - https://www.udemy.com/user/aaronsaunders
gumroad - https://app.gumroad.com/fiwic

[![ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/W7W31U7HM)