teleren/devto huggingface dataset:
Awesome top 5 Posts from last week tagged(#css)
Tags: css, c4r4x35
Published: 2023-04-28 13:33:00

##Hide text in CSS pseudo elements from screen readers with this one weird trick
TL:DR; Add empty "alternative text" to the pseudo element content to prevent screen readers announcing your decorative design elements, like so:


.someClass::before {
  content: "M" / "";
}


I'm...
{% link https://dev.to/whitep4nth3r/hide-text-in-css-pseudo-elements-from-screen-readers-with-this-one-weird-trick-11eg %}
##Yet Another Newsletter LOL: IMHO
Another week, another newsletter. Let’s get to it!

Around the Web
This is an excellent talk from Rich Harris. I encourage you to check out Rich Harris: Hot takes on the web 🌶️.
The Alt Text War! SEO...
{% link https://dev.to/nickytonline/yet-another-newsletter-lol-imho-3pf6 %}
##Dark Mode Toggle and prefers-color-scheme
When I wrote An Accessible Dark Mode Toggle in React back in 2021, @grahamthedev suggested I implement a prefers-color-scheme check in my theme setter. I finally got around to it.

What is...
{% link https://dev.to/abbeyperini/dark-mode-toggle-and-prefers-color-scheme-4f3m %}
##13 Rules I Follow When Writing CSS To Make It Concise and Readable🚀💡
Here are 13 rules that can be followed when writing CSS to make it more concise and readable:

1. Use a preprocessor: Use a CSS preprocessor such as SASS or LESS, which allows you to use variables,...
{% link https://dev.to/margishpatel/13-rules-i-follow-when-writing-css-to-make-it-concise-and-readable-2jkn %}
##Design your own ChatGPT Website Chatbot
One of the unique things about our ChatGPT website chatbot technology is how much you can customise it. It's got settings for everything, custom designs being one of the settings you can apply.

In...
{% link https://dev.to/polterguy/design-your-own-chatgpt-website-chatbot-2e2m %}
Checkout Last week top 5 posts tagged(#github)
Tags: github, c4r4x35
Published: 2023-04-28 13:30:20

##Recovering from Accidentally Pushing Sensitive Information to a Remote Git Repository
I'm Atsushi Suzuki, and I'm a software developer at a startup in Tokyo. I'm interested in working abroad in the future, so I've decided to start sharing my thoughts and experiences on dev.to, both to...
{% link https://dev.to/suzuki0430/recovering-from-accidentally-pushing-sensitive-information-to-a-remote-git-repository-539m %}
##Announcing the GitHub + DEV 2023 Hackathon!
Hey, DEV community!

I hope you're ready for some exciting news. GitHub is launching their latest hackathon here on DEV Community where you can build a new application in the open, learn something...
{% link https://dev.to/devteam/announcing-the-github-dev-2023-hackathon-4ocn %}
##Celebrating Novu @ 20k Stars
Not every day do you see a GitHub repo surpassing 20k stars. So I'm proud to announce that we are now 20.2k stars as of this writing!

We are incredibly thankful to the developer community for...
{% link https://dev.to/novu/celebrating-novu-20k-stars-14dk %}
##How I Made a Reminder to Write a Blog Post Using GitHub Action
As a writer, I understand the importance of consistency when it comes to publishing new content. However, there are times when life gets in the way, and it can be challenging to remember to write a...
{% link https://dev.to/imamdev_/how-i-made-a-reminder-to-write-a-blog-post-using-github-action-3n88 %}
##Managing Community Health Files and Templates with a .github Repository
I collect open source projects like some people collect discord servers. To be accurate, I have 525 repositories. Now, before you yell at me, many of those are from my bootcamp lessons when I was...
{% link https://dev.to/opensauced/managing-community-health-files-and-templates-with-a-github-repository-l8f %}
Top 5 Featured DEV Tag(#docker) Posts from the Past Week
Tags: docker, c4r4x35
Published: 2023-04-28 13:29:50

##A primer on GCP Compute Instance VMs for dockerized Apps [Tutorial Part 8]
Getting started with the Google Cloud Platform (GCP) to run Virtual Machines (VMs) and prepare them to run dockerized applications.

This article appeared first on https://www.pascallandau.com/ at A...
{% link https://dev.to/pascallandau/a-primer-on-gcp-compute-instance-vms-for-dockerized-apps-tutorial-part-8-4k46 %}
##Understanding Kubernetes: part 48 – Kubernetes 1.27 Changelog
Understanding Kubernetes can be difficult or time-consuming. In order to spread knowledges about Cloud technologies I started to create sketchnotes about Kubernetes. I think it could be a good way,...
{% link https://dev.to/aurelievache/understanding-kubernetes-part-48-kubernetes-127-changelog-1alk %}
##My Favorite Courses to Learn Docker and Containers in Depth
Disclosure: This post includes affiliate links; I may receive compensation if you purchase products or services from the different links provided in this article.

Hello devs, if you want to learn...
{% link https://dev.to/javinpaul/my-favorite-courses-to-learn-docker-and-containers-in-depth-11fp %}
##PHP CRUD Rest API with Docker
Let's create a CRUD Rest API in PHP, using:

Laravel (PHP framework)
Composer (PHP package manager)
Postgres (database)
Docker
Docker Compose

Mind the similar names!

⚠️ "Composer" is a package...
{% link https://dev.to/francescoxx/php-crud-rest-api-with-docker-2c3f %}
##How to reduce your Docker image size
This is an updated post of a previous post from 2022 about how you can use dive to inspect the contents of an image.

In Docker layer caching for GitHub Actions, we covered using the existing layer...
{% link https://dev.to/kylegalbraith/how-to-reduce-your-docker-image-size-56f1 %}
Awesome top 5 Posts from last week tagged(#ai)
Tags: ai, c4r4x35
Published: 2023-04-28 13:29:20

##OpenCommit: CLI to generate impressive commits in 1 second with GPT 🤯🔫 (v 2.0)
first — let's grow my twitter, so i can tell about my inventions quicker and make the world even better place (or not, idk)

A month ago I opensourced OpenCommit.

Previous post got 60k views and 280...
{% link https://dev.to/disukharev/opencommit-20-cli-to-generate-impressive-commits-in-1-second-with-gpt-14g3 %}
##GPT-4 plays DND with 4 of us, it's insane 🤯 (YouTube)
its gonna blow your head off

here is the GPT-4 acting as a Dungeon Master with a party of me and 3 of my friends

i will code this thing a web Game, so you are not bothered with drawing on Team...
{% link https://dev.to/disukharev/ai-dnd-4068 %}
##Build an AI App in 5 Minutes without Coding
In this era of widespread AI, the barrier to developing AI applications is getting lower. However, for most developers, the difficulty still exists in data processing, model development, training, and...
{% link https://dev.to/funnybob/build-an-ai-app-in-5-minutes-without-coding-4l5c %}
##Tutorial: Create an AI agent that reads Wikipedia for you
In this tutorial, you'll learn how to create an agent that answers questions by searching and reading Wikipedia articles using JS Agent. You can find the complete code in the Wikipedia agent example.
...
{% link https://dev.to/lgrammel/tutorial-create-an-ai-agent-that-reads-wikipedia-for-you-31cm %}
##50+ Awesome ChatGPT Prompts for Web Developers
Only 5 days - that's what it took for ChatGPT to achieve 1 Million Users. Does it seem fast for you? See the statistics below to gain a better understanding of the platform growth.

It is clear that...
{% link https://dev.to/creativetim_official/50-awesome-chatgpt-prompts-for-web-developers-jpk %}
Top 5 Featured DEV Tag(#opensource) Posts from the Past Week
Tags: opensource, c4r4x35
Published: 2023-04-28 13:26:53

##[Nestia] Boost up NestJS server much faster and easier (maximum 20,000x faster + tRPC similar)
Preface

As I've promised in the previous Typia Series Articles (dev.to), I'll introduce you my new library nestia, which can make NestJS much faster and easier.

With my new library nestia, you can...
{% link https://dev.to/samchon/nestia-boost-up-your-nestjs-server-much-faster-and-easier-maximum-20000x-faster-59o5 %}
##Who's looking for open source contributors? (week 38)
Restarting something Ben was doing for a while, and we plan on doing this every Friday!

Open Source is about the community. Whether you have a project or you're looking to make your first PR.

Tell...
{% link https://dev.to/opensauced/whos-looking-for-open-source-contributors-week-38-16e9 %}
##Announcing the GitHub + DEV 2023 Hackathon!
Hey, DEV community!

I hope you're ready for some exciting news. GitHub is launching their latest hackathon here on DEV Community where you can build a new application in the open, learn something...
{% link https://dev.to/devteam/announcing-the-github-dev-2023-hackathon-4ocn %}
##OpenCommit: CLI to generate impressive commits in 1 second with GPT 🤯🔫 (v 2.0)
first — let's grow my twitter, so i can tell about my inventions quicker and make the world even better place (or not, idk)

A month ago I opensourced OpenCommit.

Previous post got 60k views and 280...
{% link https://dev.to/disukharev/opencommit-20-cli-to-generate-impressive-commits-in-1-second-with-gpt-14g3 %}
##How to build a Hackathon 🚀
TL;DR

We have just released our new Hackathon NovuConnect 🤩
We have made sure it's super easy to participate, and today I will talk about how.
Here are the things I am going to touch:

What can you...
{% link https://dev.to/novu/how-to-buid-a-hackathon-gb3 %}
Popular tag(#node) last week top 5
Tags: node, c4r4x35
Published: 2023-04-28 13:26:23

##npm v/s yarn v/s pnpm
Ready to talk package managers? You know, those tools that make your life as a developer so much easier (or sometimes, more frustrating)? Well, we're here to compare the three big players: npm, Yarn,...
{% link https://dev.to/raxraj/npm-vs-yarn-vs-pnpm-fo8 %}
##How to slugify a string in JavaScript
A slug is a string that is used to uniquely identify a resource in a URL-friendly way. It is typically used in the URL to identify a specific page or post on a website. A slug consists of a set of...
{% link https://dev.to/bybydev/how-to-slugify-a-string-in-javascript-4o9n %}
##ORM, Prisma, and How You Should Build Your Next Backend Database Project
Prisma is a premier object-relational mapping (ORM) tool in the Node.js ecosystem. It's powerful yet simple and easy to use. A great team also supports it, and it has enjoyed widespread adoption by...
{% link https://dev.to/amplication/orm-prisma-and-how-you-should-build-your-next-backend-database-project-hb2 %}
##Add colors to your terminal!
Tintify is an NPM package that brings you all you need to add colors and effects to your terminal!

This package isn't a simple list of ANSI escape sequences.
It brings you utilities functions that...
{% link https://dev.to/unarray/add-colors-to-your-terminal-5dcg %}
##How to get started with the TERN stack
In this post, I'll introduce you to the TERN stack, explain why you should consider adopting it or migrating your MERN stack application over to TERN, and show how you can get started using...
{% link https://dev.to/tigrisdata/how-to-get-started-with-the-tern-stack-4k1i %}
Top 5 Posts tagged(#programming) last week
Tags: programming, c4r4x35
Published: 2023-04-28 13:25:16

##Unleashing the Power of JavaScript Proxy: A Comprehensive Introduction for Developers
JavaScript is one of the most widely used programming languages in the world today. It is a versatile language that is used for everything from building websites and web applications to creating...
{% link https://dev.to/wizdomtek/unleashing-the-power-of-javascript-proxy-a-comprehensive-introduction-for-developers-3f4j %}
##My Favorite FREE Courses to Learn Apache Kafka in 2023
Disclosure: This post includes affiliate links; I may receive compensation if you purchase products or services from the different links provided in this article.

Hello devs, Kafka has emerged as one...
{% link https://dev.to/javinpaul/my-favorite-free-courses-to-learn-apache-kafka-in-2023-djb %}
##Learn REACT in 43 seconds
first lets grow my twitter, i will probably change all of the world obsolete education systems, not sure yet, the more people follow me — the easier it is to change the systems

SPEEDRUN STARTS NOW
...
{% link https://dev.to/disukharev/how-to-learn-react-in-43-seconds-320e %}
##Learn ML in 52 seconds 🏎️
first lets grow my twitter, i will probably change all of the world obsolete education systems, not sure yet, the more people follow me — the easier it is to change the systems

one more speedrun in...
{% link https://dev.to/disukharev/how-to-learn-ml-in-52-seconds-562f %}
##7 Web Security Mistakes to Avoid (As a Developer)
As a web developer, it's crucial to prioritize the security of your applications. In today's digital world, cyber threats are constantly evolving, and hackers are always on the lookout for...
{% link https://dev.to/devland/7-web-security-mistakes-to-avoid-as-a-developer-6da %}
PHP 8.2: deprecated
Tags: php, beginners, programming
Published: 2023-04-28 13:24:13

[PHP 8.2](https://www.php.net/releases/8.2/en.php) introduces various modifications, as it's a major release.

This new version seems to deprecate common structures used by developers, so you might want to look into the changelog. Here are some notable ones, to me.

## Dynamic properties: deprecated

```PHP
class Product {
}

$product = new Product();
$product->title = 'The Game Changer';
```

The above shortcut is not uncommon in PHP scripts, even if it has never been the recommended way.

You'll have to declare your properties now. Otherwise, you'll get a warning in PHP 8.2:

> Deprecated: Creation of dynamic property[...]

It's worth mentioning dynamic properties are still valid if you use the built-in `stdClass` class:

```PHP
$test = new stdClass();
$test->my_property = 'test';
```

Devs who might want to keep using dynamic properties in other classes (e.g., custom classes) will have to use the new `#[\AllowDynamicProperties]` attribute to explicitly allow such usage (opt-in).

## String interpolation: deprecated

Don't panic, only a specific syntax will deprecated:

```PHP
$myvar = "ok";
echo "${myvar}";
```

The invalid syntax is **when the `$` sign is outside the curly braces**.

In constrast, `"{$myvar}"` is still valid.

## `utf8_encode`/`utf8_decode`: deprecated

This deprecation might look weird, as `utf8_encode` and `utf8_decode` are massively [mis]used, but many devs ignore that it only encodes/decodes from ISO-8859-1 (Latin1).

## Wrap up

Deprecated does not mean fatal error, but it's important to fix such warnings when migrating from an older version of PHP.
Roadmap to Full-Stack Web Developer
Tags: webdev, programming, react, node
Published: 2023-04-28 13:22:23

Everything is connected through web applications, from banks to government organizations. Being a web developer, specifically a full-stack web developer, is the best option you have. A full-stack web developer knows both front-end and back-end development. Usually, there are two types of full-stack web developers: MERN Stack and PHP Developers.

Before jumping into learning full-stack web development, you need to understand what you want to be. One thing I would like you to know is that there isn't any limit to what you can learn. If you want to learn MERN, you can also learn PHP. If you want to learn PHP, you can later learn MERN Stack Development. That's the beauty of being a programmer – you don't have any limit to learning new things.

## **Firstly, PHP Full-Stack Web Developer**
This generally includes 5 languages: HTML, CSS, JavaScript, PHP, and MySQL.

1. **HTML, CSS, and JavaScript** are front-end languages used to display designs and the structure of a website and to send requests to the back-end.

2. **PHP** is the back-end language that takes requests from the front-end and executes functions. It's connected with your database to fetch, insert, update, and delete records from it. PHP is one of the more popular languages for making web applications. 78% of web applications on the internet are built using PHP, including Facebook, WordPress, Wikipedia, and much more.

3. **MySQL** is a database that you'll use to store and modify data using PHP.

If you want to start learning PHP full-stack web development, here's a roadmap you can follow:


![Roadmap to PHP Full Stack Web Development](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2w6j6rxv44oquu6tm33h.png)

## **Secondly, MERN Stack**
MERN is an abbreviation for MongoDB, Express.js, React.js, and Node.js.

1. **MongoDB** is a NoSQL database that is used to store and fetch data. It is a highly scalable and flexible database that allows for easy use with other technologies.

2. **Express.js** is a web application framework for Node.js that makes the process of building web applications and APIs easy. It provides a set of tools and functionalities for handling requests and responses, routing, middleware, and more.

3. **React** is a JavaScript library for building real-time user interfaces. It's used to make websites dynamic and interactive. It makes your web application real-time.

4. **Node.js** is a JavaScript runtime that allows developers to run JavaScript code on the server-side. It provides a scalable and high-performance environment for building web applications and APIs.

If you're interested in learning MERN Stack, you can follow this roadmap:


![MERN Stack Roadmap](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x3f447o8uesxeyoonut1.png)

If you have any question, you can ask me or anyone on internet. ChatGPT might be able to help you too.
Perl Weekly Challenge #214 - Rank Score
Tags: perl, perlweeklychallenge
Published: 2023-04-28 13:08:33

Just one weekly challenge entry this week, because I am lacking in time and have no idea how to efficiently solve the second challenge.

So here goes:

#### Rank Score

First, the code:

    #!/usr/bin/perl

    use strict;
    use v5.24;

    my @sorted = reverse sort @ARGV;
    my %hash;
    my @table = ('G', 'S', 'B');
    my $curr;

    foreach (@sorted) {
        if ($curr <= 2) {
            $hash{$_} //= $table[$curr];
        } else {
            $hash{$_} //= $curr + 1;
        }
        $curr++;
    }

    say $hash{$_} for @ARGV;

At first, I thought this challenge was something totally different, I don't know why, but it still turned out quite simply. We want to keep the output in the same order as the input, so we obviously can't just sort and replace the inputs. The easiest way is then to use each score as the key of a hash, where the value is the rank. Since all equal scores will be equally ranked, this sorts the scores from highest to lowest and iteratively assigns ranks. For any duplicates, the index counter continues counting but the defined-or ranks that entry in the hash as the first appropriate rank. For the first 3 ranks, the table of podium winners is used.

That's all for this week! As usual, if you have any comments by all means post them. I'll look forward to seeing the other solutions to challenge 2.
consisTent: A "Unit Testing" Framework for Prompts
Published: 2023-04-28 13:05:27



![consisTentLogo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5jfwmvj5hyr1ndrj5we9.png)

Testing machine learning models that use large language models (LLMs) for natural language processing can be challenging. However, consisTent, a new testing framework, aims to make this task more straightforward and reproducible.

The goal of consisTent is to create reproducible tests for LLM based applications regardless of the fine-tuning method used. consisTent comes with two types of validators, Syntactic and Semantic Validators. The former is used to do static assertions of the LLM output, validating if the output is in a certain JSON format, asserting the schema, or checking if the output is a valid piece of code. On the other hand, Semantic Validators are used to assert the quality of the response with more "soft" parameters, such as checking if something is factually correct, checking for hallucinations, or checking for labels like "funny" or "interesting." The Semantic Consistency Validator is another type of semantic validator that allows developers to provide a seed of validated input and a threshold to assert the semantic distance of the new output from the seed cluster.

Syntactic Validators are used to assert the FORM of the response, whereas Semantic Validators are used to assert the CONTENT of the response.

# examples

Let's take a look at some examples of how consisTent can be used to validate LLM output.


## Syntactic Validator Examples:

```python
consisTent.JsValidator().validate('console.log("I\'m a JS program!")')

consisTent.PyValidator().validate('print("I\'m a Python program!")')
```

## Semantic Validator Example:


```python
import consisTent

seed = [
    "the cat sat on the mat",
    "the feline layed on the carpet",
]

consisTent.ConsistencyValidator(
    seed_size=2,
    consistency_threshold=0.5,
).validate(
    seed=seed,
    model_output="the dog sat on the mat",
)
```

## Label Test Example: 

```python
OPENAI_KEY = "XXXXXXXXXXXXXXX"

consisTent.LabelsValidator(openai_key=OPENAI_KEY).validate(
    labels=[        
        "funny",        
        "short",        
        "about rabbits",
    ],
    model_output="What do you call a rabbit that tells jokes? A funny bunny!",
)

```
## Facts Validation Example:

```python 
OPENAI_KEY = "XXXXXXXXXXXXXXX"

consisTent.FactsValidator(openai_key=OPENAI_KEY).validate(
    facts=["this car weighs 1000KG"],
    model_output="The average person can lift this car can lift this car",
)
```

Installation of the consisTent package is easy via pip: `pip install consistent` .

Overall, consisTent is an excellent framework for testing LLM based applications. The framework's ability to handle syntactic and semantic validations in a reproducible manner makes it a valuable tool for anyone working with large language models.

Psst, please star us on [github](https://github.com/drorIvry/consisTent)