teleren/devto huggingface dataset:
I'm React State, Lift Me Up, Asshole
Tags: webdev, react, javascript, beginners
Published: 2023-08-09 12:12:11

> Note: This article was originally posted on [my personal website](https://jessekhala.com/posts/im-react-state-lift-me-up-asshole/). I do not want to offend anyone, I'm just making fun of myself :). AI assistance was employed in crafting the code snippets and refining this article. The inspiration came from the article: “[I’m Comic Sans, Asshole](https://www.mcsweeneys.net/articles/im-comic-sans-asshole)”.

Stop it. I said: 
“STOP. IT!”. Stupid. 
You have been re-rendering your TindasanaAI React component for the gazillionth time and the items you are selecting are always lost along the way. Well, it’s time to lift me up, asshole. You don’t understand why? Well, let me baby-feed this for you.

Check out the not-so-brilliant move of placing the state smack in the middle of the main component:

```
function TindasaAI() {
  const [selectedSequenceOptions, setSelectedSequenceOptions] = useState({
    theme_chakras: false,
    theme_season: false,
    // ... (other options)
  });

  const handleImageClick = (selection) => {
    // Update state logic
  };

  // Render your UI, use handleImageClick, and show selected options.
}
```

Boom. Every time you hop to the next stage of the app, you’re basically throwing your selectedSequenceOptions into a black hole. It’s like doing a yoga pose on your mat and when you want to move from one pose to the next, someone comes along and pulls the mat away from underneath your feet. Namaste, stupid.

Fucking lift me up, bro. Just create a wrapper component, save the state in the wrapper and let the child component do its thing and re-render as often as it wants, the state will be as stable as grandma’s Wi-Fi password (which is “password”).

Behold, the beauty of lifted state:

```
function TindasaAIWrapper() { // Uh, yeah, I love this nice wrapper
  const [selectedSequenceOptions, setSelectedSequenceOptions] = useState({
    theme_chakras: false,
    theme_season: false,
    // ... (rest of the options)
  });

  const handleImageClick = (selection) => {
    // Update state logic
  };

  return (
    <TindasaAI>
      handleImageClick={handleImageClick}
      selectedSequenceOptions={selectedSequenceOptions}
      // ... (other props)
    />
  );
}

function TindasaAI({ handleImageClick, selectedSequenceOptions }) {
  // Render your UI, use handleImageClick, and show selected options.
}
```

It’s like having your yoga mat placed in a central location in your studio, no matter which poses you choose or how many times you change it, the mat remains in the same spot, keeping your selections (or poses) consistent.

So don’t forget this. By lifting up state you create a central place for your state and make it more accessible and prevent unwanted state resets.

Thanks for the lift, bro.
PostgreSQL Optimization: Database Indexing
Tags: postgres, postgressql, apacheage
Published: 2023-08-09 11:44:05

When database relations are very large, it is very inefficient and expensive to scan all tuples of a relation to find those tuples that match a given condition. In most relational database management system in order to avoid the scenario, indexes are created on tables, it is considered as the `single greatest tuning technique` that a database administrator can perform. It is helpful in the following scenarios:
- locating a single of a small slice of tuples out of the whole
- multiple table joins via foreign keys
- correlating data across tables
- aggregation data
- sorting data

However, indexing also has negative impacts on performance when data in a relation is inserted or updated more often. During inserting or updating, if there are indexes created on a relation, relative indexes have to be changed as well. So indexes need to be monitored, analyzed, and tuned to optimize data access and to ensure that the negative impact is not greater than positive impact.
Postgres provides several index types: `B-tree`, `Hash`, `GiST` and `GIN`. Each index type uses a different algorithm that is best suited to different types of queries. One can also build customized index types.

We'll discuss these indexing types in the next article.
First Update
Tags: 12months, project, progress
Published: 2023-08-09 11:40:31

---
title: First Update 
published: true
description: Or another way of saying I miss using ruby
tags: 12months, project, progress
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2023-08-07 02:48 +0000
---

This project is going to force me to come to terms with the meaning of the phrase "Perfect is the enemy of done" because boiii.

So in my mini update I said maybe 2 weeks to get an MVP locally running (not in those exact words but ya) well I definitely over estimated myself, my time and my addiction to trying to solve difficult problems.

First the validation thing that I said I would leave till later, well i couldnt help but keep trying to take a stab at it. Trying to get it working rather than focusing my time else where. I think I am looking for the perfect solution that isnt overly complicated and in JS there isnt an easy way to find it. I think I will do a separate post to rubber duck my problems with what I want and what I have tried.

Second is when you work with ruby on the regular then you move back to JS for a while you get disappointed with the missing methods that are common in ruby. For example I need to make an array of a random selection of values from a much larger array if I was to write this in ruby it would be something like this:
 
```ruby 
orginal_array = [1,2,3,4,5,6,7,8,9,0]
new_array = original_array.shuffle
new_array.first(4)
```
or like this

```ruby
original_array = [1,2,3,4,5,6,7,8,9,0]
new_array = original_array.shuffle.take(8)
```
or better yet

```ruby
original_array = [1,2,4,5,6,7,8,9,0]
new_array = original_array.sample(4)
```

I know they work I just tested them to make sure.  
Where as in JS to try and replicate these methods this is what I had to come up with:

```javascript
$sel = []
let originalArray = [1,2,3,4,5,6,7,8,9,0]
function randomNumbers() {
let temp = []
let pool = []

originArray.forEach((element) => {
      for (let i = 0; i < element[1]; i += 1) {
        pool.push(element[0]);
      }
    });
for (let i = 0; i < 9; i++) {
      // let random = Math.floor(Math.random())

      temp.push(pool[Math.floor(Math.random() * 98)]);
      $sel = temp;
    }
    console.log($sel);
    return;
  }
```

Note: In my code the originalArray proper length is 98 that is why the random multiplier is so high

Now this definitely could just be a skill issue but from my searching there didn't seem to be a better way to do it (let me know in the comments). Going from Ruby back to this made my already not so fast coding shift down again in gear.

But anyways enough of that lets me just make a note on what I am happy about. 

Progress is slow but continuing well. I will be looking at multiplayer within the next couple of days. Timer is done Game start condition is done. Points calculation not yet finished.
PostgreSQL Optimization: wal_buffers and wal_sync_method
Tags: postgres, postgressql, apacheage
Published: 2023-08-09 11:29:09

## wal_sync_method
This parameter defines the way Postgres will force WAL updates out to disk. By default the system will use “fdatasync”. However it is better to have it set to as “fsync_writethrough” if possible, it is considered to be safe and efficient.

## random_page_cost
By default in Postgres, the random disk access is considered 4 times slower than sequence disk access. Base on this estimation, the query planner will decide whether it will be faster by using table scan than index scan or vice versa. Depending on the hardware, it is suggested to lower this number when fast disks are use, then query planner will have a higher chance to use index scan. With current hardware, most Postgres database administrators would prefer to have it with value of 2. However, in case a query planner is making bad decisions, this should not be the first place to look for answers. How autovacuum works is normally the factor that affects the decision of query optimizer.
What is Javascript?
Published: 2023-08-09 11:22:31

JavaScript is a scripting or programming language that allows you to implement complex features on web pages — every time a web page does more than just sit there and display static information for you to look at — displaying timely content updates, interactive maps, animated 2D/3D graphics, scrolling video jukeboxes, etc. — you can bet that JavaScript is probably involved. It is the third layer of the layer cake of standard web technologies, two of which (HTML and CSS) we have covered in much more detail in other parts of the Learning Area.
Here's a little bit more about coding - [Trance yt](www.tranceyt.in)
Logic Pro vs. GarageBand Navigating the Music Production Spectrum
Published: 2023-08-09 11:21:21

Logic Pro vs. GarageBand: Navigating the Music Production Spectrum" is your comprehensive guide to understanding the dynamic range of music production software offered by Apple. This exploration delves into the two distinct yet interconnected worlds of Logic Pro and GarageBand, equipping you with the insights you need to make an informed decision based on your skill level, aspirations, and creative goals to the **[logic pro vs garag band](https://www.garagebandforwindows.info/logic-pro-vs-garageband/)**

Step into the realm of music creation and audio engineering as we dissect the unique features, capabilities, and workflows of Logic Pro and GarageBand. Whether you're a seasoned producer or an aspiring musician, this guide offers a detailed comparison to help you uncover which software aligns best with your music production journey.
Redux Preboiled: TypeScript-friendly Redux Helpers Top Tips for Redux- Arif Patel PrestonDubai
Tags: redux, webdev, beginners, programming
Published: 2023-08-09 11:14:02

Hello Everyone, Myself Arif Patel, and I hail from the vibrant city of Preston UK. However, my work has taken me on an exciting journey from Dubai-London, shaping me into a Dubai-London based developer. I have always had a deep passion for technology and a strong desire to create innovative solutions that enhance people's lives. I just share my best TypeScript-friendly Redux Helpers Top Tips for Redux.

**Introduction**

Are you tired of spending hours trying to set up Redux in your TypeScript project? Have you struggled with type errors or boilerplate code when working with Redux? Look no further! In this blog, we will introduce you to Redux Preboiled, a collection of TypeScript-friendly Redux helpers that will streamline your Redux development process.

**What is Redux Preboiled?**

Redux Preboiled is a set of ready-to-use Redux helpers specifically designed for TypeScript developers. It provides a set of tools and best practices to simplify your Redux setup and make your code more maintainable and error-free.

**Top Tips for Using Redux Preboiled**

Use `createAction` for Type-Safe Actions: Instead of manually writing action creators, you can use the `createAction` helper provided by Redux Preboiled. It automatically generates type-safe action creators and reducers, saving you from repetitive and error-prone coding.

Leverage `createReducer` for Simpler Reducers: Writing reducers can become complex and error-prone. Redux Preboiled comes to the rescue with the `createReducer` helper, making it easy to define reducers as simple mapping functions. With type-checking and autocomplete support, you'll be able to catch errors at compile time and save debugging headaches later.

Use `createSelector` for Efficient Selector Functions: With Redux Preboiled, you can optimize your application's performance by utilizing the `createSelector` helper. This memoized selector function enhances performance by caching the result of expensive computations and recomputing only when necessary.

Handle Asynchronous Actions with Ease: Asynchronous actions are a common requirement in many applications. Redux Preboiled provides a set of helpers, such as `createAsyncAction` and `createAsyncReducer`, to simplify the process of handling asynchronous actions in a type-safe and consistent manner.

Leverage TypeScript for Strong Typing: Redux Preboiled has been specifically designed with TypeScript in mind. With TypeScript's static typing, you get the benefits of autocompletion, compile-time checks, and improved documentation for your Redux code. This helps catch errors early and improves maintainability.

**_Conclusion_**

In this blog, we introduced you to Redux Preboiled, a powerful set of TypeScript-friendly Redux helpers. By following the top tips mentioned here, you can simplify your Redux development process, reduce boilerplate code, and catch errors early, resulting in cleaner and more maintainable code.

So, why wait? Give Redux Preboiled a try and supercharge your Redux development today!
Coding prototypes
Tags: prototypes, code, clearleft, testing
Published: 2023-09-13 14:34:43

---
title: Coding prototypes
published: true
date: 2023-08-09 11:12:52 UTC
tags: prototypes,code,clearleft,testing
canonical_url: https://adactio.com/journal/20386
---

We do quite a bit of prototyping at [Clearleft](https://clearleft.com/). There’s no better way to reduce risk than to get something in front of users as quickly as possible to test whether you’re on the right track or not.

As [Benjamin](https://benjamin.parry.is/) said in [the podcast episode on prototyping](https://podcast.clearleft.com/season02/episode04/):

> It’s something to look at, something to prod. And ideally you’re trying to work out what works and what doesn’t.

Sometimes the prototype is mocked up in Figma. Preferably it’s built in code—HTML, CSS, and JavaScript. Having a prototype built in the materials of the medium helps establish a plausible suspension of disbelief during testing.

Also, as [Trys](https://www.trysmudford.com/) said in [that same podcast episode](https://podcast.clearleft.com/season02/episode04/):

> Prototypical code isn’t production code. It’s quick and it’s often a little bit dirty and it’s not really fit for purpose in that final deliverable. But it’s also there to be inspiring and to gather a team and show that something is possible.

I can’t reiterate that enough: **prototype code isn’t production code**.

I’ve written about [the two different mindsets](https://adactio.com/journal/14562) before:

> So these two kinds of work require very different attitudes. For production work, quality is key. For prototyping, making something quickly is what matters.

[Addy](https://addyosmani.com) recently wrote an excellent blog post on the topic of prototyping. [The value of a prototype is in the insight it imparts, not the code.](https://addyosmani.com/blog/prototypes/)

> It’s crucial to remember that in a prototype, **the code serves merely as a medium** —a way to facilitate understanding. It’s a means to an end, not the end itself. The code of a prototype is disposable and mutable. In contrast, the lessons learned from a prototype, the insights gained from user interaction and feedback, are far more durable and impactful.

This!

It can be tempting to re-use code from a prototype. I get it. It seems like a waste to throw away code and build something from scratch. But trust me—and I speak from experience here—it will take _more_ time to wrangle prototype code into something that’s production-ready.

The problem is that quality is often invisible. Think about semantics, performance, security, privacy, and accessibility. Those matter—for production code—but they’re under the surface. For someone who doesn’t understand the importance of those hidden qualities a prototype that _looks_ like it works seems ready to ship. It’s understandable that they’d balk at the idea of just throwing that code away and writing new code. Sometimes the suspension of disbelief that a prototype is aiming for works too well.

As is so often the case, this isn’t a technical problem. It’s a communication issue.
How to Obtain an Employment Visa in Dubai Hassle-Free - Eagle Management Services
Tags: visa, employmentvisa, emiratesid
Published: 2023-08-09 11:12:43

## To acquire an employment visa in Dubai, the usual procedure involves the following steps:


**- Find a Job:**

Commence your search by acquiring a job offer from a Dubai-based company. Ensure that the prospective employer is open to sponsoring your visa for the position.

**- Employment Contract:**

After agreeing to the job offer, you and your employer should proceed to sign an employment contract that outlines the specific terms and conditions governing your employment. Normally, for companies based on the mainland, an official job offer is processed using the **[Ministry of Labour system (MOHRE).](https://eaglejk.com/services/faic/)** 
This involves electronic signatures from both the employer and the employee. And if it’s a free zone company, a job offer from the company should be signed, and an electronic job offer done through the Free zone System should also be signed by both parties.


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

**- Application Submission:**

Your company will initiate the visa application procedure on your behalf. They will submit all required documentation to the appropriate governmental bodies, such as the Ministry of Human Resources and Emiratization (MOHRE) and the General Directorate of Residency and Foreign Affairs. After receiving approval from both the Labor and Immigration authorities, an Employment Entry permit will be granted.

If you are outside the country, you will enter with the issued employment visa, or if you are already inside the country with a tourist visa or a previously canceled employment visa, then changing your status should be done.

**- Medical Fitness Test:**
 

You are expected to complete a medical fitness evaluation at an officially sanctioned healthcare facility known as Salem Medical Center. This assessment usually involves a comprehensive health evaluation, blood examinations, and a radiograph of the chest. To make sure you are fit medically.

**- Emirates ID Registration:**

Following the successful completion of the medical fitness assessment, the subsequent step involves the application process for an Emirates ID card. This process entails the submission of your biometric information, such as fingerprints, along with the necessary documentation, to the Emirates Identity Authority (EIDA).

**- Visa Stamping:**

Once the results of your medical fitness test are finalized and your Emirates ID registration is successfully completed, your residency permit will be issued. And within working days, your original Emirates ID will be physically issued.
Preparing For Azure - 204
Tags: beginners, azure, cloud, webdev
Published: 2023-08-09 11:11:38

Hey, I am preparing for Azure - 204 Developer Certification. These are the resources that I collected. If you already have other resources, Tips or Guide, please share with us in the comment. 


Study Guide: https://learn.microsoft.com/en-gb/certifications/resources/study-guides/AZ-204

- Develop Azure compute solutions (25–30%)
- Develop for Azure storage (15–20%)
- Implement Azure security (20–25%)
- Monitor, troubleshoot, and optimize Azure solutions (15–20%)
- Connect to and consume Azure services and third-party services (15–20%)

1. ****AZ-204 Part 1 - Develop Azure compute solutions (25-30%) Study Cram****

https://www.youtube.com/watch?v=UZLoqtd4t9s

1. ****AZ-204 Part 2 - Develop for Azure storage (15-20%) Study Cram****
    
    https://www.youtube.com/watch?v=smoKuGKVUB8
    
2. ****AZ-204 Part 3 - Implement Azure security (20-25%) Study Cram****

       https://www.youtube.com/watch?v=3gtFTR4h8CY

1. ****Azure Event Hub, Event Grid, and Service Bus - Made Simple****
    
    https://www.youtube.com/watch?v=hqtUZNmVVdA
    

Simple Projects that i would like to build: 

1. Auth Authorization  SPA
2. Auth Authorization MPA
3. CosmoDB and azure function 
4. Docker 
5. Containerisation - Kuberneters and Teraforms
6. Virtual Machine
7. Pub & Sub

Azure Kubernetes: 

https://www.youtube.com/watch?v=bOqP1DrMzPA&t=278s

Resources: 

https://www.examtopics.com/exams/microsoft/az-204/view/

https://datawolfs.com/az-204-exam-questions-dumps-answers-free-pdf-dump/
Undoing the Most Recent Local Commits in Git: A Step-by-Step Guide
Tags: webdev, javascript, git, beginners
Published: 2023-08-09 11:07:55

A software engineer understands the importance of maintaining a clean and organized Git history. Occasionally, you may need to undo the most recent local commits due to errors, incorrect changes, or the need to rework your code. Let's explore the process of undoing the most recent local commits in Git with detailed steps and code examples.

## Step 1: Identify the Commits to Undo:

First, identify the number of commits you want to undo. If you want to undo just the most recent commit, it's a straightforward process. However, if you want to undo multiple commits, you'll need to specify the commit range.

## Step 2: Use git reset to Undo Commits:

To undo the most recent commit while keeping the changes in your working directory, use the `git reset` command with the `--soft` option:

![git](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8o8d7zaqsgdjbz4zspoe.png)

This command will move the `HEAD `pointer to the previous commit, effectively "uncommitting" the most recent changes.

## Step 3: Review Changes:

After the reset, your changes from the undone commit will be staged but not committed. Use `git status` to review the staged changes and ensure they are as expected.

## Step 4: Adjust Staging and Commit:

You can now make any necessary changes to the staged files before committing. Use git add to stage the changes you want to keep, and then commit:

![git](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bn77tnih1hs7pxs9e4vq.png)

## Step 5: Force Push (Optional):

If you've already pushed the changes to a remote repository and need to update it, you might need to perform a force push:

![git](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jhoomfhigjl7s2pgweah.png)

**Important Note:**
Be cautious with force pushing, as it rewrites history. Only use it if you're sure of the consequences and understand the impact on collaborators.

**Conclusion:**

Undoing the most recent local `commits `in `Git `involves using the `git reset` command with the appropriate options. It's a valuable skill for maintaining a clean and organized version history. By following the step-by-step guide and using the provided code examples, you can confidently manage your `Git `history and correct mistakes in your codebase.

As a technical writer, my goal is to provide you with a comprehensive guide that empowers you to effectively manage your `Git workflow` and maintain a reliable version control system.

**Credit**: Graphics sourced from [GitTower](https://www.git-tower.com/learn/git/faq/undo-last-commit)