teleren/devto huggingface dataset:
CSS tutorial series: CSS Syntax
Tags: css, beginners, webdev, tutorial
Published: 2023-01-14 00:46:51

As mentioned in the previous post [What is CSS ?](https://dev.to/fullstackjo/what-is-css-35i1) 

> CSS has a multitude of features that help developers to manage the layout of a document written in a markup language.

Before we get into selectors, let's go over the syntax.

## CSS Syntax
CSS is made up of a set of rules, each of which has one or more selectors and a declaration block, which is a set of CSS properties and values

```
selector {
   property: value;
}
```
Now that we've covered the CSS syntax, let's look at the three types of CSS. Don't worry, we'll go over the syntax again in details in a minute.

## What are The CSS types?

### Inline CSS
Inline CSS is a technique for applying a distinct style to a single HTML element. An inline CSS stylesheet makes use of the style attribute, which is added to the opening tag of the HTML element being styled.

```
<p style="color:green;">A Paragraph</p>
```
To elaborate on the previous example of inline CSS, The style attribute that applies the color green to the p element's text can be found within the opening tag of the HTML element p. That is, P is the selector, "color" is the property, and green is the value of the property.

### Internal CSS
Internal CSS is also referred to as embedded CSS. It is most commonly used to style a single page. Internal CSS is outlined within a `<style>` element in the `<head>` section of an HTML page. 

```
<style>
  p {
   color: green;
  }
</style>
```

### External CSS
Many HTML pages use an external style sheet to outline the style. This style sheet should not involve any HTML code and should be saved as a separate document with a `.css` extension which is then linked to the HTML documents by including a link to it in the `<head>` section of these HTML documents.

```
<link rel="stylesheet" href="name.css">
```
The Amazing Adventure of Starting my First Freelance Job as a College Student.
Tags: webdev, beginners, programming, tutorial
Published: 2023-01-13 23:47:37

Starting a freelance career while in college can be a daunting task, but it can also be an incredible learning experience that can provide you with valuable skills and experience.

When I was in my second year of college, I decided to take the leap and start my first freelance job. I was scared and unsure of what to expect, but I knew that I wanted to gain real-world experience and develop my skills in my field of study.

I started by researching different freelance platforms and networking with people in my industry. Then, I found a client that needs simple live web application to enter/display the results and all the info about all handball matches, with respect timing and scores.

Working on that project gave me valuable experience in project management, communication, and problem-solving. I also learned how to work independently and how to manage my time effectively. It was a great opportunity to put my knowledge and skills into practice and see how they applied in the real world.

One of the biggest challenges I faced was how to get accepted in any bid I make? The key was: "I'm still an under-grad with no past reviews/rate, so why would anyone hire me?", I said. The answer was: My budget is the key.

Overall, starting a freelance career was an amazing adventure that helped me to grow both personally and professionally. If you're considering starting a freelance career, I highly recommend it. It's a great way to gain experience, develop your skills, and earn some extra money.
Gin VS Echo
Tags: go, gin, echo
Published: 2023-01-13 23:24:44

Gin and Echo are two popular web frameworks in the Go programming language. Both frameworks are designed to make it easy to build web applications, but they have some differences that may make one more suitable for your project than the other.

**Gin** is a high-performance web framework that is designed for building APIs and web services. It is based on the httprouter package, which provides a fast and efficient routing engine. Gin is known for its lightweight and minimalistic design, making it easy to understand and use. It also supports middleware, which allows developers to execute code before or after a request is handled by the router. This can be used to perform a variety of tasks such as logging, authentication, and error handling.

On the other hand, **Echo** is a web framework that is designed for building web applications. It has a more robust set of features compared to Gin, including support for template rendering, built-in middleware, and support for WebSockets. Echo also supports group routing, which allows developers to organize their routes into logical groups. This can be useful for structuring large applications. Echo also has a built-in request validation and sanitization.

Both Gin and Echo are open-source frameworks and actively maintained, both are also very fast, and easy to use. However, the choice will depend on the type of application you want to build. If you're looking to build a simple and lightweight API, Gin may be the better choice. On the other hand, if you're building a more complex web application with a lot of routes and features, Echo may be the better choice.

In conclusion, both Gin and Echo are powerful web frameworks, each of them has its own strengths and weaknesses, it's up to the developer to decide which one is better suited for the specific project. Gin is lightweight and minimalistic, perfect for building API, while Echo is more robust and have more features and is perfect for building web applications. Both frameworks are fast, easy to use and actively maintained, so the decision should be based on the specific needs of the project.for further detail checkout their documentation 
[gin](https://gin-gonic.com/docs/) 
[echo](https://echo.labstack.com/)
Middleware in Golang Gin
Tags: webdev, go, gin
Published: 2023-01-13 23:19:18

Middleware is a powerful feature that allows developers to execute code before or after a request is handled by the router. This can be used to perform a variety of tasks such as logging, authentication, and error handling.

In Gin, middleware is defined as a function that takes in a context and a handler, and returns a new handler. The context is an object that holds information about the current request and response, and the handler is the function that will handle the request.

```
func LoggingMiddleware() gin.HandlerFunc {
	return func(c *gin.Context) {
		log.Println(c.Request.Method, c.Request.URL.Path)
		c.Next()
	}
}

```
It is also possible to use middleware on specific routes or groups of routes by passing the middleware as an argument to the GET(), POST(), etc. methods. For example:

```
r.GET("/", LoggingMiddleware(), func(c *gin.Context) {
	c.String(200, "Hello, World!")
})

```

In this example, the LoggingMiddleware will be executed before the handler function is called.

Gin also provides a built-in middleware for handling errors, called Recovery. It will recover from any panics and logs the panic message. To use this middleware, you can add it to the router using the Use() method:

```
r := gin.Default()
r.Use(gin.Recovery())
```
In conclusion, Middleware in Golang Gin is like the superhero sidekick of your web development journey. It's always there to save the day, whether it's logging requests, handling errors, or implementing authentication. With Gin's middleware feature, you can add functionality to your application without having to change the existing routing structure, it's like having a swiss army knife for your web development needs. So don't be shy, give your middleware some love, and watch it make your life as a developer a whole lot easier.
05 sites úteis que todo programador deve conhecer
Published: 2023-01-13 21:53:34

Desenvolver software é uma tarefa complexa e desafiadora, e os programadores precisam estar sempre atualizados sobre as últimas ferramentas e recursos disponíveis para ajudá-los a desenvolver seus projetos de maneira eficiente e eficaz. Existem muitos sites úteis que podem ser úteis para programadores, mas aqui estão cinco que são especialmente úteis e que todo programador deve conhecer.

Google Developers: Este é o site oficial da Google para desenvolvedores. Ele fornece informações sobre as últimas tecnologias e ferramentas da Google, incluindo Android, Chrome, Google Cloud, Firebase e muito mais. Além disso, ele também oferece tutoriais, documentação e exemplos de código para ajudar os desenvolvedores a aprender e usar essas tecnologias. Características: documentação completa, ferramentas de desenvolvimento, tutoriais interativos.

Dev.to: Este é um site de comunidade para desenvolvedores onde é possível encontrar artigos, tutoriais e discussões sobre vários tópicos de desenvolvimento. Ele é uma ótima maneira de se conectar com outros desenvolvedores e aprender novas habilidades. Características: comunidade de desenvolvedores, artigos e tutoriais de alta qualidade, discussões engajadas.

CSS Tricks: Este site é uma fonte valiosa de informações e recursos para desenvolvedores web. Ele oferece tutoriais, artigos e exemplos de código para ajudar os desenvolvedores a criar projetos web incríveis. Características: conteúdo atualizado frequentemente, recursos avançados de CSS, tutoriais passo a passo.

Javascript Weekly: Este é um boletim semanal gratuito que oferece notícias, artigos e recursos sobre Javascript. Ele é uma ótima maneira de ficar atualizado com as últimas tendências e ferramentas de Javascript. Características: atualizações semanais, conteúdo exclusivo, recursos avançados.

MDN Web Docs: Este é o recurso oficial da Mozilla para documentação de tecnologias web. Ele fornece informações detalhadas sobre as últimas especificações e recursos web, incluindo HTML, CSS e JavaScript. Ele é uma ótima fonte de referência para programadores que trabalham com tecnologias web avançadas.

Em conclusão, esses cinco sites são uma excelente fonte de informações e recursos para desenvolvedores de todos os níveis de habilidade. Eles oferecem uma variedade de conteúdo, incluindo tutoriais, artigos, ferramentas e recursos, para ajudar os desenvolvedores a desenvolver seus projetos de maneira eficiente e eficaz. Além disso, eles são atualizados frequentemente com as últimas tendências e tecnologias, garantindo que os desenvolvedores estejam sempre trabalhando com as melhores ferramentas disponíveis. Eu recomendo a todos os desenvolvedores para marcar esses sites e visitá-los regularmente para ficar atualizado com as últimas tendências e ferramentas de desenvolvimento.
A former GitHub VP’s insights into how engineers build their products without actually knowing if they’ll be used
Tags: programming, devops, productivity, management
Published: 2023-01-13 22:27:17

{% youtube lG5wvp9S8eY %}

A grand vision for your product can be something you can get carried away with, but you should really start simple and iterate upon your ideas. Sam Lamber, CEO at Planetscale, joins Dan Lines on this episode of Dev Interrupted to discuss how the culture around product development can shape every aspect of said product. Listen to the full interview here ► https://devinterrupted.com/podcast/the-day-1-decisions-that-make-or-break-companies/

### Want to cut code-review time by up to 40%? Add estimated review time to pull requests automatically!
*gitStream is the free dev tool from LinearB that eliminates the No. 1 bottleneck in your team’s workflow: pull requests and code reviews. After reviewing the work of 2,000 dev teams, LinearB’s engineers and data scientists found that pickup times and code review were lasting 4 to 5 days longer than they should be.* 

*The good news is that they found these delays could be eliminated largely by adding estimated review time to pull requests!*

### Learn more about how gitStream is making coding better [HERE](https://linearb.io/blog/why-estimated-review-time-improves-pull-requests-and-reduces-cycle-time/?utm_source=Substack%2FMedium%2FDev.to&utm_medium=referral&utm_campaign=gitStream%20-%20Referral%20-%20Distribution%20Footers).

![Start using gitstream today!](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xg1l6hxt134px501bf7d.png)
Day 673 : When I Woke Up
Tags: hiphop, code, coding, lifelongdev
Published: 2023-01-13 22:26:48

_liner notes_:
- Professional : When I woke up there was a bunch of Slack messages asking for information on something I created last year. Guess people want to finally know more about it. haha Had a couple of meetings and then made some progress on a new Web Component. Functionally it works, just need to add some attributes so that people can customize it more.

- Personal : Last night, I went through a bunch of tracks for the radio show. After that, I added some mock data to figure out how I want to structure the values I want to send to the Stripe API so that it can create the Check out page for my side project.

![View from a riverbed in Yosemite Valley, CA, United States looking up at some pine trees with tall grey stone mountains behind](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bkd0our6z4njva9mqm3u.png)

Finishing up the pre-radio show work. Put the tracks into a playlist. Just need to put the tracks on the audio player and look up the Twitter and Instagram accounts of the artists. Going to eat some dinner, work on the radio show and maybe watch some anime.

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube xUNZW4KSj0o %}
Distributed Log with Splunk
Published: 2023-01-13 21:46:08

Happy new year to all. 2023 starts with Splunk logging tool recommendation.

Splunk is a software platform that enables you to collect, index, and analyze data generated by your applications and infrastructure. You can use Splunk to monitor and troubleshoot issues, as well as to gain insights into your data.

To distribute logging with Splunk, you can set up forwarders to send data from your applications or servers to a Splunk indexer. The indexer processes the data and stores it in an index, which can then be accessed using Splunk's search language. SPL uses a combination of commands, functions, and operators to manipulate and extract insights from data to search, analyze, and visualize data stored in the Splunk platform. Some common SPL commands include "search", "stats", "chart", "where", "top", "table", "eval" and "timechart" which allow users to search for specific data, calculate statistical summaries, create visualizations, and analyze trends over time. SPL also supports the use of regular expressions and wildcards to search for specific patterns in data. 

To create a query, users can enter a search string in the search bar at the top of the page. This search string can include keywords, field names, and operators to specify the data to be retrieved. For example, to search for all log entries containing the word "error," a user might enter the following query:

```
error
```

To refine the search, users can also specify a time range and other filters, such as the source or host of the data. For example, to search for all log entries containing the word "error" from a specific host within the past hour, a user might enter the following query:

```
error host=komercialize.com.br | range -1h
```

Once the query is entered, Splunk will execute the search and display the results in a table or chart format, depending on the type of data being queried. Users can then manipulate the results to extract insights and answer specific questions.

You can also use Splunk with Pager Duty to set up alerts in real time. Pager Duty can send alerts through various channels, such as email, SMS, phone calls, and push notifications, to alert team members of incidents and allow them to take immediate action. It also provides tools for scheduling on-call shifts, tracking incident resolution, and analyzing incident data to identify trends and prevent future issues.

Overall, Splunk is a powerful tool for managing and analyzing your log data, and can help you improve the performance and reliability of your applications and infrastructure.
HOW TO CREATE A SIMPLE LOGIN PAGE USING HTML AND CSS
Published: 2023-01-13 21:44:30

##Introduction to HTML and CSS:
HTML(Hypertext Mark-up Language) it is a basic foundation for building a webpage. It is used to display text, image, audio, video etc. HTML is not case sensitive and it is the basis and basic language in programming language. HTML is WORA(Write Once Run Anywhere).

CSS(Cascading Stylesheet) it is used to style HTML document. It describes how HTML element are to be displayed. It is used for beautifying a code written in Html. CSS can be classified into 3 namely:
Internal CSS
External CSS
Inline CSS

##STEPS INVOLVED

Step 1
Create a New folder and name it Login

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9exhxdhf7qby4qyakiua.PNG)


Step 2
Open any programming environment you have e.g Notepad++., Dreamweaver, Sublime text, Visual studio. I will be making use of Sublime text. Open a new file and save it as login page.html in your already created login folder


Step 3
HTML algorithm to display a login page

```Html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>creating a login page</title>
	<link rel="stylesheet" href="Login page.css">
</head>
<body>
	<h1><u>LOGIN PAGE</u></h1>
	<div>
	<form action="text" method="Get" enctype="form-data">
		<label for="username">Username</label><br>
		<input type="text" name="username" placeholder="Username"><br><br>
		<label for="Pwd">Password</label><br>
		<input type="Password" name="Password"><br><br>
		<input type="submit" name="login">
	</form>
</div>
</body>
</html>
```

Step 4
Open another new file and name it login page.css

Step 5
Link your html code to your css code

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3vhn5414fclfsjzo97ks.PNG)

Step 6
Css code to style the login page

```Css
body{
	background:cyan;
	margin:0;
	padding: 0;
}
h1{
	font-family:sans-serif;
	text-align:center;
}
form{
	text-align:center;
}
label{
	font-family:cursive;
	font-size:16px;
}
input{
	font-size:18px;
}
```

Step 7
After successfully saving your code, you will then right-click on your login page.html and click on "Open in Browser" and it will open on your default browser and the outcome of your code will be displayed

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zj5bdikoa4ot2v7n9j5m.PNG)
##Conclusion
We have successfully created a simple login page using HTML and CSS. I hope u find this little article easy and implementable.
Testing Features of Medusa
Tags: medusa
Published: 2023-01-13 21:39:34

---
title: Testing Features of Medusa
published: true
description: How to create a Next app that works with the medusajs server
tags: medusa
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2023-01-13 21:20 +0000
---

I've started to code a marketplace with Next and I have started to learn some of the plugins of medusajs on my way to that objective

BTW I wish I can succeed because sometimes I just want to giveup, it's not easy but as an old gamedev I can make things be fun

So I've created a repository called [nextjs-marketplace-medusa](https://github.com/nazimboudeffa/nextjs-marketplace-medusa)

Then `npx create-next-app@latest --typescript`

Then just install and configure TailWind

After that actually I use to tests some code about fetching the products

I use to code on Windows

So I have created a medusa server on an Ubuntu Desktop (actually 22.04) with VirtualBox

Installed Redis and Postgres like explained on the medusajs documentation site https://docs.medusajs.com

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

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

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

This server has an URL that I access from the Next app by changing the server's CORS to http://localhost:3000 even if I can just launch the Next app with changing the port to 8000, why? It's just to understand the CORS feature and let port 8000 as is for the Next Starter

I add a .env file to the app with the URL to the Ubuntu medusa server `NEXT_PUBLIC_MEDUSA_BACKEND_URL="http://192.168.0.45:9000"` and that's it

It works !


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

Next step is to separate the test that I do on the endpoint from the marketplace to a repository called [nextjs-tests-medusa](https://github.com/nazimboudeffa/nextjs-tests-medusa)

This approach allows to separate the medusa server from Windows in a VirtualBox and let to install multiple ones to work on the marketplace
Things I learned this week - 01 of 52 - 2023
Published: 2023-01-13 21:19:42

**Random Page Generator**

https://thispersondoesnotexist.com
This Person Does Not Exist.

Random Face Generator: This Person Does Not Exist
https://this-person-does-not-exist.com › ...
Generate random human face in 1 click and download it! AI generated 'This Person Does Not Exist' fake person photos: man, woman or child.

http://notarealhuman.com
generate. Try Not A Real Cat Copyright 2019 by S4BB Limited.

Which Face Is Real?
https://www.whichfaceisreal.com
Click on the person who is real. Person 1. Person 2. Which Face Is Real has been developed by Jevin West and Carl Bergstrom at the University of Washington ...

Stable Diffusion: DALL-E 2 For Free, For Everyone!
https://www.youtube.com/watch?v=nVhmFski3vg

How to Install & Use Stable Diffusion on Windows
https://www.youtube.com/watch?v=onmqbI5XPH8
Why unit testing ?
Tags: testing, beginners, programming, writing
Published: 2023-01-13 21:11:25

Unit testing is a software testing technique in which individual units or components of a software application are tested in isolation from the rest of the system. There are several reasons why unit testing is important:

1. It helps to catch bugs early in the development process, which makes it easier and less costly to fix them.

2. Unit tests provide a way to ensure that the code works as intended and that new changes don’t break existing functionality.

3. It helps to improve the design of the code by making it more modular and testable.

4. Unit tests serve as living documentation for the code, making it easier for other developers to understand and maintain it.

5. It enables developers to make changes to the code with confidence, knowing that if a unit test fails, it means that something is wrong and needs to be fixed.

6. It is a practice that helps with Continuous Integration and Continuous Deployment, allowing developers to catch issues early on in the development cycle and release new features faster.

In this blog series, we will explore these reasons in more detail and discuss the benefits of unit testing, the different types of unit tests, and best practices for writing effective unit tests.

[Part 1: Introduction to Unit Testing](https://dev.to/svenherr/part-1-introduction-to-unit-testing-with-examples-21k2)

[Part 2: Catching Bugs Early](https://dev.to/svenherr/part-2-catching-bugs-early-b3f)

[Part 3: Ensuring Code Quality](https://dev.to/svenherr/part-3-ensuring-code-quality-with-examples-3p3n)

[Part 4: Living Documentation](https://dev.to/svenherr/part-4-living-documentation-with-examples-chk)

[Part 5: Continuous Integration and Deployment](https://dev.to/svenherr/part-5-continuous-integration-and-deployment-with-examples-2hkg)