teleren/devto huggingface dataset:
Is web accessibility a major neglected issue in front-end development?
Tags: webdev, frontend, discuss, a11y
Published: 2024-03-27 21:58:16

Many developers may prioritize aesthetics and functionality over ensuring that their creations are usable by everyone, regardless of ability. Let's talk about it.

Last week, I was asked as an expert to review and validate a research project that a student will present as his final thesis. He is building a styling framework for informational websites. As I reviewed the student's proposal in detail, I began to ask him questions about the standards, conventions, and concepts that govern the framework he is building.
When I asked him how his framework handled accessibility, he didn't know how to answer me. I immediately started explaining to him what accessibility is, its principles, the WAI, WCAG, and some other concepts that are important to make the Web more accessible to everyone.

Later that day, I found myself thinking about how we as developers often prioritize other aspects of our web development over accessibility. But the fact is, according to the OMS, there are over 1 billion people worldwide living with some form of disability. And WebAIM's 2023 study, which evaluated the home pages of the top 1,000,000 websites, concluded that 96.3% of the home pages were found to be WCAG 2 non-compliant. As a result, neglecting accessibility not only excludes a significant portion of the population, but can also have legal implications in some regions.

So building accessible websites isn't just the right thing to do, it's also good business practice that can potentially reach a wider audience. And beyond the fact that many front-end frameworks now include accessibility features and best practices, let's encourage a shift in front-end development culture to make accessibility a core principle of development practice, not an afterthought.

Do you consider accessibility principles when developing your web applications? When building accessible websites, what resources do you find helpful? Share your thoughts in the comments! And let's work toward a more inclusive Web for everyone.

To learn more about this topic, in my next post I'll be sharing accessibility tips so that you can start applying them to your projects, so stay tuned!

---
Sources:
🔗 The WebAIM Million 2023 Report: https://webaim.org/projects/million/
🔗 OMS Disability Fact Sheet: https://www.who.int/news-room/fact-sheets/detail/disability-and-health

---
Cover image by <a href="https://unsplash.com/es/@benkolde?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Ben Kolde</a>
var - let - const
Tags: javascript
Published: 2024-03-27 21:48:08

In the early years of JavaScript, they introduced the only variable declaration keyword "**var**" that can make you declare a variable.

**1- var**
   var is global-scoped or function-scoped, _but what does that mean?_

  - global scope means that the variable is available to be used at any level in the code after the line where it is declared.
  Ex:
  ```
  var height = 20;
  console.log(height); // output: 20;

  if (true) {
    var width = 20;
  }
  console.log(width); // output: 20;
  ```

function-scoped because when we declare a variable inside a function we can't access it out of that function.

```
function testVar() {
    var test = "Tested";
  }

console.log(test); // ReferenceError: test is not defined
```
  - Can be reassigned.
  ```
  var height = 20;
  height = 0;
  console.log(height) // output: 0
  ```

  - Can be redeclared.
  ```
  var height = 20;
  var height = 10;
  console.log(height) // output: 10
  ```

It is important to note that developers abandoned using var keyword due to its global scope and re-declaration behavior since it can be prone to errors. imagine you are writing 200 lines of code and at line 201 you decide to declare a variable that you have already declared but you forgot that you have this variable already initialized above, you need some error message to tell you that you already have this variable initialized. and also to reduce errors you shouldn't access a variable out of its scope.


**2- let**
Let is block-scoped, that means it will be available to use only at its scope but not in any outer scopes.

Ex:
  ```
  let height = 20;
  console.log(height); // output: 20;

  if (true) {
    let width = 20;
  }
  console.log(width); // ReferenceError: width is not defined

  function testVar() {
    let test = "Tested";
  }

  console.log(test); // ReferenceError: test is not defined
  ```

  - Can be reassigned, but can't be redeclared.
  ```
  let height = 20;
  height = 0;
  console.log(height) // output: 0
  ```


**3- const**
same as let keyword it is block-scoped but can't be reassigned or redeclared, as the name suggests it is constant and can't be changed.

Ex:
  ```
  let height = 20;
  console.log(height);
  // output: 20;

  if (true) {
    let width = 20;
  }
  console.log(width);
  ReferenceError: width is not defined

  function testVar() {
    let test = "Tested";
  }

  console.log(test);
  ReferenceError: test is not defined
  ```
Relaunching Quacker!
Tags: twitter, opensource, flutter
Published: 2024-03-27 21:13:13

I have recently re-added [Quacker](https://github.com/TheHCJ/Quacker) to Github and I have been making new releases of the app. This is mean't to be the formal beginning of the *new* [Quacker](https://github.com/TheHCJ/Quacker).

Firstly, I am going to make it clear that this project is *not* [Squawker](https://github.com/j-fbriere/squawker) as I will be focussing more on improving and finding new ways to access X (formerly known as Twitter). You may notice some features are the same between the two projects though I am doing things differently and in a simpler way.

Secondly, this project will *not* be deleted as I have found many people find the app useful (especially since the return) though when it becomes impossible to maintain I will give a sunset period of atleast *30 days* so you can migrate your data to another app.

Lastly, this project will have the simple objective of making X (formerly known as Twitter) cleaner and more private. This is different to the old [Quacker](https://github.com/TheHCJ/Quacker) objective of being an anomynous and private way to browse X (formerly known as Twitter) as X (formerly known as Twitter) has required users to login since Janurary 2024 to view posts.

Feel free to ask me questions on [the GitHub discussion](https://github.com/TheHCJ/Quacker/discussions/6) 🤔
A RAG Client
Published: 2024-03-27 21:04:06

In the previous [post](https://dev.to/spara_50/rag-step-by-step-3fof), we went through the steps to build a backend for an RAG application. This is cool, but not being able to demonstrate it is no fun.

The process for RAG is to retrieve data from the vector database and insert it into a prompt. To query the database, the query has to be encoded as a vector before sending the query.

```python
# creates embeddings
def get_embeddings(text,model="text-embedding-3-small"):
   response = client.embeddings.create(input=text, model=model)
   
   return response.data[0].embedding

# queries the vector database
def semantic_search(query):
    # create embedding from query
    embeddings = get_embeddings(query)

    # search the database
    response = index.query(
        vector=embeddings,
        top_k=5,
        include_metadata=True
    )

    # extract text from results
    results_text = [r['metadata']['text'] for r in response['matches']]

    return results_text
```

The next step is to create a prompt that includes the records from the database query.

```python
# create a prompt for OpenAI
def create_prompt(llm_request, vector_results):
    prompt_start = (
        "Answer the question based on the context below.\n\n"+
        "Context:\n"
    )

    prompt_end = (
        f"\n\nQuestion: {llm_request}\nAnswer:"
    )

    prompt = (
        prompt_start + "\n\n---\n\n".join(vector_results) + 
        prompt_end
    )
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ti4wk1tirr6gdsd75fz7.png)
    return prompt
```

The prompt is sent to the OpenAI chat, which returns a completion if it possible based on the information retrieved from the database.

```python
# create a completion
def create_completion(prompt):
    res = client.completions.create(
        model="gpt-3.5-turbo-instruct",
        prompt=prompt,
        temperature=0,
        max_tokens=1000,
        top_p=1,
        frequency_penalty=0,
        presence_penalty=0,
        stop=None
    )

    return res.choices[0].text
```

The user interface uses [Streamlit](https://streamlit.io/). You can enter a database query and a prompt. The complete prompt is displayed when OpenAI returns the completion.

```
# user interface
with st.form("prompt_form"):
    result =""
    prompt = ""
    semantic_query = st.text_area("Database prompt:", None)
    llm_query = st.text_area("LLM prompt:", None)
    submitted = st.form_submit_button("Send")
    if submitted:
        vector_results = semantic_search(semantic_query)
        prompt = create_prompt(llm_query,vector_results)
        result = create_completion(prompt)
    
    e = st.expander("LLM prompt created:")
    e.write(prompt)
    st.write(result)
```

Et voilà!

![RAG client](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1rwuxfe7o1i0ndp7eckt.png)

I've added the client code to the [RAG_step-by-step](https://github.com/spara/RAG_step-by-step/) repository. Check it out.
Content Creation, Blog Wizard, Chatbots, Text-to-Speech & Image Generation
Tags: chatgpt, wordpress, plugin, webdev
Published: 2024-03-27 20:46:26


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lnrtuepsp2mtlyym5rud.jpg)
Unlock Superior Content Creation with UltimateAI – The Best AI Generator for WordPress. Elevate content creation, refine code effortlessly, engage in seamless chats, and achieve stunning image generation. Explore a curated template library for a revolutionary content strategy.


[Get started – it's free](https://ultimateai.io/)
Printing in different languages
Tags: programming, html, cpp, python
Published: 2024-03-27 20:45:09


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/210onkpm7ps7vtwgnnjn.png)

VS


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8zpsrxod2ara70pxd0ep.png)

VS


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nl6r1g6yqn7lhbwwci8c.png)
Shout-Out to Geo Brakes: Your Trusted Auto Parts Provider in Canada and the USA!
Tags: news, discuss, career
Published: 2024-03-27 20:40:27


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gukf58v9dku2ajcnd2sn.jpg)
Looking for [top-quality auto parts](https://geobrakes.com/) to keep your vehicle running smoothly? Look no further than Geo Brakes! With a commitment to excellence and customer satisfaction, Geo Brakes has become a trusted name in the automotive industry across Canada and the USA.

## **Here's why you should choose Geo Brakes for all your auto part needs:**

**Wide Range of Products:** Geo Brakes offers a comprehensive selection of auto parts, including brake pads, rotors, calipers, brake lines, and more. Whatever part you need, Geo Brakes has you covered.

**Read More: Understanding [Cracked Brake Pads](https://geobrakes.com/blogs/understanding-cracked-brake-pads-causes-and-solutions/)** 

**Premium Quality:** Quality is paramount at Geo Brakes. All products are manufactured to the highest standards, ensuring durability, reliability, and optimal performance for your vehicle.

**Expertise and Experience:** With years of experience in the auto parts industry, Geo Brakes' team possesses the knowledge and expertise to assist you in finding the perfect parts for your vehicle. Whether you're a car enthusiast or a professional mechanic, Geo Brakes is here to help.

**Convenient Online Shopping:** Geo Brakes makes it easy to find and purchase the parts you need. Their user-friendly website allows you to browse their extensive inventory and place orders with just a few clicks.

**Fast Shipping:** Need your auto parts in a hurry? Geo Brakes offers fast and reliable shipping options to ensure that you receive your order promptly, so you can get back on the road without delay.

**Exceptional Customer Service:** At Geo Brakes, customer satisfaction is their top priority. Their friendly and knowledgeable customer service team is dedicated to providing assistance and support every step of the way.

**Competitive Prices:** Geo Brakes offers competitive prices on all their products, making quality auto parts accessible to customers without breaking the bank.

**Trusted Reputation:** Geo Brakes has earned a reputation for excellence and reliability within the automotive community. Countless satisfied customers trust Geo Brakes for their auto part needs, and you can too!

For top-quality auto parts and exceptional service, choose Geo Brakes. Visit their website today to explore their products and experience the Geo Brakes difference!
What are Large Language Models (LLMs)?
Tags: largelanguagemodels, ai, deeplearning
Published: 2024-03-27 20:38:39

Large Language Models (LLMs) are advanced artificial intelligence systems designed to understand, generate, and interact with human language at a large scale. These models are trained on vast datasets of text from the internet, books, articles, and other sources to learn the structure, nuances, and complexities of language.

#### Key Features of LLMs:

 - **Understanding Context:** LLMs are capable of understanding context and generating coherent and contextually relevant responses. This allows them to perform tasks like answering questions, summarizing texts, and even creating content that feels natural and human-like.
 - **Generative Capabilities:** Beyond understanding text, LLMs can generate new content. This includes writing articles, composing poetry, creating code, and more, based on the patterns and knowledge they've acquired during training.
 - **Versatility:** They can be applied to a wide range of language tasks, such as translation, sentiment analysis, and content recommendation, making them incredibly versatile tools in both business and creative applications.

**Also Read:** [Start with Langchain](https://python.langchain.com/docs/get_started/introduction)

#### How LLMs Work:

LLMs are based on a type of neural network architecture known as transformers. Transformers are designed to handle sequential data, making them ideal for natural language processing (NLP) tasks. The training process involves adjusting the model's parameters based on the input data so that the model learns to predict the next word in a sentence, given the words that precede it. Over time, this allows the model to generate coherent and contextually appropriate text.

#### Applications of LLMs:

 - **Customer Service:** Automating responses to customer inquiries on websites and social media.
 - **Content Creation:** Assisting in writing articles, reports, and even generating creative fiction.
 - **Translation Services:** Providing more accurate and nuanced translations than traditional machine translation tools.
 - **Education:** Offering tutoring, feedback on written work, and personalized learning experiences.

#### Challenges and Ethical Considerations:

While LLMs offer significant benefits, they also pose challenges and ethical considerations. These include concerns about bias in the training data, the potential for generating misleading or harmful content, and issues of intellectual property and copyright when generating text. Ensuring responsible use and ongoing monitoring of these models is crucial to address these challenges.

Large Language Models represent a significant leap forward in the field of artificial intelligence, offering unprecedented capabilities in understanding and generating human language. As these models continue to evolve, they promise to unlock new possibilities across various domains, transforming how we interact with technology and each other.
Introducing Expo Pod Pinner: Elevate Your Expo Managed Workflow with Precision
Tags: expo, reactnative, eas, ios
Published: 2024-03-27 20:37:52

In the dynamic realm of mobile development, the Expo framework stands as a beacon of efficiency and ease, especially for those favoring a managed workflow. Today, I'm thrilled to unveil an addition to this ecosystem, crafted to further refine and enhance your development experience: Expo Pod Pinner.

The plugin is designed to bring more control and stability directly to your project's Podfile without stepping outside the managed workflow’s comfort zone.

## A Glance at Expo Pod Pinner
Expo Pod Pinner enables developers to specify and pin pod versions explicitly, thus ensuring consistent and stable dependency management across all installations and updates.

This plugin not only fortifies project stability but also elevates the overall development workflow by allowing direct modifications to the Podfile—a feature that aligns seamlessly with the expectations of modern mobile development.

Developers can also work around native regressions by pinning pods to working versions.

## How to Embark with Expo Pod Pinner
Setting sail with Expo Pod Pinner is straightforward. Simply integrate the plugin into your project with a one-liner command:

`npx expo install expo-pod-pinner`

## Configuration
To weave this plugin into the fabric of your project, add it to the plugin array in your app's configuration file (either app.json or app.config.js). Here’s how you can do it:

```json
{
  "plugins": [
    [
      "expo-pod-pinner",
      {
        "targetName": "YourTargetName",
        "pods": [
          { "PodName": "0.0.0" }
        ]
      }
    ]
  ]
}
```

```js
export default {
  ...
  plugins: [
    [
      "expo-pod-pinner",
      {
        "targetName": "YourTargetName",
        "pods": [
          { "PodName": "Version" }
        ]
      }
    ]
  ]
};
```

## Configuration Props

- `targetName`: Specify the target in your Podfile where the pods should be added.
- `pods`: Define an array of objects with the pod names and their versions to pin.

## Join the Expo Pod Pinner Community

I'm on a mission to make your Expo development journey as seamless and enjoyable as possible. Contributions, issues, and feature requests are warmly welcomed. Dive into the [issues page](https://github.com/rgomezp/expo-pod-pinner/issues) to join the conversation or suggest enhancements.

## Show Your Support

Has Expo Pod Pinner enriched your development experience? A star on our GitHub page is much appreciated and fuels further innovation.

## Follow Me
<div id="badges">
  <a href="https://www.linkedin.com/in/rogomezpalacio/">
    <img src="https://img.shields.io/badge/LinkedIn-blue?style=for-the-badge&logo=linkedin&logoColor=white" alt="LinkedIn Badge"/>
  </a>
  <a href="https://twitter.com/ro_gmzp">
    <img src="https://img.shields.io/badge/Twitter-blue?style=for-the-badge&logo=twitter&logoColor=white" alt="Twitter Badge"/>
  </a>
</div>
Phoenix Liveview - open editor for element
Tags: elixir, phoenix, liveview, ash
Published: 2024-03-27 20:01:29

In your dev.exs update the `live_reload` config and add the `web_console_logger: true` key

```elixir
config :no_spark, NoSparkWeb.Endpoint,
  live_reload: [
    web_console_logger: true,
    patterns: [
      ~r"priv/static/(?!uploads/).*(js|css|png|jpeg|jpg|gif|svg)$",
      ~r"priv/gettext/.*(po)$",
      ~r"lib/no_spark_web/(controllers|live|components)/.*(ex|heex)$"
    ]
  ]
```

Then in your `assets/js/app.js` add the following!

```js
window.addEventListener("phx:live_reload:attached", ({ detail: reloader }) => {
  // Enable server log streaming to client.
  // Disable with reloader.disableServerLogs()
  reloader.enableServerLogs()
  window.liveReloader = reloader
  let keyDown
  window.addEventListener("keydown", (event) => keyDown = event.key)
  window.addEventListener("keyup", (_) => keyDown = null)
  window.addEventListener("click", (event) => {
    if (keyDown === "c") {
      event.preventDefault()
      event.stopImmediatePropagation()
      reloader.openEditorAtCaller(event.target)
    } else if (keyDown === "d") {
      event.preventDefault()
      event.stopImmediatePropagation()
      reloader.openEditorAtDef(event.target)
    }

  })
})
```
You also need to export the `PLUG_EDITOR` env variable:

```env
export PLUG_EDITOR="vscode://file/__FILE__:__LINE__"
```

You're welcome!!! And have a nice day!!!
Simplifying State Management in React with useContext Hook
Published: 2024-03-27 20:01:21


In React, managing a state can sometimes feel like a juggling act. As your application grows in complexity, passing state down through multiple layers of components can become cumbersome and lead to what's commonly known as "prop drilling". This is where React's useContext hook comes to the rescue, offering a simpler and more elegant solution to manage state across your application.

## Understanding the Context
The useContext hook is one of React's built-in hooks. It allows functional components to consume context created by a Provider component higher up in the tree. This means that instead of passing props down through intermediate components, you can directly access the context you need within any component.

## Basic Usage
**Create a context**


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/67zuebs3j1reoxswlrb3.png)

**In your App component**

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

**In your Counter function component**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/50pjmfxxja1tacv1mgby.png)

In this example, we create a context using  React.createContext() and then define a provider component (CounterProvider) that wraps around the part of the component tree where we want to share the context in the App component. The App functional component simply imports the CounterProvider component. Here we also used our custom hooks that return the state directly to our functional component without importing useContext from React again in the Count component hence, making our components cleaner.

## Benefits of useContext

1. **Simplified Prop Drilling:** With useContext, you can avoid passing props down through multiple layers of components, making your codebase cleaner and more maintainable.

2. **Keep Context Small and Focused:** Instead of creating a single monolithic context for your entire application, consider breaking it down into smaller, more focused contexts based on the specific needs of your components.

## Conclusion

The useContext hook provides a simple and elegant solution for managing the state in React applications. By leveraging context, you can avoid prop drilling and make your code more modular and maintainable. However, it's important to use useContext judiciously and follow best practices to ensure that your code remains clean and scalable. With useContext, state management in React has never been easier!