teleren/devto huggingface dataset:
Some FireFox Extension That Is Use Daily
Tags: firefox, extension, beginners
Published: 2023-01-25 07:47:12

If you're a Firefox user, you know that there are countless extensions available to enhance your browsing experience. In this blog post, we're going to take a look at eight extensions that I use on a daily basis to make our browsing faster, more efficient, and more enjoyable.

## Clear Cache

This extension is an essential tool for keeping your browser running smoothly. With just a single button press or easy shortcuts, you can quickly and easily clear your browser's cache (both disk and RAM) to improve performance and free up space.

## Enhancer for YouTube

This extension is a must-have for any YouTube user. It comes packed with features that allow you to customize your YouTube experience to your liking. You can manage ads, control playback speed and volume, automate repetitive tasks, and configure dozens of keyboard shortcuts. And best of all, it's recommended by Mozilla and respects users' privacy.

## Grammarly: Grammar Checker and Writing App

Grammarly for Firefox is the ultimate tool for improving your writing online. It offers real-time suggestions for spelling, grammar, punctuation, clarity, and writing style, helping you to write with confidence and communicate your ideas effectively.

## Lighthouse

This extension uses the PageSpeed Insights API to generate a Lighthouse report, using headless Chrome from a service run by Google. With this tool, you can easily analyze the performance of any public URL and make improvements to improve speed and user experience.

## Read Aloud: A Text to Speech Voice Reader

Tired of sitting and reading? With the Read Aloud extension, you can have any webpage read to you with just a click of a button. You can choose from many available male and female voices, adjust the pitch and reading speed, and even support for PDF and EPUB files. This extension is perfect for those who prefer to listen to content, those with dyslexia or other learning disabilities, or children learning to read.

## Temp Mail - Disposable Temporary Email

Temp Mail provides you with a temporary, secure, anonymous, and disposable email address to protect you from spam, hacking, and robots. Keep your real mailbox clean and secure with this convenient extension.

## TWP - Translate Web
Your current page is translated without having to open new tabs. It is possible to change the translation language. You can select to automatically translate. To change the translation engine just touch the Google Translate icon.

## uBlock Origin

uBlock Origin is not an "ad blocker", it's a wide-spectrum content blocker with CPU and memory efficiency as a primary feature. Out of the box, uBO blocks ads, trackers, coin miners, popups, etc. through the following lists of filters, enabled by default:

    - EasyList (ads)
    - EasyPrivacy (tracking)
    - Peter Lowe’s Ad server list (ads and tracking)
    - Online Malicious URL Blocklist
    - uBO's own lists

More lists are available for you to select if you wish:

    - EasyList Cookie
    - Fanboy Annoyances
    - AdGuard Annoyances
    - Dan Pollock’s hosts file
    - And many others
CSS tutorial series: CSS Positioning
Tags: beginners, webdev, programming, css
Published: 2023-01-25 07:46:46

Today we're going to look at the `position` property in CSS. 
 
This property determines an element's placement within a document. The final position of an element is specified by their `top`, `right`, `bottom`, and `left` properties.

| Property| Value|
|---------|:----:|
| `position`| `static`, `relative`, `fixed`, `absolute` and `sticky`|

## Static  
This is the default value of this property. The element is inside the normal flow of the document and the `top`, `right`, `bottom` and `left` properties have no effect whatsoever on the element.

## Relative
The element is in the document's normal flow, and its offset from itself is determined by the values of top, right, bottom, and left. The space assigned for the element in the page layout is the same as it would be if position were static since the offset has no effect on the positions of any other components.

## Fixed
An element with this position value is positioned relative to the viewport. The element will always remains in the same location regardless of how far the page is scrolled. The element's position can be adjusted using the top, right, bottom, and left properties.

When an element is fixed, its original place on the page is not left blank. This means that, it is removed from the normal flow of the document.

## Absolute
In contrast to fixed elements, which are positioned relative to the viewport, absolute elements are positioned relative to the nearest positioned ancestor.

The document body is used and the element scrolls with the page if an absolute positioned element has no positioned ancestors.

Absolute positioned elements can overlap other elements and are not part of the normal flow.

## Sticky 
Depending on where the user scrolls, an element with the property position: sticky is placed.

Depending on where you are scrolling, a sticky element switches between being fixed and relative. When a specified offset position is reached in the viewport, it is relative-positioned until that point at which it "sticks" (like position:fixed) in the viewport.


![Position property CSS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mpgtn08axjrwvtnvv9fb.png)
Sequence diagram using PlantUML
Tags: tutorial, programming, beginners
Published: 2023-01-25 07:46:34


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k9ee5ql63x0y2rxpksaf.png)
Sequence diagrams are a type of UML (Unified Modeling Language) diagram that depict interactions between objects or components in a system. They are often used to represent the flow of messages or events in a system, and can be useful for understanding the behavior of a system or for communicating design decisions to others.

PlantUML is an open-source tool that allows you to create UML diagrams using a simple, human-readable text language. It supports a wide range of UML diagrams, including sequence diagrams.

To create a sequence diagram using PlantUML, you will need to write a text file that describes the interactions between objects or components in your system. The syntax for creating a sequence diagram in PlantUML is quite simple, and consists of a series of commands that describe the objects or components involved in the interaction, as well as the messages or events that are exchanged between them.

Here is an example of a simple sequence diagram created using PlantUML:

```
@startuml

actor User
participant "Order Service" as OrderService
participant "Payment Service" as PaymentService

User -> OrderService: Place Order
OrderService -> PaymentService: Verify Payment
PaymentService -> OrderService: Payment Approved
OrderService -> User: Order Confirmation

@enduml

```

In this example, the diagram shows an interaction between a User and two services, the Order Service and the Payment Service. The User sends a message to the Order Service to place an order, the Order Service sends a message to the Payment Service to verify the payment and the Payment Service sends a message back to the Order Service to approve the payment. Finally, the Order Service sends a message back to the User to confirm the order.

You can use PlantUML to create more complex sequence diagrams, by adding more objects or components, or by showing more detailed interactions between objects or components.

You can also use PlantUML to generate the sequence diagram as a PNG, SVG or other format image files.

To learn more about PlantUML and its features, you can visit the official website at http://plantuml.com/ and check the documentation.

In addition, you can find many examples of sequence diagrams and other UML diagrams created using PlantUML on the internet, which can be a helpful resource when creating your own diagrams.
VIM - Windows
Tags: vim, learning
Published: 2023-01-25 07:24:44

## Commands:

Horizontal Split: <kbd><kbd>Crtl-w</kbd> <kbd>s</kbd></kbd> or 
```vim
:sp
```

Vertical Split: <kbd><kbd>Crtl-w</kbd> <kbd>v</kbd></kbd> or
```vim
:vs
```

Close window:  <kbd><kbd>Crtl-w</kbd> <kbd>q</kbd></kbd> or
```vim
:q
```

Close all windows expect the current one:  <kbd><kbd>Crtl-w</kbd> <kbd>o</kbd></kbd> or:
```vim
:on
```

Navigate to the next window: <kbd><kbd>Crtl-w</kbd> <kbd>w</kbd></kbd>

Navigate to window in the direction wanted: <kbd>Crtl-w</kbd>  and <kbd>h</kbd><kbd>j</kbd><kbd>k</kbd><kbd>l</kbd>

Increase or Decrease the height of the window: <kbd>Crtl-w</kbd> and <kbd>+</kbd> or <kbd>-</kbd>

Increase or decrease the width of the window: <kbd>Crtl-w</kbd> and <kbd><</kbd> or <kbd>></kbd>

Maximize the height of the window: <kbd><kbd>Crtl-w</kbd> <kbd>_</kbd></kbd>

Maximize the width of the window: <kbd><kbd>Crtl-w</kbd> <kbd>|</kbd></kbd>

Make all windows to the same size: <kbd><kbd>Crtl-w</kbd> <kbd>=</kbd></kbd>

Rotate window: <kbd><kbd>Crtl-w</kbd> <kbd>r</kbd></kbd>

Rotate window in the opposite direction: <kbd><kbd>Crtl-w</kbd> <kbd>R</kbd></kbd>

Rotate window to specific direction: <kbd>Crtl-w</kbd>  and <kbd>H</kbd><kbd>J</kbd><kbd>K</kbd><kbd>L</kbd>

Open all buffers into windows:
```vim
:ba
```

Execute command on all opened windows:
```vim
:windo
```
How to answer the job interview question: "Tell me about yourself".
Tags: discuss, tutorial
Published: 2023-01-25 07:24:02


Have you ever found yourself in hard times when the job interviewer asks you to tell him/her about yourself? Well, in most cases, this turns out to be the hardest part of your life if it is your first interview. In scenarios such as these, I think you can start your interview with the S.E.A.T structure which I'm going to explain here.

When the interviewer says to you at the very start of your job interview, **"tell me about yourself"**, make sure you use the S.E.A.T structure. You can remember this structure because you will be sitting on a seat.

1. **S** - stands for the **_skills and qualities_** you can bring to the role.

2. **E** - stands for the _**experience or educational**_ qualifications you can bring to the position.

3. **A** - stands for the significant _**achievement**_ you have gained in your life so far.

4. **T** - finish off with the _**type of a person**_ you are and what you will do in the position if they hire you.

**That's it!! **
Let me know your experience from your first interview and any other tips that you can share.
Back to Back #19 - Back-end news by SFEIR
Tags: newsletter, french, sfeir, backend
Published: 2023-01-25 07:00:00

_Comme chaque fin de mois, les experts de SFEIR publient la newsletter back-end. Retrouvez la sélection de contenu, les outils coup de cœur et les astuces._

---

## 📰 Articles

### [Kubernetes-Native Inner Loop Development With Quarkus](https://dzone.com/articles/kubernetes-native-inner-loop-development-with-quarkus)

Quarkus est à la rescousse afin de simplifier le processus de développement et de test des microservices ainsi que de réduire les cycles de développement.

### [One Year of Log4j](https://thenewstack.io/one-year-of-log4j/)

Il y a un peu plus d'un an, il ne s'agissait que d'un inoffensif outil de logging. Depuis la vulnérabilité Log4Shell est passée par là. Cet article nous montre qu'il reste de nombreuses organisations vulnérables à cette attaque.

### [How to improve Python packaging](https://chriswarrick.com/blog/2023/01/15/how-to-improve-python-packaging/)

Pipenv, Poetry, setuptools… Avec autant de solutions différentes,  il est difficile de savoir quelle est la meilleure approche. Cet article explore l'état actuel du packaging en Python et (peut-être ?) le futur avec la PEP 582.

## 🛠️ Outils

### [modern-errors](https://www.npmjs.com/package/modern-errors)

Un package npm qui facilite la création et l'utilisation des classes d'erreurs. Des plugins existent, comme `modern-errors-http` qui gèrent les réponses HTTP.

### [Fiber](https://docs.gofiber.io/)

Fiber est un framework web inspiré d'Express. Il se base sur Fasthttp, l'implémentation HTTP de Go la plus rapide. Conçu pour faciliter les choses pour des développements rapides, Fiber garde à l'esprit l'absence d'allocations mémoires, ainsi que les performances.

## 💡 Trucs et astuces

Voici une collection de règles utiles applicables avec les fichiers `.htaccess` : redirection, protection d'un dossier, forçage d'un téléchargement…

{% embed https://github.com/phanan/htaccess %}

## 🎤 CFP

Si vous ne voulez rien louper des conférences tech et des CFP, suivez ce repo géré par @aurelievache  
{% embed https://github.com/scraly/developers-conferences-agenda  %}
Codecademy python game project (beginner)
Published: 2023-01-25 06:57:49

i just want to keep learning but it was actually a fun project.
It's basically a game where you pick a Human and you are conquering the world.
You earn territory points by fighting other humans with random Monsters teammates.

https://github.com/ivanignaciopm/monsters-game/blob/d62ab2de004852a328516bb89f965fa8a7a4a8d1/monstersgame

By doing this project i can say that i actually learned a lot by fixing code problems that has presented to me. it was a challenge but i enjoyed it a lot and i realized how much i like this!. Also i'm a little bit scared becouse this is just the introduction of the Computer sciece course and i actually went in trouble with the code. I don't even want to think how difficult may be the big projects problems like game's bugs.
Dog years
Tags: math, logarithms
Published: 2023-01-25 06:51:32

Contrary to popular belief, dog years are not {% katex inline %}age \times 7{% endkatex %}. It's actually more like:

{% katex %}\ln(age)(16)+31{% endkatex %}

![Graph showing logarithmic growth](https://i.imgur.com/G8epmIR.jpg)

As you can see, they age very quickly at first and then very slowly (relative to humans). A 1-year-old dog is an adult, close to a 30-year-old human. At 16 years of age a dog is close to an 80-year-old human.

This post is brought to you by my love of dogs and my love of logarithms.
Create,Connect,Configure Postgres on AWS Successfully with Python
Published: 2023-01-25 06:48:02

I have seen many people have been struggling to connect with AWS Postgres. Here is a step by step guide.
Assuming you have already created an account on AWS, on the Console search "RDS" RDS meaning Relational Database Service.
Navigate to databases and click database as shown here:

![Postgres](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1dnungl464945m1tvnwk.png)

On the pop up choose Postgres, Free tier. 

![create database](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i16hljzilb43rmn78e6d.png)
Change the database identifier and create your own password for authentication in python.

![DB IDENTIFIER](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j8a1mdpj3260vngnergh.png)
Remember to make sure the database is public and configure VPC security groups.
This is where you need to be careful. If you are using your company's laptop, the inbound rules will use ip address which might be closed so make sure it's not closed or use your own laptop to connect and use "my ip" or open all ports.

![security groups](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/98m7v9ktjmoh76brsool.png)

Once created lets now go to our python and connect using psycopg2.
The following code will connect to postgres successfully.

![connection](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9w4jhwmxw0eqll829esw.png)
##host: 
Endpoint on aws
##database: 
your database
#user: 
Postgres if default otherwise change to yours.
##Password:
Db password


Thank you. Happy Learning
Show [object Object] error after render
Tags: react
Published: 2023-01-25 06:42:46

const data =[
{
heading :  'i am using<strong> <Link href="path">text here</Link> </strong> ',
}]

const App = () =>{
return(
data.map(item = >{
let {heading} =  item
return (
<h1 dangerouslySetInnerHTML={{__html: heading}}></h1>
)
)
}
export default App

after preview show [object Object]  error
why show in next js 
how to fix error
Weekly web development resources #134
Tags: webdev, javascript, css, nextjs
Published: 2023-01-25 06:42:14



______


##[waitlist.rsvp](https://waitlist.rsvp/)
[![waitlist.rsvp](https://wweb.dev/weekly/content/134/waitlist.jpg)](https://waitlist.rsvp/)
A website to create a waitlist page to collect emails with one click.

______


##[Legitify](https://github.com/Legit-Labs/legitify)
[![Legitify](https://wweb.dev/weekly/content/134/legitify.jpg)](https://github.com/Legit-Labs/legitify)
A tool to detect and remediate misconfigurations, security and compliance issues across all your GitHub and GitLab assets.

______


##[Own Your Data](https://yourdigitalrights.org/)
[![Own Your Data](https://wweb.dev/weekly/content/134/ownyourdata.jpg)](https://yourdigitalrights.org/)
A website that get organizations to delete your account or provide a copy of your personal information.

______


##[ImaginAIry](https://github.com/brycedrennan/imaginAIry)
[![ImaginAIry](https://wweb.dev/weekly/content/134/imaginAIry.jpg)](https://github.com/brycedrennan/imaginAIry)
A python CLI tool to generate stable diffusion images and edit them afterwards.

______


##[2022 JavaScript Rising Stars](https://risingstars.js.org/2022/en)
[![2022 JavaScript Rising Stars](https://wweb.dev/weekly/content/134/rising-stars.jpg)](https://risingstars.js.org/2022/en)
An overview of the trending projects in the JavaScript eco-system over the last 12 months.

______


##[OKLCH](https://oklch.com)
[![OKLCH](https://wweb.dev/weekly/content/134/oklch.jpg)](https://oklch.com)
A color picker and converter for the OKLCH and LCH color space.

______


##[Moro](https://github.com/getmoro/moro)
[![Moro](https://wweb.dev/weekly/content/134/moro.jpg)](https://github.com/getmoro/moro)
A simple command line tool for tracking work hours.

______


##[Precedent](https://precedent.dev/)
[![Precedent](https://wweb.dev/weekly/content/134/precedent.jpg)](https://precedent.dev/)
An opinionated collection of components, hooks, and utilities for your Next.js project.

______


##[Gluon](https://gluonjs.org/)
[![Gluon](https://wweb.dev/weekly/content/134/gluon_chrome.jpg)](https://gluonjs.org/)
A new framework for creating desktop apps from websites, using system installed browsers and NodeJS.

______


##[Unicopy](https://unicopy.cc/)
[![Unicopy](https://wweb.dev/weekly/content/134/unicopy.jpg)](https://unicopy.cc/)
A website on which you can easily copy unicode characters and symbols for your project.

______


##[Ddosify](https://github.com/ddosify/ddosify)
[![Ddosify](https://wweb.dev/weekly/content/134/ddosify.jpg)](https://github.com/ddosify/ddosify)
A high-performance load testing tool, written in Golang for distributed and Geo-targeted load testing

______

_Enjoyed this newsletter? You can support me by:_

💸 booking a [sponsored post](https://wweb.dev/sponsorship)

☕ donating via [BuyMeACoffee](https://www.buymeacoffee.com/wwebdev)

🚀 helping me grow by sharing it with your friends and colleagues


Cheers,
Vincent from [wweb.dev](https://wweb.dev)
5 COURSE ONLINE FREE RECOMENDED IN 2023
Tags: course, webdev, growt, programming
Published: 2023-01-25 06:40:11


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

5 Skill Free buat kamu belajar nih😊Kalo menurut kamu gimana? ada yg perlu ditambahin ga😛Yuk belajar bareng serta diskusi dikolom komentar, serta di save biar ga lupa💬😝

🌱Follow : https://www.appardana.com/
*Stay Young, Be Innovative and Keep Learning

#Content #Web #Skills #IT #programmer #Developer #SelfImprovement #Growth #Aditria #Pardana #AditriaPardana #appardana #iAppTech ⚛️💻
NextSketch 2 Update (2023.1.2)
Tags: news
Published: 2023-01-25 06:23:44

Hello,

NextSketch 2 was updated to 2023.1.2 today. This update greatly improves the licensing system and makes it much easier to use. This version of the plugin is also compatible across IDE versions starting from 2021.1, so you can stay on your current IDE and still take advantage of features.

A few cosmetic tweaks were in order, but other than that the experience should be mostly the same. We are planning to use this new license system for NextSketch (1) soon. As always, if you find issues, let us know on the [Issue Tracker](https://github.com/skyloft7/NextSketch-2-Issue-Tracker).

Later!
🔥 VS Code Tip of the Day 🔥
Published: 2023-01-25 06:19:44



## Stay Organized with the TODO Highlight Extension

Are you having a hard time keeping track of all the tasks you need to do in a project? Are you looking for an easy way to navigate back to them? Then the TODO Highlight extension for Visual Studio Code is the perfect tool for you!

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

This extension allows you to quickly and easily add TODO and FIXME comments to your code. With those comment tags in place, you can quickly generate a helpful list of all the tasks you need to do. This makes it a breeze to move around your project, find the tasks you need to do, and stay organized.

To get started, all you have to do is search for the “TODO Highlight” extension in the Visual Studio Code marketplace. 
- After you install it, you’ll be able to start adding TODO and FIXME comments to your code. 
- You can then use the “TODO List” command to generate a list of all your tasks. This list will include the line numbers where you added your comments, as well as some helpful details about each task.


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

The TODO Highlight extension is a great tool for quickly and easily keeping track of your tasks and staying organized. With just a few clicks, you can stay on top of all the TODOs in your project. So, if you’re looking for an easy way to keep your code organized and get things done, look no further than the TODO Highlight extension for Visual Studio Code from [here](https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight)!

> Sometimes you forget to review the TODOs you've added while coding before you publish the code to production. So I've been wanting an extension for a long time that highlights them and reminds me that there are notes or things not done yet.