teleren/devto huggingface dataset:
Today I learned!
Tags: beginners, css
Published: 2023-07-18 14:01:01

Hello everyone!

Unfortunately, I'm retyping this because my draft did not save. But I am taking this as an opportunity to review again! :)

Anyways.... as I had previously written. I was getting confused with all of the new terms I was learning. So, I thought I would create a little cheat sheet that I can reference. 

- The extension for CSS files is .css. These can be linked to an HTML file using a <link> tag in the <head> section.

- CSS code can be written in an HTML file by enclosing the code in <style> tags. 
TERMS
- CSS classes: can be reusable and applied to many elements. Class selectors = . followed by the class name.

- CSS ID selectors: unique and used to style only a single element. ID selectors = # followed by the id name.

- CSS type selectors: match all elements of a given type or tag name. Unlike for HTML syntax, we dont include the angle brackets when using type selectors for tag names. 

- The CSS class selector matches elements based on the contents of their class attribute. a.

- Selector specificity: the selector with the highest specificity wins out. The most specific selector type is the ID selector, then class selectors, and then type selectors.

- CSS ID selector: matches elements based on the contents of their id attribute. The values of id attribute should be unique in the entire DOM. # 

These are the ones I was confusing but typing them out and rereading definitely helped me review. 


Excited to continue learning!!!
Custom Error classes with Apollo Server
Tags: webdev, javascript, node, graphql
Published: 2023-07-18 14:47:37

---
title: Custom Error classes with Apollo Server
published: true
description: Learn how to use custom Errors with Apollo Server
tags: webdev, javascript, node, graphql
---

Recently, I was tasked with upgrading an older version of apollo-server-express with the newer @apollo/server package. apollo-server-express is approaching end of life this year and we wanted to take advantage of all of the new features apollo had introduced in the last two years. While there were several differences involved in the upgrade, one particular change caught our attention—the removal of support for custom error classes that we had used extensively used in our application. The challenge we faced was to find a solution that allowed us to seamlessly transition to the new version without disrupting our existing users.

In the previous version, we handled unauthorized access much like the following code snippet:

```jsx
if (!hasAccess) {
	// Removed!
	throw new ForbiddenError("You don't have access");
}
```

The recommendation from the [apollo upgrade docs](https://www.apollographql.com/docs/apollo-server/migration/#built-in-error-classes) was to replace these instances with `GraphQLError`, like so:

```jsx
if (!hasAccess) {
	throw new GraphQLError("You don't have access", extensions: { code: 'FORBIDDEN' });
}
```

While this technically resolved our problem, it felt cumbersome to add the **`extensions`** property to all our old errors. However, we found a simple and elegant solution inspired by Apollo's previous approach: extending **`GraphQLError`** to create our own custom errors.

To accomplish this, we defined our custom error classes as follows:

```jsx
export class AuthenticationError extends GraphQLError {
  constructor(message: string) {
    super(message, {
      extensions: {
        code: 'UNAUTHENTICATED',
        http: {
          status: 401,
        },
      },
    });
  }
}

export class ForbiddenError extends GraphQLError {
  constructor(message: string) {
    super(message, {
      extensions: {
        code: 'FORBIDDEN',
        http: {
          status: 403,
        },
      },
    });
  }
}
```

Creating our own custom errors allows us to encapsulate setting and sending `extensions` in one place, which ensures we’re consistent with how we’re responding to these errors. As an added bonus it gave us an opportunity to send down a 401 or 403 status code when throwing the appropriate error, which had been requested by a few of our clients.

This turned what could have been a lot of work into a really straightforward upgrade path. By simply updating the imports, we were able to resolve the majority of our issues while maintaining the same functionality. This meant that consumers of our API wouldn't need to make any changes to adapt to our system, ensuring a smooth transition.
DevRel e Programas de T&D
Tags: devrel, community, productivity, career
Published: 2023-07-18 14:46:56

Você sabe que seis em dez profissionais precisarão de treinamento? 

Como entusiasta de treinamento e desenvolvimento ou apenas T&D, acredito que a conexão, o engajamento e a transformação são elementos fundamentais para o processo de treinamento e desenvolvimento.

Essa estatística relevante do Fórum Econômico Mundial apenas reforça a relevância da área de T&D para o futuro de organizações e indivíduos. Afinal, um não é possível sem o outro!

A grande questão é: como podemos aumentar as tendências globais de treinamento para levar empresas e pessoas a novos patamares?

Acredito tanto em T&D que, nos últimos anos, tenho tido experiências relevantes para além das ONGs em que trabalho. Na Vindi onde trabalho como DevRel, temos o #EducaVindi, #TransformaVindi e apoiamos o #Treinadev da Campus Code, entre outras iniciativas internas como o Programa de Desenvolvimento de Lideranças e Programa de Mentoria. Todas essas iniciativas pretendem auxiliar indivíduos e organizações a manterem-se na vanguarda em treinamento e desenvolvimento.

Qual é a parte mais relevante? 

Ao ingressar na Vindi, tive a oportunidade de ter acesso a esses recursos de ponta e participo agora de uma organização que tem como foco o crescimento e o desenvolvimento de seus colaboradores.

Sendo assim, se você estiver à procura de uma companhia que se compromete a permanecer na liderança e investir nos seus funcionários, procure locais onde o conhecimento e o desenvolvimento pessoal e profissional possam fazer a diferença.
A Live Auction Market
Tags: webdev, beginners, ai, webmonetization
Published: 2023-07-18 14:46:35

## Introduction

What if there is an online platform where only one auction takes place at a time and the users can bid for the product in live. You have to wait in the queue for placing your product for the auction.

## The queue strategy
Of course, everyone will think like why the queue in this modern technology era where you can handle each auction separately in a server. But, here comes the catch. It's hard to get your product noticed while submitting for auction in a platform like eBay or other web apps. 
Our app makes one auction live at the home page and others have to wait. So, every users can engage in a certain auction at a time.

## UX design
There should be only one page for the app where an auction would be going live. A button in some corner will let you create your own auction and after creation, it will show the position in the queue. Also the app will show the number of users online.

There would be a notification system through email or other contact medium which will let the user know if their auction is about to go live.

## User credentials
We have to collect user credentials like name, age, and contact details to let them enrolled in the auction. 

## Share you ideas
Share your ideas to develop this insight and let me know in the comments if you are interested in this project.


Thanks.
"Use Backstage to create your asset and Template management" by Mansura Habiba at PyLadies Dublin March 2023 (2/2)
Tags: pyladies
Published: 2023-07-18 14:43:11

## Meetup Details
* https://www.meetup.com/pyladiesdublin/events/291759914

### Announcements and slides
{% embed https://github.com/pyladiesdublin/mar-talks-2023 %}

---
Note: This video is talk 2 of 2. 

## TALK 2: Use Backstage to create your asset and Template management
We will run the steps to run a backstage application on local system and create template for nodejs application from that . We will also code the steps to configure backstage for prepare a dynamic documentation portal.

### About Mansura Habiba
Platform Architect @ IBM hybrid cloud management. Author of "Hybrid Cloud Infrastructure and Operations Explained: Accelerate your application migration and modernisation journey on the cloud with IBM and Red Hat"

* https://twitter.com/MansuraHabiba
* Book: https://www.amazon.com/Hybrid-Cloud-Infrastructure-Operations-Explained-dp-1803248319/dp/1803248319/

---

📢 CALL FOR SPEAKERS 
Interested in speaking at our upcoming meetups:

* https://sessionize.com/pyladies-dublin-meetup

---

Original uncut video
{% embed https://www.youtube.com/live/advAYXfJvJI %}

---

🔍 FAQ
Q. I'm not female, is it ok for me to attend?
A. Yes, PyLadies Dublin events are open to everyone at all levels.

Q. What do you do at PyLadies Dublin Meetups?
A. We have short (or long talks), demos, folks working on their own projects, ask questions on Python-related topics, work on projects together or generally chit-chat & meet like-minded people.

Q. Do you have a Code of Conduct?
A. Yes, you can find it at dublin.pyladies.com

Q. I am interested in giving a talk, where do I submit my interest and talk details?
A. You can submit your talk details to the following form:
https://sessionize.com/pyladies-dublin-meetup

Q: Where can I find the original live-stream?
A: Original uncut livestream: https://www.youtube.com/watch?v=advAYXfJvJI

Q: What did you use in post-production?
A: Davinci Resolve by Black Magic Design, it's free! https://www.blackmagicdesign.com/products/davinciresolve

Thumbnails are made via Canva (pro) including the intro and outro.
Imaginary Scalability
Tags: scalability, architecture
Published: 2023-07-18 14:34:30

I have seen so many #startups with imaginary #scale problems. Everybody dreams about high loads and crazy and expensive overcomplicated hype-driven #architecture. I have a bingo like list : #aws , #serverless , #kubernetes , #kafka. #nosql.

Some times main bottleneck is team mindset. I have seen more cases where people and processes are not scaling - all other scalability is a coproduct of team topology and people #mindset.

Is your idea scalable?

Is your team scalable?
Bootcamp React Feature Toggle - Apresentação do projeto
Tags: react, frontend, vite, webdev
Published: 2023-07-18 14:01:46

Bem-vindos ao Bootcamp React Feature Toggle! Neste curso, vamos utilizar uma série de tecnologias populares para desenvolvimento web, incluindo TypeScript, React, Vite, Vitest, Firebase, ESLint e Prettier.

Durante o bootcamp, iremos nos concentrar no recurso de "feature toggle" - uma técnica que permite habilitar ou desabilitar recursos de software em tempo de execução, ajudando a controlar o comportamento de uma aplicação em produção. E para isso, além das tecnologias mencionadas, também vamos utilizar o Remote Config do Firebase - uma plataforma que nos permite atualizar as configurações da nossa aplicação em tempo real.

Neste primeiro vídeo,  vamos apresentar o projeto que iremos construir ao longo do bootcamp, explicando os objetivos e funcionalidades que queremos alcançar.

{% youtube https://youtu.be/RMenyp9Jskk %}
Atalhos incríveis pro Git com ZSH
Tags: git, development, frontend, webdev
Published: 2023-07-18 14:27:12

> Sim! eu prefiro o ZSH do que o Bash!

1. Primeiro porque tem **_atalhos do Git_** que facilitam um absurdo o nosso dia a dia.
2. Tem o plugin _**autosuggestion**_, só por isso já deu né!
3. Tem o plugin **_highlight_**
4. E também posso citar os Themes (que são legais pra caramba), mas isso é floricultura, então só os 2 primeiros já dão conta.

<p/>
<p/>
### Vamos ao que interessa
Você também deve executar alguns comandos GIT repetidas vezes durante seu dia.

_Esses são alguns dos mais comuns e provavelmente você conhece bem._

```bash
git status
git add .
git checkout
git pull
git push
```
Se você chegou nesse artigo, provavelmente é como eu. Adora teclas de atalho e prefere economizar em digitações 💖<br><br>


## 1 - Primeiro Passo... Use o ZSH

A dica fundamental e primordial é... **Use o ZSH** como seu terminal padrão no VS Code.

Nesse artigo não vou explicar como instalar, o mestre [Otávio Miranda](https://www.youtube.com/@OtavioMiranda) tem alguns vídeos sobre esse processo de instalação, ninguém explica melhor que ele esse processo, inclusive tem pra Win, Mac e Linux, deixei os links abaixo.

**Instalação Linux**
https://www.youtube.com/watch?v=5i3TpDR8muU

**Instalação Windows**
https://www.youtube.com/watch?v=y-w-gamp4U0

**Instalação Mac**
https://www.youtube.com/watch?v=bs1-Wxb_KIc <br><br>

## 2 - Atalhos Felizes!

Com a instalação feita, vou deixar abaixo alguns atalhos que no ZSH já estão configurados por default.

`gst`  = `git status`
`gaa`  = `git add --all
``gb`  = `git branch` (lista das branchs locais)
`gco` <*nome-branch*>  = `git checkout`
`gl`   = `git pull`

No link do projeto do Oh My SZH você pode conferir todos os alias, vários serão muito úteis no seu dia a dia.

[Atalhos Git](https://github.com/ohmyzsh/ohmyzsh/blob/master/plugins/git/git.plugin.zsh) 

Espero ter ajudado e até a próxima pequeno gafanhoto!
How to install java 21 JDK-Early Access Edition
Tags: java
Published: 2023-07-18 13:58:06

Hello, welcome to read this article, I hope you find the best out of it. In this article, I will be listing the steps in installing java 21 JDK. As at the time you are reading this article, JDK 20 is the latest release of Java SE Platform and JDK 17 LTS is the latest long-term support release for the Java SE platform.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/33jyprplywsahqxkvwpt.png)
The java JDK is an important tool for java developers.

**The following are some uses of this development kit**

1. Java Development
2. Accessibility to Java standard library
3. Integration with IDEs

Now Let's take a look at the steps in order to get the java 21 JDK (This articles applies to windows users)

* Go to https://jdk.java.net/21/ (Applies to users on other OS)
* Install the Windows version of the JDK( which is a zip file )
* Extract the zip file to access jdk-21 folder ( This folder contains all the necessary tools such as the Java compiler, Java Runtime Environment etc.
* Copy the path to the jdk-21.
* Open the the start menu and search for "Environment Variables. Open the "Edit the system environment variables" option.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5i1hi9a0cefhdendt97r.PNG)
* Go to system variable section and select "New"
* In the variable name enter "JAVA_HOME" and enter the path you copied in step 4 into the variable value field.
* Click okay
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5d5d5xvjmnvqq0slgkkc.PNG)
* Finally, let's add the path  to the bin by selecting path then new under the same system variable and then paste and append \bin to the link copied in step 4. Select okay.

Great!!! you have successfully setup java 21 JDK on your machine. Test it out by opening the terminal and using "java --version" to test it out.

Don't forget to leave a feedback.
Master Java
Tags: java, spring, springboot, tutorial
Published: 2023-07-18 13:57:10

Hi,
I have beer using Java 8(Springboot MVC) for last 2 years, what are best courses on udemy or whatever to watch, practite and master Java/Spring in the next 6 month?
Also I bought a book "Clean code" in hope to boost my knowledge in java and right way to write code.
Hope there will be someone to give me suggestions and prositions for this path. :D

Thanks
Neumorphism Website + Github API (Part 3)
Tags: webdev, portfolio, devdiscuss, css
Published: 2023-07-18 13:54:19

In this article, I want to share with you a cool feature I added to my GitHub project gallery. Now, users can enter their GitHub username and see their own projects along with their profile picture. It's a great way to personalize the gallery and showcase your work. Let's dive into the details of how I implemented this feature.

If you like my project, I would appreciate your support with a star ⭐!

---

{% codepen https://codepen.io/SchBenedikt/pen/JjeEPYB %}
{% embed https://github.com/SchBenedikt/schbenedikt.github.io %}

---

## Step 1: Create HTML structure
First things first, I started by creating the HTML structure for my project gallery. I added an input field where users can enter their GitHub username. This will allow us to fetch their projects and profile picture using the GitHub API.

## Step 2: Add JavaScript Functions
To make the magic happen, I wrote some JavaScript functions to handle the user input and automatically retrieve the profile picture. The key function here is updateUsername(), which is triggered when the user clicks the "Update" button. Inside this function, I read the username entered by the user, make an API call to GitHub, and load the user's profile picture.

## Step 3: Adjust CSS styling
To give the project gallery a polished look, I made some tweaks to the CSS styling. I adjusted existing CSS rules and added some new ones to achieve the desired appearance. Feel free to get creative and customize the styling according to your own taste.

## Conclusion:
I'm really excited about this new feature in my GitHub project gallery. Allowing users to enter their GitHub username and automatically retrieve their profile picture adds a personal touch to the gallery. It's a great way to showcase your work and let visitors connect with you on a more personal level. I hope this article inspires you to implement a similar feature in your own projects.

I had a lot of fun working on this feature, and I encourage you to give it a try. Happy coding and exploring the possibilities!
Developers experience. Architecture Diagrams for mortals. C4 & C5 diagrams as code
Tags: c4, c5, diagrams, architecture
Published: 2023-07-18 13:48:19


{% embed https://www.youtube.com/watch?v=w7OyX-1Xr7M %}
So for me, Developer eXperience — is not about DevOps or pipelines. It is crucial, but the cognitive load of understanding systems is the most critical for me. The cognitive load that developers have while interacting with a system.

The most significant impedance of all modern systems — is the gap between solution architecture and code. Even architects must use the elevator

to meet the solution-application gap, we are still hoping for 5th-generation languages, but to survive with the instruments that we currently have, we use models. All models are wrong, but some of them are useful.

So C4 diagrams [https://c4model.com/](https://c4model.com/) and C5 (C4+ connection diagrams) give us a drill-down view from systems and users to components and classes and lower cognitive load and represent a system in a digestible human-friendly way

We use a [C4](https://github.com/plantuml-stdlib/C4-PlantUML,) plantUML

[https://github.com/plantuml-stdlib/C4-PlantUML](https://github.com/plantuml-stdlib/C4-PlantUML,)

Quick sample


```
@startuml  
title Salary Statistic

!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4\_Container.puml

Person(consumer, "Consumer")  
System\_Boundary(SalaryStatisticBoundary, "Salary statistic  Backend") {  
    Container(SalaryStatisticService, "Statistic Service", "")  
    ContainerDb(userDB, "User storage", "file storage")  
    ContainerDb(salaryDB, , "salary storage", "SqlLite")  
}

Rel(consumer, SalaryStatisticService, "get data")  
Rel(consumer, SalaryStatisticService, "login")  
Rel(SalaryStatisticService, userDB, "user data and scopes")  
Rel(SalaryStatisticService, salaryDB, "salary data")

@enduml
```


![](https://miro.medium.com/v2/resize:fit:666/1*RgEplEHJ7eCApjW0yXGBRA.png)

So all our diagrams are versioned code, and if you are a lucky user of GitLab, all your diagrams could be embedded and rendered out of the box from MD files. One suggestion is to focus not on real infrastructure connections but on logical relations and put all plumbing into a connection diagram. More you could find in my video For fans of books
Use a Stored Column for Indexing Values Stored in JSON [MySQL Tip]
Tags: webdev, beginners, programming, mysql
Published: 2023-07-18 13:47:03

**Managing and querying JSON data in MySQL databases has become common in modern web applications. To improve performance when querying JSON values, you can create a stored column that extracts specific values and indexes them.**
﻿
## Table Definition
﻿
Consider a scenario where you have a table named "orders" that stores various details about customer orders, including a JSON column called "data" that holds additional information related to each order. To improve performance when querying by a specific order number, you can create a stored column that extracts the order number from the JSON data and indexes it.
﻿
**Let's take a look at the table definition:**
﻿
```sql
CREATE TABLE `orders`
(
    `id`           INT UNSIGNED                                            NOT NULL,
    `data`         JSON                                                    NOT NULL,
    `order_number` VARCHAR(20) GENERATED ALWAYS AS (`data` ->> '$.number') NOT NULL,
    PRIMARY KEY (`id`),
    INDEX `orders_order_number_idx` (`order_number`)
);
```
﻿
In this example, the table `orders` has columns for `id`, `data`, and `order_number`. The `order_number` column is defined as a stored column using the `GENERATED ALWAYS AS` syntax, with the expression `(data ->> '$.number')` to extract the value of the `number` key from the `JSON data`.
﻿
By creating an index on the `order_number` column using `INDEX`, MySQL optimizes the query performance when searching and filtering based on order numbers.
﻿
With the table and index set up, you can execute queries like:
﻿
```sql
SELECT * FROM `orders` WHERE `order_number` = '123456';
```
﻿
## Conclusion
﻿
Using a stored column for indexing JSON values can significantly improve query performance, especially with large datasets. Remember to carefully design and maintain indexes based on your application's needs to balance performance and write operations.
﻿
In conclusion, leveraging a stored column for indexing JSON values in MySQL can enhance query performance and provide the flexibility of working with JSON data within your database schema.
﻿
Hope you have enjoyed this short bright dev tip! [Check our repository](https://github.com/bright/dev-tips/commit/d3b69042b0671b3e2e025f159967d5b5bb195c0e).

---
By Maciej Nawrocki, Senior Backend Developer and Patryk Szlagowski, Senior Backend Developer at [Bright Inventions](https://brightinventions.pl).
Protocols. We don't need another Twitter or threads!
Published: 2023-07-18 13:43:33

{% embed https://www.youtube.com/watch?v=GmOxLC9Zjxg %}
We don’t need another Twitter app based on Instagram identity with the same pro russian community moderation.
Apps that fight for your time, attention and sell your data.
We need Self-Sovereign Social Network Protocols that set ground rules for self-organized and self-moderated communities. I want to take my social graph and audience with me and do something useful for this relationship. I want to unlock this relationship.
I believe more in #noster #activepub #protocols
AI fuel data economy
Tags: dataeconomy, ssi
Published: 2023-07-18 13:40:41

#AI will empower and fuel #dataecomony . I read few research papers that clearly stated tha even much smaller models that trained on qualitatiy data give high quality results . It is mean that data and data authenisity will create completely new market with own challenges. #ssi give a tools for authenticity and ownership . I eager to see more products that focus on prove of authenticity and ownership .