teleren/devto huggingface dataset:
Create signals in React with 5 lines of code !
Tags: react, webdev, frontend, javascript
Published: 2024-01-13 23:36:07

Signals are creating a buzz in the frontend ecosystem because of being simple to create, consume and understand. While frameworks like Preact, Qwik, Svelte and Angular(?) have implemented them, React seems to avoid them.

## What are signals

As per Preact documentation, *Signals are reactive primitives for managing application state*. In React, creating and updating state is a "weird" process. You `useState` and destructure it. Then, to updating state you must use `setState()` which must receive a completely new object for re-render to happen.

With signals, you can directly modify the state value to cause re-renders. Here is a 5 line implementation of such a feature with custom hook,

```jsx
function useSignal(init) {
  const [state, setState] = useState(init);
  return { 
    get mut() { return state },
    set mut(_new) { setState(_new) } //I love closures !!!
  }
}

function Counter() {
  const count = useSignal(0);
  return (<>
   <div>Counter: {count.mut}</div>
   <button onClick={() => ++count.mut}>Increment</button>
  </>);
}
``` 

Clean and Elegant right ? This new mental modal of *mutation causes re-render* makes our code more readable and concise, which Svelte.js is also based on.

But there is a caveat, this works for primitives. If you have an array / object state value and try to mutate its individual property, it won't trigger the setter. You have to explicitly assign the new value (like you have to do in Svelte.js).

```jsx
//display 0123.... progressively with each click of button

export function Counter() {
  const count = useSignal([0]);
  const push = () => 
    count.mut = count.mut.concat(count.mut.length)
  
  return (<>
    <div>Counter: {count.mut}</div>
    <button onClick={push}>Increment</button>
</>);
}
```
For me, this is still a better mental model than default state-setState paradigm. I am pretty sure some Javascript wizard can use Proxy/Reflect to trigger setter for even changing individual indices of array. Do comment if you know how to. :)
Coding Journey WEEK 1
Published: 2024-01-13 23:23:25

I've just started my Flatiron Journey instructed by Sakib and a apart of an amazing cohort.


I came into the bootcamp with prior knowledge in HTML & CSS; my JavaScript knowledge was super limited only up to arrays and I hated them. The prep work for JS was daunting on my own DOM almost made me want to give up.

By around day 2 or 3 (it's been a long week) Sakib has helped me take my understanding from barely existing to a decent grasp. When he informed me that a Node was what JS calls a <tag> he blew my mind and made sense of what i learned during the prep work.

Overall we've established our fundamentals: HTML, (spent around 10 seconds on css) and delved into a deeper understanding of JS. We now know how to manipulate the DOM and fill even a bareboned HTML file only using only JS's .querySelector and .append; we can even add readable text with .textContent.

Most recently we learned about DB.json and how we can set up a local database, and use that DB to then manipulate the DOM with that information as well and we use GET and POST methods to achieve that.

It's fun to see the stuff we're working on and then realizing how much we use it on a daily bases and don't even think about it. I've now been viewing everything I do online through the lenses of my new found knowledge.

*This blog post is being created and added to a database and I understand how it works!!!
Kind of annoyed at React
Tags: react
Published: 2024-01-13 22:35:00

---
title: Kind of annoyed at React
published: true
description: Just a little ranty rant about my fave JS library, ya know.
tags: react
published_at: 2024-01-13 22:35 +0000
canonical_url: https://blog.cassidoo.co/post/annoyed-at-react/
---

I'm kind of annoyed at the state of React lately. I still use it regularly, and am somewhat friendly with the folks that work on it still, and it's the first library I reach for, but... it's just gotten too confusing and frustrating.

Not to boast but I like... really know React. I've used it for almost a decade. I've seen it morph and grow and used the frameworks that have popped up to work with it, I've written dozens of articles and tutorials for it, I was in the React 18 Working Group and other related groups before that, and before the pandemic, I taught React full time. So trust me when I say: **React's gotten really hard to understand.**

I feel like the lack of understanding comes from not communicating properly with the community (both educational content and also transparency about what/how/etc things are being built), and it frustrates me.

It's frustrating to see that there hasn't been a release [since June 2022](https://github.com/facebook/react/releases/tag/v18.2.0). It's frustrating that the core team all spouted "use a framework!" with React 18 and then most of the vocal ones left their jobs to join \[a company that owns a large React framework] and \[that framework] seems to use Canary releases rather than the one that's stable and out in the world (and it seems like a "cool kid" monopoly). It's frustrating that they took *so long* to write new documentation (and the folks writing them weren't properly supported) that if you look up "React documentation" the new docs aren't even the first result. It's frustrating that there's [two Reacts](https://overreacted.io/the-two-reacts/) now (not that there shouldn't be, but that it's not clear/an easily understandable mental model for most people). It's frustrating that diversity efforts [visibly took a backseat](https://twitter.com/rachelnabors/status/1586772024252583936) with React leadership and there's just not as many voices from a variety of different people anymore.

Bleh, anyway. I really didn't mean for this to be a negative nancy post. I've harped on the React team's communication before and I do think they've gotten a bit better. And again, I still reach for React when I want to build something somewhat complex, I just... wish I were happier about it when I do. I'm optimistic for the future. Kind of.
How to use Elm extensible records
Tags: elm, webdev
Published: 2024-01-13 22:27:17

## WHAT?

Sample code for declaring and using Elm flexible structures to extend records with more fields dynamically and safely.

The sample goes around the idea of a visual theme at the file `Theme.elm` and
different ways to use it.

## Where?

The sample code is at https://github.com/csaltos/elm-extensible-records-usage

## How?

### Sample 1

The first sample contains just a basic record extension without further parametrizations

### Sample 2

The second sample is also a basic record extension but inside
and extra field

### Sample 3

The third sample uses records for two different cases of extensions, this is more usual and this is the reason to consider using Elm record extensions.

## Considerations

The sample1 and sample2 are just a warming up for reference only, you would not create a record using extensions with you are the only user of that record.

The sample3 is more realistic and normally it's used from different modules on different files and even on different projects.

## Recommendations

Do not use extensions everywhere, just in the places that makes sense, this samples are using some colors and visual styles on a theme but as a reference only, extension are not the best solution for actual visual themes and certainly not the only one.

A more realistic use case is the requirement to use a common model shared with different pages on a SPA application and even from several SPA applications, this common model can be defined with Elm record extensions that is what we are starting to use at Talenteca.com and it's working like a charm.
Redis Scaling with RAM
Published: 2024-01-13 21:59:33

Ok, So I have been using Redis for a long time in many applications, for storing cache, sessions, and queues. And a question came up that I need to an answer for: Can we scale Redis? and if yes, how? <br><br>

So, I did some research and here is what I found: <br><br>
- Redis is in-memory data structure store, which means it stores data in RAM.
- The amount of data that can be stored in Redis is limited by the amount of RAM available. The more RAM you have, the more data you can store.
- When Redis uses all the available RAM, it supports swapping to disk. It can help to store more data and avoid crashing, but it will cause a huge performance drop.
- Based on a real-world test done by Redis team. Redis can handle up to 2^32 keys (4294967296 keys). And Each key can hold a value with its own limits based on the chosen data structure. For example, a string can hold up to 512MB, a list can hold up to 2^32 elements. So, if you store 1 string in each key, you can store up to 4294967296 * 512MB = 2048000000000 MB which is roughly 2 TB of data. That's a lot of data (if you have that much RAM that is :smile:).
- To estimate the storage capacity of Redis, you can use this formula: `Redis Storage Capacity = Total Available RAM − (Redis Metadata Overhead + OS RAM Usage)` where `Total Available RAM` is the total RAM available in the server, `Redis Metadata Overhead` Redis uses some amount of RAM for its internal metadata to manage keys, values, and other data structures efficiently. `OS RAM Usage` is the amount of RAM used by the operating system and other processes running on the server.

So, how can we scale Redis? <br><br>
- Add more RAM to the server. :smile:
- Its all about the RAM. The more RAM you have, the more data you can store. Its the bottleneck of Redis.
- When your redis server reach 2^32 keys, you can use Redis Cluster to scale it horizontally by adding more nodes to the cluster. And the load balancer will distribute the requests between the nodes.
- If your app is using Redis for sessions, you can use sticky sessions(in the load balancer) to make sure that all the subsequent requests from the same user will be routed to the same Redis node where the user's session is stored, otherwise the user will be logged out because the session is not found when the request is routed to a different Redis node by the load balancer.

**Resources:**
- [How Much Data Can Redis Store?](https://www.dragonflydb.io/faq/how-much-data-can-redis-store)
- [Redis FAQ](https://redis.io/docs/get-started/faq/)
Hacker101 CTF — A little something to get you started
Tags: hackerone, hacker101, ctf, writeup
Published: 2024-01-13 21:37:26

Welcome to my writeup series about the Hacker101 CTF by Hackerone! This challenge is called “A little something to get you started” and it is in the trivial category.

Upon launching this challenge, we are met with the text “Welcome to level 0. Enjoy your stay.”

![Image 1](https://miro.medium.com/v2/resize:fit:4800/format:webp/1*YFPnNl41MyRx53if153thw.png)

Checking the page source reveals some CSS that uses a background image called background.png.

```<style> body { background-image: url(“background.png”); } </style>```

We can manually append /background.png to the URL, which reveals the flag.

![Image 2](https://miro.medium.com/v2/resize:fit:4800/format:webp/1*j78sG9rMVnVWdeR7pG4-0Q.png)
Bitcoin Recovery Expert
Published: 2024-01-13 19:24:47

I became enmeshed in the cryptocurrency frenzy because I kept hearing about it being the newest and greatest thing everywhere I went on the internet, at work, at brunch with friends even at clients’ meetings. As a real estate agent, I had just completed on a big deal in Hollywood. You can imagine how excited I was to finally participate in the cryptocurrency market. I was referred to a broker by a buddy who provided impressive results, so I requested for his contact information right away and invested a massive sum of $180,000 all at once. It was a dumb move, but I went ahead and did it. My acquaintance called me a week later to say that the broker was unresponsive and he was unable to withdraw money. I texted him but did not hear from him. I tried calling but the phone was off. We had to informed the police of the problem, but since we weren't forced to transfer the money, there wasn't much they could do. I first had a glimmer of optimism about retrieving the broker and my money when I discussed with a coworker. My coworker informed me about his aunt's experience, who lost all of his life savings to a similar scam but was able to recover them with the aid of a skilled Recovery Agent, Software Specialist. I sent him an email at softwarespecialist@usa.com  and went over every detail, including the transaction receipts. I knew it was a long shot, but was there anything else I could do? The agent was sympathetic and patient, and he even gave me encouragement. I received a notification from my wallet stating I had received $125,000 three days later. I had been through hell for what felt like forever, which was why I was so overwhelmed. These plans to become rich quick are completely unworthy, so please proceed with caution. Of course, there are legitimate businesses out there. Be cautious, particularly if the offer looks too attractive. Even though I was able to get my money back, many victims are not as fortunate. Take caution.
Does Mercedes Benz have a GPS tracker in the trunk?
Published: 2024-01-13 21:19:40

Mercedes-Benz, as of my last knowledge update in September 2021, typically does not include a GPS tracker specifically in the trunk. The primary use of the GPS system in Mercedes-Benz vehicles is for navigation and related features. However, for security and tracking purposes, some Mercedes-Benz models may have options or features that allow you to track the vehicle's location, but these are not typically located in the trunk.

Now, for a unique blog idea, how about "The Journey to Zero Waste Living: A Sustainable Lifestyle Guide"?

In this blog, you can explore the world of zero-waste living, which is an increasingly popular lifestyle choice aimed at reducing waste and minimizing one's environmental footprint. Here are some blog post topics you can cover:

Introduction to Zero Waste Living: Explain what zero-waste living is and why it's important for the environment.

Tips for Beginners: Provide practical advice for people who are just starting on their zero-waste journey, such as reducing single-use plastics and making sustainable shopping choices.

Zero Waste Home: Discuss ways to reduce waste in your home, including eco-friendly cleaning, composting, and minimizing packaging waste.

Zero Waste Travel: Offer strategies for reducing waste while traveling, from eco-friendly packing to supporting sustainable tourism.

Eco-Friendly Fashion: Explore sustainable and zero-waste fashion options, including thrifting, ethical clothing brands, and DIY clothing projects.

Food and Zero Waste: Share tips for reducing food waste, buying in bulk, and sustainable eating habits.

Zero Waste Technology: Discuss ways to reduce electronic waste and choose eco-friendly tech products.

Community and Activism: Encourage readers to get involved in their local zero-waste communities and support environmental initiatives.

Zero-Waste Challenges: Challenge your readers to take on specific zero-waste challenges and document their progress.

Real-Life Stories: Share personal stories and interviews with individuals and families who have successfully adopted a zero-waste lifestyle.

This blog will cater to readers interested in sustainability, eco-conscious living, and minimizing their impact on the planet. It's not only a unique and important topic but also one with a growing audience and a strong online community.
Is there an adjustment for idle speed ( too fast- dangerous when engaging in D ) on a 2017 Camry?
Published: 2024-01-13 21:17:19

The idle speed of a vehicle is typically controlled by the engine control module (ECM) or powertrain control module (PCM) through the idle air control valve. If you are experiencing an idle speed that is too fast on your 2017 Camry, there are a few potential causes and adjustments you can consider:

Check for Vacuum Leaks:
Vacuum leaks can cause the engine to run fast at idle. Inspect all vacuum hoses for cracks or disconnected connections. If you find any issues, repair or replace the affected components.

Throttle Body Cleaning:
A dirty throttle body can affect idle speed. Cleaning the throttle body can help improve idle quality. Use a throttle body cleaner and follow the manufacturer's instructions.

Idle Air Control Valve (IACV):
The IACV controls the amount of air entering the engine during idle. If it's malfunctioning, it can lead to high idle speeds. Cleaning or replacing the IACV may be necessary.

Engine Coolant Temperature (ECT) Sensor:
The ECT sensor provides information to the ECM about engine temperature. A malfunctioning ECT sensor can affect idle speed. If faulty, it might need to be replaced.

Mass Airflow Sensor (MAF) Cleaning:
The MAF sensor measures the amount of air entering the engine. If it's dirty, it may affect idle speed. Cleaning the MAF sensor with a specific cleaner might help.

Throttle Position Sensor (TPS):
The TPS provides information about the position of the throttle to the ECM. If it's faulty, it can impact idle speed. Testing or replacing the TPS may be necessary.

ECM/PCM Reset:
Disconnecting the battery for a few minutes can sometimes reset the ECM/PCM. Reconnect it and start the car. The ECM/PCM will adapt to the new idle conditions.
Using Material's colors in javascript
Tags: material, javascript, npm
Published: 2024-01-13 20:20:19

## Install

```npm
npm i material-colors-utils
```
## Usage
### Get palette
```js
import { blue } from "material-colors-utils";
console.log({blue})
//{
//    blue:{
//      50: "#E3F2FD",
//      100: "#BBDEFB",
//      200: "#90CAF9",
//      300: "#64B5F6",
//      400: "#42A5F5",
//      500: "#2196F3",
//      600: "#1E88E5",
//      700: "#1976D2",
//      800: "#1565C0",
//      900: "#0D47A1",
//      A100: "#82B1FF",
//      A200: "#448AFF",
//      A400: "#2979FF",
//      A700: "#2962FF"
//    }
//}
```
### Get color
#### Example
```js
import { blue } from "material-colors-utils";
console.log(blue[500])//#2196F3
```
##Doc
[material-colors-utils](https://github.com/JanselLopez/material-colors-utils)
Get random color by a name or any string
Tags: javascript, npm
Published: 2024-01-13 20:16:11

```npm
npm i material-colors-utils
```
### Get random palette by string
```js
import { getRandomPaletteByString } from "material-colors-utils";
console.log({palette:getRandomPaletteByString("janselALB")});
//{
//    palette:{
//      50: "#E3F2FD",
//      100: "#BBDEFB",
//      200: "#90CAF9",
//      300: "#64B5F6",
//      400: "#42A5F5",
//      500: "#2196F3",
//      600: "#1E88E5",
//      700: "#1976D2",
//      800: "#1565C0",
//      900: "#0D47A1",
//      A100: "#82B1FF",
//      A200: "#448AFF",
//      A400: "#2979FF",
//      A700: "#2962FF"
//    }
//}
```
### Get random color by string
```js
import { getRandomColorByString } from "material-colors-utils";
//Param: Color variant
getRandomColorByString("janselALB",300)//Ex: #64B5F6
//Default is 500
getRandomColorByString("janselALB")//Ex: #2196F3
```

## Support
[material-colors-utils](https://github.com/JanselLopez/material-colors-utils/)
Common Linux Commands
Published: 2024-01-13 19:54:58

In real life, deployment on service provider is not always the case. There is need to know common commands linux command for easy deployment on host machine. The list below show few that one should master.

**1 Navigation:**

cd: Change directory
pwd: Print working directory
ls: List directory contents
mkdir: Make a directory
rmdir: Remove an empty directory
cp: Copy files or directories
mv: Move or rename files or directories
rm: Remove files or directories
touch: Create an empty file
**2. File Operations:**

cat: Concatenate and display the content of files
more or less: Display contents of a file one screen at a time
head: Display the first few lines of a file
tail: Display the last few lines of a file
nano or vim or emacs: Text editors
**3. File Permissions:**

chmod: Change file permissions
chown: Change file owner
chgrp: Change file group
Searching and Finding:

grep: Search for patterns in files
find: Search for files and directories
locate: Find the location of files
which: Show the full path of a command
**4. Networking:**

ping: Check network connectivity
ifconfig or ip: Display network configuration
netstat: Display network connections and routing tables
ssh: Connect to a remote server
scp: Copy files securely between servers
**5. System Information:**

uname: Display system information
df: Display disk space usage
free: Display memory usage
top or htop: Display system processes
**6. Package Management:**

apt or apt-get: Package management tool for Debian/Ubuntu
yum or dnf: Package management tool for Red Hat/Fedora
**7. Process Management:**

ps: Display information about running processes
kill: Terminate a process
killall: Terminate a process by name
**8. Compression and Archives:**

tar: Create or extract tar archives
gzip or gunzip: Compress or decompress files using gzip
zip or unzip: Create or extract zip archives
**9. Others:**

echo: Print text to the terminal
date: Display the current date and time
history: Display command history
man: Display the manual page for a command
alias: Create command aliases
chmod: Change file permissions
Top 5 Best Frontend Projects in 2024
Tags: webdev, javascript, react, programming
Published: 2024-01-13 19:43:43

Welcome to the future of frontend development in 2024, where innovation is rewriting the rules of web design. Let's dive into the top trends and projects reshaping the digital landscape.

**1. WebAssembly Wonders:**
Experience web applications at near-native speed. WebAssembly projects are revolutionizing frontend development, enabling the creation of high-performance and resource-intensive applications directly in the browser.

**2. Real-Time Collaboration Magic:**
Say goodbye to delays in remote teamwork. Frontend projects with real-time collaborative editing environments are transforming the way teams work, offering seamless simultaneous editing for documents, code, and design elements.

**3. AI-Driven Interfaces:**
The era of personalized user experiences is here. AI is taking the frontend stage by storm, enhancing interfaces with predictive analytics, intelligent automation, and adaptive chatbots that learn and evolve based on user behavior.

**4. Offline-Ready PWAs:**
Progressive Web Apps (PWAs) have evolved. In 2024, they prioritize robust offline functionality, ensuring users can access and interact with applications regardless of internet connectivity. Perfect for users in areas with unreliable networks.

**5. 3D Immersion Unleashed:**
Step into the future with 3D graphics and immersive web experiences. Leveraging WebGL and WebXR, frontend projects are delivering captivating visuals, from interactive product showcases to virtual tours, redefining the boundaries of user engagement.

**Conclusion:**
2024 promises an exhilarating journey in frontend development, where these projects are not just trends but gateways to the next generation of web applications. Stay tuned as the digital landscape continues to evolve, presenting limitless possibilities for captivating and innovative user experiences.