teleren/devto huggingface dataset:
Local Storage
Tags: frontendchallenge, devchallenge, javascript, webdev
Published: 2024-03-20 19:42:45

_This is a submission for DEV Challenge v24.03.20, One Byte Explainer: Browser API or Feature._

## Explainer
localStorage is a browser API allowing web apps to store key-value pairs locally in a user's browser. It's useful for saving preferences, session data, or caching. Easy to use but limited in size and not secure for sensitive data.
Razorpay success failure handling
Published: 2024-03-20 19:38:59

rzp1.on('payment.failed', function (response){
    alert(response.error.code);
    alert(response.error.description);
    alert(response.error.source);
    alert(response.error.step);
    alert(response.error.reason);
    alert(response.error.metadata.order_id);
    alert(response.error.metadata.payment_id);
}
Jelly Bean CSS Art
Tags: frontendchallenge, devchallenge, css
Published: 2024-03-20 19:38:02

_This is a submission for DEV Challenge v24.03.20, CSS Art: Favorite Snack._

## Inspiration 
Today I am highlighting a Jelly bean CSS art

## Demo

Visit the live website [here](https://ethern-myth.github.io/jelly-bean-css-art/) and code available [here](https://github.com/Ethern-Myth/jelly-bean-css-art)


## Journey
<!-- Tell us about your process, what you learned, anything you are particularly proud of, what you hope to do next, etc. -->

I began with a plain html and css canvas, then added styling to resemble a jelly bean. At first it look like a red ball, then added some gloss and shine to enhance the UI. It was fun to create a simple yet presentable css art after a while just doing basic HTML and CSS.

<!-- 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. -->

<!-- We encourage you to consider adding a license for your code. -->

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


<!-- Thanks for participating! -->
Oidc routes
Published: 2024-03-20 19:22:39

POST /oidc/token/introspection

Headers:
Content-Type: application/x-www-form-urlencoded
Authorization: Basic YXBwOmFfc2VjcmV0

Body:
token=xplcyd_0e6sZxWQmkg7bc9rPOCFeWcQCOH2t_nDoh9-




http://localhost:3000/oidc/auth
    ?client_id=oidc_client
    &response_type=code
    &response_mode=query
    &redirect_uri=http://localhost:3001/cb
    &code_challenge=nqWxOqTBUa9iu9G5pL6LWChLS5TYEcyhwWbbQlj79ZU
    &code_challenge_method=S256
    &scope=openid






POST /oidc/token
                                   
Headers:
Content-Type: application/x-www-form-urlencoded
Authorization: Basic YXBwOmFfc2VjcmV0

Body:
grant_type=client_credentials
&resource=urn:api
&scope=read
Fetch Api
Tags: frontendchallenge, devchallenge, javascript, webdev
Published: 2024-03-20 19:08:46

_This is a submission for DEV Challenge v24.03.20, One Byte Explainer: Browser API or Feature._

## Explainer
<!-- Explain a browser API or feature in 256 characters or less. -->
Fetch API simplifies network requests in web apps, offering a promise-based interface for asynchronous data retrieval with flexibility and power.
## Additional Context
<!-- 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! -->
Creating dynamic Tailwind themes for a React library
Tags: webdev, react, tailwindcss, tutorial
Published: 2024-03-20 18:50:54

I wrote [an article](https://www.dolthub.com/blog/2024-03-20-dynamic-tailwind-themes/) about how we implemented dynamic Tailwind themes in Typescript for a React component library that we built to share components between web applications with different color themes. It also shows how we use Storybook to toggle color themes when testing React components.

Check out the article here: https://www.dolthub.com/blog/2024-03-20-dynamic-tailwind-themes/
Embracing Gender Equality in the Tech Industry
Tags: wecoded
Published: 2024-03-20 18:44:14


I believe that every industry is meant for everyone and every gender and the right not to look down or less of someone based on the reason of gender is important, many have stopped learning or coming to tech because they think it is only for guys which are not and also it is important o make it know and talk about how people should treat the genders in times of oppountrity and equality for the growth of the Tech Ecosystem. 


there are many obstacles to gender equity in tech but the primary one is the Mindset of persons and individuals in tech, I strongly believe that if our mindset is placed well it should help bridge the issue of considering a particular gender over another.

In my few experiences In the Tech ecosystem, I have seen equity in gender based on giving the job/task to the right person because the person is good and qualified for the job not thinking maybe of the gender.

Looking ahead, the level of gender equality will improve and become better because we have seen in times and presently that the opposite gender(Female has been given the importance for them to be active and find their feet in Tech also)

the effective strategy to employ in advocating for gender equity is empowering the opposite gender(female) gender.

##wecoded
Why is No-one Talking about Nim-lang?
Tags: nim, programming, productivity, devops
Published: 2024-03-20 18:43:45

This is far more promising than Rust, Zig or Golang for common application abstraction purposes.

### What is Nim you ask?
A systems programming language that types like python and feel like Ada & Pascal combined...The benefit to this is that it allows dynamic and highly expressive source code that is both easy to read and elegant to work with...

### How Does it work? 
Essentially you can either do a compile to C (default), Objective-C, C++ or Javascript. From here; you nim source code is either compiled or interpreted (Javascript) to run on any machine that nim is installed.
Cover Letters & OpenAI
Tags: javascript, openai
Published: 2024-03-20 17:56:39


📝 Introducing CoverLetterGenerator: Your Gateway to Tailored Cover Letters!

Tired of staring at the blank page, trying to craft the perfect cover letter for every job application? Say goodbye to writer's block and hello to CoverLetterGenerator! 🚀

Powered by the OpenAI API, CoverLetterGenerator takes the stress out of crafting personalized cover letters. Simply provide an existing cover letter, your resume, and the job specification, and let the magic happen. ✨

But wait, there's more! To ensure your privacy and security, CoverLetterGenerator doesn't store your sensitive documents. Your existing cover letter, resume, and job specification remain safely on your local machine, thanks to our handy .gitignore configuration.

This project was inspired by the enlightening OpenAI course on Front End Masters, a testament to the endless possibilities of AI-driven creativity. If you're looking to level up your skills, I highly recommend checking it out!

Ready to revolutionize your job application process? Clone the repo, follow the instructions, and watch as CoverLetterGenerator transforms your job hunt experience. Happy applying! 💻📄 #CoverLetterGenius #OpenAI #FrontEndMasters

Code repo:
https://github.com/paolov1928/coverLetterGenerator
Sensor APIs
Tags: frontendchallenge, devchallenge, javascript, webdev
Published: 2024-03-20 17:49:01

_This is a submission for DEV Challenge v24.03.20, One Byte Explainer: Browser API or Feature._

## Explainer
Sensor APIs provide web apps a standard way to access device sensors (accelerometer, gyroscope) for features like motion detection or orientation, unlocking  possibilities in gaming, fitness, and AR/VR.

## Additional Context
Imagine features in web apps that react to your movements! Sensor APIs make this possible.  They're like special tools that web apps can use to access your device's sensors, like the ones that track movement in games or fitness trackers. This lets web apps create cool features like tilt controls in games, virtual tours that react to where you move your phone, and more!
When you are writing code, do you "align the happy path to the left"?
Tags: go, cleancode, beginners, codenewbie
Published: 2024-03-20 17:42:06

The two code snippets in this post (which are images to help highlight the indent columns) are identical in terms of desired outcome, but they could not be any more different in terms of readability, cognitive load and maintainability.

Unnecessarily nested code is not something new to myself, but this idea of aligning the happy path to the left, is a new way of thinking about it for me.

Let's first look at some deeply nested code where the happy path is not aligned to the left. You will see there are 4 columns to reason about when trying to understand the potential outcomes.

![Deeply nested code example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mj0vixoxjxddl63hhu2n.png)

But why is it important?

The amount of time we spending reading code is far greater than the amount of time we spending writing code. So we should be doing all we can to enable ourselves to be able to quickly scan down one column to be able to see the expected execution flow.

So let's look at the same code, but with the happy path aligned to the left.

![Happy path left aligned code example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4rvtsygkjfdaw2q7ci99.png)

Try aligning your happy path to the left in your next project and see how much easier it is to read your code.

Finally, the code snippets were taken from the book: [100 Go Mistakes and How to Avoid Them](https://www.manning.com/books/100-go-mistakes-and-how-to-avoid-them) by Teiva Harsanyi - I recommend checking it out.
Handling NEW and OLD Immutability in PostgreSQL Triggers
Tags: postgres, sql, learning, database
Published: 2024-03-20 17:19:35

In PostgreSQL, triggers are a powerful feature for automating responses to data changes within a table. A common hurdle is the immutability of **`NEW`** and **`OLD`** records, which cannot be directly modified within trigger functions. Here's a more code-focused exploration of how to navigate this constraint effectively.

### Attempting Direct Modification

First, let's look at a typical attempt that won't work due to immutability:

```sql
sqlCopy code
CREATE OR REPLACE FUNCTION try_direct_update()
RETURNS TRIGGER AS $$
BEGIN
  -- Trying to directly update NEW's field (won't work)
  NEW.updated_at = NOW();
  RETURN NEW;
END;
$$ LANGUAGE plpgsql;

```

This code will fail because **`NEW`** cannot be directly modified in a trigger function.

### A Workable Strategy

To update **`NEW`** without breaking the rules, we use a mutable copy:

```sql
sqlCopy code
CREATE OR REPLACE FUNCTION update_timestamp_correctly()
RETURNS TRIGGER AS $$
DECLARE
  mutable_new RECORD; -- A mutable copy of NEW
BEGIN
  mutable_new := NEW; -- Copy NEW to our mutable variable
  mutable_new.updated_at := NOW(); -- Update the timestamp on our copy
  RETURN mutable_new; -- Return the modified copy back to the trigger
END;
$$ LANGUAGE plpgsql;

```

This function effectively updates the **`updated_at`** timestamp by operating on a mutable copy of **`NEW`**.

### Attaching the Function to a Trigger

To utilize our function, we attach it to a trigger on the desired table:

```sql
sqlCopy code
CREATE TRIGGER ensure_updated_timestamp
BEFORE UPDATE ON user_actions
FOR EACH ROW
EXECUTE FUNCTION update_timestamp_correctly();

```

This trigger setup ensures that any update to **`user_actions`** will automatically refresh the **`updated_at`** column, courtesy of our custom function.

### Key Takeaways

- Direct modification of **`NEW`** and **`OLD`** is off-limits in trigger functions due to their immutable nature.
- The workaround involves creating a mutable copy of **`NEW`**, making the desired modifications, and then returning this copy.
- This approach maintains data integrity and enables complex logic within triggers without direct modification restrictions.

By embracing this strategy, developers can craft sophisticated triggers that respect PostgreSQL's constraints while achieving desired data manipulations.
Choosing colors in data visualization
Published: 2024-03-20 17:15:58


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

🎨 The Importance of Choosing the Right Colors in Data Visualization Did you know that the colors you choose for your data visualization can significantly impact how effectively your message is communicated? Let's dive into why selecting the right colors is crucial and how to use them wisely. ⚪ Clarity : Using appropriate colors enhances clarity and helps viewers quickly grasp the information presented in the visualization. 🟡 Emphasis : Colors can be used to highlight important data points or trends, guiding the viewer's attention to key insights. 🟢 Natural Associations : Stick to logic – green for land, blue for water. 🔵 Emotion : Colors evoke emotions and associations, influencing how viewers perceive and engage with the data. Credit : Warsaw university of technology
TIL .key method in Ruby
Tags: ruby
Published: 2024-03-20 17:14:43

Earlier I attempted to create an array of keys using the .each method. But there is already a method to do so. In order to create an array of keys from a hash, you can use the .key method.

Example:
```ruby
# Define a hash with some key-value pairs
user_info = {
  name: 'John Doe',
  age: 30,
  email: 'johndoe@example.com'
}

# Use the .keys method to get an array of keys
keys_array = user_info.keys

#the array will look like [:name, :age, :email]
```
Difference between Objects and Arrays in Javascript
Tags: javascript, basics, webdev, beginners
Published: 2024-03-20 17:11:48

Objects and arrays are both fundamental data structures in programming, but they have distinct differences in terms of their structure, purpose, and usage.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3ju7sbhofb376ux50inq.gif)

**1. Structure:**

Objects: An object is a collection of key-value pairs, where each key is unique and maps to a value. Keys are typically strings, and values can be any data type, including other objects, arrays, functions, and primitive types (such as strings, numbers, or booleans).

Arrays: An array is an ordered collection of elements, where each element is identified by its index. Elements in an array are ordered and indexed starting from 0. Arrays can contain elements of any data type, including other arrays and objects.

**2.Purpose:**

Objects: Objects are typically used to represent entities with properties or attributes. They are well-suited for modeling real-world objects or complex data structures where each property has a unique name.

Arrays: Arrays are used to store ordered collections of data, such as lists of items or sequences of values. They are useful for storing homogeneous data where the order of elements matters.

**3.Usage:**

Objects: Objects are commonly used for creating complex data structures, representing entities in object-oriented programming, and organizing data in key-value pairs for easy retrieval and manipulation.

Arrays: Arrays are frequently used for tasks such as storing and manipulating lists of data, iterating over elements using loops, and performing operations like sorting, filtering, or mapping.

**4.Accessing Elements:**

Objects: Elements in an object are accessed using their corresponding keys. You can use dot notation (e.g., object.property) or bracket notation (e.g., object['property']) to access values.

Arrays: Elements in an array are accessed using their numerical indices. You can access elements by specifying their index within square brackets (e.g., array[0]).

**5.Mutability:**

Objects: Objects are mutable, meaning that their properties can be modified, added, or removed after they are created.
Arrays: Arrays are also mutable, allowing elements to be added, removed, or modified. You can change 
the length of an array dynamically.
In summary, while both objects and arrays are used to store data, objects are best suited for representing structured data with named properties, while arrays are ideal for storing ordered collections of data with numerical indices. Depending on the requirements of your program, you may choose to use objects, arrays, or a combination of both to organize and manipulate your data effectively.
Fuel Your Curiosity: Discover Learningdumps Today
Published: 2024-03-20 17:05:35

<a href=" https://learningdumps.com/">Learningdumps</a> 	Now that we've explored the myriad advantages of Learningdumps, let's delve into how this ultimate learning resource can help individuals unlock their potential:

Learningdumps offers a diverse range of courses and learning materials designed to develop essential skills relevant to today's workplace. Whether it's mastering coding languages, honing project management skills, or enhancing communication abilities, Learningdumps provides the resources needed to cultivate a versatile skill set that can propel your career forward.

In today's competitive job market, continuous learning and skills development are essential for career advancement. Learningdumps empowers individuals to  stay abreast of industry trends, acquire in-demand certification.

 and demonstrate their expertise <a href=" https://learningdumps.com/">Learning dumps</a> to prospective employers. Whether you're aiming for a promotion, seeking new employment opportunities, or transitioning to a different career path, Learningdumps equips you with the credentials and knowledge to achieve your goals.

Beyond professional development, Learningdumps fosters personal growth and lifelong learning. It encourages individuals to explore new interests, expand their horizons, and pursue learning opportunities that enrich their lives.

 Whether you're passionate about technology, business, healthcare, or any other field, Learningdumps provides a platform for continuous self-improvement and discovery.

click here more info: https://learningdumps.com/
Introduction to CSS: Transforming Web Pages with Style
Tags: css, beginners, frontend, webdev
Published: 2024-03-20 16:54:52

**CSS**, or *Cascading Style Sheets*, is a language used to style and present web pages. While [**HTML**](https://dev.to/algorodev/introduction-to-html-the-hypertext-markup-language-bk7) provides the structure and content of a page, CSS brings it to life by defining how that content will look. From color and typography to layout and arrangement.

### **What is CSS?**

CSS is a **styling language** that describes how HTML elements should be presented on a web page. It allows control over aspects such as color, font, size, and layout of HTML elements, as well as the arrangement and positioning of those elements on the page.

### **Basic Syntax of CSS**

The syntax of CSS consists of a set of **rules** that specify how style should be applied to HTML elements. Each rule consists of a **selector** and a set of **style declarations**, which define the **properties** and **values** to be applied to the selected elements.

```css
selector {
    property: value;
    /* Comment */
}
```

- **Selector**: Specifies which HTML elements will be affected by the style rule.
- **Property**: Defines the aspect you want to change.
- **Value**: Specifies the value to be applied to the property
- **Comments**: Used to add notes in the CSS code that are not interpreted as part of the style.

### **Applying Styles to HTML Elements**

There are several ways to apply CSS styles to HTML elements:

1. **Inline Styles**: Applied directly to an element using the `style` attribute.

```html
<p style="color: blue; font-size: 16px;">Paragraph with inline styles.</p>
```

1. **Internal Styles**: Defined within the `<style>` tag in the `<head>` section of the HTML document.

```html
<head>
    <style>
        p {
            color: blue;
            font-size: 16px;
        }
    </style>
</head>
```

1. **External Styles**: Defined in a separate CSS file and linked to the HTML document using the `<link>` tag in the `<head>` section.

```html
<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
```

### **Key CSS Properties**

CSS offers a wide range of properties to customize the style of HTML elements. Some of the most common properties include:

- **color**: Defines the text color.
- **font-family**: Specifies the font used for text.
- **font-size**: Sets the font size.
- **margin**: Controls the space around an element.
- **padding**: Defines the internal space of an element.
- **border**: Sets the border around an element.
- **background-color**: Defines the background color of an element.

For more information about CSS Properties: https://www.dofactory.com/css/properties

### **Advancing with CSS**

As you become familiar with CSS, you can explore more advanced techniques such as using more specific selectors, **responsive design** to adapt the page to different devices, and **animation** to add **visual interactivity**.

With this introduction to CSS, you're ready to start styling your web pages and creating captivating visual experiences on the web. Experiment and have fun exploring the power of web design with CSS!
Integer, Float, and Array class
Tags: development
Published: 2024-03-20 16:42:19

**Integer class**
`/` when dividing only returns the whole
`%` returns the remainder
Rubyists tend to end method names with a question marks when methods return `true` or `false`.
`rand` returns a random number. `rand(n)` will return a random integer between 0 and n-1 rather than 1 and n 
`object#method` is different from `object.method`
`.to_f` is useful in converting an integer to a float.

**Float class**
Division with floats works the way we're used to. It returns fractional results, as a `float`. 
If either number when dividing with `\` is a float, float division will be performed. 
`rand` can also be called without methods.
`push == <<` for shorthand. 

**Array class**
`.at` method in an array refers to the index, which starts at 0. `nil` represents absence of in index in the array aka doesn't exist. 
In an array, to count backwards through a list of items, start with -1 (aka the last item)
`.at == object[index]` shorthand.
`.index` method returns the index where it resides
`.split` will return an array of substrings
`.split` with an argument tells the program to split at the character of the argument.
`.split`ing with an empty argument `("")` turns a string into an array of individual characters. 
`.count` counts how many items are in a list if called with no arguments. If an argument is provided it counts how many times that argument occurs in the list.
`.sample` returns an unpredicted item from an array
Nullinjectorerror no provider for httpclient Angular 17 | How to fix this Error
Tags: tutorial, angular, angular17, javascript
Published: 2024-03-20 16:33:55

In Angular 17 where the standalone true option is set by default, the app.config.ts file is generated in src/app/ and provideHttpClient(). We can be added to the list of providers in app.config.ts 

**Reference links** -

- [Nullinjectorerror no provider for httpclient Angular 17](https://www.code-sample.com/2024/02/nullinjectorerror-no-provider-for.html)

- YouTube link for this Video - [YouTube link](https://youtu.be/zXoXmzzEefA?sub_confirmation=1)