teleren/devto huggingface dataset:
Maintain scroll position in Turbo without data-turbo-permanent
Tags: turbo, rails, webdev, javascript
Published: 2023-06-07 20:44:01

Alright, this will be short and sweet for future me.

Maintaining scroll position is notoriously painful.

Some articles like this have you add `data-turbo-permanent`: https://dev.to/mikerogers0/persist-scroll-positions-with-hotwire-turbo-1ihk

Why not `data-turbo-permanent`? Well, in our case we had a sidebar with a highlighted link for the current page, which means link clicks allowed for updating the highlighted current link. There were some workarounds we could have done, but decided not to.

There is also this GitHub issue which has a ton of workarounds:

https://github.com/hotwired/turbo/issues/37

There are some snippets in there that are pretty close to this. Here's what I used recently that worked well. Here's what I came up with that worked for me.

```js
import * as Turbo from '@hotwired/turbo'

if (!window.scrollPositions) {
  window.scrollPositions = {};
}

function preserveScroll () {
  document.querySelectorAll("[data-preserve-scroll]").forEach((element) => {
    scrollPositions[element.id] = element.scrollTop;
  })
}

function restoreScroll (event) {
  document.querySelectorAll("[data-preserve-scroll]").forEach((element) => {
    element.scrollTop = scrollPositions[element.id];
  }) 

  if (!event.detail.newBody) return
  // event.detail.newBody is the body element to be swapped in.
  // https://turbo.hotwired.dev/reference/events
  event.detail.newBody.querySelectorAll("[data-preserve-scroll]").forEach((element) => {
    element.scrollTop = scrollPositions[element.id];
  })
}

window.addEventListener("turbo:before-cache", preserveScroll)
window.addEventListener("turbo:before-render", restoreScroll)
window.addEventListener("turbo:render", restoreScroll)
```

There are 2 key things to note. Every element must have a unique ID, and every element must have a `data-preserve-scroll` on it. Like so:

```html
<nav id="sidebar" data-preserve-scroll>
  <!-- stuff -->
</nav>
```

Happy hunting!

EDIT: The one downside to this approach is I've noticed a brief flicker in Safari / Chrome. No flicker in FF. Perhaps a Turbo Transition, or using data-turbo-permanent could remove the flicker.

EDIT 2: Fixed the flicker. Article updated.
How to Create Animation using styled-components
Tags: react, javascript, programming, css
Published: 2023-06-07 20:14:41

**To read more articles like this, [visit my blog](https://www.mdfaisal.com/blog)**


Styled Components is a popular CSS framework for single-page applications. Today we will see how we can create animations using styled-components.

To learn more about `styled-components` go here.

https://styled-components.com/

Now let’s see how we can animate our components using styled-components.

## Get started

First, create a boilerplate application with ReactJS.

```js
npx create-react-app styled-components-animation-demo
```

Then install the dependency

```js
npm i styled-components
```

And we are ready to roll

## Define the Animation

Let’s create a FadeInAnimation with styled-components.

```js
const FadeInAnimation = keyframes`
  0% {opacity:0;}
  100% {opacity:1;}
`;
```
This is a straightforward animation that brings a component into view smoothly.

## Use the animation

Let’s say we have a header to `animate` to bring into view. We can easily do that by defining the animation property.

The final result will look something like this.

```js
const StyledHeader = styled.div`
  animation: ${FadeInAnimation} 300ms linear;
`;
```

## Final Words

This was a simple demonstration of how to animate components using `styled-components` .

Teaching animation was not the goal of this article. Just to clarify, any CSS animation will work similarly using this approach.

**Get in touch with me via [LinkedIn](https://www.linkedin.com/in/56faisal/) or my [Personal Website](https://www.mdfaisal.com/).**
Div vs Span in HTML, Do you know the difference? With Examples and Best-Practices.
Tags: webdev, beginners, tutorial, html
Published: 2023-06-07 19:53:56

In this article, we'll explore the differences between the div and span HTML elements, along with examples and real-world scenarios to help you understand when to use each element in your web development projects.

## Div vs Span: Key Differences


- A div element is used for block-level organization and styling of page elements, while a span element is used for inline organization and styling.
- A div tag creates a block-level element, while a <span> tag wraps around an inline element.
- The <span> tag is used to group smaller pieces of text together, whereas div can be used to group larger ones.
- It's common to see div elements nested, but it's best practice to avoid nesting <span> tags to prevent confusion.

**Simple Example**

```
<!DOCTYPE html>
<html>
<head>
<style>
  div {
    background-color: lightblue;
  }
  span {
    background-color: lightgreen;
  }
</style>
</head>
<body>
  <div>
    This is a div element, which is a block-level element.
    <span>This is a span element, which is an inline element.</span>
  </div>
</body>
</html>
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6e94zqj47a7hgi0yy1qq.png)
In this example, the div element has a light blue background and takes up the full width of its parent container, creating a new line. The span element, on the other hand, has a light green background and only takes up the width of its content, without creating a new line

## Best Practices

- While both `<div>` and `<span>` are useful for styling and structuring web pages, it's essential to understand their specific purposes and use them only when necessary.
- Semantic elements, such as` <header> <footer> <nav>` and `<main>`, should be used instead of generic elements like <div> and <span> when possible. Semantic elements make it easier for search engine crawlers, assistive technologies, and web developers to interpret your web page.
- Avoid nesting <span> tags, as it can lead to confusion. If you need to style an inline element, consider using a semantic HTML element or a CSS property like `display: inline-block;`
Why Choose Svelte over React
Tags: webdev, javascript, react, svelte
Published: 2023-06-07 19:17:50

When comparing 2 tools it’s common to compare in terms of positives, “A” does this better than “B” and “B” does that better than “A”. It’s a good start but most of the time it’s surface level and a matter of preference. It makes no big difference because the end goal can still be achieved either way. I think it’s often better to compare in terms of negatives, because it’s the negatives that truly limit you.

And it’s the negatives of React that led me to choose Svelte as my primary JS framework. I wish it weren’t so. JQuery was neat, AngularJS blew my mind, but React was special. React did everything AngularJS did, and even Angular 2 for that matter, but better and simpler. Sadly, this no longer seems to be the case.

It’s the virtual DOM. There’s no escaping it in React. It’s its biggest strength, it’s what made it so revolutionary, and now it is its biggest weakness.

Besides the unnecessarily larger bundle sizes, it creates unnecessary re-renders of your whole app upon every change. It may have improved over the years but fundamentally the issue is still there, and to mask it we impose seemingly arbitrary rules upon developers. We use hooks, we manually specify dependencies within hooks, we use hooks only at the top level, we wrap things in hooks and callbacks and memos, and the hole gets deeper every year.

It doesn’t have to be this way, at least not anymore. Instead of asking “How do we make this better?” I think the better question is “Should we make this better?”.

Sometimes there are just inherent limitations with a tool, and instead of endlessly optimizing maybe we should look elsewhere. Instead of pouring millions into research and development to increase the efficiency of the internal combustion engine by a couple of percentage points, maybe we should look to electric vehicles that just don’t have the same inherent limitations.

That’s how I feel about Svelte and React. Svelte uses a compiler-based approach, and any abstractions or code you write get compiled down to plain JS, without the hunky virtual DOM. It’s about as close to vanilla JS as you can get with a framework. And because of this you aren’t held back by the limitations of a virtual DOM. No more thinking about optimizing for re-renders, following the rule of hooks, or anything else related to the virtual DOM.

Using React has been getting more burdensome every year. It’s not the handful of ever-changing libraries you need to use with React, it’s not even Redux, in fact, I still enjoy using Redux, it’s just React. It’s gotten so heavy it’s hard to move forward with it.

Using Svelte feels like flying in comparison. It’s so light. And not just in its final bundle size but also in terms of the mental load, or framework-specific knowledge needed to use it. It makes for a better developer experience and faster load times for users.

I think React is too far gone at this point. Whatever got us from jQuery to React isn’t going to get us to the next level. We need something lighter and simpler, to make room for whatever is to come, and I think Svelte fits just right.
Acquia Certification: What You Need to Know
Tags: acquia, drupal, webdev
Published: 2023-06-07 19:15:32


## Introduction

Acquia certification is one way to demonstrate your expertise in Drupal development and increase your chances of landing a job. In this blog post, we will discuss everything you need to know about Acquia certification and why it's worth pursuing.

## Types of Acquia Certification

- Acquia Certified Drupal Developer
- Acquia Certified Drupal Site Builder
- Acquia Certified Acquia Cloud Pro
- Acquia Certified Campaign Studio Marketing Pro

## How to Get Acquia Certified
To become Acquia certified, you must pass the relevant exam. Before taking the exam, you should prepare by studying the exam objectives and taking practice tests.
Make account on ACQUIA academy following this link
https://community.acquiaacademy.com/learn
and select which type of certificate and learning path you need.
https://docs.acquia.com/certification/study-guides/d10-site-builder/

## Resources for prepare to exam (Drupal Site Builder)
- Druplizeme [https://drupalize.me/guide/build-drupal-sites](https://drupalize.me/guide/build-drupal-sites)
- ACQUIA Academy [https://community.acquiaacademy.com/learn](https://community.acquiaacademy.com/learn)
- OS Training [https://www.youtube.com/watch?v=-DYSucV1_9w&list=PLtaXuX0nEZk9MKY_ClWcPkGtOEGyLTyCO](https://www.youtube.com/watch?v=-DYSucV1_9w&list=PLtaXuX0nEZk9MKY_ClWcPkGtOEGyLTyCO)
Unleashing Creativity: My Journey as a Teenage Web Developer.
Tags: webdev, career, learning, discuss
Published: 2023-06-07 19:13:23

## Introduction

Currently, I am a full-stack web developer proficient in HTML, CSS, JS, PHP, and MySQL. While I may not consider myself a seasoned developer, my passion for creating something innovative and amazing is unwavering. Remarkably, at just 16 years old, I have already begun earning through freelancing, constantly expanding my skill set with an eye toward building a prosperous startup.
---

### My Journey and Cause
My journey commenced with the inception of "[BDFD](https://botdesignerdiscord.com/)," a mobile app designed for building Discord Bots. The inspiration behind this venture arose when I encountered a developer demanding big fees for bot creation. At the tender age of 13, I begin creation of my first discord bot development project, afterward I found out that I really enjoyed creating things on my own. Improving it further, I witnessed the incredible results of my creations firsthand.

### The Beginning
Then, fate introduced me to the remarkable JavaScript Library, "[Aoi.js](https://aoi.js.org/)," and this is when my programming journey truly commenced. With the fundamental principles of programming, I used my creativity, creating advanced Discord bots. One such innovation, the Mario Bot. During this exciting time, I received recognition for my accomplishments, including the highly rare Verified Bot status. Moreover, I got my first domain, mariobot.xyz.

With a strong desire to learn and progress, I stepped into the realm of Web Development. I began my journey by using Bootstrapstudio.io to create simple websites. Although my first portfolio website was built from a pre-made template on BootstrapStudio.io, it didn't quite match my vision. Undeterred, I started learning HTML, CSS, and JS, determined to enhance my skills.

Soon, I received my first order on Fiverr. Surprisingly, it wasn't for website development but rather Discord Bot creation. As time progressed, I furnished my skills by resolving bugs, issues, and complex problems. This challenging journey enriched my proficiency in programming, UI, UX, and the detail. Then, make my first official portfolio website, moeezikram.com.

At present, my expertise spans the realms of front-end and back-end web development. As a part-time freelancer and high school student, I juggle multiple responsibilities, including that of a startup founder. My ultimate aspiration is to become a successful entrepreneur, and I devote my days and nights in this mission.


![Tell me about yourself. Moeez Ikram](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l7m539sh06p9uxci8u74.png)
I invite you to share your story in the comments section below. I'm excited to hear your stories and learn from your personal journeys and experiences.
A good reason to allow empty git commits
Tags: log, todo
Published: 2023-06-07 19:06:35

---
title: A good reason to allow empty git commits
published: true
description: TLDR; this way you engage more your commits
tags: discussion, log, todo
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2023-06-07 18:58 +0000
---

## TLDR; workflow with `--allow-empty`
Think of 1 commit for an original pull request
```
#1 engage your changes before you actually want to commit
git commit --allow-empty

#2.1 engage changes with care
git commit --allow-empty -av --amend

#2.2 engage changes with determination
git add ${filenames}
git commit --allow-empty --amend

#3 you can always (squash, edit, rebase and more)
git rebase -i ${FETCH_HEAD_or_other_commit}

#4 push your changes
git push ${origin} ${branch}
```

## See also
https://duckduckgo.com/?q=git+commit+no+change
https://stackoverflow.com/questions/12470029/how-to-commit-no-change-and-new-message#12470056
Manychat Product Engineering Meetup in Barcelona
Tags: barcelona, meetup, development
Published: 2023-06-07 18:57:41

We're thrilled to host our **first tech meetup in Barcelona** on June 15, 2023!

Join us to discuss various aspects of **Product Engineering** together with speakers from Manychat and Semrush.

Here're three talks for this evening:

- Product Engineer: Your Next Step in IT — Aleksandr Lavrinenko (Engineering Manager, Manychat)

> Here are a few questions for engineers: Is there a difference between engineers and product engineers? What drives businesses to actively seek these professionals? Why should you consider becoming one yourself? And what actionable steps can you take to embark on this transformative journey? Join me as I explore and provide answers to these questions in my upcoming speech.

- What your company actually wants from your code — Sergei Iakovlev (Frontend Developer, Manychat)

> The current economic uncertainty and its effect on the tech industry is an excellent trigger to ask ourselves - “How can I do my job better?”. For product engineers, this question mostly goes down to “How can my code bring more value to the company?”. We asked product owners at Manychat what they expect from good code and how it can help the business grow. In this talk, I will share the insights we gathered and the practices we use to meet their expectations and achieve bigger results as a company.

- Product development mindset for engineers — Anastasiia Kononova (Head of Engineering, Semrush)

> Are there really any special skills required for a developer to be called a ‘product engineer’? What exactly are product teams and product companies then? Are there any other options? How to choose a direction if you are just starting your career in IT or thinking about changes? We will talk about such job expectations and specifics of work in product companies compared to delivery of implementation projects.

The event language is English.

Snacks, drinks, and a friendly atmosphere are on us!

For more information visit [Eventbrite](https://www.eventbrite.com/e/manychat-product-engineering-meetup-in-barcelona-tickets-647144485577?utm_source=devto) and register to reserve a spot!

If you can't attend the events, please [join us online](https://www.youtube.com/live/nvMa6Y37AtQ?feature=share).
Building an inventory tool using DronaHQ and HarperDB in minutes
Tags: tutorial, lowcode, database, developers
Published: 2023-06-07 18:41:52

Hey fellow developers!

Discover how to leverage DronaHQ's frontend capabilities and integrate it seamlessly with HarperDB as the database backend. Learn the step-by-step process and gain insights into enhancing your inventory management system. Dive in here:

https://www.dronahq.com/building-an-inventory-tool-using-dronahq-and-harperdb/
Component Size - Where to draw the line?
Published: 2023-06-07 18:28:39

I posted this on stack overflow and it was immediately closed by someone who thought it was too "opinion based".  Another comment was that the question is misguided.  Maybe so!  I should let the needs to the application drive what I write as opposed to the needs of the framework or library - BUT - I still feel this is a good question that is not addressed by the teachers very well, if at all. I am interested to see what people have to say about it.

I would say that around 50% of the questions I have every posted on stack overflow have been a BAD BAD BAD experience.  Someone claims a question has been asked before or they say it's opinion based or they yadda, yadda, yadda.  None of that is helpful at all. I seriously dislike stack overflow because of this sort of thing.  Every few months, I make the mistake of posting a question there and get reminded why I avoid stack overflow.

This time they said the question was opinion based.  I really can't argue with that.  I am, in fact, seeking your opinions. I'm just getting into React. I've read the documentation, watched some videos, and I'm taking a course by Meta. Everything I see as examples are tiny little chunks, such as, a component which is just a button or another component which is a submit button and two form fields, etc.

I get that the idea is to have small REUSABLE components. Like a Bootstrap Card component that can then be rendered anywhere.

What I'm struggling to get my head around is where to draw the line in terms of the size and complexity of a given component. For example, I want to write an app for creating a welder qualification record. There are a total of, say, 80 form fields that will need to be filled out.

These form fields can be sub-grouped topically, like this:

1. General Welder Information - 10 form fields
3. Base Metals - 10 form fields
5. And so forth…

Scenario #1 - I could break this down into 80 components - one for each form field.

Scenario #2 - I could break it down into one component for each topical subgroup.

Scenario #3 - I could make it one component that contains everything in the form.

With this specific task of creating the welder qualification form, there is nowhere else that the form fields (Scenario #1), or the topical sub-groups (Scenario #2) would ever be used. In other words, I won't ever need those theoretical components anywhere except on the single page where form lives. So why not write this as in Scenario #3?

From a functional point of view, Scenario #3 makes sense to me.  the form serves one purpose and one purpose only.  Therefore, it should be treated as one thing.

Is there another good reason to break this down into smaller components aside from potential future reuse of the component?

I expect that all of the form fields will be something like 2,000 lines of JSX without adding state and event handling.

The question is: What's the best practice? and WHY?
30 Days of Rust - Day 25
Tags: rust, devjournal, learning, beginners
Published: 2023-06-07 18:14:46

What is up world, I promised you I'd be back again this week. Today's blog flog will shed some light on Rust's self-proclaimed *functional* aspects. I'm not really dedicated enough blog time to this topic, but I'm quite time-pressed this evening 🫣

## Yesterday's questions answered
*No questions to answer*

## Today's open questions
*No open questions*

## 5 days left until closure
Anonymous functions in Rust are known as closures. This feature of the language is particularly powerful due to the following fact:
> Closures capture variables in the scope at which they are declared

We know that variable scope is fundamental point of thought when designing Rust code. Closures are the mechanism to get around some of the restrictions this poses. One obvious example of where this makes sense is creating a thread. You can make a variable available in that thread's scope. 

### Fn Traits
Closures (as well as normal functions) can implement so-called Fn Traits:
- FnOnce -> Called once, moves captured data out when returning
- FnMut -> Called more than once, may mutate captured values but won't move them
- Fn -> Called more than once, no mutations, no captured values

These traits allow the Rust compiler to spot issues early. For example, if multiple threads call a closure that mutates a resource that all threads need access too. Similarly, if you move an item in a closure while its original owner is still active in scope, you'd encounter some nasty bugs (if the compiler let you).

## Iterators are sexy
Turning collections into iterators opens up a bunch of useful operation to use as a developer. The `map`, `filter` and `sum`  methods provide a readable, high-level way of writing code. Consider these two code snippets:
```rust
pub fn search<'a>(query: &str, contents: &'a str) -> Vec<&'a str> {
	contents
		.lines()
		.filter(|line| line.contains(query))
		.collect()
}


pub fn search<'a>(query: &str, contents: &'a str) -> Vec<&'a str> {
	let mut results = Vec::new();

	for line in contents.lines() {
		if line.contains(query) {
			results.push(line)
		}
	} 
	
	results
}
```

Not only is the first example shorter, the code is more expressive of the procedural nature of the task. What's more, we don't have to worry about state management (of the vector) which could become challenging in a multi-threaded system.