teleren/devto huggingface dataset:
How MIME types crashed our production app
Tags: javascript, mime, html
Published: 2021-10-15 15:39:54

---
title: How MIME types crashed our production app
published: true
description: knowing the basics pays off...big time
tags: js, javascript, mime, html
cover_image: https://i.imgur.com/5RJAoAn.png
---

As the sun came up on the East Coast of the Americas continent, an alarm went off in our team Slack channel. The homepage was returning 4XX errors. 

The problem turned out to be related to two things, but one of those was so basic I didn't even think of it. MIME types. Yup. Our page went down (for a very short time) because of MIME types. 

A quick review of MIME-types led me to [this nugget from Mozilla](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types) on MIME-sniffing:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0g2swz4ie0iucpg21qy3.png)

It turns out that a partial/invalid bundle of our app on Cloudflare had produced a malformed file. That file was returned as part of the page request and when the browser couldn't confirm that the MIME type in the header matched the contents, it freaked out and refused to show the page. 

In the end, we just had to rebuild the bundles and all was well. But we never would have discovered this clue if someone had not thought to check the MIME-type response header. Seeing that and knowing that it should have been something different led us to the real issue. 

Basics FTW!
Codebytes: Shorter UUIDs with collision prediction using nanoid
Tags: codebytes, uuid, nanoid, javascript
Published: 2021-10-15 15:33:12

---
title: Codebytes: Shorter UUIDs with collision prediction using nanoid
published: true
description: Generate shorter UUIDs with nanoid by predicting its possible chance of collision 
tags: codebytes, uuid, nanoid, javascript
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/suzw14c7uqkmw4niytw2.png
---

To generate an unique ID most of us use npm libraries and node utils like uuid, crypto.randomUUID. One of the major cons is these IDs are larger in size and the shorter UUID generation will increase the **probability of duplicate** IDs.

Here comes the saviour, [nanoid](https://github.com/ai/nanoid) - A tiny, secure, URL-friendly, unique string ID generator for JavaScript.

Since the bigger alphabet is being used in the UUID generation, nanoid can generate random unique ids within 21 chars.

And its 2x faster and safer than other UUID generators.

### Wait... This will blow your mind!

![mind blown](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zc7tv529i4r2w7n019x7.gif)

Nanoid is completely configurable from size to char's, to be used while generating the UUIDs. Then how does it **avoid the probability of duplication?** It comes with a **[collision calculator](https://zelark.github.io/nano-id-cc/)** which helps to predict the probability of collision based on configuration.
![collision calculator](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/edocpgy3z19r122axngu.png)

It has support for various other programming languages. Checkout this awesome repo:

{% github ai/nanoid %}
Creating an Uber clone app with React Native
Tags: reactnative
Published: 2021-10-15 15:23:48

I have been immersing myself in some React coding for a while and always wanted to give React Native a try. Went on YouTube and found this awesome video about building an Uber clone with Expo.

{% youtube bvn_HYpix6s %}

[Expo](https://expo.dev/) is a tool that seeks to ease the pain of working with React Native like setting up a native development environment and managing native dependencies. You can get up and running quickly without having to worry about setting up XCode and Android Studio.

The Uber clone app was also made with a few third-party libraries and some incredibly useful Google APIs, thanks Google! I was pleased to find out I could use Tailwind to style my React Native components.

Here are some screenshots of the app:
![app screenshots](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/df41z6n3ofqd0iht7cl1.png)

Check out the code/demo on GitHub and critique me.
{% github emmanuelchucks/react-native-uber-clone %}
The Best Assignment Writing Services in the UK
Published: 2021-10-15 15:11:10

EssaysnAssignments Services is a leading online firm in the UK. If you are looking for an online writing company to ask them for Best Assignment Writing Help UK and it is the right place. We are providing high-quality services at low prices to help students ace their results. Get 100% Plagiarism Free Work by 5000+ experts to secure your A+ Grade. Our team is highly inclined to help those students who face difficulties in completing academic help due to any reason. We are serving students for many years with clear goals, high values, work excellence, and a supreme reputation. 


Moreover, We also provide the best <a href="https://essaysnassignments.co.uk/assignment-service/">Assignment Writing Services</a> in the UK with all the required resources for literature review to help in the UK, so the quality they produce should be top class. We have given them open access to digital UK libraries, books, journals, articles, and also high specs computers, so they do not leave any flaw in final assignment services. Nonetheless, they have always satisfied clients with their writing, and we relax by seeing you happy with our produced piece of writing. Our online assignment writing services are available for complete academic help in the UK, including all chapters from introduction, literature review, and methodology to a conclusion.
Issue Tracker
Published: 2021-10-15 15:02:56

For my final project, I'm making an issue tracking app with a Rails API backend and React and Redux frontend. Out of everything we've learned at Flatiron thus far, React has been my favorite. I love the simplicity, scalability, and that at the end of the day, it's really just javascript.

My issue/bug tracking project is unique because while I'm building out the app, I'm using it to track the bugs I'm encountering in the my project. No need for a seed file this time!

In my app, a user can create a bug and update its status to be 'In Progress' or 'Done'. The component will change color depending on the action state its in. I added a stateless component to the bottom of the items-list container that acts as a legend to clue the user in to what the color changes mean. In the navigation bar, I also have stateless components that act as routes to navigate the user around the app.

I really like this project because it's something that I can use every time I code, and will be able to continue building out and improving on naturally as my issue/bug tracking needs grow.
List App
Published: 2021-10-15 15:02:32

My Javascript project was a simple list app that allows a user to create and delete lists and add in tasks. This was an app I'd been wanting to make for awhile and was glad I finally got a chance to do so with this project.

After working with Rails so much in the last project, it was very easy to set up the backend and I spent the bulk of the project working with the frontend and navigating the dom. It took me awhile to decide on a file structure and I ended up doing a lot of testing a long the way. One thing that really helped me was finding a simple way to clean up my test data and start fresh with my original seeds. Up until you build out an apps delete functionality, the database can get messy with test data.

I used the following simple code to fix this problem:

    Add 'ModelName.delete_all' to your 'db/seeds.rb' file for every model's data that you want to gone.

My seeds file looked like this:

--> db/seeds.rb

List.delete_all
Item.delete_all

// seeds data goes on the lines below


    Then run the following code in the terminal

--> terminal 
rake db:seed


That's it! The database was just completely cleared of all data and then repopulated with seed data. Having this command handy was a really helped me during this project because I could test and debug in browser without having to build out delete right away.
Kombucha Thoughts
Published: 2021-10-15 15:01:43

For my Rails project I made a web app for kombucha drinkers to keep track of what they've drank, review and rate their drink experience, and then be able to view what other users think of the kombuchas as well.

When I started this project, Rails felt like a blur. I understood the parts of the program individually, but didn't fully understand how it all fit together. So I took it slow and tried to really understand what was happening behind the "magic".

I choose not to use the popular Authentication Gem Devise in an effort to better understand the Login/Signup/Logout process and application of dreaded OmniAuth. Much to my surprise, it turns out OmniAuth isn't very complicated, but just very specific. Specific to the provider (ie. Github, Google, Facebook, etc.) and specific to the exact code/formatting you need to use. For example, I ran into a bug in my .env file where I accidentally added a space between CLIENT_ID and CLIENT_SECRET and it completely haulted my progress for hours.

In my project, I added Google and Github OmniAuth functionality. The implementation of OmniAuth is just more of what we've already been doing - sifting through a hash for specific key/value pairs which we assign to variables, and if all validations pass, we'll set the user's id to be the session id and log the user in.

Here is how I got to the OmniAuth users hash:

    Explore the OmniAuth hash by placing a byebug in SessionsController#omniauth

# SessionsController 

def omniauth
    byebug
end 


_Dont forget to add byebug to your Gemfile if it is not already there_ ``` # Gemfile

gem 'byebug'


<br>
2) Once I hit the `byebug` I accessed the OmniAuth request via the `request` keyword (similar what we'd think of as `params`).  I referenced omniauth  by calling on the `.env` part of the request. So the full command to get to the user hash looks like this:
<br>
<br>

pp request.env['omniauth.auth]


<br>
_^^ TIP: `pp` stands for "pretty print" and it will format the hash so it's "human readable"_

<br>
<br>
3) I then added that code to my `SessionsController` in a `private` method so I could easily access my user hash. 
<br>

private 

def auth
    request.env['omniauth.auth']
end
Tab Less 
Published: 2021-10-15 15:00:36

For my Sinatra Project I created the app Tab Less. The goal of this app is to have a temporary place to put open browser tabs, thus allowing me to clear my cache, shut down my browser/computer, and free up memory. I don’t know about you, but I use browser Bookmarks specifically for webpages I've already read, vetted, and plan to reference later in life. This leaves a gap in my system - where do I save potential Bookmarks, before I have a chance to read and vet them? I need some sort of "pre-bookmark", a "bookmark limbo", an interim tab location. Tab Less is my first step toward solving this problem.

A running theme I'm finding with my projects is that the setup is the most tedious and time consuming part. At this stage in my journey to code, I don't know what I don’t know. I spent a lot of time researching project file structure, what each part does, and why certain chunks of code are necessary. This was really important to me. In the real world, there are no "labs to pass" or the "learn submit'" command to streamline pushing to Github - we have to be able to set up and finish tasks on our own and from scratch. After I had a good understanding of the project set up on my own, I opted to use the gem Corneal to scaffold my files. Corneal was great and gave me a solid foundation to build my project on.
This was my first time using the Flash gem and it was a huge help for communicating errors to the user. I also found a quick simple way to validate user form submissions by adding the `required` keyword in the `` tag.

_/views/login.erb_

`<input type="email" name="email" id="email" required>`


The keyword required prevents the user from submitting a form unless the required field is filled out. This error is communicated to the user by adding a red border to the form field and the text "Please fill out this field". Simple, elegant and efficient.

I'm happy with the way my Sinatra project turned out and am excited to take things to the next level with Rails.
Why Software Development
Published: 2021-10-15 14:58:44

Do you remember those personality/career tests administered to students back in high school and college? One of my consistently “recommended professions" was software engineering. At the time, I didn't think much of it. Art always came naturally to me so I just assumed that was were I belonged. I end up starting a business and through that experience I discovered a layer of strengths and passions I didn’t realize I had.

I love nothing more than analyzing and solving a complex problem that has no obvious solution, as well as the challenge of creating a systems that highlights efficiency. Curiosity is the driving force in my life and the desire to get to the root of how and why things work. Software development is endlessly fascinating and moving at such a rapid pace that there is no shortage of knowledge to gobble up.

I looked into coding over the years, but always thought I'd have to go back to get a four year degree. The structure of bootcamps solved this problem and well, the rest is history!
CLI Project
Published: 2021-10-15 14:56:32

Working through this my first programming project was tough in the beginning, but once I got rolling it was pretty fun and great practice.

The beginning was tough for two reasons. First, I found it hard to decide on a topic that met the project requirement, had a beginner friendly API, and was something that I am actually interested in. I just kept mentally twirling in indecision. The good news is, the more I learn the easier this step will be because I'll better understand my capabilities, the scope of the challenge, and well, APIs. Second, I found it challenging to figure out how to set up my files, environment, dependencies, etc. To connect the dots I watched some Flatiron videos, Googled around, and took very detailed notes to try and understand how and why these pieces were necessary for the puzzle.

I really enjoyed implementing my methods and writing the logic of the program. This is where I had the most fun, felt comfortable, and got into a good flow. All in all, I learned a lot & am excited to tackle Sinatra.
Herramienta como extensión del navegador para observar los atributos ARIA
Tags: javascript, html, a11y, showdev
Published: 2021-10-15 14:53:13

_Foto de portada por [Tito Pixel](https://unsplash.com/photos/KBPzLjwdFbI) en Unsplash_.


Estos últimos meses he estado tratando de mejorar una extensión que desarrollé el año pasado, la idea es que puedas observar si las etiquetas HTML contienen estos atributos. 

Escribí sobre está extensión hace un tiempo aquí en Dev, puedes leerlo en el siguiente enlace:
{% link https://dev.to/franqsanz/una-extension-para-detectar-los-aria-label-no-aplicados-en-etiquetas-html-4p9p %}

## ¿Qué hay de nuevo?
Mi objetivo era que está misma pudiera inyectar un código CSS mediante programación no como estaba originalmente, así tendría más control de ella y podría activarla cuando quería desde una UI (User Interface), también decidí renombrar el proyecto a "**ARIA Observation Tool**".

![UI Aria Observation Tool](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kr3knpgfg6ypmvfcb4fz.png)

## ¿Qué se observa?
Por el momento no se observan todos los atributos ARIA solo los siguientes:
* `aria-label`
* `aria-expanded`
* `aria-hidden`
* `aria-haspopup`

Si no están aplicados serán remarcados con un color en los bordes.
En realidad es un `outline` de 2px de tipo dashed.

Ejemplo:

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

---

La verdad que no tengo mucha experiencia en extensiones y me ha costado entender al principio en cómo inyectar tal código (aún sigo sin entender muchas cosas 🙃)

Después de leer varios artículos sobre cómo crear una extensión y estar en la documentación oficial de [Google](https://developer.chrome.com/docs/extensions/), logré hacer lo que quería! 🥳 


## En construcción...
Aún no he logrado terminarla, sigo luchando pero ya es un paso más, eso me hace sentir bien y la verdad que este proyecto me da orgullo. 
No sé bien si realmente es útil o no, pero siempre aprendes algo nuevo en cada proyecto.

## Problemas descubiertos
He descubierto muchos problemas cada vez que he avanzado, la accesibilidad es compleja y usar estos atributos también, no se trata simplemente de colocarlos en todas partes, hay etiquetas HTML que no es necesario colocar los atributos y en otros si.
Esto me llevo a la conclusión de que es bastante complejo desarrollar está herramienta.

## Conclusión
Queda mucho por investigar y aprender sobre los atributos ARIA y cuáles son las etiquetas más importantes que deberían contenerlos.

## Repo:
Dejo el repositorio por si tienes curiosidad o si deseas contribuir o dejar una estrella! 😊

{% github franqsanz/aria-observation-tool/ %}

## Recursos:
* [Introducción a ARIA](https://developers.google.com/web/fundamentals/accessibility/semantics-aria?hl=es)
* [Etiquetas y relaciones de ARIA](https://developers.google.com/web/fundamentals/accessibility/semantics-aria/aria-labels-and-relationships?hl=es)
* [AREA in HTML](https://www.w3.org/TR/html-aria/#sec-strong-native-semantics)
* [Using ARIA](https://www.w3.org/TR/using-aria/)

¡Saludos y Feliz Codificación!
a little less spam and a lot more action
Tags: github, javascript
Published: 2021-10-15 14:33:59

![spam](https://media.giphy.com/media/RI4LTRjrVJhTskGtrb/giphy.gif) This is a follow up to my post a few days ago [pr-compliance-action](https://dev.to/mtfoley/pr-compliance-action-56m0).  I had been excited to see how it would behave on a real project, and yesterday I got my wish!

The [Open Sauced](https://github.com/open-sauced/open-sauced) project is configured to have [dependabot](https://github.com/dependabot/) run on Thursdays, and my action contribution had gotten implemented last Friday. @bdougieyo has the Open Sauced discord setup to monitor the GitHub repo for comments and other events and yesterday we got the regular traffic from `dependabot`, but for each PR that it opened, `pr-compliance-action` jumped in with a comment of its own! This was because of two things - one was by design, and one was a bug in the design.

By design, `pr-compliance-action` is checking for PRs opened that don't refer to an existing issue in the repo.  Dependabot opens PRs that fit that description.  Also by design, `pr-compliance-action` is supposed to ignore `dependabot` by default.  The bug was in the workflow file for `pr-compliance-action`'s `ignore-authors` input, using the wrong style of multiline YAML syntax. Easy fix, one character!

[Open Sauced Issue #1234](https://github.com/open-sauced/open-sauced/issues/1234)
Loving @0vortex issue description:
> **Steps to reproduce**
Wait for Thursday
Wait for Dependabot to open a pull request
Dependabot gets greeted to join Discord

The other *opportunity for improvement* that became apparent was that `pr-compliance-action` didn't discriminate whether a PR author was a repo owner or a team member.  This was a little more involved a feature to implement than a single character change, but I enjoyed it.  This was a matter of leveraging the GitHub's REST API to list out whether the user's orgs included the org that owns the repo in question.

[Open Sauced Issue #1240](https://github.com/open-sauced/open-sauced/issues/1240)

Two release tags in one day - is that a reason to celebrate? Well I am :-)
Testing the testers (Jasmine contribution)
Tags: opensource
Published: 2021-10-15 14:15:51

This week for my open source contribution I decided to tackle a bigger project and a slightly more complex issue. Last week, I removed commented code, this week I added some code. For my repository, I chose to fork [Jasmine](https://github.com/jasmine/jasmine), and the [issue](https://github.com/jasmine/jasmine/issues/1854) involved adding some extra descriptions to an error message regarding "expectations" and asynchronous tasks in the Jasmine framework.

The issue was that the error message was pointing to one cause, but not anything else that was possibly causing the error. I had a look at the previous comments about what they were doing when the error occurred, and some suggestions from a contributor about done() function and how it executes.

In order to find the file to change in this massive project I took advantage of a Github feature. It allows you to click on a function (similar to Visual Studio) and find the definition. I clicked the error generator function to see where it was defined and change the error.

He mentioned that done() should only be called when you're sure the test is finished and that there won't be any async tasks started after done(). Originally the issue was reported when someone did in fact call done() and then start an expectation. 

**To fix this, I amended the error message in 2 different files (env.js and EnvSpec.js) to include 3 potential causes:**
* 1. Did you forget to return or await the result of expectAsync?
* 2. Was done() invoked before an async operation completed?
* 3. Did an expectation follow a call to done()?

In this way the person running the test can check more causes than just awaiting the result (such as terminating the test before the task can finish).

Each time I made a change, I ran "npm test" which runs their full test suite to make sure that all the errors and test cases pass. 

For example, the test caught me **when I didn't change the error in env.js but I did change it in EnvSpec.js** and it gave me a message saying these 2 errors don't match each other even though they're from the same cause.

Before I could submit my [Pull Request](https://github.com/jasmine/jasmine/pull/1937) however, I had to fix some styling issues such as running Prettier. Furthermore, the maintainer of the project asked that I make my lines of code no more than 80 columns. To fix this, I split the string into separate lines using concatenation and newlines. Finally, in order to merge I ran "git rebase main -i" and squashed my 4 commits into 1. After those steps my pull request was accepted!!!

This was my first time working on such a large project and repository and it was a unique experience. One thing I would do different is add even more description to my pull request about how I tested the feature and what I changed.
Contribute to Word Counting App - Hacktoberfest
Tags: webdev, html, hacktoberfest, react
Published: 2021-10-15 13:41:14

## Hello guys, today I am here with an opensource GitHub Repository to contribute


Please do visit, https://github.com/snowbit-coderboi/word-counter and try contribute into it.


Check out the live version: https://word-count-react.vercel.app/
One command to remove gigabytes of unused `node_modules` data
Tags: node, npm, performance, productivity
Published: 2021-10-15 13:40:34

Programming is just one big cycle. Create or download a project, install your dependencies, build something amazing, and move on to the next one. However, with node.js projects, there's a glaring problem.

Every time you move on to another project, you leave incredible amounts of data in the `node_modules` folder that you may never use again. This can add up... quite quickly.

![NPM is heavier than a black hole meme](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/llnv5v467r8tbdvkr86c.png)

Don't despair! There's an easy fix, and it's called `npkill`.

{% github voidcosmos/npkill %}

It's an easy CLI that provides a user friendly interface to scroll through all of your `node_modules` folders, and, if necessary, delete some at the click of the button.

Personally, I think it's an incredibly cool and useful tool, and I'm sure you will too! To get started, just type:

```sh
npx npkill
```

And start freeing space!