teleren/devto huggingface dataset:
CSS-only direction-aware hover effects
Tags: webdev, frontend, css
Published: 2023-11-03 21:03:26

Hi everyone! 👋 I just discovered a really great way to build a simple **direction-aware hover mechanism** using nothing but **CSS** (big thanks to Kevin Powell 😁), and I wanted to share it with you with this simple codepen I created.

{% codepen https://codepen.io/francescovetere/pen/zYeoxVZ %}

If you hover over any of these links with your mouse coming from the top or the bottom, you'll notice a simple decoration coming under the link itself: nothing too fancy, plain old CSS here.

The **real magic** comes if you do hover on a link coming from its left or its right: in these cases, you'll notice that this decoration doesn't just "appear" under the link, it **slides** into it!

This cool effect is only possible thanks to the `:has()` selector: in this particular example, it basically allows us to target an `<li>` element such that its next sibling is currently hovered.

The `:has()` selector is **kinda new** in the CSS world, so it is possible that your browser currently doesn't support it (you can check that [here](https://caniuse.com/css-has)). 
If that's the case, you just won't see this nice sliding effect, but the overall layout won't break. So, I consider this a really good progressive enhancement.

Without `:has()`, this operation would have required some JavaScript in order to manually target the `<li>` that meets the desired condition. Now instead, this is possible using **nothing but CSS**: kinda amazing in my opinion! 😁



<a href="https://www.buymeacoffee.com/francescovetere" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" height="41" width="174"></a>
Identifying missing variables in Handlebars templates
Tags: handlebars, handlebarsjs, javascript, node
Published: 2023-11-03 20:51:49

---
title: Identifying missing variables in Handlebars templates
published: true
tags: ['handlebars', 'handlebarsjs', 'javascript', 'node']
canonical_url: https://sevic.dev/notes/handlebars-template-missing-variables/
---

Handlebars is a template engine that can create server-side views, e-mail templates, and invoice templates by injecting JSON data into HTML.

Resolving all variables in a Handlebars template is essential to maintain the accuracy of the displayed information and to prevent incomplete content or layout problems.

The following snippet checks for missing variables by overriding the default `nameLookup` function. It logs a warning for unresolved variables and sets the default value, empty string, in this case.

```js
// ...
const originalNameLookup = Handlebars.JavaScriptCompiler.prototype.nameLookup;
Handlebars.JavaScriptCompiler.prototype.nameLookup = function(
  parent,
  name,
  type
) {
  if (type === 'context') {
    const messageLog = JSON.stringify({
      message: `Variable is not resolved in the template: ${name}`,
      level: WARNING_LEVEL
      // ...
    });
    return `${parent} && ${parent}.${name} ? ${parent}.${name} : (console.log(${messageLog}), ''`;
  }

  return originalNameLookup.call(this, parent, name, type);
};
// ...
const result = Handlebars.compile(template)(data);
```
Static Analysis tooling
Published: 2023-11-03 20:50:03

This week, I integrated [Prettier](https://prettier.io/), a well-known code formatter, and [ESLint](https://eslint.org/), a linting tool, into my CLI tool to improve the code quality. This was done to make the code easier to read and understand and to maintain a consistent format throughout the project.

### Setting up the tools 

#### Prettier 

To get started with Prettier, I followed these steps:

1. Install it using the following command: npm install    --save-dev --save-exact prettier.

2. Use the prettier watch command to determine which files Prettier will affect.

3. I noticed that I didn't want some of the files to be formatted, so I created a .prettierignore file. In this file, I included the names and extensions of the files that I didn't want Prettier to touch.

I left config files to be default. 

#### Linter 

Setting up ESLint is similar to Prettier:

1. Install ESLint by running npm install --save-dev eslint.

2. Create a configuration by using 
`npm init @eslint/config`. At this point, I kept the configuration as it is. However, since ESLint doesn't support assert at this point, I needed to use the Babel version of ESLint.

!! Note I only use this because `assert` is not supported in standard eslint so if you don't use assert you can just skip this step

Run this command to install the necessary Babel packages: npm i -D @babel/eslint-parser @babel/plugin-syntax-import-assertions. Then, modify your ESLint configuration to use the Babel parser:

```json

parser: "@babel/eslint-parser",
  parserOptions: {
    requireConfigFile: false,
    babelOptions: {
      plugins: ["@babel/plugin-syntax-import-assertions"],
    },
  },

```

To add simple npm run commands, I referred to the documentation of both tools to find the necessary commands. Here they are:

```js
"format": "prettier --write '**/*.{js,html}' --ignore-path .prettierignore",
"lint": "eslint ./src --ext .js ./bin --ext .js"
```

Lastly, I'll explain how I integrated these tools with VSCode, which was quite straightforward. First, you need to install both ESLint and Prettier extensions for VSCode. Then, go to the settings and search for these extensions to configure them as per your preferences.

Even though I encountered these tools throughout my studies, with almost half of my assignments involving them, I had never set them up myself before. This experience was pretty cool.
pyaction 4.26.0 Released
Tags: github, docker, python, showdev
Published: 2023-11-03 20:25:02

## TL;DR

I just released [pyaction](https://github.com/cicirello/pyaction) 4.26.0, a [Docker container with Python, git, and the GitHub CLI](https://dev.to/cicirello/pyaction-a-docker-container-with-python-git-and-the-github-cli-930). You can pull pyaction from either the [GitHub Container Registry](https://github.com/cicirello/pyaction/pkgs/container/pyaction) or from [Docker Hub](https://hub.docker.com/r/cicirello/pyaction).

This release updates the version of the GitHub CLI included in the container.


## Changelog 4.26.0 - 2023-11-03

### Changed
* Bumped GitHub CLI to 2.38.0.


## Current Version List

This latest release of pyaction includes the following:
* Python 3.12.0
* [GitHub CLI 2.38.0](https://github.com/cli/cli/releases/tag/v2.38.0)
* git 2.39.2
* curl 7.88.1
* gpg 2.2.40



## More Information

Please consider starring pyaction's GitHub repository:

{% github cicirello/pyaction %}

For more information, see my earlier post about pyaction here on DEV, as well as its webpage. 

{% link https://dev.to/cicirello/pyaction-a-docker-container-with-python-git-and-the-github-cli-930 %}

{% embed https://actions.cicirello.org/pyaction/ %}



## Where You Can Find Me

Follow me [here on DEV](https://dev.to/cicirello) and on [GitHub](https://github.com/cicirello):

{% user cicirello %}

Or visit my website:

{% embed https://www.cicirello.org/ %}
Must know concepts of JS to make life simple
Tags: webdev, javascript, beginners, programming
Published: 2023-11-03 20:13:17

## Promises and Async/Await:
Handling asynchronous operations in JavaScript will be a pain, especially using callbacks. If one uses callbacks he'll find himself in callback hell. To avoid that, we use 

1. Promises - A way to handle asynchronous operations in JavaScript.

2. Async/await - It simplifies working with Promises. It makes asynchronous code look synchronous.
`async function fetchData() {
  try {
    let response = await fetch('https://api.example.com/data');
    let data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}
`

## Modules in JavaScript:
Modules are an alternative of commonJS which is a feature of ECMA script that allows us to organize code into reusable and maintainable units by exporting and importing modules.
`export
  export function myFunction() {
  // Your code here
 }
`
`import
   import { myFunction } from (path of the export file)
`

## Event Handling:
Handling user interactions and events like adding event listeners to buttons or forms.
`const button = document.querySelector('#myButton');
button.addEventListener('click', () => {
  // Your event handling code here
});
`

## map() Function:
The map() function is a powerful and commonly used array method in JavaScript. It allows you to transform each element of an array by a function and create a new array based on the result.
`const numbers = [1, 2, 3, 4, 5];
// map function to double each number
const doubledNumbers = numbers.map((number) => {
  return number * 2;
});
`
`
console.log(doubledNumbers); // Output: [2, 4, 6, 8, 10]
`
Online Course Platforms to Learn Coding for Free
Tags: coding, learning, courses, developer
Published: 2023-11-03 20:10:15

It is a well known fact that the technology world is ever evolving. We have new products, new software launching everyday! The industry is growing at a pace never seen before. We have gone from button Nokia phones to smart phones to virtual reality headsets within a decade! In these ever changing time, we as developers need to learn new skills all the time. What better way to do them than to learn remotely, quickly and for free? The answer is online courses! So some of the websites where you can learn various courses for free are:

## Coursera
Now, on Coursera, there are some courses which you can do for free but you won't get the certificate. There is another way in which you can do the course + get the certificate. That is, applying for financial aid. This way once your financial aid is approved, you can do the course for free and upon completion you get a certificate. Coursera is a great platform which offers projects, courses, specializations, professional certificates, diplomas, bachelors degrees and even masters degrees. Their courses are curated by leading companies and top universities. The coding courses have assignments, quizzes, video lectures, etc. 

## freecodecamp
This website has various courses on web development, machine learning, data structures, etc. It offers project based learning completely free-of-cost. Certifications are also provided upon course completion. Their YouTube channel also offers tutorials on various programming languages, frameworks, tools and technologies. The courses on their website are also crafted meticulously and they ensure that necessary skills are acquired while doing the course. A very hands-on platform!

## GUVI (Grab Ur Vernacular Imprint)
This website offers 'free courses' which can be learnt for free but no certificates are provided. It also offers 'essential courses' where you can do the course for free plus certificates are also provided. Furthermore, 'premium courses' are offered at a price but once you sign up on the website, you get a coupon code with which you can buy any one premium course for completely free! Next, the site offers 'atomic courses', these courses can be learnt for free but certification comes at a cost. There are also webinars available on the site which can be watched for free. The site offers courses on various programming languages and frameworks in various languages such as Hindi, Tamil, English, Telugu, Malayalam, etc.
Cleaning your working directory in Git (including untracked files) 😎
Tags: git, bestpractices, github
Published: 2023-11-03 20:08:49

---
title: Cleaning your working directory in Git (including untracked files) 😎
published: true
description: 
tags: git, bestpractices, github, gitlab
cover_image: https://images.unsplash.com/photo-1618401471353-b98afee0b2eb?auto=format&fit=crop&q=80&w=2688&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D
---

Have you ever found yourself in a Git repo mess with unwanted files and changes piling up? Don't sweat it; we've got your back! Let's roll up our sleeves and learn how to clean things up and get back to coding in style. Plus, we'll show you some cool Git tricks along the way! 😄

## Step 1: Clear Out the Clutter 🧹

Git's `clean` command is like your personal repo janitor. It sweeps away all those pesky untracked files and directories. Open your terminal and head to your Git playground. Then, hit it with this command:

```bash
git clean -f -d
```

Here's the lowdown on the command:
- `git clean`: The cleanup wizard.
- `-f`: The "force" flag. It means we're going all-in on the cleanup without asking too many questions.
- `-d`: The "directories" flag. This tells Git to clean up directories along with files, so you get a squeaky-clean workspace.

## Step 2: Say Goodbye to Local Changes ✌️

With the clutter gone, you might still have some local changes you want to ditch. We're gonna use the `checkout` command to give those changes a one-way ticket out of your repo:

```bash
git checkout .
```

This command throws away local changes and brings your repo back to the way it was when you last committed. Fresh start, anyone? 🚀

## Bonus: Get Interactive! 💡

Now, for the cherry on top: Git's interactive mode. It's like a toolbox full of magic wands for precise cleaning. Let's break it out and see the sparks fly:

```bash
git clean -i
```

🔮 Poof! You're in Git's interactive menu. This menu is where the real fun begins. It gives you the power to choose which untracked files or changes stay and which ones go. It's like cleaning with a fine-toothed comb.

And there you have it! Your Git repo is looking sharp and ready for more epic coding adventures. Just remember to keep your valuable changes safe before you unleash Git's cleanup magic.

---

Cleaning up your Git repo doesn't have to be a chore. With Git's `clean` and `checkout` commands, along with the bonus interactive mode, you're in control. Keep your repo organized and fresh, and you'll be coding like a pro in no time! 💻🚀
Unleash Your Coding Superpowers with CoderKit! 🚀
Tags: webdev, developer, javascript, programming
Published: 2023-11-03 19:34:28

🚀 **The Spark of Inspiration**

As a developer, I've been there, facing those repetitive coding tasks day in and day out. That's when the spark ignited. I asked myself, "How can we make this easier?"

💡 **The Eureka Moment**

And just like that, CoderKit was born. I dreamt of a toolbox filled with developer-friendly utilities. A JSON formatter, a text case converter, a code minifier and more – all at your fingertips.

🛠️ **Building the Arsenal**

The journey was a rollercoaster, crafting tools, and making them work seamlessly. It was just me and my code, hours upon hours. The tools became my coding companions.

👥 **Inviting You to the Journey**

Today, we're launching CoderKit Beta. It's about time we made your coding life simpler. These tools are designed to make your day-to-day coding tasks a breeze.

🤝 **Your Feedback, Our Fuel**

CoderKit isn't complete without you. Your feedback, and your insights – they're our guiding stars. This Beta launch is the beginning, and your suggestions will shape the future.

🔮 **The Future of Coding**

CoderKit is not just about tools; it's about coding with confidence. We're here to empower you – whether you're a pro or just starting.

🌐 **Join the Journey**

Come, and explore CoderKit Beta with us. Try out the tools, and share your thoughts. Let's make coding a bit more exciting.

🔧 **Meet the Tools**

- JSON Formatter: Tame unruly JSON data with ease, ensuring readability and error-free code.

- Text Case Converter: Convert text between various cases (e.g., CamelCase, snake_case) effortlessly.

- JavaScript Minifier: Reduce file size and boost website performance by minifying your JavaScript code.

- HTML Minifier: Optimize your HTML code for faster loading times and improved user experience.

- CSS Minifier: Streamline your stylesheets to enhance website performance.

- JavaScript Beautifier: Make your JavaScript code more readable and consistent.

- HTML Beautifier: Elevate the aesthetics of your HTML code for better readability.

- CSS Beautifier: Improve the structure and presentation of your CSS styles.

- Base64 Encoder/Decoder: Encode and decode data with this versatile utility.

- JWT Decoder: Decode JSON Web Tokens to inspect and verify their content.

- Lorem Ipsum Generator: Generate placeholder text for content drafting and design prototyping.

👉 **Get Started**

Visit [**https://coderkit.dev**](https://coderkit.dev) and see how CoderKit can simplify your coding journey. Welcome to a world where coding just got a whole lot easier.

Here's to coding adventures with CoderKit! 🎉
DevFest 2023: The Biggest Tech Conference of the Year!
Tags: gdg, google, talk, hackathon
Published: 2023-11-03 19:30:18


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

DevFest is a global developer conference hosted by Google Developer Groups (GDGs) around the world. It is a community-led DevFest is a global developer conference hosted by Google Developer Groups (GDGs) around the world. 🌎💻

It is a community-led event where developers of all skill levels can come together to learn, build, and network. 🤝🧑‍💻👩‍💻
At DevFest, you can expect to find a variety of activities, including: 📚💡

- Talks from leading experts in the tech industry 🗣️🌟
- Workshops on a variety of topics, from coding basics to advanced machine learning ⚒️🧠
- Code labs where you can learn new skills and build projects 🔬🧪
- Hackathons where you can collaborate with other developers to solve real-world problems 🧩🤖
- Networking opportunities to meet other developers and learn from their experiences 💬👭👬
- To attend DevFest, you need to register through the GDG website. 🌐🖱️

**Registration is usually free .....**
Check you CPU performance here
Tags: bench, nim, hardware, community
Published: 2023-11-03 19:23:00

There are a lot of different perf checks for CPUs, but, unfortunately, most of the them are more synthetic and do not reflect the tasks we do daily like devs. it is not surprise that devs' work is **compilation**

Here is benchmark I created which bootstrap Nim's language compiler

There are a lot of CPU's tested already, but you can add more if you want: https://github.com/inv2004/bench_nim_build

All you need is `git`+`gcc` or `clang`.

And do not forget to pug power cord if laptop!

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e4jlyigi3fl7w7rxdbah.png)
Day 4 100 Days Of Code Challenge:- OpenAI Whisper
Published: 2023-11-03 19:18:47

Today I almost had a repeat of day 2 (do nothing), but I used the lesson I learnt in day 2. 

Just do something. 
So instead of just not doing anything for the day, I decided to open the code editor and try running multiple functions in java. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8eskvice36i8xan7juhb.PNG)

After that I browsed a bit searching for "how to become a pro java developer" lol. After that I came across this video by SentDex, It was about the OpenAI Whisper Module. 

It is a great tool and can be run using just 4 lines of python code. 

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

though don't use it to transcribe music, better to transcribe speech.
Como exportar base de dados utilizando MySQLWorkbench para AWS RDS
Tags: mysqlworkbench, aws, rds
Published: 2023-11-03 19:17:53

Após realizar o `export` de uma base de dados que possuo na AWS RDS e tentar importá-la recebi a seguinte mensagem de erro:

```
Access denied; you need (at least one of) the SUPER privilege(s) for this operation
```

O problema está no processo de exportação, devemos desativar uma diretiva que por padrão está em `AUTO`:

```
set-gtid-purged - Add 'SET @@GLOBAL.GTID_PURGED' to the output.
```

No painel de exportação, no canto superior direito, encontramos a opção: `Advanced Options...`. Ao acessá-la devemos alterar o valor da diretiva para `OFF`.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/38rkqylpmzxw0hdn50ds.png)
Understanding Why We Don't Use Pointers to change the value of the element in Slice Data Type in Go Lang!
Tags: go, datatypes
Published: 2023-11-03 19:14:40


Ever wondered why we don't use a pointer to change the value of the element in a Slice (GO Lang) like we do with other data types like Int, String, or Struct ?

Let's have a look at the inner functioning of Slices and understand how they are working in the Background.

So when you create a slice in Go then the GO internally creates two Separate data structures for us, one is An Array (representing the actual list of items) and another is a new Slice having [ptr to head, Capacity, Length].

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wagvw0kea3larz4spnxw.jpg)
let's suppose in the RAM the new slice is stored at the address 2000 and the other data stru i.e. array (containing the actual items) is seperately stored at address 3000 and then the prt to head thing in the new slice (from 2000) is pointing to the array at 3000 and also the country var here is not pointing at the array(at 3000), it points at the new Slice at 2000 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/axqdzyizavpn80gjdlf0.jpg)
so whenever we refer to country var it's actually returning the new slice data stru, not the array & when we call a func updateCountry (used to update the list) and pass country var into it, Go still behaves as a pass by value language, and as country var points at new slice at 2000 it also makes the copy of that new Slice (at 4000) but the main thing here is that the new copy of that slice (which is at 4000) is still pointing(with the help of ptr to head) at the array of items which is at 3000 and hence in the func updateCountry when we attempt to modify the slice, we are actually modifying the same array that both copies of the slice are now pointing to(at 3000)!

And that's why we don't use a pointer to change the value of the element in a Slice

Data Stru Which acts similarly to Slices(Reference type)
~Maps
~Channels.
Public issue reporting is back!
Tags: puppet, community, github
Published: 2023-11-03 19:02:03

I’m happy to share that public issue reporting is back!
You can now file issues directly in GitHub right on the project itself using the GitHub account you probably already have.

Issue creation is now enabled in the following repositories

- `puppet-agent`,
- `puppet`,
- `puppetdb`,
- `puppetserver`,
- `facter`

We will be reviewing any new issues created using our normal triage process and update tickets accordingly. Since planning happens internally you may not see much activity on the issue until it’s being actively worked on.

We are working on a process to migrate existing tickets and we will provide an update on that soon. Until then you can still view existing tickets on https://puppet.atlassian.net.

Thank you for all the input you provide us and we hope that this makes it easier to contribute going forward.