teleren/devto huggingface dataset:
Everything you need to know about HTTP Caching - YouTube
Tags: webdev, internel, http, cache
Published: 2021-07-19 09:21:04

Everything you need to know about HTTP Caching - YouTube: {% youtube HiBDZgTNpXY %}

Benefits for cache

- Reduced latency
- Cut down the bandwidth
- Reduced load on the server

Cache location

- Browser cache
- Proxy cache
- Revered Proxy cache (Server side)

Cache types

- Stale Content
- Fresh Content

Cache actions

- Cache validation
- Cache invalidation

How does the content  get cached?

- HTTP Headers
    - cache headers: cache-control (expires, pragma)
    - Validators: etag, if-none-match, last-modified, if-modified-since
Side job, get paid for testing websites.
Tags: testing, job, money
Published: 2021-07-19 09:00:49

https://www.hellopingpong.com/become-a-tester?r=1q8B\
Sign up and wait for invite, read description on landing page.


Do you have experience in testing products? Write me a comment.

Also, you can message me via Twitter @LabPajkic
Check out my github https://github.com/Pajkic-lab
Is HackerReank the platform to start coding for a beginner ?
Tags: codereview, programming, beginners, cpp
Published: 2021-07-19 08:35:02

Hello, Hacker Rank is a great way to practice trivia. You can learn a lot by doing things, but 
**start practicing on hacker rank = good with theoretical/syntax knowledge.** 
It means you have knowledge of programming first to begin your journey at HackerRank, here the main confusion arises with the word “Beginner”. When I was a newbie I also use to understand the HackerRanks is for beginners but beginners who at least have good theoretical knowledge, knowledge of syntax. You cant start your C++ programming from scratch on HackerRank you must have to study the language from a good tutorial like Coding Ninjas. Then you can start practicing programming questions on Hackerank. I'm sorry if the truth makes some people upset, but I'm being honest here. This venture of learning a new language is surely not the easiest one. Even a tad bit harder for Self-Taught programming. In my suggestion Coding Ninjas is a real savior to all of the frustrated and confused newbies out there.
For every coding platform I came across so far, Coding Ninjas has the Best UI/UX. The platform is very intuitive. It is the best platform to learn C++ or any language, which is very necessary for any beginner for practicing. The platform can be used to learn new skills and to improve on them as well. It helps beginners to navigate and explore new coding problems
Best Top 3 Programming Fonts
Tags: codequality, vscode, programming, productivity
Published: 2021-07-19 08:31:37

Hello guys 👋 Hope you are fine 😊

So On Top of the list the font comes is - **Operator Mono**

## 1. Operator Mono ( Premium )

This font is so cool and beautiful but its a little expensive. This font is one of my favourite font

The font looks like this 

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9t61oy77mmxeottw4z3t.png)
 
As you see it is looking so cool and clean 😊

Link To Download - https://www.typography.com/fonts/operator/styles


## 2. Fira Code ( Free ) 

Fira Code is a free monospaced font containing ligatures for common programming multi-character combinations.

It looks pretty too here it is 👇

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9kusc3vinn0imz1mm6vz.png)
 
Link To Download - https://fonts.google.com/specimen/Fira+Code



## 3. Cascadia Code ( FREE from Microsoft )

This font is also cool it is similiar to Fira code and also has Ligatures which are just amazing

Here is a quick look 

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ygylaqh2m37jew6btrki.png)

Link to Download - https://github.com/microsoft/cascadia-code

Cool right ? 🔥

Hope you enjoyed Reading This Blog  😊

Also Subscribe to my youtube Channel to Learn more about coding Thankyou! for giving your time 😊💛

 - https://youtube.com/c/codingfire?sub_confirmation=1
Remote Jobs for Javascript, Go, Python and Fullstack Developers
Tags: showdev, go, python, javascript
Published: 2021-07-19 08:26:25

---
title: Remote Jobs for Javascript, Go, Python and Fullstack Developers
published: true
description: Remote Jobs for Javascript, Go, Python and Fullstack Developers
tags: #showdev #golang #python #javascript
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tr5c456dwkf2o4aguc0b.png
---
We know it all...


Since Covid 19 changed all our lives, Remote Jobs offers are growing, as many companies realized that this mode of work works fine for them and can attract new developers out there.


I have run now about three years four developer-related Job Boards, which have since begun a Remote Filter for Job Candidates and, of course, those options for companies adding Remote Jobs.


Here the boards:

[Remote Fullstack Developer Jobs](https://fullstackjob.com/remote/jobs)
[Remote React Jobs](https://reactjsjob.com/remote/jobs)
[Remote Javascript Jobs](https://javascriptjob.xyz/remote/jobs)
[Remote Python Jobs](https://pythonjob.xyz/remote/jobs)
[Remote Golang Jobs](https://golangjob.xyz/remote/jobs)
[Remote Rust Jobs](https://golangjob.xyz/remote/jobs)
A basic use case of Arguments or Rest Parameters
Tags: javascript, arguments, restparameters, es6
Published: 2021-07-19 08:18:05

---
title: A basic use case of Arguments or Rest Parameters
published: true
description: This is a basic problem taken from freecodecamp
tags: JavaScript, Arguments, RestParameters, ES6
//cover_image: https://direct_url_to_image.jpg
---

#Seek and Destroy

*You will be provided with an initial array (the first argument in the destroyer function), followed by one or more arguments. Remove all elements from the initial array that are of the same value as these arguments.*

`destroyer([1, 2, 3, 1, 2, 3], 2, 3) should return [1, 1].`
`destroyer([1, 2, 3, 5, 1, 2, 3], 2, 3) should return [1, 5, 1].`
`destroyer([3, 5, 1, 2, 2], 2, 3, 5) should return [1].`
`destroyer([2, 3, 2, 3], 2, 3) should return [].`

**Approach:**
* Make an array with with the parameters except the 1st array
* Filter the 1st array excluding the new array items

**Using Arguments:**
```
function destroyer(arr) {
    let newAr = [];
    for( let i = 1; i < arguments.length; i++ ) {
      newAr.push( arguments[i] );
    }
    return arr.filter( item => !newAr.includes(item) );
}
```

**Using Rest Parameters:**
```
const destroyer = (...arr) => {
    const checkedArr = [...arr][0];

    let newAr = [];
    for( let i = 1; i < [...arr].length; i++ ) {
      newAr.push( [...arr][i] );
    }
    
    return checkedArr.filter( item => !newAr.includes(item) );
}
```
COURSERA SPECIALIZATION - Java Programming and Software Engineering Fundamentals COURSE 1
Tags: css, html, beginners, coursera
Published: 2021-07-19 08:06:25

I completed the first course of my java programming and software engineering fundamentals specialization yesterday and this is a post to tell you its objectives and if it's a good fit for you too!

**Motivation for taking this course**

I’m a second-year engineering student from a tier 3 college in India and I’ve just finished my semester end exams. We got 4 weeks off from college and I had been watching all kinds of youtube videos on how to get myself ready for placements. I decided to work on my basic programming skills so I would have a solid foundation for acquiring new skills later.

**Objective** 
The first course offered under this specialization was ‘Programming foundations with HTML, CSS and JavaScript’ by Duke University. There were four different instructors from Duke University for this course. The course objective was to teach us foundational programming concepts in HTML, CSS and JavaScript like branching and looping and methods which would aid us in Problem Solving.

**Week 1**
Week 1 was an introduction to the course as well as an explanation of how to design a basic web page using HTML. We used codepen.io for this. They also provide us with the duke learning database which makes it very easy for beginners like me to look for in-built functions in HTML and what they do. I also got to do a practice exercise with what I had learnt which further solidified the information in my brain. 

**Week 2**
Week 2 went more into detail about HTML, CSS and JavaScript. I learnt the use of loops and if-else for problem-solving. They taught us functions as well as their return types and function calls. They taught us how to query a pixel in an image and build up to solving the green screen problem( which is to replace the green screen in the background with another image using code). They provided their own environment for coding and it was quite easy to use and easy to read. 

**Week 3**
The purpose of week 3 was to introduce us to the concept of buttons in web pages. I learnt how to change their colours and text. I also learned how to add functionality to it in HTML and write the corresponding code in JavaScript on codepen. I also learnt about canvas in HTML. They gave a lot of examples and exercises which I found very helpful.

**Week 4**
So week 4 was the final week and it was about image filters on the web. They gave us real-life problems to solve as three fun projects and quizzed us about them.

**Conclusion**
All in all, I was able to add HTML, CSS and javascript to my resume as skills I know thanks to this course. It is fairly basic and people with no prior knowledge of programming or web designing will find it pretty useful. I hope this helped anyone who’s looking to learn these things and try them out.
[App] AirportDB API Service
Tags: javascript, webdev, codenewbie, showdev
Published: 2021-07-19 07:32:30

Hi developers! :heart_eyes:

Recently I released the new airport database service! :tada::tada:

:point_right: Check it out here: [airportdb.io](https://airportdb.io)

It contains about 60k airports data in JSON format, with runways, frequencies, navaids and countries information.

That replaces the GitHub [airport-db](https://dev.to/epranka/github-based-airports-api-service-b92) about I write a time ago. 

Maybe you will be interested to create some app that uses this API.

API is free! :heart:

If you create something I would be love to feature your project on [airportdb.io](https://airportdb.io) page.

Now the API have only one endpoint to get airport by its ICAO code. But If you need some additional endpoints, let me know. Or maybe you want to join contribute this project too? :thinking:

:book: You can read more about it: [airportdb.io](https://airportdb.io/#about)

Any feedback or suggestions are appreciated! :blush:
Would it be better to leave office work and sell digital products?
Published: 2021-07-19 07:29:04

I don’t want to share about my wax income here because I don’t have a good sale yet :)

I just want to talk about how I found the answer to the question I asked myself 4 months ago today.

Yes, I quit all my freelance jobs and permanent office work 4 months ago. The reasons were many and I can only say that I really wanted digital product sales as well as time management.

So let me introduce myself to you in the middle of the article :) I am a Product Designer living in Uzbekistan and love to explore user-friendly interfaces.

1 month ago I launched my first digital product and today I am very happy to have done it. This product is called the Elegant Dashboard Kit (https://dashboard.elegant-goodies.com/) and includes a Figma design and a code version.

I didn’t think much about which direction to run, because just rubbing and running was important.

So I worked 2 weeks on this product and it was fair. I basically started at PH and the following is the monthly result on the top image.

So some money and what?

Working for money is bad, but you have to work hard to find a good source of income someday. Launching my first product made me work so hard and it came back with a great experience.

It doesn’t matter what field or round you start because in the next steps it will be self-evident and you will be able to think more clearly.

Good luck to everyone and don’t forget to share your achievements!
How to create PDF in browser JS
Tags: javascript, pdf
Published: 2021-07-19 06:37:54

In this article, I will share my experience with PDF libraries in browser-js & recommend [pdf-lib](https://pdf-lib.js.org/).

# How I got here
Pdf manipulation is a perfect task to include in js-bundler benchmarks. It happens among real-world requirements; the output is obviously either correct or broken, and you need a heavy library to get the job done. In some of my previous articles:
* [How to lazy load in webpack 5](https://how-to.dev/how-to-lazy-load-library-in-webpack-5) 
* [How to speed up webpack with esbuild-loader](https://how-to.dev/how-to-speed-up-webpack-with-esbuild-loader)

I needed some easy-to-use library, that I can integrate fast & focus on the rest of the task. First I got to [PDFKit](https://www.npmjs.com/package/pdfkit), but at the time it was building smooth in webpack 5, and it felt like setting my benchmark code will be really painful. Luckily, later I started my search from scratch and got to [PDF-LIB](https://pdf-lib.js.org/). With this library, the integration was smooth and it worked perfectly out of the box.

# Examples

The library documentation has [a nice set of examples](https://pdf-lib.js.org/#examples). Their hello word example:
```html
<html>
  <head>
    <meta charset="utf-8" />
    <script src="https://unpkg.com/pdf-lib"></script>
  </head>

  <body>
    <iframe id="pdf" style="width: 100%; height: 100%;"></iframe>
  </body>

  <script>
    createPdf();
    async function createPdf() {
      const pdfDoc = await PDFLib.PDFDocument.create();
      const page = pdfDoc.addPage([350, 400]);
      page.moveTo(110, 200);
      page.drawText('Hello World!');
      const pdfDataUri = await pdfDoc.saveAsBase64({ dataUri: true });
      document.getElementById('pdf').src = pdfDataUri;
    }
  </script>
</html>
```

is what I used as base code in my benchmarks, and you can see it in action here:
https://marcin-wosinek.github.io/esbuild-loader-pdf-lib/

# Summary
My way of getting into PDF creation was nonstandard, but PDF-LIB was very smooth to integrate. I'm not sure how it compares with the others in more advanced tasks, but PDF manipulation can get complicated on its own so I appreciate that the library doesn't give headaches on the setup. What are your experience with PDF libraries in javascript?
Angular - HTML Debugger Mode (feature request) 
Tags: angular, javascript, webdev, html
Published: 2021-07-19 06:25:30

---
title: Angular - HTML Debugger Mode (feature request) 
published: true
description: Feature request in Angular framework to enable the bounded key over the HTML elements. It is similar to ng-reflect but here instead of value we can see the JSON key bound over. 
tags: angular, JavaScript, webdev, html
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0swliwwgpulth6syibd2.png
---
Hello Coders, 

Here I would like to share a feature request that I have raised to Angular community. 

This is to add a feature where a developer can see an object key bound over an HTML element.

This can be helpful where a developer has to check for a key from a big chunk of service response.

Requesting to go over the below link of Github and support by giving an upvote.

https://github.com/angular/angular/issues/42269#issue-899733493

Also share your thoughts in comments. 

Thanks.
Read and Write Streams in NodeJS
Tags: node, nodejstutorials, nodestreams, nodetutorials
Published: 2021-07-19 06:15:16

In Node.JS, the streams is the concept where we reads the data and sends the data to destinations in a continuous way. There are some events uses in handling the streams like data, end, error, finish. In Node.Js the streams are mostly using in real-time applications like chat app, graphical interface app, sending-receiving files, video-conferencing app, Real-time location based apps, movies or songs streaming apps etc. So, here is an detailed tutorial with code please read here read and write streams in Node.js https://www.w3courses.org/read-and-write-streams-in-nodejs/
Tablet Dashboard UI CSS&HTML
Tags: codepen, css, html, ui
Published: 2021-07-19 06:12:42

Nice looking ui design for tablet with modern hover effects.

{% codepen https://codepen.io/FlorinCornea/pen/poPeRKB %}

The html code is just a simple structure with one aside element and one section.

The HTML:

```HTML
<div class="page">
  <aside class="menu">
    <a href="" class="logo">Logo</a>
    <a href="" class="menu-item">
      <p class="material-icons icon">dashboard</p>
      <p class="text">Dashboard</p>
    </a>
    <a href="" class="menu-item">
      <p class="material-icons icon">manage_accounts</p>
      <p class="text">Settings</p>    
    </a>
    <a href="" class="menu-item">
      <p class="material-icons icon">today</p>
      <p class="text">Calendar</p>    
    </a>
    <a href="" class="menu-item active">
      <p class="material-icons icon">touch_app</p>
      <p class="text">Accesibility</p>    
    </a>
    <a href="" class="menu-item">
      <p class="material-icons icon">theaters</p>
      <p class="text">Theaters</p>    
    </a>
  </aside>
  <section class="main">
    <h2>Accesibility</h2>
    <ul>
      <li>
        <div>Item</div>
        <div>Price</div>
        <div>Rate</div>
      </li>
      <li>
        <div>Itmem 1</div>
        <div>12.5</div>
        <div>2 out of 10</div>
      </li>
      <li>
        <div>Itmem 2</div>
        <div>22.8</div>
        <div>5 out of 10</div>
      </li>
      <li>
        <div>Itmem 3</div>
        <div>37</div>
        <div>4 out of 10</div>
      </li>
      <li>
        <div>Itmem 4</div>
        <div>299.9</div>
        <div>9.5 out of 10</div>
      </li>
      <li>
        <div>Itmem 5</div>
        <div>0.5</div>
        <div>0 out of 10</div>
      </li>
      <li>
        <div>Itmem 6</div>
        <div>52.52</div>
        <div>8 out of 10</div>
      </li>
      <li>
        <div>Itmem 7</div>
        <div>24.9</div>
        <div>7 out of 10</div>
      </li>
    </ul>
  </section>
</div>
```

For the css part i'm going to add only the more interesting element that is the menu hover effect.

So for a menu item we have the following structure in HTML:
```HTML
    <a href="" class="menu-item">
      <p class="material-icons icon">dashboard</p>
      <p class="text">Dashboard</p>
    </a>
```

in order to make it look as I intended, the following css was needed:

```CSS

.menu a.menu-item {
  display: block;
  text-decoration: none;
}

.menu a.menu-item:hover .icon,
.menu a.menu-item.active .icon {
  background-image: linear-gradient(-70deg , #08bfb3, #44e4c4);
  color: #eee;
  border-radius: 10px 10px 0 10px;
  z-index: 2;
}

.menu a.menu-item:hover .text,
.menu a.menu-item.active .text {
  background-image: linear-gradient(-90deg , #2a71e5, #1a71a8);
  z-index: -1;
  border-radius: 10px 0 0 10px;
  width: 54%;
}

.menu .icon {
  position: relative;
  color: #0e8af6;
  margin: 5px;
  padding: 10px;
}

.menu .text {
  color: #eee;
  padding: 20px 20px 20px 25px;
  margin: 0 0 0 -30px;
}

.menu p {
  line-height: 24px;
  vertical-align: middle;
  display: inline-block;
}
```
HTML tags | address
Tags: html, tags, address
Published: 2021-07-19 06:08:41

It is used to **define the contact information of the author or owner** of a document or an article, which can be an individual, several or an organization. In the same way, it can be used to **mark any type of address** that appears in the document.

The contact information can be a physical address, a phone number, an email, a URL, social networks ... and it should contain the name of the person, group or organization that owns it.

**It should only contain contact information**, not other elements like post dates (`<time>`).

May not contain other `<address>` or headers (`<h1>`-`<h6>`), sectioning content (`<article>`, `<aside>`, `<section>`, `<nav>`), or `<header>` or `<footer>`.

- Type: *block*
- Self-closing: *No*
- Semantic value: *No*

[Definition and example](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/address) | [Support](https://caniuse.com/mdn-html_elements_address)
How to set up log4j configuration with XML and properties
Published: 2021-07-19 06:01:16

---
title: How to set up log4j configuration with XML and properties
published: true
description: We look into how to set up log4j configuration with XML and properties. XML is pretty simple to configure, and properties are similar in structure but might need a bit more explanation. Configuration in log4j could also be done via code, but I have another video for that.
tags:
cover_image: https://i.ytimg.com/vi/ueDJD25yoRs/maxresdefault.jpg
---

{% youtube ueDJD25yoRs %}

We look into how to set up log4j configuration with XML and properties. XML is pretty simple to configure, and properties are similar in structure but might need a bit more explanation. Configuration in log4j could also be done via code, but I have another video for that.
Hosting static sites in S3
Tags: aws, devops, cloud, beginners
Published: 2021-07-19 05:59:49

Let's see how a website deployment work. When we deploy a website on a server then we actually open a port on a server and then do some calculations on the server have some state or DB etc. We process the requests and serve files after processing the request but that is not the case for static files in this we just have to serve files without processing them. So, setting up a server for them is useless. If we can serve these files as required then we are good. This means that we just need storage for our files mapped to the requests and we can also have some dynamic behavior if our files are js files because the browser can process js files so we just send static js files which later on our browser can process.

AWS S3 provides us with this we deploy files in our S3 bucket and serve them statically. We just need to add some way by which we can join it to a web address. There is a setting in S3 which allows us to do just that. This way we need not maintain servers and cost reduces drastically. It can be used to deploy a lot of framework website too like React, Angular, Vue just not the ones that use SSR because they need to process data in the server. 

In the next tutorial we will see how to setup static websites on AWS S3.
Head First Design Pattern: 6 of 10
Published: 2021-07-19 05:42:08

I just learnt a new design from the Head First Design Pattern book. Today, I learnt about the Adapter.

According to Head First Design Patterns, the Adapter pattern is a pattern that allows you to convert the interface of a class into another interface clients expects.
The adapter lets classes work together that couldn't otherwise because of incompatible interfaces. It does so by wrapping existing classes and  mapping requests from the existing class to the new system.

Implementing the Adapter pattern is pretty straight. For example you were asked to work on a feature for your mobile app that requires you to integrate a third party library that only accepts data in XML. 
```kotlin
interface XMLProvider {
    fun sendData(): List<XML>
}

class XML(val data: String)

class JSON(val data: String)

class JSONNetworkingClass() {
    fun sendData(): List<JSON> = listOf(JSON("jsonnnnnn derulo"))
}

class XMLToJsonAdapter(val jsonNetworkingClass: JSONNetworkingClass) : XMLProvider {

    override fun sendData(): List<XML> {
        //convert json to xml.
        return jsonNetworkingClass.sendData().map { XML(it.data) }
    }
}

fun main() {
val xmLLibrary = XMLLibrary.init(XMLToJsonAdapter())
}
```
When you need to use an existing class perhaps from legacy code or libraries and its interface is not one you need, use an adapter. 
A common example of the adapter pattern would be the RecyclerView's adapter and Retrofit's adapters.