#reactjs dev

[mydevdiary]

Svelte Basics: First Component

I'm going through the Svelte tutorial since it's very comprehensive and up-to-date.

I'm going on a bit of a tangent before I start this post, but I'm straying away from YouTube videos and Udemy courses when learning new programming languages and frameworks. YouTube videos are too fragmented to get good information from. Courses (and YouTube videos) are usually not up-to-date, rendering parts of them useless. Not to mention that you have to pay for free information that's packaged in a course, which is kind of scummy.

Anyway, I've gotten quite a bit further than just the introduction section of Svelte basics, but I don't want to overload myself (or readers) with information.

My First Svelte Component:

This section was relatively straightforward. There wasn't much new information, but I was hooked because of its simplicity. I personally love the idea of having the script tags be a place to define variables and attributes:

<script> let var = "a variable!" </script>

<p>I'm {var}</p>

The example above shows how dynamic attributes are used. I can basically define any variable (and states, but that'll be for the next post) between the script tags that can be used in HTML.

This may seem mundane to programmers experienced in Svelte, but I think it gives really good insight into the philosophy behind Svelte. It's clear that they wanted to keep the language simple and easy to use, and I appreciate that.

As I mentioned in my introductory post, I have a background in React, which has a reputation for being convoluted. Well, maybe that's just my perception, but how Svelte is written is a breath of fresh air!

I look forward to making more posts about what I learn and my attempts at understanding it.

Until next time!

[patulio]

Starting a dev log

Hello everyone, this will be my first post here, for quite some time now, I we been working on a side project for which I would now try to start a dev blog about.

The project is a digital version of a board game my friend has created which I am building in React.

React is probably not the best tool to use to create a digital board game, but I wanted to try to stretch my web dev skills by applying them to something a bit unconventional.

I would humbly say that I believe that along the way I’ve built some interesting solutions that I’ll be sharing here to both keep myself motivated and hopefully to inspire and teach someone reading these posts something new.

For my first example, I’ll share a piece of the code which is fairly central to my entire setup, the whole game works by a series of reducer actions which modify the global GameState, using just “vanilla” React contexts and reducers for global state management with a small custom TypeScript actions setup around it.

The entire game logic was huge to just directly write in to the reducer, so I first started to extract some helper function outside of it, but it was still quite a mess and returning back to a piece of code after a while was not the most pleasant experience.

The following code example was my solution to try to bring some order in to the codebase, which made it a lot more easier for me to manage.

I created something like a facade pattern, so that my reducer at first glance hides the complexity and cleanly describes what is happening at each step while providing me with an option to more closely examine any of the steps and dive in to its implementation details separately.

[nubecolectiva]

Real-time search with React JS, PHP, MySQL, and Bootstrap.

Buscar en tiempo real con React JS, PHP, MySQL y Bootstrap.

👉 https://nubecolectiva.com/blog/buscar-con-react-js-php-mysql-y-bootstrap/

[b3rrybunny]

I’ve spent the past 5 days writing 2200+ lines of code lol. I’m making a website/React app that has a variety of tools for Dungeon Mastering (D&D).

So far I’ve built a page where you can track DnD combat where it autofills data from the monster manual for NPCs and you can manually add player stats and then a separate page where you can enter in character data for use in the combat manager and any other tools I can think of. The character data page supports basically every metric of a player character besides like lore stuff like backgrounds, traits, etc. Don’t have the ability to add equipment yet but I’m working on it, and you can add player attacks and every spell in the Player’s Handbook; you can look up the spell by name and it automatically enters in all the relevant data. After I add equipment I’m going to add the ability to save the character and add it to the combat manager so you can have fully custom characters in the combat manager and don’t have to manually enter them every time. If I get a like on this post I’ll post screenshots lol I’m very proud of it

[codeexpertinsights]

Top 10 Sites to Hire ReactJS Developers (2025)

The digital revolution has made it easier for firms to satisfy their customers as never before. Whether you are B2B or B2C business person you require a web app; that is efficient, sustainable, and helps in consumer outreach in today’s world that is so competitive. In my view, the kind of hiring that is most effective is the kind that allows the ReactJS developers to rewrite the template for a new project-startup or an old firm. That all in one solution for flexibility, speed & efficiency to create engaging user friendly interfaces is ReactJS.

[info-zestinfotech]

Mastering Front-End Coding Challenges

[ojesvi06]

React Developer Hiring Guide to Hire the Right Talent in 2024: [Tips on Salary Data Points] - Uplers

[learntechsolution]

Deploying a Node.js application to Heroku is a straightforward process. Heroku is a platform as a service (PaaS) that allows you to easily deploy, manage, and scale web applications. Here's a step-by-step guide to deploying a Node.js application to Heroku

[learn-techsolution]

Deploying a Node.js application to Heroku is a straightforward process. Heroku is a platform as a service (PaaS) that allows you to easily deploy, manage, and scale web applications. Here's a step-by-step guide to deploying a Node.js application to Heroku

[learntech-solution]

Deploying a Node.js application to Heroku is a straightforward process. Heroku is a platform as a service (PaaS) that allows you to easily deploy, manage, and scale web applications. Here's a step-by-step guide to deploying a Node.js application to Heroku

[learn-tech-solution]

Deploying a Node.js application to Heroku is a straightforward process. Heroku is a platform as a service (PaaS) that allows you to easily deploy, manage, and scale web applications. Here's a step-by-step guide to deploying a Node.js application to Heroku

[whoisryosuke]

polishing up P5JS visualization on the blog. got it playing nice with NextJS and even got external controls working

[the-harvest-field]

Ideas for the Future:

The Convergence of Web Development, Software Engineering, and Affiliate Marketing Content Creation The world of technology is rapidly evolving, with new innovations changing how we live, work, and interact. In the financial realm, three areas stand out when considering future money-making ideas: web development, software engineering, and affiliate marketing content creation. Let’s delve deeper…

[nubecolectiva]

Support for Preloading Resources in React 19 !

Soporte Para Precargar Recursos en React 19 !

👉 https://nubecolectiva.com/comunidad/flyers-e-imagenes-de-programacion/

[izicodes]

I've been itching to dive into something totally new and outside of my usual web dev comfort zone! After brainstorming for a while, I finally landed on a brilliant new project idea: building my very own desktop widget~! 

Now, full disclosure—I have zero idea where to even start when it comes to programming a widget, but that’s where the fun comes in, right? I’m all about learning new things (I have an addiction to studying so…)~!

In this post however, I’ll be sharing my initial ideas for the widget and brainstorming what tech stack might bring this amazing idea to life~! 

Prior knowledge on desktop widgets?

All I know is that they stick to the desktop area and some even always in front of the other windows. That’s all I know!

Widget Idea

So, the project idea I’ve chosen is something simple, just so I can get used to making widgets: a notepad. But, it’s not just any plain notepad widget—it’s going to have an aesthetic color scheme! (I know, pretty cool, right?) I really wanted to keep things basic for this first project.

The inspiration actually came from a Pinterest pin that I saved. I think the design is originally from a color palette generator website, but I want to take that concept and turn it into an actual desktop widget. Thus this project was born!

Tech Stack

Alright, I lied—I'm not entirely stepping out of my comfort zone for this one! I'll be using ReactJS, a technology I’m super comfortable with and absolutely love. But to keep things fresh and challenging, I’m diving into something new as well!

After researching (thank you, ChatGPT, Google, and YouTube), I found out there are plenty of ways to build a desktop application, or in this case, a widget. You can go with WinForms, WPF, Tauri (Rust), Qt, and others. But I wanted to stick closer to JavaScript—specifically something I could pair with ReactJS. So, ElectronJS seemed like the best fit.

For this project, my tech stack will be:

ReactJS (JavaScript)

ElectronJS (JavaScript)

SCSS (for those extra styling powers)

HTML (obviously)

Visual Studio Code (with a lovely brown theme 🧸)

Toward the end of the project, I’ll also explore how to package the widget so people can download and install it on their own computers, and how to store the notes locally!

Finally

As I post this I am going to start the project so I will soon post updates! (This is where I fail…!)