teleren/devto huggingface dataset:
29. First-time Netlify Deployment (Day 27)
Published: 2023-11-12 11:18:33

Building my first website from scratch has been a whirlwind of learning and excitement. Just a month ago, coding was a foreign language to me. Today, I am proudly looking at a site that's 90% complete, thanks to my newfound HTML and CSS/SASS skills.

**The Milestones**
In today's work session, I focused on refining the website, attending to various elements:

**Typography Tweaks**
I spent time revamping the typography across the site, aiming for a consistent and pleasing look.

**Patching Missing Links**
Identifying and adding missing hyperlinks was a necessary step in ensuring seamless navigation.

**Uploading a Favicon**
Even the smallest details matter. Uploading a favicon might seem trivial, but it adds a professional touch to the site.

**Netlify Deployment**
The highlight of the day was deploying the site on Netlify. It was an incredible feeling to see my work live on the internet. The process was surprisingly straightforward: connect GitHub, select the repository, and there it was—a live site!

**Triumphs and Challenges**
However, no journey is without its hiccups. As thrilled as I was with the deployment, I encountered a few unexpected issues post-launch:

- Missing text highlights and button features on both desktop and mobile versions.
- The blog page's lack of mobile responsiveness.
- Misaligned input boxes and labels on the contact page.

**The Road Ahead**
I acknowledge these issues, but I’m also brimming with determination. With only 8 days left and a to-do list that seems to stretch for miles, I know there's work cut out for me. I've got 24 wireframes, a PowerPoint presentation, a video demo, and a Readme.md file yet to complete.

**Conclusion**
The journey from clueless to code-capable has been thrilling, but it’s not without its challenges. As I face these roadblocks in the final stretch, I'm reminded that every obstacle is an opportunity to learn. I’m excited to tackle these issues and complete my first website project. Stay tuned for updates on how it all pans out!
css grid loader
Tags: freecodez, react, html, blog
Published: 2023-11-12 10:56:11

Hey there, You are most welcome to this article. I hope you will enjoy this article. If you like this article then please share this article with your friends and colleagues. If you have any questions or suggestions regarding this article then please comment down below.

**css grid loader**

![css grid loader](https://res.cloudinary.com/dbw0zmw7u/image/upload/v1699786567/images/ax7nqidxbvotkq8l1rzt.webp)

For full source code visit : [https://freecodez.com/post/fuvboa1](https://freecodez.com/post/fuvboa1)


```
<!-- https://freecodez.com -->
<div class="loader">
    <div class="cell d-0"></div>
    <div class="cell d-1"></div>
    <div class="cell d-2"></div>

    <div class="cell d-1"></div>
    <div class="cell d-2"></div>


    <div class="cell d-2"></div>
    <div class="cell d-3"></div>


    <div class="cell d-3"></div>
    <div class="cell d-4"></div>


</div>
```

Source Code : [https://freecodez.com/post/fuvboa1](https://freecodez.com/post/fuvboa1)

For more such articles visit : [https://freecodez.com](https://freecodez.com/all)
Happy Diwali 🪔
Tags: freecodez, react, html, blog
Published: 2023-11-12 10:54:12

Hey there, You are most welcome to this article. I hope you will enjoy this article. If you like this article then please share this article with your friends and colleagues. If you have any questions or suggestions regarding this article then please comment down below.

**Happy Diwali 🪔**

![Happy Diwali 🪔](https://res.cloudinary.com/dbw0zmw7u/image/upload/v1699786441/images/frwpfkw9nqtx9cbw0hgx.webp)

For full source code visit : [https://freecodez.com/post/w3r53hb](https://freecodez.com/post/w3r53hb)


```
<!-- https://freecodez.com -->
<div class="container">
    <div class="title">Happy Diwali</div>
    <ul class="fireworks">
        <li><span></span></li>
        <li><span></span></li>
        <li><span></span></li>
        <li><span></span></li>
        <li><span></span></li>
        <li><span></span></li>
    </ul>
</div>
```

Source Code : [https://freecodez.com/post/w3r53hb](https://freecodez.com/post/w3r53hb)

For more such articles visit : [https://freecodez.com](https://freecodez.com/all)
🧠 4 Traits of Successful Engineers
Tags: webdev, programming, productivity
Published: 2023-11-12 10:42:55

From my experience across different companies (Meta, Google, Amazon) and what I have observed across different engineering and product teams, there are 4 reasons that help engineers excel in their career:

### Join Me
Read more about [High-performing engineering teams](https://engineeringbolt.com/tech/characteristics-of-high-performing-engineering-teams-in-meta-facebook/), [Twitter](https://twitter.com/alexrashkov/status/1716793056697933916) and [Linkedin](https://www.linkedin.com/in/alexrashkov) for more Career, Leadership and Growth advice.

<a href="https://engineeringbolt.substack.com/embed" target="_blank">![Subscribe to Engineering Bolt ⚡ Newsletter](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3u2srkrj6arwrs0nclfs.png)</a>

### ⭐ Continuous Learning
The tech industry is ever-evolving, with new languages, tools, and best practices emerging all the time. Developers who prioritize ongoing education, whether formally or informally, tend to thrive.

### ⭐ Problem-solving Ability
Beyond the technical specifics, the core of programming is about solving problems. Developers who excel are those who can break down complex problems into manageable parts and devise effective solutions.

### ⭐ Collaboration and Communication
Software development is often a team effort. Being able to communicate ideas clearly, listen to feedback, and work well with others is crucial.

### ⭐ Adaptability
The landscape of software engineering can change quickly. Successful developers are flexible and can pivot or adapt their skills and approaches as needed.

There is so much more that makes a great engineer than just coding.

### Join Me
<a href="https://engineeringbolt.substack.com/embed" target="_blank">![Subscribe to Engineering Bolt ⚡ Newsletter](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3u2srkrj6arwrs0nclfs.png)</a>

Follow me on [High-performing engineering teams](https://engineeringbolt.com/tech/characteristics-of-high-performing-engineering-teams-in-meta-facebook/), [Twitter](https://twitter.com/alexrashkov/status/1716793056697933916) and [Linkedin](https://www.linkedin.com/in/alexrashkov) for more Career, Leadership and Growth advice.
Validating Dependabot files
Tags: github, dependabot, ci
Published: 2023-11-12 10:37:20

---
title: Validating Dependabot files
published: true
description: Notes on trying to validate Dependabot files
tags: github, dependabot, ci
---

If your branch contains a Dependabot change then a Github action should kick in and validate it. However this seems quite erratic and I'm not sure about the logic as to when and if it happens.

If you view the configuration file you should see a validation badge in the file's header. Therefore the easiest way to validate the file is actually just to edit it directly on the main branch and check the validation on the badge (which is linked to a Github Action run.

It would be really nice to have an official CLI validator for the file format, particularly as it is becoming more and more complex.
How to Construct a new Map using List of Maps using Java 8 streams
Published: 2023-11-12 10:32:42


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/te9hx302kx4durh1v130.jpg)(https://javatute.com/core-java/how-to-construct-a-new-map-using-list-of-maps-using-java-8-streams/)
Unleashing the Power of Emuthreeds IPA: A Comprehensive Guide
Published: 2023-11-12 10:31:14

## Introduction

Emuthreeds IPA stands as a testament to the evolution of iOS emulation, providing users with a seamless experience in reliving classic gaming moments. In this article, we delve into the world of Emuthreeds IPA, exploring its features and how it adds a new dimension to your iOS device.

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

## Understanding Emuthreeds IPA

Emuthreeds IPA is a cutting-edge emulator that brings the 3DS gaming experience to your iOS device. With its user-friendly interface and high compatibility, it has gained a significant following among gaming enthusiasts. Let's explore the key features that make Emuthreeds IPA a standout choice for iOS users.

### Key Features of Emuthreeds IPA

- **High Performance:** Experience smooth gameplay with Emuthreeds IPA, ensuring that your favorite 3DS games run seamlessly on your iOS device.

- **User-Friendly Interface:** Emuthreeds IPA boasts an intuitive interface, making it easy for users to navigate and configure settings.

- **Wide Compatibility:** Play a diverse range of games with Emuthreeds IPA, thanks to its extensive compatibility with various 3DS titles.

Now, let's take a closer look at the steps to download and install Emuthreeds IPA on your iOS device.

## How to Install Emuthreeds IPA

To embark on your gaming journey with Emuthreeds IPA, follow these simple steps:

1. Visit [https://builds.io/](https://builds.io/) - Your go-to destination for reliable iOS emulators.

2. Navigate to the Emuthreeds IPA download page: [Download Emuthreeds IPA](https://builds.io/apps/download-emuthreeds-emulator-3ds-for-ios/)

3. Click on the download link and follow the on-screen instructions to install Emuthreeds IPA on your iOS device.

## Exploring Other iOS Emulators on Builds.io

While you're on Builds.io, consider checking out other exciting iOS emulators that enhance your gaming experience:

- [Delta Emulator for iOS](https://builds.io/apps/download-delta-emulator-for-ios/)
- [iNDS Emulator](https://builds.io/apps/inds/)
- [PPSSPP Emulator](https://builds.io/apps/ppsspp/)
- [Dolphin iOS Emulator](https://builds.io/apps/dolphinios/)
- [GBA4iOS 2.1](https://builds.io/apps/gba4ios-21/)
- [HappyChick Emulator](https://builds.io/apps/happychick/)
- [HandJoy Emulator](https://builds.io/apps/handjoy/)

## Conclusion

Emuthreeds IPA opens up a world of gaming possibilities on your iOS device. With its impressive features and easy installation process, it's a must-have for any gaming enthusiast. Explore the diverse range of iOS emulators on Builds.io to elevate your gaming experience to new heights.

**Download Emuthreeds IPA today and relive the nostalgia of 3DS gaming on your iOS device!**
Progress Bar
Tags: codepen, progressbar, vinkal041, vinkalprajapati
Published: 2023-11-12 10:28:42

This HTML code creates a webpage with a progress bar and a button. The progress bar starts at 10% and, when the button is clicked, it animates to 100%. The page also includes a marquee displaying the text "Designed By Vinkal Prajapati," a heading saying "Progress Bar," and a paragraph instructing the user to click the button to watch the animation.

Additionally, there is some CSS styling to make the page visually appealing. The progress bar is styled with a green color, and the button has a gray border and is centered on the page. The overall body of the page has a light gray border, padding, and rounded corners for a neat appearance.

In simple terms, it's a webpage with a progress bar that fills up when you click a button, and it has some styling to make it look nice.

{% codepen https://codepen.io/vinkalPrajapati/pen/yLZXMao %}
Chrome Extension for CSS Layouts: HTML Visualization
Tags: javascript, chrome
Published: 2023-11-12 09:39:45


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

When working with layouts in CSS, aligning items within a box is crucial. For those just starting with CSS, understanding how items align can be challenging at first glance. During my mentoring sessions, I always recommended my students to visually draw lines for better clarity whenever they felt confused. To make this process easier, I developed a Chrome extension, moving away from the need to define such lines directly in CSS.

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

The concept of using this tool is straightforward. By clicking "Add Depth", you can see a border with a random color around your elements. Additionally, you have the flexibility to change the color, line style, and width size.

The structure of the source is user-friendly. You can set the details of the lines on the popup side, which then applies to the content.

On the content side, the extension checks all depth levels from the document and applies a border style that matches the data selected by the user.

```javascript
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
  if (request.depthSettings) {
    applyDepthStyles(request.depthSettings);
  }
});

function applyDepthStyles(settings) {
  document.querySelectorAll("*").forEach((element) => {
    const depth = getElementDepth(element);
    const setting = settings[depth];
    if (setting) {
      element.style.border = `${setting.width}px ${setting.style} ${setting.color}`;
    } else {
      element.style.border = "";
    }
  });
}

function getElementDepth(element) {
  let depth = 0;
  while (element.parentElement) {
    depth++;
    element = element.parentElement;
  }
  return depth;
}
```

You can view all the source code on [github](https://github.com/mykim-aus/HTML-VISUALIZATION)

The extension is currently under review for launch on the Chrome Store.
Unveiling Horizons: My Transformative Journey through MLH Career Week 🌐🚀
Tags: mlhgrad
Published: 2023-11-12 09:04:58

mbarking on an exhilarating journey at MLH Career Week was a game-changer! 🚀 The dynamic blend of insightful sessions, networking opportunities, and innovative projects was a true immersion into the tech universe. Navigating challenges and celebrating accomplishments alongside like-minded individuals amplified the experience. Learning transcended boundaries, leaving me empowered with new skills and perspectives. As I reflect on this whirlwind of inspiration, I'm not just witnessing a career event; I'm witnessing a transformation. Grateful for the connections made and the knowledge gained, I'm excited about the endless possibilities ahead
WIKI PYTHON
Published: 2023-11-12 09:03:01

🐍 Explorando el Universo Python en Wiki Python 🐍

¡Saludos, amantes de Python! Hoy quiero compartir con ustedes una joya oculta en la web: [WIKI PYTHON](https://wiki-python.com/), tu guía definitiva para explorar el fascinante mundo de este lenguaje de programación poderoso y versátil.

🚀 Descubre la Riqueza de Python:

**En Wiki Python**, encontrarás una abundancia de recursos, tutoriales y documentación que te ayudarán a sumergirte en las profundidades de Python. Desde los conceptos básicos hasta técnicas avanzadas, esta plataforma ofrece una navegación fácil y acceso rápido a la información que necesitas.

📚 Recursos para Todos los Niveles:

¿Eres un principiante emocionado por aprender a programar en Python? ¡Perfecto! Wiki Python te ofrece tutoriales paso a paso, ejemplos prácticos y consejos útiles para que te sientas cómodo desde el primer día.

¿Eres un desarrollador experimentado en busca de desafíos más avanzados? No te preocupes, también hay contenido para ti. Descubre trucos, patrones de diseño, y buenas prácticas que te ayudarán a llevar tus habilidades de programación en Python al siguiente nivel.

🔗 Explorando la Web de Wiki Python:

Visitar Wiki Python es como abrir una puerta a un vasto universo de conocimiento. Explora secciones dedicadas a temas específicos, desde desarrollo web hasta inteligencia artificial, y sumérgete en la información que más te apasiona.

🌐 Comunidad Activa:

Wiki Python no es solo una plataforma estática, ¡es una comunidad viva y activa! Únete a los foros, participa en discusiones y comparte tus propios conocimientos. Juntos, podemos construir una comunidad donde cada pregunta tenga una respuesta y cada problema tenga una solución.

🎉 Únete a la Aventura:

¿Listo para embarcarte en un viaje de aprendizaje y exploración en el mundo de Python? ¡Wiki Python es tu compañero perfecto en esta aventura! Descubre, aprende y conecta con otros apasionados por el lenguaje de programación más serpenteante.

Así que no esperes más. ¡Visita Wiki Python hoy y descubre todo lo que este recurso tiene reservado para ti!

Happy coding! 🚀🐍

Espero que este borrador sea útil para tu post. No dudes en personalizarlo según tus necesidades y estilo. ¡Buena suerte con tu web Wiki Python! 🐍✨
Weekly reading digest #13
Tags: php, symfony, backend, softwareengineering
Published: 2023-11-12 09:00:00

[Benchmark of call_user_func_array vs switch optimization vs argument unpacking syntax](https://gist.github.com/nikic/6390366)

[Running PHP code in parallel, the easy way](https://stitcher.io/blog/parallel-php)

[Flamboyant Flamegraphs](https://derickrethans.nl/flamboyant-flamegraphs.html)

[Testing Symfony/Console applications with PHPUnit](https://speakerdeck.com/raphaelstolt/console-applications-with-phpunit)

[Making a Single-Page Application with HTMX and Symfony](https://jolicode.com/blog/making-a-single-page-application-with-htmx-and-symfony)

[Software engineering cheat sheets](https://nicwortel.nl/cheat-sheets)
Exploring React's Top Useful Hooks with Code Examples
Tags: webdev, javascript, programming, beginners
Published: 2023-11-12 08:58:26

**Introduction**
React Hooks are functions that allow functional components in React to use state, lifecycle methods, and other React features that were previously only available in class components. They simplify state management and side effect handling, making code more concise and readable. Hooks promote reusability of component logic through custom hooks, eliminate the need for class components, and provide a consistent way to handle component lifecycle events. They offer a more modern and intuitive approach to building components in React, officially supported by the React team for improved code organization and maintainability.

**1. useState**
Explain the basics of useState and how it's used for managing component state.

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

**2. useEffect**
Discuss the versatility of useEffect for handling side effects in functional components.

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

**3. useContext**
Explore how useContext facilitates the sharing of values like themes or user authentication throughout the component tree.


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

**4. useReducer**
Discuss the benefits of useReducer for managing complex state logic in a more centralized way.

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

**5. useRef**
Explain how useRef can be used to interact with DOM elements or persist values across renders without causing re-renders.

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

**6. useCallback**
Explain how useCallback can optimize performance by memoizing callback functions, preventing unnecessary re-renders.

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

**7. useMemo**
Discuss how useMemo can optimize performance by memoizing the result of expensive computations.


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

**8. useLayoutEffect**
Differentiate between useEffect and useLayoutEffect, emphasizing the use of the latter for interactions that require the DOM to be painted before continuing.


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

**Conclusion**
Summarize the additional hooks, highlighting their specific use cases and advantages. Encourage readers to explore these hooks further to enhance their React development skills. Also, mention the importance of staying updated with the React ecosystem as new hooks and patterns may emerge over time.
基本情報 Part 04 -- 2 進数の左右シフトと余りの扱い
Tags: 基本情報, 2進数, 左右シフト
Published: 2023-11-12 08:55:12

## 左右シフトとは？

( 今回は符号ビットは省略するが、符号ビットがある場合、右シフトの挙動は異なることがある。)

2 進数の数値を左右に動かすこと。動かした後には 0 が入る。

左シフトすると数値が大きくなり、右シフトでは数値が小さくなる

例1

* 0010 を左に 2 つシフトする
* 1000 になる

10 進数だと、2 が 8 になっている。

例2

* 1010 を右に 2 つシフトする
* 0010 になる

10 進数だと、10 が 2 になっている。

-----

## 左シフト ( *2^n )

n つ 左にシフトさせる場合、2^n をかける。

0010 を 左に 2 つシフトさせたい。
そのためには、2^2 をかける必要がある。
2^2 = 4 をかけると、左に 2 つシフトして、1000 になる。

掛け算なので、余りはない。

-----

## 右シフト ( /2^n )

n つ 右にシフトさせる場合、2^n で割る。

1001 を 右に 2 つシフトさせたい。
そのためには、2^2 で割る必要がある。
2^2 = 4 で割ると、右に 2 つシフトして、0010 になる。

割り算なので、余りが現れる。

しかし、余りはビットシフト操作では直接考慮されず、シフトされたビットは単に破棄される。

なので、1001 を 右に 2 つシフトさせた場合は 0010 で終わり。

しかし、余りを必要とする場合もある。

その場合、余りは追い出された 01 になる。

-----

## 実例

読みやすくするために、個人ルールとして 4 桁でカンマをつける。

以下の 16 ビットの 2 進数がある

1111,0000,0000,1111

これを 8 つ右シフトする。

すると

* 答え: 0000,0000,1111,0000
* 余り: 0000,1111 

になる
Zoom + Pan, clamped to a container
Tags: javascript, tailwindcss, webdev, elixir
Published: 2023-11-12 08:41:06

I recently needed to create a zoom + pan image preview, which should stick to a container for [marko.ch](https://marko.ch/en/p/%40mengisch/bunny-pullover-p71b37d8b?media=0). You can click on the squared image to open a dialog and see the result.

{% embed https://youtu.be/2Dr_3_APA_Y %}

For the code, see this [stackblitz](https://stackblitz.com/~/github.com/Neophen/pinch-zoom-pan).

It's a simplified version of the complete setup I made for Marko. If you want the full gallery experience, let me know, and I'll do a comprehensive write-up or finally film a little series.

## References:

Most (about 90%) of the renderer code was inspired by this post:
[Kacper Wdowik: Implementing Zoom and Pan in Just 69 Lines of Javascript](https://betterprogramming.pub/implementation-of-zoom-and-pan-in-69-lines-of-javascript-8b0cb5f221c1).
I've adapted it into TypeScript and added clamping.

Then, there's this tutorial by [Sam Selikoff: Pan and Pinch to Zoom with React Use Gesture](https://www.youtube.com/watch?v=dBWhAGhw7wM&t=13s).

## Renderer

The core of rendering the image within the container is within the [`renderer.ts`](https://github.com/Neophen/pinch-zoom-pan/blob/main/src/renderer.ts). This file solely focuses on calculating the style for the image from provided values.

The math is mostly explained in Sam Selikoff's tutorial, but I've used `transformOrigin` to calculate the offset for zoom/pinch zoom to the point of origin. 
**Note:** This behaves oddly while the image is smaller than the container, but it works perfectly afterward.

I spent a lot of time figuring out the correct math for this and even wrote a [simple tool](https://stackblitz.com/edit/vitejs-vite-exap8m?file=src%2FApp.vue) to see if my assumptions were correct. 😀

## Preview

The [`preview.ts`](https://github.com/Neophen/pinch-zoom-pan/blob/main/src/preview.ts) is responsible for adding event listeners and providing the correct information to the renderer.

**Note:** I specifically used `MouseEvents` and `TouchEvents` rather than `PointerEvents`. The main reason is that iOS Safari only recently started supporting these events. The other reason is that I wanted perfect control over the gestures. There are many scripts/packages out there dealing with these, but I find them too opaque and unreliable. Using native event listeners for capturing gestures isn't too difficult and offers better control.

## Summary

I hope this demonstrates that seemingly challenging tasks, like implementing pinch zoom and pan functionality, can be achieved using just vanilla JavaScript and some HTML/CSS, without any external dependencies.

Thank you, and have a great day!