teleren/devto huggingface dataset:
View transtions API in next.js
Tags: nextjs, viewtransitionsapi
Published: 2024-05-22 20:25:43

I am a student at Howest University of Applied Sciences in Belgium and working on my bachelor's thesis.

For my undergraduate thesis, I am looking for people who already have experience working with the View Transitions API in Next.js.

So are you someone who already has experience with this then you can help me by filling out the questionnaire I have prepared.
The questionnaire contains eleven questions.

The topic of my thesis is "How do you create an interactive webapplication in combination with Next.js and the View Transitions API?". The answers from the survey conducted as part of this research will be processed in a reflection.

Link to survey: https://forms.gle/ED1pEEVfYjtK5Egw5
Link to small project: https://github.com/MikeVanoosthuyze/demo-research-project
Provac Canada
Published: 2024-05-22 12:51:07

ProVac Canada is your go-to solution for top-quality duct cleaning services across Canada. With a commitment to improving indoor air quality, ProVac Canada uses state-of-the-art technology and eco-friendly products to ensure your ducts are thoroughly cleaned and free of contaminants. Their team of certified technicians provides meticulous service, ensuring every job is done to perfection.

Beyond duct cleaning, ProVac Canada offers comprehensive HVAC maintenance and air quality testing to keep your entire system running efficiently. Their customer-centric approach means they tailor their services to meet your specific needs, ensuring complete satisfaction. With competitive pricing and unparalleled quality, ProVac Canada stands out as the premier choice for duct cleaning services.

Experience the difference that ProVac Canada brings to duct cleaning and breathe easier knowing your air quality is in expert hands. Visit [ProVac Canada](https://provaccanada.com) today to schedule your service and improve your indoor environment.
📱🎉 iPhone 15 Pro Max Giveaway 🎉📱
Published: 2024-05-22 19:57:46


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iyaa63ia4aseak3mzqzy.png)
Hey everyone! 🌟 Exciting news! 🌟
I'm thrilled to announce that we're hosting a giveaway for the latest [iPhone 15 Pro](https://sites.google.com/view/mailbazar5864532/home)! 📱✨
To participate, all you need to do is follow these simple steps:
1️⃣ Like this post ❤️
2️⃣ Follow our page for more updates 📲
3️⃣ Tag 3 friends who would love to win this amazing iPhone 15 Pro! 🤩👭
That's it! You're in! 🎉
The winner will be randomly selected and announced on [01.06.2024]. 🗓️ So make sure to stay tuned!
Good luck to everyone! 🍀 Let's spread the excitement! 🎊
#iPhone15Pro #Giveaway #WinBig #TechLove 📱💖


[Win iPhone 15 Pro](https://sites.google.com/view/mailbazar5864532/home)
Rotate/Pusle Animation in React Native
Tags: javascript, reactnative, animation, mobile
Published: 2024-05-22 19:34:06


![Rotate/Pusle Animation in React Native](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s8m48mo8w9dvehwlpkyk.png)

I implemented a continuous rotation and pulsing animation for an image using React Native's `Animated` API. This small gist demonstrates how to create smooth, looping animations that can enhance the visual appeal of mobile applications.

### Project Overview

In this project, an image is animated to rotate continuously and pulse (scale up and down) simultaneously. Here’s a breakdown of how I achieved this:

### Code Explanation

1. **Setting Up the Animated Values:**
   - `rotateValue`: Controls the rotation of the image.
   - `pulseValue`: Controls the pulsing effect (scaling) of the image.

2. **Starting the Animations:**
   - **Rotation Animation:** 
     - Wrapped in `Animated.loop` to ensure it repeats indefinitely.
     - Uses Animated.sequence to create a smooth rotation effect.
     - Animated.timing changes rotateValue from 0 to 1 over 4000 milliseconds and from 1 to 2 over another 4000 milliseconds, creating a full rotation every 8000 milliseconds.
     - The Easing.linear function ensures a consistent rotation speed.

   - **Pulse Animation:** 
     - Also wrapped in `Animated.loop` to repeat indefinitely.
     - Uses `Animated.sequence` with two `Animated.timing` calls to scale the image up to 1.5x its size and back down to its original size over 2000 milliseconds (1000 ms for scaling up and 1000 ms for scaling down).

3. **Combining Transformations:**
   - Applied to an `Animated.View` containing the image.
   - Transformations include `translateX`, `translateY` (for spiral effect), `rotate`, and `scale`.

###Code Snippet

{% embed  https://gist.github.com/saumaypaul20/ce77c19b02b83ef2e3c4421f4f506738 %}

You can view the full code on GitHub Gist: [LINK](https://gist.github.com/saumaypaul20/ce77c19b02b83ef2e3c4421f4f506738)

You can view the demo on Expo Snack: [LINK](https://snack.expo.dev/@saumay.paul/intrigued-blue-crackers)

### Conclusion

This project showcases how powerful and flexible the `Animated` API in React Native can be for creating engaging user interfaces. Animations like these can significantly improve user experience by adding a layer of interactivity and visual feedback.

Feel free to check out the code, and I'd love to hear your thoughts and feedback! 🌟

---
Drag and Drop React JS Form Builder. Develop Front-End with ease!
Tags: react, javascript, webdev, frontend
Published: 2024-05-22 19:08:57

In this video, I will try to answer the question of whether it's possible to unite various design systems and custom components into one platform that will have a centralized display mechanism and a visual editor for the user interface. 

Here a [quick answer](https://demo.formengine.io) to this question. Yes! With Form Engine.

00:10 - Introduction
01:30 - Architecture
03:07 - Installation
04:32 - Building a Form from Scratch
09:06 - Upload and Download JSON file
09:18 - Important Features
09:30 - Fluent Localization Library
09:44 - Form template and hierarchy 
10:00 - Responsive Design
10:10 - How to add any components from your existing design systems
10:12 - We are adding the Material UI component

Github [Formengine](https://github.com/optimajet/formengine)

P.S.

We are taking our first steps in creating content that is useful to the developer community, so we ask you not to judge us too harshly and to help us with advice, comments, and recommendations on how to improve our publications. We welcome any feedback in the comments.
Bristol Hospice
Tags: health, bristol, hospice, fithness
Published: 2024-05-22 19:05:55

Our **[Bristol Hospice](https://bristolhospice.com/)** programs provide hospice services to meet the physical, psychosocial, and spiritual needs of our patients and their families/caregivers. An interdisciplinary group of professionals and volunteers develops an individualized plan of care which includes, as appropriate, the following services: nursing, physicians, home health aides, counseling, spiritual support, therapy, dietary, volunteers, durable medical equipment, supplies, and bereavement services.
I created free React Material UI dashboard theme
Tags: webdev, react, opensource, frontend
Published: 2024-05-22 18:48:21

Hi all! 👋

I would like to share with you my latest hobby project, which is a free Material UI dashboard theme. ⭐ on GitHub is welcome! 
I hope it will help you!

[DevFoxUI GitHub repository](https://github.com/pbasiak/dev-fox-ui-mui-dashboard-theme)

![DevFoxUI Free Material UI dashboard theme light version](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lnrw7s1zydoknx5i0chw.png)

## Short story
I am a frontend developer with 7 years of experience in different areas, but usually, I am building frontend applications using React. I always wanted to build a theme. Initially, I was thinking about a WordPress theme, but I did not do it. Time was moving fast, and the idea came back again, but at a time when I was focused on the React ecosystem and Material UI library.
Finally, I decided to do it, and I am here!

## About project
This is a free (under MIT License) Material UI dashboard theme. It is under active development, and I am improving and adding new things in my spare time. It contains two themes and many templates ready to use. I tried to build it with high-quality code and the latest standards. It uses the latest React 18 together with top libraries.

## What's inside

### Tech stack
- Material UI 5
- Material UI icons
- Material UI Data Grid
- Material UI styled components (no CSS)
- React Query
- React Router 6
- ReduxJS Toolkit
- React ChartJS 2
- React 18
- Slate (Text editor)
- YUP
- Vite
- Typescript

### Features
- project is using hooks to provide data, so it's easy to replace with your
- many templates
- best quality (I tried :))
- latest versions of libraries
- few custom components
- two themes
- dark & light mode

### Templates
- Dashboard
- User account
- User profile
- User list
- User edit
- User create
- Blog list
- Blog details
- Blog edit
- Blog create
- Order list
- Jobs list
- Jobs details
- Jobs create
- System - Not found
- System - Under construction
- Login
- Register
- Reset password
- Verify code

### Apps
- Calendar (needs a refactor)
- Tasks

## Under development
The project is under development and there are a few places which requires attention, like the calendar app. If you find anything which needs an improvement or fix, please let me know with a GitHub issue or leave a comment here.
I plan to add more things, but I do not have a strict plan since I am doing it in my free time.

## Summary
Happy to share with you with my work. Please let me know what do you think about it. Suggestions are also welcome.

[DevFoxUI GitHub repository](https://github.com/pbasiak/dev-fox-ui-mui-dashboard-theme)

I am not a native English speaker, so I apologize for any mistakes.

## Additional screenshots

![DevFoxUI Free Material UI dashboard theme dark version](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vmovqoezv05p99jg7dup.png)


![DevFoxUI Free Material UI dashboard theme 2 dark version](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/80ol8d6s96nvkpro856x.png)
Keep Your Family Safe and Your Home Stylish with Our Front Doors
Published: 2024-05-22 18:25:30

Looking to give your home a fresh, stylish look? You've come to the right place! Our exclusive range of [External Wooden Doors](https://www.wooden-doors.uk/) includes beautiful oak doors, elegant entrance doors, and a variety of other exterior door options. Let's explore how our doors can enhance the beauty and security of your home.

**

## Keep Your Family Safe and Secure
**

When it comes to security, we don’t cut corners. Each door in our collection features a 3-star high-security cylinder, ensuring top-notch protection against break-ins. The multi-point locking system securely fastens your door at several points, providing an extra layer of security. You can feel safe and sound behind one of our doors.

Our commitment to quality extends to our installation services. Our team of highly qualified installers ensures that every door is professionally fitted. This means your new door will look stunning and work perfectly. Plus, we offer a 10-year guarantee on all our doors, giving you peace of mind and protecting your investment for years to come.

## **A Door for Every Need**

We offer a wide range of doors to suit every part of your home. Our front doors are designed to make a grand entrance, combining beauty and durability. For those looking to add a touch of elegance, our French doors are perfect for connecting indoor and outdoor spaces with style. If you’re after a modern, space-saving option, our bi-folding doors are ideal and look fantastic. Our patio doors provide easy access and stunning views, enhancing your connection to the outdoors. And for everyday practicality and security, our back doors are designed to withstand daily use and the elements.

**

## Adding Value to Homes Across the UK
**

Our doors do more than just look good and keep you safe; they add real value to your home. With our careful craftsmanship and high-quality materials, choosing one of our doors is an investment in your home’s future. You’ll not only enjoy the immediate benefits of improved security and aesthetics but also see an increase in your property’s value.

**

## Get in Touch
**

Ready to transform your home with a beautiful new door? We're here to help! Contact us today to find out more or to schedule a consultation. Experience the perfect blend of security, style, and quality with our range of front doors. Your home deserves the best, and we’re excited to provide it for you.
JavaScript – Rounding floating point numbers
Published: 2024-05-22 18:10:48


There are six different functions in JavaScript’s Math library for rounding floating point numbers:

- abs()
- ceil()
- floor()
- round()
- trunc()
- fround()

What is the difference between these functions?

### abs()
abs() is the absolute value of a number. Mathematically speaking, it is the distance of a number from zero. As a distance cannot be negative, the absolute value is always the positive value of a number:

Math.abs(7.89012) = 7.89012
Math.abs(-7.89012) = 7.89012

### ceil()
ceil() rounds up a number to the nearest integer value greater than or equal to the given number:

Math.ceil(7.1) = 8
Math.ceil(7.8) = 8
Math.ceil(-7.1) = -7
Math.ceil(-7.8) = -7

Please note that the next largest integer from -7.1 is not -8, but -7.

### floor()
floor() is the counterpart to ceil(), so it rounds the given number to the next smaller or equal number to the given number:

Math.floor(7.1) = 7
Math.floor(7.8) = 7
Math.floor(-7.1) = -8
Math.floor(-7.8) = -8

### round()
round() rounds the given number to the nearest whole number:

Math.round(7.1) = 7
Math.round(7.8) = 8
Math.round(-7.1) = -7
Math.round(-7.8) = -8

The function works mathematically correctly:

math.round(7.49) = 7
math.round(7.5) = 8

### trunc()
Math.trunc(7.1) = 7
Math.trunc(7.8) = 7
Math.trunc(-7.1) = -7
Math.trunc(-7.8) = -7

fround()
This function is only required in special situations where you have to work with 32-bit numbers, e.g. in graphics or audio programming. It enables more precise rounding than the more general round().
Here is a more detailed explanation than is useful in this article.

(Foto von <a href="https://unsplash.com/de/@kommumikation?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Mika Baumeister</a> auf <a href="https://unsplash.com/de/fotos/weisses-druckpapier-mit-zahlen-Wpnoqo2plFA?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Unsplash</a>)
Website Security: Your Secret Weapon for Building Trust and Boosting Sales
Published: 2024-05-22 18:02:21


Hey everyone! Web developer here, but today we're talking business –  your website's business, that is.  We all know a website is a digital storefront, and just like a physical store, security is crucial.  **That's where SSL certificates come in –  they're your secret weapon for building trust and boosting sales.**

Imagine you have a customer in your store, handing over their credit card.  Suddenly, someone swoops in to grab it!  An SSL certificate is like having a security guard for your website's transactions.  **It encrypts all information, like names, emails, and yes, credit card details, scrambling it into a code unreadable by anyone but the intended recipient.**  No shady characters stealing data here!

Here's how SSL makes your website a winner:

* **Fort Knox Security:**  SSL is the gold standard for data protection.  Your customers' information is safe and sound,  meaning they're more likely to keep coming back.

* **Trustworthy Badge:**  When users see the green padlock and "https" in the address bar, it's a sign that your website is secure and trustworthy.  **Think of it as a virtual thumbs up for your business.**

* **Sales Booster:**  People are wary of giving out personal information online.  SSL shows them you take security seriously,  which can lead to more conversions and sales. 

* **Future-Proofing Your Business:**  SSL is rapidly becoming the industry norm.  By implementing it now, you're  showing you're ahead of the curve and committed to providing a safe online experience. 
![upload](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qw0dkdn5mq5mql3o69i9.png)


**The good news? SSL is affordable and easy to set up.**  Many web hosting providers even offer them for free.  

**So, don't let security be an afterthought!**  Make SSL a priority for your website.  It's an investment that will build trust, protect your customers, and ultimately grow your business.
Why Soft Skills Matter in Tech: Communication and Collaboration
Tags: beginners, tutorial, codenewbie, career
Published: 2024-05-22 17:49:37

1. **Enhances Teamwork**: Effective communication and collaboration skills enable seamless teamwork, essential for complex tech projects that require diverse expertise.

2. **Improves Problem-Solving**: Soft skills facilitate open discussions and brainstorming, leading to innovative solutions and more effective problem-solving.

3. **Boosts Productivity**: Clear communication helps in understanding tasks and expectations, reducing errors and enhancing productivity.

4. **Increases Client Satisfaction**: Strong communication skills ensure that tech professionals can clearly convey technical details to clients, leading to better client satisfaction and trust.

5. **Facilitates Remote Work**: In a tech landscape that increasingly relies on remote work, effective communication and collaboration tools are crucial for maintaining team cohesion and productivity.

6. **Enhances Adaptability**: Soft skills help tech professionals adapt to changing technologies and work environments, ensuring continuous learning and improvement.

7. **Strengthens Leadership**: Good communication and collaboration are key to effective leadership, helping leaders inspire and guide their teams successfully.

8. **Encourages Inclusivity**: Soft skills promote an inclusive work environment where diverse ideas and perspectives are valued, leading to richer discussions and better outcomes.

9. **Supports Conflict Resolution**: Effective communication skills are vital for resolving conflicts quickly and amicably, preventing disruptions in workflow.

10. **Improves Career Advancement**: Tech professionals with strong soft skills are often better positioned for career advancement, as they can effectively lead projects and communicate with stakeholders at all levels.

Happy Learning 🎉
💡 La clave del desarrollo frontend eficiente: Composición sobre Programación
Published: 2024-05-22 17:48:10

Cuando iniciamos el desarrollo de aplicaciones frontend, **el primer paso crucial es la programación**. Este es el momento en el que sentamos las bases, diseñamos los componentes y establecemos la lógica fundamental.

Sin embargo, una vez que esta fase inicial está bien hecha, la verdadera magia comienza. En lugar de continuar programando desde cero cada nueva funcionalidad, **el enfoque debe cambiar a componer**. ¿Qué significa esto?

🔹 **Componentes Reutilizables**: Si hemos creado nuestros componentes de manera modular y reutilizable, podemos ensamblar nuevas funcionalidades simplemente combinando estos bloques de construcción existentes.
🔹 **Escalabilidad y Mantenimiento**: Este enfoque no solo acelera el desarrollo sino que también facilita el mantenimiento y la escalabilidad de la aplicación. Cambios en la lógica o el diseño se pueden implementar más fácilmente sin romper todo el sistema.
🔹 **Eficiencia y Calidad**: La composición nos permite enfocarnos en mejorar y optimizar las piezas existentes, garantizando una mayor calidad y coherencia en toda la aplicación.

Una forma de saber si hemos hecho bien nuestro trabajo es observar que, a medida que el proyecto madure y avance, **cada vez programaremos menos y compondremos más**, reutilizando las piezas de software que decidimos crear al comienzo del proyecto.

Así que, al diseñar tus aplicaciones frontend, **dedica el tiempo necesario a la fase inicial de programación**. Un buen cimiento permitirá que en el futuro, tu desarrollo sea más sobre ensamblar y menos sobre programar desde cero. La eficiencia y la calidad de tu software te lo agradecerán.

¿Qué opinas sobre este enfoque? ¿Cómo has manejado la composición y programación en tus proyectos? ¡Me encantaría leer tus experiencias!
TLDR; gcTime & staleTime in react-query
Tags: react, reactnative, reactquery, javascript
Published: 2024-05-22 17:41:23

Here is a simple understanding of two very important concepts in react-query caching.

**Prerequisites: Will be good if you have a very basic idea of what react-query is..**

> In React Query v5, the `cacheTime` option in React Query has been renamed to `gcTime`.

The `gcTime` and `staleTime` options in React Query serve different purposes in managing and controlling the cached data lifecycle.

**TLDR;** In summary, `gcTime` manages how long data can remain in the cache after it becomes unused before being garbage collected to free up memory, while `staleTime` determines how long data can be considered fresh before triggering a refetch to ensure data currency and accuracy. Both options play crucial roles in optimizing data caching, memory management, and data freshness in React Query applications.

## gcTime:

`gcTime` (Garbage Collect Time) is used to determine how long data will remain in the cache after a query becomes unused. 

By setting `gcTime` to a specific duration (in milliseconds), you control how long data stays in the cache after it is no longer actively used. Once the `gcTime` duration has passed, the data is considered eligible for garbage collection, effectively managing the cache size and memory consumption.

Once the specified `gcTime` duration elapses, the data is marked for garbage collection to prevent the cache from growing indefinitely. `gcTime` focuses on managing memory and ensuring that outdated or unused data is eventually removed from the cache to maintain optimal performance and memory usage.

## staleTime:

`staleTime` is used to specify the duration for which data is considered fresh before it becomes stale and triggers a refetch. When a query result is accessed, React Query checks if the data is stale based on the `staleTime` value. 

If the data is stale (i.e., the specified time has passed since the data was fetched), React Query initiates a background refetch to update the data (_isFetching can be used to detect when the background refresh_). `staleTime` is primarily used to control how often React Query should automatically refetch data to ensure it remains up to date. By default, if no staleTime is provided (or set to 0), the query will immediately refetch when it mounts. 

If you provide a staleTime value (in milliseconds), the data will be considered fresh for that duration before a refetch is triggered. If you also want to handle scenarios where the initialData might not be totally fresh, you can use the initialDataUpdatedAt option. This option allows you to pass a JS timestamp indicating when the initialData was last updated. This allows React Query to make a decision on whether the data needs to be refetched based on both the staleTime and the timestamp of when the initialData was last updated.