teleren/devto huggingface dataset:
Cooking up high-quality website templates this weekend! 🧑‍🍳
Tags: webdev, javascript, softwareengineering, productivity
Published: 2024-06-21 23:21:46

As a developer who's passionate about simplifying processes and saving time, I'm excited to share a game-changing project I've been working on: **free, open-source website templates**. 

> These templates are designed to streamline web development, making it easier and faster for developers of all skill levels to create stunning, functional websites.

## Why Website Templates are a Game-Changer?

Website templates offer numerous benefits that can dramatically improve your development workflow:

```
1. Save 100+ hours of work
2. Pre-built advanced animations
3. Easy configuration and customization
4. One-click download and setup
5. 5-minute content updates
6. Seamless Vercel deployment
```

These features combine to create a powerful toolkit that allows developers to focus on customization and content rather than starting from scratch every time.

## Tech Stack:

To ensure these templates are modern, efficient, and highly customizable, I'm using a robust tech stack:

```
- React
- Next.js
- Magic UI
- Shadcn UI
- Tailwind CSS
- Framer Motion
```

This combination of technologies provides a solid foundation for creating responsive, performant, and visually appealing websites.

## What's Included in Each Template?

Each template comes packed with essential sections to kickstart your project:

```
✅ Header Section 
✅ Hero Section 
✅ Social Proof Section 
✅ Pricing Section 
✅ Call To Action Section 
✅ Footer Section 
✅ Mobile Responsive Navbar
```

These components cover the core elements needed for most websites, allowing you to quickly set up a professional-looking site.

## Progress and Future Plans:

I've just completed the first template and am aiming to create two more this week. The best part? All of these templates will be free and open source, allowing the entire development community to benefit from and contribute to this project.

Demo Preview:

Here's a sneak peek at one of the templates:

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

If you're interested in seeing the full demo video, you can check it out on my LinkedIn post [here](https://www.linkedin.com/posts/kathan-mehta-software-dev_webdevelopment-opensource-react-activity-7210055333027745792-l-N9?utm_source=share&utm_medium=member_desktop).

Stay Tuned!

I'm thrilled about the potential impact these templates can have on the web development community. By providing free, high-quality, and easily customizable templates, we can collectively save countless hours of development time and lower the barrier to entry for creating professional websites.

Stay tuned for the official launch! I'll be sharing more updates and resources as the project progresses. If you're as excited about this as spread the word to your fellow developers.

Let's revolutionize web development together, one template at a time! 🚀
Project Stage-3:Leveraging Advanced GCC Flags.
Published: 2024-06-21 23:18:33

Hello there!!

As our journey towards implementing Automatic Function Multi-Versioning (AFMV) for AArch64 systems continues, I’ve encountered some intriguing challenges and solutions regarding the support of SVE2 (Scalable Vector Extension version 2) in GCC. This blog post explores how advanced GCC flags can be leveraged to overcome these hurdles, enabling a smoother path towards a fully functional AFMV setup.

## Exploring Advanced GCC Flags:

GCC (GNU Compiler Collection) is known for its robust support for various architectures and instruction sets, including SVE2. However, enabling these features sometimes requires explicit configuration through advanced flags. Here’s a breakdown of the steps I followed to integrate these features:

**1. Identifying the Required Architecture Support:**

- The error indicated that SVE2 support wasn't automatically enabled, which led me to investigate the necessary architecture flags. SVE2 is part of the Armv8.5-A architecture, so I needed to ensure GCC was configured to support this.

**2. Adding the Appropriate Flags:**

- By consulting the GCC documentation and community forums, I identified the necessary flags to enable SVE2 support. The critical flags were -march and -mcpu, which dictate the target architecture and CPU:

```
gcc hello.c -o hello -O3 -march=armv8.5-a+sve2 -mcpu=cortex-a75
```
Here’s a brief explanation of the flags:

- `-march=armv8.5-a+sve2`: Specifies the target architecture, including SVE2.
- `-mcpu=cortex-a75`: Specifies the CPU, ensuring that it aligns with the required architecture.

**3. Integrating the Flags into the Build Process:**

By incorporating these flags into my build commands, I ensured that the compiler was correctly configured to recognize and support the SVE2 instructions. This involved updating my Makefile and build scripts to include these flags.

**4. Validating the Configuration:**

After adding the flags, I recompiled my code and verified that the target("sve2") attribute was now recognized and valid. Here’s a snippet of the updated hello.c:

```
#include <stdio.h>

__attribute__((target("sve2")))
void my_function() {
    printf("This function utilizes SVE2 instructions.\n");
}

int main() {
    my_function();
    return 0;
}

```

## Insights and Learnings:

This experience underscored the importance of understanding and leveraging advanced GCC flags to achieve the desired functionality. It was a reminder that while GCC is incredibly powerful, it often requires explicit configuration to support specialized features like SVE2.

In summary, the addition of advanced GCC flags was crucial in enabling SVE2 support, thereby allowing us to move forward with the AFMV implementation. This journey has been instrumental in deepening my understanding of compiler configurations and their impact on project outcomes.

Stay tuned for the next post in this series, where I’ll delve into the performance optimizations made possible through AFMV and SVE2!

Until next time, happy coding 🚀!!
How to Add Nodemon to your TS files
Published: 2024-06-21 23:13:03

The dev package nodemon has been a great help providing server-side hot-reloading as we code in our JavaScript, json, and other files while developing the in the NodeJS environment. To include the benefits of nodemon in your TypeScript projects so that the _unbuilt_ ts file hot-reloads as you go takes a bit more configuration, but isn't difficult. 

Start by installing nodemon and ts-node as dev tools:

```
npm i -D nodemon ts-node
```
In the root of your project (on the same level as your package.json) made a config file called 

```
nodemon.json
```
In this file, past the following code:

```
{
    "watch": ["src"],
    "ext":  "ts",
    "exec": "ts-node ./src/index.ts"
  }
```
The extensions I am watching with nodemon are simply the .ts files located in the src folder. The package ts-node will be used to execute the file called index.ts in my src folder. Update per your needs. 

Put the following script in your package.json with your other scripts:

```
"nodemon": "nodemon --watch 'src/**/*.ts' --exec ts-node src/index.ts",

```
You will now be able to start your project using the following command:

```
nodemon
```
and as you code in the index.ts, the hot-reloading will update your server.

That's it for now!
Project Stage-3: Overcoming Compiler Attribute Challenges
Published: 2024-06-21 23:05:11

Welcome back folks!! In our quest to implement Automatic Function Multi-Versioning (AFMV) for AArch64, one of the critical challenges has been dealing with compiler attribute errors. The target("sve2") attribute error was a particular stumbling block. Here’s how I tackled it.

## Initial Error Message:

```
error: pragma or attribute ‘target("sve2")’ is not valid
```

## Steps to Resolve:

**1. GCC Version and Compatibility Check:**

Verified that my GCC version supports SVE2 with gcc --version.
Updated GCC to the latest version to ensure full support for the attribute.

**2. Correct Usage of Attributes:**

Adjusted the context in which the target attribute was applied, ensuring it was used correctly in the function definition.

**3. Compilation Flags:**

Added -march=armv8.5-a+sve2 to the GCC command to explicitly enable SVE2 support.

**4. Code Adjustment:**

```
#include <stdio.h>

__attribute__((target("sve2")))
void my_function() {
    printf("This function uses SVE2 instructions.\n");
}

int main() {
    my_function();
    return 0;
}

```
With these adjustments, the attribute error was resolved, allowing me to continue with the AFMV implementation. This process underscored the importance of aligning compiler settings with the specific architectural requirements.

Until next time , happy coding 🚀!!
Acessibilidade = Usabilidade
Tags: braziliandevs, frontend, a11y
Published: 2024-06-21 22:43:53

---
title: Acessibilidade = Usabilidade
published: true
description: Um rant rápido considerando acessibilidade
tags: braziliandevs, frontend, a11y
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2024-06-21 22:10 +0000
---

Nós devs frontend não devemos pensar em acessibilidade como uma coisa separada de usabilidade. Usabilidade é um termo empregado pra dizer quão fácil é que o usuário consiga alcançar o que deseja com o produto. E o design tem que ser pensado considerando o perfil de usuário para melhorar a usabilidade.

Um exemplo são os atalhos de teclado como `o Ctrl C` / `Ctrl V`, que facilitam a tarefa para uma porção de usuários. Ao mesmo tempo, é importante deixar alternativas para usuários sem ciência desse atalho, por conta disso que no menu de contexto (botão direito do mouse) geralmente você encontra um "copiar" e um "colar" ali.

Acessibilidade é a mesma coisa que usabilidade, só que empregada para perfis específicos de usuário, geralmente portadores de deficiência. Um campo inacessível é um bug crítico de usabilidade com impacto igual a (ou maior que) um botão difícil de usar ou um carregamento lento.

Algumas coisitas que podemos fazer para melhorar no nosso dia a dia de dev frontend:

* Aprenda mais sobre acessibilidade. Muitas gente aprende sobre "alt" e "tags semânticas" e pára aí. Aprenda sobre WCAG, WAI-ARIA, media features, e dissemine seu aprendizado.
* Não reinvente a roda. HTML tem bastante coisa nativamente, e onde ele sozinho não consegue, use bibliotecas de componentes headless, tem muitas alternativas mas pessoalmente gosto de usar o Radix.
* Batalhe pelo usuário. Quando for implementar algo novo, sempre considere como fator de implementação adaptar esse algo para uma gama de necessidades de usuários diferentes.
* Teste o que criou, não fique só na teoria. Use leitores de tela, ou outras ferramentas de acessibilidade, para confirmar que o que fez está correto.
Project Stage-3: Digging Deeper
Published: 2024-06-21 22:43:26

Hi Peeps!! Welcome back. Without wasting any time lets continue from the  [last blog](https://dev.to/yuktimulani/project-stage-3-error-analysis-3lm4).

The error message related to the target("sve2") attribute has been a key focus in the latest phase of our AFMV implementation. The message was clear but presented a challenge:

```
error: pragma or attribute ‘target("sve2")’ is not valid
```
To address this, I first ensured that my GCC version supports SVE2 instructions. Using the command gcc --version, I verified the version and compatibility. Here’s what I found:

- GCC Version Check: Confirmed that my GCC version was up-to-date and should theoretically support SVE2.

Next, I explored the usage and context of the target attribute. Here’s a snippet from my hello.c file:

```
#include <stdio.h>

__attribute__((target_clones("sve2")))
void my_function() {
    printf("This function uses SVE2 instructions.\n");
}

int main() {
    my_function();
    return 0;
}

```
Despite the correct syntax, the error persisted. This led me to check if there were specific flags required to enable SVE2 support. The solution involved adding -march=armv8.5-a+sve2 to the GCC compilation command:

```
gcc hello.c -o hello -O3 -march=armv8.5-a+sve2

```
This resolved the issue, confirming that the attribute was now valid under the specified architecture. The journey continues, but this was a significant step towards a functioning AFMV implementation.

Until next time, happy coding 🚀!!
[Game of Purpose] Day 34
Tags: gamedev
Published: 2024-06-21 22:32:28

Today I made my drone drop a granade and explode on impact.

{% embed https://youtu.be/n-Vs0QikzeE %}

A problem I currently face is that when the granade is attached via a PhysicsConstraint it will contribute to a drone's mass and will slowly fall down, because there is not enough thrust. I tried to add granade's mass to up/down thrust calculations, but it didn't work. :/

Another problem is that there is no easy way of disabling a connection PhysicsConstraint. You cannot simply unbind connection from a granade to a drone. You have to swap granade with something else. I tried that, but the replacement needs to have its physics enabled and I don't want it to contribute to a mass even if it's invisible. 

The solution I made is unlocking the "Linear Z limit". It means that the invisible rope the granade is connected to the drone unwinds infinitely. By default all the Linear axes are locked


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mon0e6i8dezgp8rp8dgj.png)
My First Scrimba Project
Published: 2024-06-21 22:13:29

Technical writing has been my chosen profession for the last three years. My interest started seven years ago when I was a senior in high school. After researching writing careers in the bls.gov, the only thing I knew about technical writing was that it included writing manuals. Despite my skint knowledge in the field, I decided my profession and modeled my higher education to enhance the skills I would need to be an effective communicator.

---

I did not know about the variety in types of writing I would make or the variety in tools. I mistakenly thought that everything could be done with word processors such as Microsoft Word and Google Docs. To date, I've used to help me write effective, clear, and concise communication.
- Grant research software
- Snag It (picture editing software)
- Jira (project management tracking tool)
- Confluence (knowledge base site)
- Adobe Acrobat (document builder)
- Adobe Illustrator (document builder)
- Datayze.com (ease of reading editor)

I am so grateful for my professional and educational experiences that have allowed me to explore these tools and many others. My understanding of technical writing has deepened and I am excited for what the future of my career holds.

For more specific information on how I used these tools, please see the link below for my internship presentation.
```
{ 
    youtubeChannel: 'https://www.youtube.com/watch?v=M2w5YT5vMus'
}
```
![Eryn's word logo that she created in Adobe Illustrator](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/da6u58ez55ng47rnwuci.jpg)
Maiu Online - Browser MMORPG #indiegamedev #babylonjs Ep22 - Map editor
Tags: babylonjs, indiegamedev, mmorpg, devlog
Published: 2024-06-21 22:13:11

Hey
Currently I’m working on collisions detection. For now I’m using SAT 2D and later in future maybe I’ll change it to something different (maybe navmesh, will se…). To make creation of map and collisions data a little bit more automatic I prepared very simple map editor. Which prints in the output whole map config with collisions data etc… in json format.
Collisions detection still have few bugs mostly related to the calculating collision response, when I’ll fix it I’ll share next video.

{% youtube Cd32A2cxyVI  %}
💾 Database Management Systems (DBMS) Explained
Tags: devchallenge, cschallenge, computerscience, beginners
Published: 2024-06-21 21:52:45

*This is a submission for [DEV Computer Science Challenge v24.06.12: One Byte Explainer](https://dev.to/challenges/cs).*

## Explainer

DBMS 💾 is software that manages and organizes data in databases 📚. It allows users to store, retrieve, update, and delete data efficiently 🗃️. With features like data security 🔒 and backup 📦, DBMS ensures data integrity and accessibility for applications.
Day 976 : Manifest
Tags: hiphop, code, coding, lifelongdev
Published: 2024-06-21 21:44:11

_liner notes_:
- Professional : Not a bad day. Took some training. Applied for a Visa, again. haha Responded to some community questions. Worked on refactoring a feature in an app to use a new SDK.

- Personal : Last night, I went through tracks and put together a playlist for the radio show. I set up the social media posts for the projects I picked up on Bandcamp. Created a starter project to upgrade a previous side project. Ended the night watching the new episode of "The Boys".

![The picture shows the Cliffs of Moher on the west coast of Ireland. The cliffs are made of layers of sedimentary rock and rise almost 700 feet above the Atlantic Ocean. The cliffs are made of layers of shale and sandstone, which have been eroded by the waves over millions of years. The result is a stunning landscape of jagged is a deep blue and there are some white waves crashing against the shore. The sky is blue with gray clouds. There is a green field at the top of the cliff. The cliffs are home to a variety of seabirds, including puffins, guillemots, and razorbills. The Cliffs of Moher are one of the most popular tourist destinations in County Clare, Ireland.﻿﻿](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cap3lrvq173swbpwut13.jpg)

Going to finish putting together the radio show along with looking up social media accounts for the artists. I keep saying it but I need to finish the logo for my side project. Also, need to print out some mailing labels to ship some packages tomorrow. Maybe watch some episodes of "Demon Slayer" to end the night. So, radio show on Saturday (https://kNOwBETTERHIPHOP.com) and Sunday (https://untilit.works). Trying to manifest a productive weekend. haha

Have a great night and weekend!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube 6AgxwjgI4E0 %}
What do a bug screen and a firewall have in common?
Tags: devchallenge, cschallenge, computerscience, beginners
Published: 2024-06-21 21:38:40

*This is a submission for [DEV Computer Science Challenge v24.06.12: One Byte Explainer](https://dev.to/challenges/cs).*

## Explainer

Firewall is like a bug screen, essential to defend our space against vermin intruders when we open the window. In order to save yourself from hosting the banquet of malware creepy-crawlies, secure your place. Use firewall.

## Additional Context

The post is meant to emphasize the importance of fortifying the security posture in our lives.

<!-- Team Submissions: Please pick one member to publish the submission and credit teammates by listing their DEV usernames directly in the body of the post. -->

<!-- Don't forget to add a cover image to your post (if you want). -->

<!-- Thanks for participating! -->
AWS Polling - What is it and why you should do it
Tags: devchallenge, cschallenge, computerscience, beginners
Published: 2024-06-21 20:56:14

*This is a submission for [DEV Computer Science Challenge v24.06.12: One Byte Explainer](https://dev.to/challenges/cs).*

## Explainer
In [AWS](https://aws.amazon.com/) Lambda polling, we find the most optimal configuration for your AWS Lambda. These configurations refer to the memory size and its relation to runtime & cost. Plotting memory vs cost on a graph gives us a minimum point, which is the optimal cost.
<!-- Explain a computer science concept in 256 characters or less. -->


![Example of polling in real life using a memory vs time graph](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rjxbtcj5lvc0e2cbseid.png)

## Additional Context
When I first started using [AWS](https://aws.amazon.com/), I'd often end up spending a lot more as compared to what my expectation, but since the projects were small and the small differences in run-time did not affect the business function that much I used to overlook it. It was only when we started the first major project that we learnt about [polling](https://docs.aws.amazon.com/lambda/latest/operatorguide/profile-functions.html) in [AWS Lambda](https://aws.amazon.com/) and it has been a lifesaver. On a recently completed project, we are projected to save about $500 over the lifetime due to polling. These are the small things that we have now learnt to pay more attention to at our [Consultancy](https://onesol.dorik.io/)!
<!-- Please share any additional context you think the judges should take into consideration as it relates to your One Byte Explainer. -->

<!-- Team Submissions: Please pick one member to publish the submission and credit teammates by listing their DEV usernames directly in the body of the post. -->

<!-- Don't forget to add a cover image to your post (if you want). -->

<!-- Thanks for participating! -->
Crafting Effective UI Layouts: Day 4 of My UI/UX Design Journey
Tags: ui, uidesign, ux, uxdesign
Published: 2024-06-21 20:52:25

Day 4: Mastering Layout in UI Design

👋 Hello, Dev Community!

I'm Prince Chouhan, a B.Tech CSE student with a passion for UI/UX design. Today, I'm excited to share my learnings on the principles of creating effective layouts in UI design.

---

🗓️ Day 4 Topic: Layout Principles in UI Design

---

📚 Today's Learning Highlights:

1. Concept Overview:
   A layout is the arrangement of visual elements on a user interface, 
   organizing content to guide users and enhance their experience. 
   Effective layouts make interfaces intuitive and visually appealing.

2. Key Takeaways:
   - Order: Arrange elements logically to guide users through the 
     interface.
   - Hierarchy: Establish visual priority to direct attention to 
     important elements.
   - Balance: Distribute elements evenly to create visual stability.

3. Key Considerations for Creating a Good Layout:
   - Balance:Achieve stability through symmetrical (equal weight) or 
        asymmetrical (visual weight) distribution.
   - Hierarchy:
     - Size: Larger elements catch attention first.
     - Color: Bold colors highlight important elements.
     - Placement: Position key elements in prominent areas.
   - Proximity: Group related elements together to indicate their 
                connection.
                - Separate unrelated elements to avoid confusion.
   - White Space (Negative Space): Use empty space strategically to 
        enhance readability and focus.
        Prevent clutter and give the design room to breathe.
   - Alignment: Align elements to create order and cohesion.
       Use grids and guides to maintain consistency across the interface.

4. Common Design Layouts:
   - Grid Layout: Uses rows and columns to structure content.
      Ensures alignment and consistency.
   - Single Column Layout:Simplifies navigation by presenting content in 
       a single, vertical flow.
      Ideal for mobile interfaces.
   - Split-Screen Layout:Divides the screen into two distinct areas.
      Useful for showcasing dual content or comparisons.
   - Z-Pattern Layout: Guides the user's eye in a Z-shaped path.
       Effective for designs with a clear start and end point.
   - F-Pattern Layout: Directs the user's eye in an F-shaped pattern.
     Commonly used for text-heavy content.

---

🚀 Future Learning Goals:
Next, I'll explore visual hierarchy, consistency, and simplicity in UI design.

---

📢 Community Engagement:
- What are your favorite layout techniques?
- Any examples of effective layouts that you find inspiring?

---

💬 Quote of the Day:
_"Good design is obvious. Great design is transparent." – Joe Sparano_

---

Thank you for reading! Stay tuned for more updates as I continue my journey in UI/UX design.

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

#UIUXDesign #LearningJourney #DesignThinking #PrinceChouhan