teleren/devto huggingface dataset:
HTTP CACHING
Tags: webdev, beginners, tutorial, programming
Published: 2022-09-06 22:08:53

So, recently I decided to take a pause with programming and learn more about caching, proxies, and load balancers. I discovered a lot of stuff that I didn't know about. Therefore, today wanted to talk a bit about HTTP caching. It's something straightforward, and some don't know how it works. 

**WHAT IS CACHING**
For who might not know what caching is?
It's like, a memory that saves your data from a request to reduce the time of access and resources. I think it will be much clear with a picture.



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


As we can see, our client sends a request to the server to read a file. Our server will send back a response to the client. It can be an HTML page or a JSON file, whatever.


Let's say after sometimes you decide to reread the same file or that you want to access the same data. What happens? Is your request going to be sent again to the server? And here is where caching comes from. 


The caching protocol has already saved your data temporarily. So instead of the server sending you back the response, it will be your caching protocol that does the job for the server.



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




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



As you can see, it's no more the server who is sending the response but, The caching protocol. That process augments the speed of access time and reduces the network's usage.


There are multiple ways of configuring, but I'm going to talk about one that I find more exciting talk than others: E-tag. (if you want to know more about other ways of configuring HTTP caching, check out this [article](https://www.tutorialspoint.com/http/http_caching.htm))



**WHAT'S ETAG?**

So, Etag is a unique identifier for a request. It helps the caching protocol to recognize if that request has already been sent or not, and if yes check if he has your data in the memory.


I heard that some people don't like it because it requires more configuration when you have more than 1 server and a load balancer. But I think it's not a big deal comparing his advantage, like the fact that it helps you prevent simultaneous updates of a resource from overwriting each other.

There is a lot to say about caching😁, so I wanted to make this article simple, hope it gives the feeling to dig more and learn more about caching.😊 Here is a great [ressource](https://youtu.be/HiBDZgTNpXY)if you want to learn more.

I mentioned load balancers before, but I think it can also be a great subject to discuss next time.

I hope you enjoyed reading it! 😊 Let me know what you think about caching. Have you ever used it? What was your setup?

Thanks 👌😊
Day 150: Just another day
Published: 2022-09-06 21:57:46

Hi!

Today marks 150 days (and still counting) exactly 5 months of this journey of ups and downs but still it feels like another day because it was. I continued learning about CSS cascade and selector specificity which I though I understood to find there is actually more that goes into it I found a new postgres hosting platform that I will be using for my project as I don't want to use Heroku since it terminate its free plans so I may look more into it I also realized that I may not be able to use Travis CI so I decided to shift to Circle CI and if I find it to be a pain in the neck I may fallback to Github actions 

Tomorrow I will be traveling I won't be coding much I will be fully back on Thursday

signing off...
Cover Letter Generator - Prototype
Tags: showdev, python
Published: 2022-09-06 21:32:19

I'm showcasing a cover letter generation tool I prototyped for fun a while back. This doesn't use any deep learning, or anything fancy.

[LINK](https://github.com/sarcXD/covlet-gen)

The idea is simple: you define a set of templates, and when running the tool can specify things like company name, role name, and achievements/things to showcase in the cover letter.

## Motivations
Mainly, this was written at a point where I was a bit tired and confused with just how many variants of cover letters I'd need to write.   
So, I'm a full stack engineer but I can apply to multiple roles
- Front-end
- Back-end
- Full-stack
- software-engineer  
And since each job and company is different there requirements require tuning the cover a bit every so often to match or highlight achievements that they want to see. That's when I reached this point. I wanted to see if I could make a utility that would simplify that process a bit. 

## Cool Features
1. You can specify a template, then generate an cover letter based on your requirements at run-time.
2. You can choose to either copy the generated cover-letter to your clipboard OR,
3. Generate a pdf, I do this using Fpdf.
4. a simple JSON datastore to track if you've already generated a cover letter for this role and company (for...reasons).

It's something I wanted to make, and see if it would be useful, and... it was slightly. What doesn't work is that the sentences seem a bit awkward, as I need to figure out the connectors between each achievement section.

Thats it,
Thanks
How to choose between the div and span tags in an HTML document and their practical usage.
Tags: webdev, beginners
Published: 2022-09-06 21:18:46

👉 **Firstly**,let's start by identifying the similarities and differences between <u>div</u> and <u>span</u> tags.

1️⃣ **div** and **span** tags are both generic HTML elements

2️⃣ **div** tag is a <u>block-level element</u> while on the other hand, **span** tag is an <u>inline element</u>.

3️⃣ **div** tag is used to wrap sections of a document, while smaller portion of text, image, and other content is wrapped using **span** tags.



- 
<u>**A div**</u>

div or (a division element) is defined as a generic <u>Block-Level element</u> used in HTML document to create sections for content such as headers, footer, images and other elements.

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

<u>**What is block-level element**🤔❓</u>

👉 A block-level element is a page element that takes a new line and the whole width of the  browser or its container. Example 👇

![block-level element](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uknyv290j287csnim2z9.png)

- **<u>span</u>**

span  tag is an <u>Inline element</u> that is used to select inline content such as **text**, **links**, and other **HTML elements** that are displayed inline for styling purposes.
Example 👇 

![inline element](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e4ijl8ekdr0xkowr2751.png)

<u>**Inline element**🤔❓</u>

👉 Inline element displays in a single line.And doesn't create a new line,it only takes up the space bounded by the tags defining the HTML element.


![Inlineelement](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nhuqg9kkayye97y9q2a1.jpeg)


<u>Can the use of **div** and **span** tags be regarded as the best practices in **HTML document**🤔❓</u>

👉Div and span tags are considered <u>**"generic"**</u> components and are not best practices in HTML documents since they do not accurately communicate the content contained inside to the search engines🥺.

Only **"semantic"** elements communicate a true meaning ✅.

👉 <u>A semantic element</u> explains its meaning in detail to both the browser and the developer.

Example of semantic Elements are:
• nav
• header
• footer
• main>
• section ,e.t.c

<u>**SUMMARY</u>**
1️⃣ When creating a block-level element, a div is used; however, when wrapping content, such as text, a span is used.

2️⃣ Use of semantic elements is the best practices  when creating a website.
9amim: An Arabic logo generator Saas product.
Tags: logo, generatorlogo, makerlogo, design
Published: 2022-09-06 21:17:41

The first Arabic and English logo generator providing branding for businesses in an easy and accessible way. Make a logo in minutes with no need for any background knowledge of graphic design and kickstart your business! We primarily operate in Saudi Arabia and are expanding everyday.


: https://9amim.com/
Reconmap 2.0.0 release notes
Tags: security, opensource, pentesting, infosec
Published: 2022-09-06 21:03:18

(Photo by <a href="https://unsplash.com/@nasa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">NASA</a> on <a href="https://unsplash.com/s/photos/rocket?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>)

Here we are again with another release notes for our vulnerability management and penetration testing platform for teams, and I know it has been a long while since the previous post but this does not mean we are dead, we were just taking a break, don't we all deserve one?

# Major change

## Keycloak integration

We have decided to use a major version increase to 2.0.0 because the integration with Keycloak has been significant and, in a few ways, backwards incompatible.

Previous Reconmap versions were using a ad-hoc user management code that it was too simple. Although we have many users that are single pentester, or small teams, our dreams are big and we want to be the enterprise-grade solution for pentesting and vulnerability management. Having a solid identity management architecture was always part of this plan and Keycloak made it a reality.


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



Keycloak offers amongst other features the following:
* Single-Sign On and Single-Sign Out for browser applications.
* OpenID Connect support.
* OAuth 2.0 support.
* SAML support.
* Identity Brokering - Authenticate with external OpenID
* Connect or SAML Identity Providers.

Read more about it [here](https://www.keycloak.org/)

## Multi-language support

The Reconmap dev team is multinational, so it was crazy to think that the UI was only offered in English. This version introduces partial support for Spanish, and others such as French and Portuguese are coming next. Want to help us translate Reconmap to your language? Great! See details here.


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



## Bugfixes and improvements

Other than that, we have completed the typical bugfixes and improvements that you are accustomed to.

# Staying in touch

Please stay in touch by joining [gitter](https://gitter.im/reconmap/community), leaving ideas in the [discussion board](https://github.com/reconmap/reconmap/discussions) or opening tickets for [bug reports](https://github.com/reconmap/reconmap/issues).

Thanks for your continuous support, and stay safe.
Highlight Console Warnings and Errors in iTerm2
Tags: iterm2, console
Published: 2022-09-06 20:38:15

---
title: Highlight Console Warnings and Errors in iTerm2
published: true
description: Enable iTerm2 to highlight console warnings and errors
tags: iterm2, console
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kuu2iqoauv2jbru5l1p8.jpg

---

# The Issue

Have you ever had the issue of scrolling through long blocks of output in your terminal and miss **errors** and **warnings** entirely. This kept happening to me frequently until I finally had enough and took it to Google.

iTerm2 has a text highlighting feature that offers the solution needed to stop missing those errors.

## The Solution 

[Highlight Text](https://iterm2.com/documentation/2.1/documentation-highlights.html) offers a wide variety of features and abilities, but today we're going to utilize it to use regular expressions to check for different kind of messaging.

### Enable Highlighting

In your iTerm2 Profile settings (**iTerm2 Preferences => Profiles**) switch to **Advanced** and look for the **Triggers** section. Click **Edit** to add your own triggers. Select the '**+**' symbol at the bottom left to create a new one.

Add the following regular expression to react on lines containing the text "error":

```bash
(?i:.*(error|fatal).*)
```

Flags are placed at the start of the regex. We use the case insensitive flag `i` so the regex starts with `?i:`. After the colon, the regular expression begins.

Select **Highlight Text** as an action and customize the text color and background as needed. You can either create multiple triggers or define multiple words in your pattern to highlight. 

Create a highlight for warnings:

```bash
(?i:.*warn|warning.*)
```

To learn more about the regular expressions, check out [regex101](https://regex101.com/) to get more details.

When you are done, your triggers may look something like this:

![Defined triggers in iTerm2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3zr8ixsk63307ygsb7dq.png)

And the output:

![iTerm2 window with console log messages: console log (this is a regular console log) in plain text, console warning (this is a warning) in yellow text, and console error (this is an error) in red text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/khrvmme2pmex1t2dtgfk.png)
Sync/Async using the fs module in Node JS
Tags: node, javascript, webdev, backend
Published: 2022-09-06 20:36:05

On the journey of learning backend development with Node, I will be sharing my learnings each day.


**1. Using fs module Synchronously:**
![Synchronous fs module](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lyslpnw67glp79urkciv.png)

Output:


![Sync result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d1cadh05p1v9k7d35ju7.png)


**2. Using fs module Asynchronously:**
![Asynchronous fs module](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n22c25rzzdjf6mg0jtbz.png)

Output:

![Async result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/719c86u9tof011yu9yw1.png)


Conclusion: 

- **Synchronous** is the vanilla JavaScript way of executing code.


- When the fs module is implemented using **sync**, the code execution takes place line-by-line and does not move to the next line until the current is executed. 

- Thus, the console logs written in the sync code are executed in the same sequence as they are written.


- Whereas, when fs is implemented using **async**, we can notice the line `starting next task` is printed before `done with this task`, this explains the async behaviour of JS while using the **fs** module here.

- The code uses a **callback** (oldest and non preferred method to implement asynchronous behaviour in JavaScript) function having `err, result` as the parameters.

**Detailed explanation:** When Node is parsing the code, as soon as it comes to the function call of `readFile()` which is an async function, it encounters a callback (or [callback hell](https://www.geeksforgeeks.org/what-is-callback-hell-in-node-js/) in this case) which rather than halting the code, lets it execute continuously, while waiting for the response from the `readFile()` function. Thus, the synchronous console.logs, which are outside of `readFile()` are executed first, letting the asynchronous code finish in parallel.
Top 7 Featured DEV Posts from the Past Week
Tags: top7
Published: 2022-09-06 20:32:25

---
title: Top 7 Featured DEV Posts from the Past Week
published: true
description: A round up of the most-read and most-loved contributions from the community this past week
tags: icymi 
cover_image: https://thepracticaldev.s3.amazonaws.com/i/sfwcvweirpf2qka2lg2b.png
---

_Every Tuesday we round up the previous week's top posts based on traffic, engagement, and a hint of editorial curation. The typical week starts on Monday and ends on Sunday, but don't worry, we take into account posts that are published later in the week._ 

## Top Free Heroku Alternatives

You’ve likely heard that Heroku announced that they will shut down free Heroku Dynos, free Heroku Postgres, and free Heroku Data for Redis after November 28th, 2022. Here are some of the best alternatives selected by @meshvpatel18.

{% embed https://dev.to/meshvpatel18/top-heroku-alternatives-for-free-46g1 %}


## How to Maintain OSS Projects

Based on an earlier experience, @theaccordance reflected on their OSS projects which resulted in several enhancements to both the projects and their workflows. Check out some of those changes to consider for your own OSS Projects.

{% embed https://dev.to/theaccordance/how-i-maintain-oss-projects-2oeo %}


## SSR Performance in JS Frameworks

It’s no understatement to say that there are lots of JS frameworks out there to choose from. New frameworks often bring innovation to the JS ecosystem. This can be in how we build apps and/or how performant they are. Here are some SSR performance testing done on a mix of popular and newer frameworks by @kaspera.

{% embed https://dev.to/kaspera/we-measured-the-ssr-performance-of-6-js-frameworks-heres-what-we-found-1ck0 %}


## Visualize Fires Around the World

In this article, @alagrede uses open data with Plotlyjs and Streams through Znote in JavaScript to explore active fire data around the world.

{% embed https://dev.to/alagrede/visualize-active-fires-around-the-world-with-javascript-3heh %}


## Big O Made Simple

When @heyjtk got into programming, she procrastinated learning Big O for a while out of intimidation. This article is for anyone who feels similarly. 

{% embed https://dev.to/heyjtk/big-o-notation-basics-made-dead-simple-1c9m %}


## A Developer’s GitHub Workflow

In this article, @rembertdesigns takes a look at the key concepts of the GitHub development workflow for those in tech including working with repositories, branches, forks, commits, pull requests, and merging.

{% embed https://dev.to/rembertdesigns/a-web-developers-workflow-for-github-1b72 %}


## All Countries’ Flags in CSS

Take a look at all 195 country flags rendered in HTML and CSS by @j471n! You can also check out the flags on CodePen if you scroll all the way down.

{% embed https://dev.to/j471n/i-made-all-countries-flags-using-html-css-4cnc %}


_That's it for our weekly Top 7 for this Tuesday! Keep an eye on dev.to this week for daily content and discussions...and be sure to keep an eye on this series in the future. You might just be in it!_
How To Containerize Your Python App using Docker in just 4 steps
Tags: docker, python, devops, dockerfile
Published: 2022-09-06 20:19:45

In this post you'll know how To containerize your python application using Docker in just 4 steps.

**Step 1**: Creating Python App
**Step 2**: Writing Dockerfile
**Step 3**: Docker Build
**Step 4**: Docker Run

Watch this 40 sec youtube shorts to learn how you can implement these 4 steps.
https://youtube.com/shorts/n65IEkaPIzM

[](https://youtube.com/shorts/n65IEkaPIzM)
Hungary on the map of information technology
Tags: development, developer
Published: 2022-09-06 19:55:55

The Hungarian labor market is a mixed bag. In recent years, the country has seen a surge in international investment, the majority of which has gone into the industrial sector, particularly the automotive sector.

However, one of Hungary's national treasures, in my opinion, is its experienced IT professionals, who are at the cutting edge of both knowledge and experience. Hungary, as a European country, is in the same time zone as the EU countries, and its culture is nearly identical to that of the EU countries.

Since the inception of COVID, there has been a significant increase in demand for [Hungarian software developers](https://bluebirdinternational.com/hungary-it-outsourcing/) not only in Europe, but also outside of Europe, particularly in North America. Recognizing this, many Hungarian businesses (including [Bluebird](https://bluebirdinternational.com/)) began contacting prospective foreign customers.

What can these companies in Hungary with a solid track record and dependable services offer? Basically, there are three services:
1. provision of IT professionals for in-house staff as part of [IT recruitment](https://bluebirdinternational.com/it-recruitment/) services
2. [IT staff augmentation](https://bluebirdinternational.com/staff-augmentation/) to provide IT specialists on a daily rate for IT projects ([Java](https://bluebirdinternational.com/staff-augmentation/hire-java-developers/), [JavaScript](https://bluebirdinternational.com/staff-augmentation/hire-javascript-developers/), [Python](https://bluebirdinternational.com/staff-augmentation/hire-python-developer/) and more)
3. [development of software](https://bluebirdinternational.com/nearshore-software-development/) on a nearshore basis

Is it worthwhile to work wi: definitely. Not only because of the cost, but also because the knowledge and IT experience of Hungarian software developers can be extremely valuable for IT projects anywhere in the world.
Release 0.3.0 of my Perl Dist::Zilla GitHub Action
Tags: perl, githubaction, release, opensource
Published: 2022-09-06 19:48:50

---
title: Release 0.3.0 of my Perl Dist::Zilla GitHub Action
published: true
description: Release 0.3.0 of my experimental Dist::Zilla GitHub Action
tags: perl, githubaction, release, opensource
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
---
I have just made a release of [github-action-perl-dist-zilla
](https://github.com/jonasbn/github-action-perl-dist-zilla) making version 0.3.0 available in the [GitHub Marketplace](https://github.com/marketplace/actions/github-action-for-perl-s-dist-zilla).

The release is long over due and the first in two years. I have kept the project trunk up to date based on my trusty friend Dependabot, but nothing _really_ warranted a release. It was not until I received [a PR](https://github.com/jonasbn/github-action-perl-dist-zilla/pull/22) from Alceu Rodrigues de Freitas Junior aka glasswalk3r, that things got rolling.

I was actually able to _lure_ Alceu Rodrigues de Freitas Junior into contributing to the base image used by the action - **Ebirah**

Ebirah is a Docker encapsulation of the magnificent Dist::Zilla distribution tool for Perl distributions, but more in that in another post on the release of Ebirah 0.7.0, which also made it into this release. This action is built on top of Ebirah, so of you read my release notes for Ebirah, you can see that perhaps more releases were warranted had Ebirah had more frequent releases.

I primary created this action for my self and I am currently using it for 6 of my own repositories/Perl distributions and I just discovered that I have two users beside myself - hurrah.

PRs, requests, issues etc. are always most welcome.

Thanks to glasswalk3r for his contribution.

The collected release notes are included below.

## 0.3.0 2022-09-03 Feature release, update not required

- Bumped [Ebirah](https://github.com/jonasbn/ebirah) requirement from version 0.6.0 to 0.7.0. Please see [Ebirah](https://github.com/jonasbn/ebirah) change log for details

- This release holds a set of enhancements by @glasswalk3r via PR: [#22](https://github.com/jonasbn/github-action-perl-dist-zilla/pull/22)
  - Allows repositories that does not have a `cpanfile` to have their dependencies installed
  - Does optional configuration of the [CPAN](https://metacpan.org/pod/CPAN) client, since it might be required by some distributions
  - Changed to use of Bash, since it is available in the Docker image
  - Fixed entry point so it can be tested outside GitHub eco-system

REF: [GitHub](https://github.com/jonasbn/github-action-perl-dist-zilla/releases/tag/0.3.0)