teleren/devto huggingface dataset:
Adding a lang attribute to your Next.js site
Tags: nextjs, a11y, performance
Published: 2022-02-08 23:32:39

---
title: Adding a lang attribute to your Next.js site
published: true
description: Updating your Next.js sites to have a language set for screen readers is important for accessibility, and only takes a few lines of code!
tags: nextjs, accessibility, performance
cover_image: https://images.unsplash.com/photo-1624384897936-f0976c16c7ba
canonical_url: https://cassidoo.co/post/lang-to-next
---

Sometimes when you're running a Lighthouse performance check on your sites, you might come across the issue:

```
<html> element does not have a [lang] attribute
```

Luckily, this is a pretty easy thing to fix, whether you're using Next.js, or plain ol' HTML!

## Why do I need this?

It's for accessibility! Screen readers often use a different sound library for each language they support. They can easily switch between those sound libraries, but only when a webpage specifies which language to use.

Typically in your average Next.js website, the deployed page ships only a `<html>` wrapped site, with no language attribute attached.

If you were writing a plain HTML website (or using some other library that allows you to update the shipped HTML files), it would be a simple matter of adding a `lang="en"` to your outputted HTML, like so:

```html
<html lang="en">
```

With Next.js, it's a little bit more involved, but luckily not too difficult!

## Create a Custom Document

Inside of your `pages/` directory (or wherever you put your page components), make a file called `_document.js`. This overrides the default document that is shipped with your Next.js site. Don't worry though, we won't break anything!

Inside of that file, add the following:

```jsx
import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html lang="en"> {/* Add whichever language you want here */}
      <Head />
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}
```

Boom, you're done! Make sure you don't delete the `Html`, `Head`, `Main`, and `NextScript` components, because they are required for your site to be properly rendered. Now, next time you run your performance and accessibility audits, your language settings should be in the clear!
Laravel 9 Best Features
Tags: laravel, php, programming
Published: 2022-02-08 23:23:28

So I went to read up on some Laravel documentation regarding Homestead because you know, Docker on Mac, arghhh, well that is a story for another day.

Anyway, Laravel 9 is out and one of the features that stood out for me was the support for generic types. If you do not know what these are, there is a great article by Ondřej Mirtes regarding them [here](https://phpstan.org/blog/generics-in-php-using-phpdocs).

What does this have to do with Laravel? Well, I am coming to that in a minute. One of my favourite features in Laravel is Eloquent, more specifically, Eloquent relationships. But there has always been something missing, whenever you get the collection instance, the IDE does not know what types are inside the collection. 

Consider the code below, I have been using generic type hinting for a while in my code, more in a documentation capacity.

```
* @property Collection<Notification> $notifications
```
If I call the notifications property, I correctly get that it is an instance of `Collection` but what I don't get is that the contents are instances of `Notification`.

So `$notifications->first()` will simply be an object with no type. I will need to type hint the resulting object if I wanted to get autocomplete.

With this change in Laravel 9, the extra comment type hint is now unnecessary. I can simply type-hint the collection with a generic like above and get the correct instance. This will help clean up a lot of unnecessary comments in the code.

Anyway, if that does not get you excited, you can check out some of the other features [here](https://laravel.com/docs/9.x/releases).
Basic git command you have to know.
Published: 2022-02-08 23:08:16

I will talk about the basic commands about GIT you have to know.

First you need to have installed git.

For now on i will assume that you have installed git.

There are several ways to use git but i will show in the two more basic ways you would need to use it.

Maybe you saw a github repository that you want to saw at your code editor or you want to test it localy or for work or whatever reason you have.
You will need to run on the console the following command
`git clone https://github.com/lautaroCharles/typeApp.git`

You will have to replace the url with the url you want.

Once you run the command you will be able to cd inside the folder and be able to see the code or even run it.

**Now let's talk about if you want to publish your code on github**

First thing you will need is to be inside your project folder. Once you are there you will have to run the following command 
`git init`
This command will initialize git.

After that you will need to run a command to add your code into the staging area
`git add .`
the command above will add your files into the stage area, but maybe you just want one file, for that you will have to run this
`git add index.js`
This way you just will add the changes you made inside index.js

Now that you have your code on staging area we can make a commit with a clear comment, in other blog i will explain how to make clear commits.

`git commit -m 'first commit'`

Now we just have two more steps
`git remote add origin https://github.com/lautaroCharles/typeApp.git`

On the url you will put your empty repository so after that we can push our code like this 
`git push -u origin main`

Now we just have to go to our github repository and see our upload

I will leave some other useful commands
git status: See what is the status of your code, if you have something on staging or something that you can pass into staging.
git branch: See what branches do you have into your repository
git checkout main: (main is the branch name which can have another name) With this command you can change the branch that you currently are.


I will leave this link which a bunch of other git commands [link](https://www.loginradius.com/blog/async/git-commands/)
Mesa de ayuda desde zero
Tags: csharp, tutorial
Published: 2022-02-08 23:01:38

Como desarrollador tengo poco tiempo, apenas un par de anios. En algún tutorial decía: "para aprender un nuevo lenjuaje o framework hazlo sobre un proyecto que ya tengas, para que solo te preocupes por el nuevo lenguaje y no por las reglas de negocio". En algún otro consejo dice que hagas un proyecto personal de tamanio mediano a grande. 
Pero no he podido desarrollar la tarea, por que no conozco las reglas de negocio, me faltan elementos para poder completarlo o al recortarlo y tropicalizarlo pierde el sentido.
Por otro lado mi camino por el desarrollo tuvo un comienzo como mesa de ayuda y hasta el momento se usa ITop de licencia libre, pero la herramienta nunca nos brindo lo que necesitabamos. Recordando esos ayeres tengo los conociminetos necesarios para poder hacer un software de ese tipo.

Hagamos el primer modulo que debe de incluir:
- Registro del equipo de mesa de ayuda.
- Registro de proyectos, agencias y tipos.
- Registro de dispositivos y licencias.

Esta primera parte se hara en MVC Core con c#, en esta fase se hará en un solo proyecto con minimo de clases y con entity framework. 
Posteriormente se hara en capas, una capa de persistencia sin entity framework.

Segundo modulo, mesa de ayuda Tickets
- Registro de tickets
- Seguimiento

Tercer modulo, despliegue
- Instalaciones y seguimiento

Cuarto modulo, mesa de ayuda nivel 2
- Proveedores
- Desarrollo
- Bug
- Nuevos requrimientos
Episode #1: Empowering Junior Developers with Rizèl Scarlett
Tags: beginners, webdev, programming, career
Published: 2022-02-08 22:58:03

_An excerpt from [RenderATL](https://www.renderatl.com/)'s Culture & Code podcast Episode #1: Empowering Junior Developers with Rizèl Scarlett ([@blackgirlbytes](https://twitter.com/blackgirlbytes)):_

**Rizèl:**
I have noticed that like in moving from being in person to remote, like people are more quiet. They're scared to ask questions. We can't tell when they're struggling. So it's something I've struggled with as well.

But similarly to some of the other points I made, we have office hours opened. So if they feel like embarrassed or scared to ask those questions in the moment they can hop into office hours, I think just stressing to them like you're here, you're available ask me anything. **And I don't think junior engineers are that scared to ask questions as people make it seem. I think it's more like sometimes the reaction from other people, I think sometimes I've asked questions and then felt discouraged because they all say like, oh just Google it or something that feels very dismissive.**

And instead of saying just Google it, I think a better thing to say is like try to get them into a pattern of answering all the questions that you need first because of course they already Googled it. So saying like, what's your goal? What have you already tried? And then what was the result? And then after a while, they'll get into that pattern of answering it that way before you even ask them. So I think it's more about showing that you are available to answer questions than doing anything else because I think people are ready to ask questions and also showing that the rest of your team also ask questions. **If you see a senior engineer asking for help, you're like, oh, okay, this is the culture. It's okay to ask questions here.**

_This was an excerpt from [Culture & Code](https://www.renderatl.com/culture-and-code), a podcast brought to you by [RenderATL](https://www.renderatl.com/) that is focused on leveling up your tech career and exploring new technologies._ 

_You can listen to the full episode and read the complete transcript on our website [here](https://www.renderatl.com/culture-and-code/episode-1)._
Day 526 : Rain All Day
Tags: hiphop, code, coding, lifelongdev
Published: 2022-02-08 22:45:46

_liner notes_:
- Professional : Pretty good day today. Took some steps towards seeing a project I've been working on getting closer to being completed. Found out that I'll hopefully be travelling soon! Almost completed a promo video for an upcoming workshop. Just have to do some voice over, but it's been rain all day.

- Personal : Last night I got the dashboard able to fill out a form, make a call to the backend to generate some info and then save all that data to the database and then pull the data. I didn't get a chance to list the data yet though. Ended the night watching an episode of "Demon Slayer".

![Looking down at a Breezy Coast beach with white sand and palm trees toward the bottom of the photo and waves from the ocean crashing onto the beach at the top. ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n67lr5uz88ytqtrs07z6.jpg)

If it ever stops raining, I'll probably try and see if I can do another recording with a better mic for the promo video. I did a quick one with the laptop mic so I could edit some clips around the audio. Hopefully I'll get some time to do that. I want to see if I can finish up with the dashboard for my side project. I want to list the data from the database, edit the data and then "launch" a page from the data. We'll see how far I get. Plus I want to watch another episode of Demon Slayer before calling it a night.

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube d0oWKBC_1MY %}
How Much 13-13-13 Fertilizer Per Acre is Used?
Published: 2022-02-08 22:37:23

Fertilizers are chemicals that quicken up the growth of a plant. Not every soil is equipped for the growth of a variety of crops. That is why we add special fertilizers to complete the deficiency. In the end, you get to sow double of what you reaped.

13 13 13 fertilizer is no different in that criteria. It is a well balanced quick acting fertilizer that contributes to the healthy growth of many plant types. However, to use this fertilizer you must know several factors.

What is [13 13 13 fertilizer](https://www.machinesrating.com/how-much-13-13-13-fertilizer-per-acre/)? What is its nutrient composition? How to use this fertilizer? And so on.Triple 13 fertilizer is named so for a reason. You must have already guessed it. Fertilizer bags usually have numbers mentioned on them with a dash in between.

When you shop for triple thirteen fertilizer, this bag will not be any different. Moreover, it is a general purpose and quick release fertilizer with a high applying frequency. Not to mention, all the nutrients are in proportion and the fertilizer has to be applied repeatedly for it to be effective.
Did you know you can import data tables from any web page to Excel?
Tags: scraping, excel
Published: 2022-02-08 22:35:49

I am 31 years old and I didn't knew this. Everytime I wanted to scrape some data table from a website I had to run a script to do it for me, when in fact it was so easy... like a walk in a park.

Let's have a brief example of what I mean. So how do you go from this...

![wikipedia page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4j0f87vkg10q52qcyosz.png)

to this...

![parsed page in excel](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kd9jq3cbahx2x8o1yfwi.png)

... in less than 10 seconds.

All you need is the page you want to get the data from, in my case it's [this one](https://en.wikipedia.org/wiki/List_of_U.S._states_and_territories_by_population), and the  Excel app opened (you can use Google drive as well).

We will use the `IMPORTXML` function which takes as parameters an `url`, an `xpath_query` and a `locale`. All we need is to pass the `url` and the `xpath_query` of the table.

Our single line of code will look like this:
```
=IMPORTXML("https://en.wikipedia.org/wiki/List_of_U.S._states_and_territories_by_population", "//tr")
```

![excel formula](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ar9g0gr7znp3y3uh61cj.png)

So basically we are telling the program to fetch any table row from the page and display it in our sheet. Easy, right?

Remember that you can modify the `xpath_query` to fetch anything from the page.  For example, if I want to fetch the 22nd row of the table I change the function like this:

```
=IMPORTXML("https://en.wikipedia.org/wiki/List_of_U.S._states_and_territories_by_population", "//table[1]/tbody/tr[24]")
```

Isn't it awesome? I bet it is. Hope you've learned something! :)

#### Support & follow me
| [![Buy me a coffee](https://img.shields.io/badge/Buy_Me_A_Coffee-FFDD00?style=for-the-badge&logo=buy-me-a-coffee&logoColor=black)](https://www.buymeacoffee.com/geowrgetudor) | [![Twitter](https://img.shields.io/badge/Twitter-1DA1F2?style=for-the-badge&logo=twitter&logoColor=white)](https://twitter.com/geowrgetudor) | [![GitHub](https://img.shields.io/badge/GitHub-100000?style=for-the-badge&logo=github&logoColor=white)](https://github.com/geowrgetudor) | [![Linkedin](https://img.shields.io/badge/LinkedIn-0077B5?style=for-the-badge&logo=linkedin&logoColor=white)](https://linkedin.com/in/geowrgetudor) |
| ------------- | ------------- | ------------- | ------------- |
What CTOs Say vs. What Their Developers Hear w/ DataStax's Shankar Ramaswamy
Tags: management, podcast, devops, techtalks
Published: 2022-02-08 22:04:27

Anyone who’s been in a rapidly scaling company with an ever-expanding engineering team knows that communication is never as simple as it seems. 

That’s why we were so excited when Shankar Ramaswamy decided to sit down with Dev Interrupted.

Shankar is a veteran leader in the engineering space, having helped recruit, build and guide developer teams at companies like Amazon, eBay, Paypal and Google - where before leaving he managed a team of 300+ people. 

Now the Head of Engineering at Datastax, Shankar took the time to talk to us about some of the practical lessons he’s learned managing teams of several hundred people, and why something he calls the “intent perception gap” is so tricky for managers to get right. 

We also took the time to talk about Shankar’s views on the future of cloud computing, what healthy conflict looks like at unicorn companies and why you might want to rethink your single-vendor strategy.

{% spotify spotify:episode:55o877iebljGdgPhzjnEhb %}

## Episode Highlights Include:
* (2:54) Shankar’s career from [product management](https://linearb.io/product-manager/) at [eBay](https://careers.ebayinc.com/) to eng at [PayPal](https://www.paypal.com/us/webapps/mpp/jobs)
* (5:35) Why [Amazon](https://www.amazon.jobs/en/) is the only place where junior devs argue about customer experience
* (11:52) What is the intent perception gap? 
* (19:06) Future of [cloud computing](https://linearb.io/blog/the-software-times-they-are-a-changin/)
* (21:07) Why single vendor strategies are a bad idea
* (32:19) Devs have no formal training to handle people problems

## [You're Invited to INTERACT on April 7th](https://devinterrupted.com/event/interact/)

Join engineering leaders from Netflix, Slack, Stack Overflow, American Express & more at LinearB's virtual engineering leadership conference, [**INTERACT**](https://devinterrupted.com/event/interact/) on **April 7th, 2022.**

**1 day, 20 speakers, 1,000s of engineering leaders - all driven by the Dev Interrupted community.** If you are a team lead, engineering manager, VP or CTO looking to improve your team, this is the conference for you!

[**Learn more here**](https://devinterrupted.com/event/interact/)


![Join INTERACT at https://devinterrupted.com/event/interact/](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2xhtonct1vkpjhrtzfl3.png)
AWS Serverless technology helps enable Digital Transformation
Published: 2022-02-08 22:03:19

Cloud-native software plays a critical role in unlocking the full revenue potential of 5G & Digital applications, but it even goes beyond that. Being first to the cloud means being the first to realize the benefits of economies of scale, and the level of interoperability and efficiency that the cloud offers.

The cloud platforms capabilities are helping service providers accelerate their digital transformations and take advantage of Cloud native software, like BSS product portfolio.  Infrastructure-as-a-Code, autoscaling, and managed cloud services – used in conjunction with new innovations such as AI/ML, serverless computing

 

One of the Digital Business platforms hosted in AWS is built on Open APIs and a cloud-native micro-services architecture.

Open APIs in combination with serverless integration technology enable you to rapidly integrate systems and deliver business outcomes in days. And you can achieve these outcomes while keeping operational costs low and providing almost infinite scaling.

The below example shows a  typical integration scenario where account data needs to be replicated into legacy systems whenever a new customer is registered on the platform. In order to achieve this,

1-     the BillingAccountCreated event from the digital business platform is registered in the Amazon API Gateway that triggers the start of an AWS Step Functions flow.

2-     The process orchestrates a set of AWS Lambda functions that firstly retrieve additional data from the DBP through an API call, create the account in the legacy customer relationship management (CRM) backend system

3-     Finally add the user to the legacy enterprise resource planning (ERP).

 



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

Through the use of AWS serverless technology, the implementation of the integration flow does not require to set up any complex application runtime infrastructure and enables the developer to quickly implement the necessary API calls using any of the supported programming languages. The AWS Step Functions flow maintains the state of the process and orchestrates the required steps.

The use of serverless technology greatly simplifies the implementation of typical integration scenarios and provides a quick and cost-efficient way to rapidly integrate APIs. In combination with Open APIs this provides a really efficient way to deliver a complete E2E solution within days allowing to meet the requirements of the business faster than ever before.

#AWS #digital transformation #StepFunction # Serverless
Why an array is an object in JavaScript?
Tags: javascript, webdev, programming, todayisearched
Published: 2022-02-08 21:57:50

JS is a prototype-based language, so there are only primitive types and objects. It grants flexibility but makes things more confusing at the same time.

## 👉 Everything is an object!

Implementation of all non-primitive values in JavaScript is object-based.
Simply put, JavaScript has a single prototypical object from which all other objects get their initial properties. We can get it by accessing `__proto__`.

```js
Object.getPrototypeOf(Object).__proto__;
Object.getPrototypeOf(Array).__proto__;
Object.getPrototypeOf(Boolean).__proto__;

// The prototypical object of every object
{
  constructor: ƒ Object()
  hasOwnProperty: ƒ hasOwnProperty()
  isPrototypeOf: ƒ isPrototypeOf()
  propertyIsEnumerable: ƒ propertyIsEnumerable()
  toLocaleString: ƒ toLocaleString()
  toString: ƒ toString()
  valueOf: ƒ valueOf()
  __defineGetter__: ƒ __defineGetter__()
  __defineSetter__: ƒ __defineSetter__()
  __lookupGetter__: ƒ __lookupGetter__()
  __lookupSetter__: ƒ __lookupSetter__()
  __proto__: (...)
  get __proto__: ƒ __proto__()
  set __proto__: ƒ __proto__()
}
```

## 👉 Every array is an object too!

The array type is not an exception here. `Array` global class is [a global object](https://developer.mozilla.org/en-US/docs/Glossary/Global_object) and an array literal is just an instance of the `Array` global class.
In turn, a direct prototype of the array type contains all its special methods, like fill, find, etc.

```js
// true
Object.getPrototypeOf(Array).__proto__ === Object.getPrototypeOf(Object).__proto__
Object.getPrototypeOf([]).__proto__ === Object.getPrototypeOf(Object).__proto__


Object.getPrototypeOf([])
[
  at:  ƒ at()
  concat:  ƒ concat()
  constructor:  ƒ Array()
  copyWithin:  ƒ copyWithin()
  entries:  ƒ entries()
  every:  ƒ every()
  fill:  ƒ fill()
  filter:  ƒ filter()
  find:  ƒ find()
  findIndex:  ƒ findIndex()
  findLast:  ƒ findLast()
  findLastIndex:  ƒ findLastIndex()
  flat:  ƒ flat()
  ...
]
```

## 👉 How is it implemented in the JavaScript engine?

Similarly, arrays are a special case of objects inside the JavaScript engine.
But they have:
- special handling of indices
- a magical length property

*To understand how objects work, check out [my article](https://dev.to/fromaline/why-does-dynamically-adding-properties-is-slow-in-javascript-4hm8)*.

## 👉 Indices handling

Array indices are represented as strings, that contain numbers.
So every element inside an array is associated with a numeric string.

![indices handling](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/njlq05flkg8frdlhe2im.png)

## 👉 Length property

The length is just non-configurable and non-enumerable property. The JavaScript engine automatically updates its value once an element is added to the array or deleted from it.

![length property](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/thv6xb2qtmyhullmve0r.png)

---

P.S. [Follow me on Twitter](https://twitter.com/fromaline) for more content like this!

{% twitter 1485684303891771393 %}