teleren/devto huggingface dataset:
Identificar posibles mejoras de CSS en su sitio web
Tags: css, developers, chrome, devtools
Published: 2022-03-10 00:45:00

---
title: Identificar posibles mejoras de CSS en su sitio web
published: true
description: Esta función es útil cuando realiza modificaciones CSS en la interfaz de usuario y ya no necesita utilizar herramientas de terceros como el selector de color.
tags: CSS, developers, chrome, DevTools
cover_image: https://www.wootsbot.dev/_next/image?url=%2Fstatic%2Fimages%2Fblog%2Fidentificar-posibles-mejoras-de-CSS-en-su-sitio-web%2Fpreview.jpg&w=3840&q=100
---

Esta característica nos ofrece información detallada sobre colores, fuentes, media queries y declaraciones no utilizadas (Unused declarations).
Esta función es útil cuando realiza modificaciones CSS en la interfaz de usuario y ya no necesita utilizar herramientas de terceros como el selector de color.

> Se trata de una función en faces de pruebas de Chrome 96. El equipo de Google Chrome está trabajando activamente en esta función.

## Activar CSS Overview

### CSS Overview panel

- Abra cualquier página web
- Abra DevTools
- Haga clic en Más opciones> Más herramientas> CSS Overview.

![CSS Overview panel](https://www.wootsbot.dev/_next/image?url=%2Fstatic%2Fimages%2Fblog%2Fidentificar-posibles-mejoras-de-CSS-en-su-sitio-web%2Fstep-2.png&w=3840&q=100)

### Ejecutar CSS Overview report

- Haga clic en el botón Capturar descripción general (Capture overview) para generar un informe de descripción general CSS de su página.

![Ejecutar CSS Overview report](https://www.wootsbot.dev/_next/image?url=%2Fstatic%2Fimages%2Fblog%2Fidentificar-posibles-mejoras-de-CSS-en-su-sitio-web%2Fstep-3.png&w=3840&q=100)

### Overview summary

Un resumen de alto nivel del CSS de su página.

![Overview summary](https://www.wootsbot.dev/_next/image?url=%2Fstatic%2Fimages%2Fblog%2Fidentificar-posibles-mejoras-de-CSS-en-su-sitio-web%2Fstep-3.png&w=3840&q=100)

### Colores

Todos los colores de tu página. Los colores están agrupados por usos como colores de fondo, colores de texto, etc. También le muestra los textos que tienen problemas de bajo contraste.
![Colores](https://www.wootsbot.dev/_next/image?url=%2Fstatic%2Fimages%2Fblog%2Fidentificar-posibles-mejoras-de-CSS-en-su-sitio-web%2Fstep-5.png&w=3840&q=100)

Se puede hacer clic en cada uno de los colores. Por ejemplo, digamos que este color de borde `#52A9FF` no coincide con el esquema de color de su sitio, haga clic en él para obtener una lista de los elementos que usan el color.

![Colores](https://www.wootsbot.dev/_next/image?url=%2Fstatic%2Fimages%2Fblog%2Fidentificar-posibles-mejoras-de-CSS-en-su-sitio-web%2Fstep-6.png&w=3840&q=100)

## Conclusión

Utilice el panel Descripción general de CSS (CSS Overview) para comprender mejor el CSS de su página, con esto puede identificar posibles mejoras ya aplicarlas en sus paginas.

links: 
- https://www.wootsbot.dev/blog/identificar-posibles-mejoras-de-CSS-en-su-sitio-web
CSS Combinators : All about CSS ~ selector. Learn CSS 2022
Tags: css, webdev, beginners, html
Published: 2022-03-10 00:33:03

A Complete guide on CSS combinators 2022. You can find everything you need to know about CSS Combinators in this blog.

Hey 👋, I am Kunaal. In the article, we'll talk about something called CSS Combinators or you may have seen somethings like `div ~ span` or `div > p` that exactly what we are going to discuss today. So without wasting more time let's start.

#📌 What are combinators ?

Well these are the combination of simple CSS selectors. What do I mean ? Means the class selector, id selector or even tag selectors everything in CSS are simple selector and when we use more than 1 selector it make a combinator selector. For instance. 

`div` and `p` are simple selector but together `div p` they are now combinator selectors.

Basically combinator selector defines a relationship between the selectors.

#1. Descendant Selector
Its basically selects all the elements inside or descendant to the specified element. For instance

```CSS
div p {
   color : red;
}
```
It will colour / style all the `<p>` elements inside `<div>` elements including all the nested `<p>` elements. Nested elements are those who are nested in a container like
```HTML
<div>
    <p>Paragraph</p>
    <h1><p>Nested Paragraph</p><h1>
</div>
```
#2. Child Selector ( > )
Its selects all the elements inside the specified element excluding the nested elements. For instance,
```CSS
div > p {
   color: red;
}
```
So the above example will select all the `<p>` elements of `<div>` element but it will not affect the nested `<p>` elements.
#3. Adjacent Sibling Selector (+)
Adjacent Sibling Selector selects the elements the just after element of the specified element. For instance,
```CSS
div + p {
   color: red;
}
```
So the above code will only select the `<p>` element which is just after the `<div>` element. Example -
![Image ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nknt8fxforxef1hyafva.png)
 
#4. General Sibling Selector (~)
This is the last one and it selects all the elements after the specified element. For instance,
```CSS
div ~ p {
  color: red;
}
```
Above example will select all the `<p>` elements after the `<div>` element. Example -

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

#📌 Wrap up

So that's it. This was all about CSS Combinators, I hope you liked the article and this article was helpful for you. If you do liked it or don't want to miss out more interesting web dev tips and tricks, you can follow me on my [Instagram](https://www.instagram.com/modern_web_channel/) or you can just simple subscribe my [YouTube](https://www.youtube.com/c/modernweb?sub_confirmation=1) channel if you want to master web development.

Thanks for reading
Laravel Presentable for Eloquent Models
Tags: laravel, php, blade, eloquent
Published: 2022-03-10 00:07:52

---
title: Laravel Presentable for Eloquent Models
published: true
description: Awesome package for present your information on blade views
tags: laravel, php, blade, eloquent
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oy5hyimx16f8q4ytu82i.png
---

Hey there!

Today was release of Laravel Presentable Package to [0.0.2](https://github.com/datacreativa/laravel-presentable/releases/tag/v0.0.2) versión for support Laravel Framework v9.

This package allow create presenter classes for Eloquent models. A presenter class allows you to separate displays concerns from model data in a specific class.

Installation

```
composer require datacreativa/laravel-presentable
```

For example add the trait HasPresentable to User Model.

```php

use App\Models\Presenters\UserPresenter;
use TheHiveTeam\Presentable\HasPresentable;

class User extends Model
{
    use HasPresentable;

    protected $presenter = UserPresenter::class;
}

```

$presenter property that defines the presenter class.

Here's an example of what a presenter class will look like:

```php
namespace App\Models\Presenters;

use TheHiveTeam\Presentable\Presenter;

class UserPresenter extends Presenter
{
    public function name()
    {
        return ucwords($this->model->name);
    }
}
```

Using the User model as an example, you can now access presenter methods in the view:

```php
$user->present()->name;
```

If you find that separating view display logic into a dedicated presenter class makes sense, this package could be an excellent fit.

For more info, here the repository
https://github.com/datacreativa/laravel-presentable

Regards,
Jonathan
Day 546 : Turn Around
Tags: hiphop, code, coding, lifelongdev
Published: 2022-03-09 23:45:28

_liner notes_:
- Professional : Went through the code for my demo application and cleaned some stuff and refactored some other stuff. While doing the refactor, I uncovered some possible bugs and worked my way through them. It was like I would fix one thing, turn around and then something else would break haha. I think I got everything. I sent a question to the engineering team to see if there was a more straight-forward way to do something that I had to make a work around for.

- Personal : I worked on the overlay part of my side project. Got notifications and stuff to show up. Also did some styling. It's looking pretty good. I want to do some more testing to make sure everything is working. I then made some more progress on a design for a t-shirt I'm working on. There's only so much I can do with the keyboard and trackpad. Going to see if I can get what I want by using a stylus. Then I ended the night watching an episode of Atlanta.


![Orange hills of Masada, Israel](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/17y0lv46h6w0ihwrv3wu.jpg)

Want to see if I can get the contest part of the site working. I did some of the ground work earlier, so now I think I just have to display the response to some calls to the backend on the overlay site and determine a winner. Let's see how far I can get. Also want to finish up that design and put in an order for a shirt before my trip. Then, again, end the night watching Atlanta.

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube cf1IG6kGk6U %}
100 días de código: 85, comenzando a crear los componentes de mi blog en Next
Tags: spanish, webdev, 100daysofcode, beginners
Published: 2022-03-09 23:41:39

¡Hey hey hey!

Hoy he comenzado a crear el proyecto de mi blog con Next.js.

Ahora comienzo a notar como voy aprendiendo mas sobre Next.js al ritmo de la practica. Sinceramente no me parece un framework difícil de utilizar aunque el tiempo y el uso me enseñara si tengo razón en ello o no.

Hoy no tengo mucho tiempo asi que vayamos con lo que hice...
### Hoy
- Cree algunos componentes de mi proyecto blog.
- Cree su repositorio utilizando la herramienta gh.
- Practique Touch Typing.

Espero que tengan mucho éxito con sus proyectos!

Hasta la próxima!

Foto de [Luca Bravo](https://unsplash.com/@lucabravo?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) en [Unsplash](https://unsplash.com/s/photos/dev?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText).
QA to dev
Tags: career, discuss, testing, programming
Published: 2022-03-09 22:22:59

It's been a while since I wrote something here.. lots has changed.

I used to be a QA.

I'm a dev now.

Transition is still going on, in my head and skills. In IT there is no such thing as successful stagnation. You have to keep on going, or you'll be left behind. That can be scary, but brings exciting opportunities. You can reinvent yourself, learn, grow, shift roles, move between jobs.

Talking to people that would like to make a career switch I often hear that it is all so overwhelming. All the myths of the genius dev, sitting at the computer on his own, away from people... that's not how most devs are, and it's not how you have to be to land a job in IT. 

Being a QA is to be observant, understanding, inquisitive, always looking for loopholes.

Being a DEV is to keep a lot of moving parts in your head, looking for best+fastest solutions, working hard and being helpful.

Actually, you can switch the definitions around and they will still be true. Working in different technical roles in IT requires similar skills, with more emphasis on a particular technical part or a specific angle of looking at a given challenge.

There is place for all different types of people, different backgrounds and forte. You are welcome to join, there is space.
Welcome Thread - v167
Tags: welcome
Published: 2022-03-09 21:49:58

---
title: Welcome Thread - v167
published: true
description: Welcome to DEV! A thread of hellos and intros.
tags: welcome
canonical_url: 
---

![Alien waving hi](https://media.giphy.com/media/l378nv5qEQq7gHli8/giphy-downsized-large.gif)

### Welcome to DEV!

1. Leave a comment below to introduce yourself! You can talk about what brought you here, what you're learning, or just a fun fact about yourself.

2. Reply to someone's comment, either with a question or just a hello. 👋 

**Great to have you in the community!**
hyper Enhancements
Published: 2022-03-21 13:39:22

---
title: hyper Enhancements
published: true
date: 2022-03-09 21:34:25 UTC
tags: 
canonical_url: https://hyper-io.medium.com/hyper-enhancements-4f5b55f0440a
---

Announcing the Crysknife release!

![](https://cdn-images-1.medium.com/max/1024/0*ics-OEGrkcdlgO38.png)

The hyper team is pleased to announce [new enhancements](https://docs.hyper.io/cloud/whats-new) to our service cloud platform for startups. hyper cloud is a scalable, backend cloud-based service to store and retrieve resources such as data, files, cached data, etc. **No dev-ops required**.

**Enhancements**

- 🚀 Updated hyper-connect with Queue and Storage. The [hyper-connect](https://docs.hyper.io/cloud/hyper-connect) SDK now supports queue and storage services.
- 🔥[Delete a service instance](https://docs.hyper.io/cloud/whats-new#zl-delete-a-service-instance)
- 🎉 [hyper-ext-model](https://github.com/hyper63/hyper-ext-model) is an experimental hyper-connect extension that creates a model for an application that uses the hyper service.
- 🎓 New NodeJS [Queue Quickstart](https://docs.hyper.io/cloud/whats-new#mx-new-queue-service-quickstart)
- 😎 [hyper vision enhancements](https://docs.hyper.io/cloud/whats-new#wl-hyper-vision-enhancements)
- 🪄 [Enhanced service type progress steps](https://docs.hyper.io/cloud/whats-new#ey-enhanced-service-type-progress-steps)
- 👩🏽‍💻 [Improved error responses](https://docs.hyper.io/cloud/whats-new#ta-improved-error-responses-from-cloudhyper) from cloud.hyper

> 🍾 We’ve reached over 100 accounts created on hyper cloud. [Sign up](https://dashboard.hyper.io/) for a **free** hyper cloud account.🍾

For more details, head on over to [What’s New](https://docs.hyper.io/cloud/whats-new).

Keeping it steezy,

The hyper team
Project Skill Tree: Desktop and Mobile App View
Tags: ux, webdev, design, product
Published: 2022-03-09 21:31:49

## Contents

- [Link to Figma work](https://www.figma.com/file/2HIVXfIRBTeEJy5QnTphSY/skill-tree?node-id=3%3A19)
- [Disclaimer](#disclaimer)
- [Introduction](#introduction)
- [Design Decisions](#design-decisions)
- [Conclusion](#conclusion)

## Disclaimer

The color schema will be editable by the user. That being said, the initial Figma design is intended for design clarity.

## Introduction

&emsp; Today, I designed the application pages of the [teacher view and the mobile view](https://www.figma.com/file/2HIVXfIRBTeEJy5QnTphSY/skill-tree?node-id=3%3A19).

## Design Decisions

&emsp; The student view served as an excellent template for the teacher view. Because the student and teacher views shared the same areas, a simplified mobile view will suffice.

&emsp; I will need to keep in mind that the majority of people are most likely going to use their phones to access the website. I will need to focus on making an excellent mobile experience.

## TODOs

- I wonder how hard it would be to turn this into a PWA ([progressive web app](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps))

## Conclusion

&emsp; The application views are basically complete. It's time to get started with building the MVP.
What Would be Useful in Your GraphQL Work?
Tags: graphql, discuss, javascript, json
Published: 2022-03-09 21:26:57

---
title: What Would be Useful in Your GraphQL Work?
published: true
description: If you're working on learning about GraphQL or currently building resources with GraphQL, what references would you have wanted? Does anything pop into mind?
tags: #graphql #discussion #javascript #json
//cover_image: https://direct_url_to_image.jpg
---
If you're working on learning about GraphQL or currently building resources with GraphQL, what references would you have wanted? Does anything pop into mind?

I'm putting together a curated page focused on GraphQL reference material, organizations, and products here.

Would love your input. Feel free to leave a comment there on the page, or here, about what you'd like to see added to this list so that it's more useful for us all.

https://compositecode.blog/the-expanse-of-graphql/
Download Instagram photos with just one click! 📷 ⤵️
Tags: productivity, tooling, tutorial, webdev
Published: 2022-03-09 21:26:08

Hi folks 👋,

We all use **Instagram**. Sometimes, we need to **download photos** from there for some reason. If you've ever tried it, you must know how it is difficult even if you know how to inspect element on browser. 

For making it easier for people who want to download images from Instagram, I coded a tool which allows you to download these images with one click. Here is the link.

[https://10015.io/tools/instagram-photo-downloader](https://10015.io/tools/instagram-photo-downloader)

You just need to enter Instagram post URL and that's it. Your download links will appear on the screen right away after you click "Get Images". Keep in mind that post must be publicly available.

Here is how it looks.

![Instagram image downloader](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fcvkvsgebtxb161sqee8.png)

The UI is very simple and easy to use. If you want to ask anything or make any suggestion, just write a comment.

For more tools, you can visit [10015.io](https://10015.io).
React Components: Just Like Watching the News
Tags: react, javascript, programming
Published: 2022-03-09 21:15:49

Many ideas in React are hard for beginners to wrap their heads around. For me, I had trouble understanding how React components work, but more specifically, how they work together. This analogy is designed to help you understand the following:

1 - What are React components
2 - How do React components work together to build an app.

First, let me explain what React components are. React components are independent functions that accept inputs(i.e. props) and returns a React element that can be reused throughout your application. React applications use multiple components to ultimately give the app the look and functionality desired. There are parent components and children components, ultimately making up a React component tree, shown here:

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

All the components in this component tree work together to produce a wonderful application. Here is an image highlighting the different components on the Google homepage. Each highlighted component has its own functionality that adds a specific aspect of the page. When you bring all the components together, it gives you the desired look/functionality as a whole. After you have finished reading this blog, sketch out and send me what you think this component tree looks like.

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

The analogy is this. Everyone has watched a news broadcast like NBC Nightly News. No matter which station you're watching, the daily broadcast, or show that you watch each day is the application for this analogy - the end result. Each show has a head news anchor sitting at a desk and reporting to you. They also have a whole team of news anchors that are sent out to report on various stories all around the world. The news anchors are the components - the individuals who have a story to report on. The head news anchor acts as the parent component, essentially driving the show, where as the various news anchors who are reporting on specific stories are the child components. The child components are reusable in this case because for tomorrows broadcast, they will be covering a different story. When all the news anchors do their job, they work together bringing you the end result, which is an hour long program that is executed the way it was designed - just like the React components do to create the application. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m2ptzy29z843bwazi4fg.png)
Fixing ClassName did not match error
Tags: nextjs, typescript, styledcomponent, react
Published: 2022-03-09 20:33:32

```
Warning: Prop `className` did not match. Server: Client:
```
This is probably one of the most annoying problem with Next.js, Typescript and styled-component luckily there's a work around for this.

You're gonna need to install babel-plugin-styled-components

```
yarn add --dev babel-plugin-styled-components
```

Create a file named .babelrc in the root directory and configure it. Here's the config file.

```
{
    "presets": [
        "next/babel"
    ],
    "plugins": [
        [
            "styled-components",
            {
                "ssr": true,
                "displayName": true,
                "preprocess": false
            }
        ]
    ]
}
```

Restart your server and refresh your server and you should be good. 

[Here's the issue on Github](https://github.com/vercel/next.js/issues/7322)

Ciao
Software Development Opportunity!
Tags: java, backend, linux, career
Published: 2022-03-09 20:12:23

Did you know that AWS Security is hiring SDEs nationwide?

The Amazon Foundational Security Services org is hiring experienced Software Development Engineers to join their growing team! If you're interested in learning more about the roles, team, or AWS in general please reach out to me at butzm@amazon.com us or apply to the role below.

https://www.amazon.jobs/en/jobs/1899650/software-development-engineer

What are the requirements?
· 1+ years of experience contributing to the system design or architecture (architecture, design patterns, reliability and scaling) of new and current systems.
· 2+ years of non-internship professional software development experience
· Programming experience with at least one software programming language.
· Bachelor's degree in Computer Science (or related field), or equivalent work experience
· Minimum of 5 years software development experience in a combination of any of the following languages: Python, Ruby, Java, C++, C#
· Minimum of 5 years experience working with Linux OS
Wordle Clone Using HTML CSS and Javascript
Tags: javascript, webdev, tutorial, html
Published: 2022-03-09 19:56:01

In this video, I have created a live working Wordle clone.

For those who don't know what Wordle is, Wordle is a five letter word guessing game. You get six tries to guess the right word and every time you guess a word, you get feedback regarding the letters.

A Green feedback on a letter means the letter is correct and on the correct location in that word.

A Yellow feedback on a letter means that letter is present in the word but not at this location.

A Grey feedback means the letter is not present at all in that word.

I hope you enjoy this video tutorial.

{% youtube eYiZa9bUTGs%}