teleren/devto huggingface dataset:
I created a cool Spinner component using JavaScript
Tags: javascript, html, css, webdev
Published: 2020-06-30 15:54:27

Hey, I hope you are having a marvelous day, In this post, I want to tell you about this cool component, I created using javascript.

The component is **Spinner**, by which users can generate coupons. Its usage is pretty simple, the user will enter his/her credentials and submit the form. after which the spinner spins and gives the user a coupon🤗.

![Spinner image](https://dev-to-uploads.s3.amazonaws.com/i/njd7u7u9847j4rnvdfac.jpg)

The great thing about this component is that as all the wheel markup, styling and images are being **injected by JavaScript**, due to which this component can be loaded **asynchronously**🤩 this makes initial DOM light-weighted resulting in a **great performance**.

There's something more, as we are using JavaScript to inject the components of the Spinner, which means we can also **remove** all the injected markup of the component from the DOM, as soon as the component leaves the screen🤩. That means all the unnecessary markup will no longer be present in the DOM when it is no longer needed😌.

You can see a detailed explanation of the component [here](https://youtu.be/0NrhRbWinls)

For a tutorial on how I created this component, help me get **15 likes** on the above video😊.

Thank You, and you are #awesome💙
WTF resume (Who cares who you are)
Tags: react, javascript, typescript, frontend
Published: 2020-06-30 15:53:59



*"Who cares who you are? you should prove yourself"*

[wtfresume](https://wtfresume.com)

Some months ago when I decided to find a new job I tried to update my resume, I searched in google for how to build my resume, I register many sites but almost all of them need money for export PDF.
Then I decided to create my resume with myself.
first I created simple HTML and export PDF with Chrome then I thought many people are the same me and they need to update their resume. that is the story of why I created this resume builder.

 First I created with `create-react-app` then I changed my codes to `next js`. why? because I wanted to experience it. The question I faced from many companies: did you have any experience with `Typescript`? then I started to refactor my codes from Javascript to Typescript (currently I refactor 60% of the codes).
This is my Github repository you can look at the codes:
[wtfresume Github repo](https://github.com/sramezani/resume-builder)

I will be happy if You use [wtfresume](https://wtfresume.com) or look at the codes and contribute.
Also if you like that please give me a star.
Angular Material Landing Page
Tags: css, angular, html, webdev
Published: 2020-06-30 15:47:29

The landing page important to show as the main page of the website like we call to the home page. So here we design and made a simple and attractive landing page in Angular Material with the help of SCSS features.

In these templates, we used angular material components and also we modify components styling. Here we used mat toolbar in header nav and also for footer we used the same components. Also, we used the mat list component as a horizontal list view. Here we also use a custom grid using flex-box for desktop side and for the mobile side we used media quires. we also used one input filed component for Subscribes. This is a fully responsive landing page for mobile and tablet views.

Make it yours now by using it, downloading it, and please share it. we will design more elements for you.

[Download Source code] (https://w3hubs.com/angular-material-landing-page/)
Getting Your Bear Notes Productivity to the Next Level Using Alfred
Tags: productivity, bear, alfred, tools
Published: 2020-06-30 15:36:54

---
title: Getting Your Bear Notes Productivity to the Next Level Using Alfred
published: true
description: 
tags: ["productivity", "bear", "alfred", "tools"]
cover_image: https://images.unsplash.com/photo-1589656966895-2f33e7653819?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1920&fit=max&ixid=eyJhcHBfaWQiOjExNzczfQ
---

*Originally published [on my blog](https://preslav.me/2020/06/29/getting-your-bear-notes-productivity-to-the-next-level-using-alfred/)*

---

A tool is great if it:
- does one thing, but does it well
- mixes well with the other tools in one’s toolbox

[Bear](https://bear.app/) is one of the greatest note-taking applications, available for the Apple ecosystem. A big part of what makes it so great is its clean and simplistic user experience. I have tried switching to other tools such as [Notion](https://www.notion.so/), and lately, [Roam Research](https://roamresearch.com/), but I always come back to Bear. The simplicity of writing in plain Markdown, combined with the intuitive organisation of notes thanks to nested tags, make for a powerful combination. One that allows anyone to start with a simple note, and expand it to a complete digital map of their brain.

Simplicity means that a tool won’t always be able to answer 100% of one’s specific needs. But that’s totally OK, as long as achieving what one needs is possible through other means. Since I am using Bear as my go-to knowledge database, being able to get quick answers is crucial. While Bear does have an integrated search functionality, switching back and forth between applications can be a serious context switch.

Thus, I was super happy to find out about [this Alfred Workflow](https://github.com/drgrib/alfred-bear), which allows for searching one’s entire Bear database directly in [Alfred](https://www.alfredapp.com/):

![](https://github.com/drgrib/alfred-bear/raw/master/doc/BasicSearch.png)

One can search for anything, including filtering by hashtags, or any of the special `@` -style tags in Bear (`@today`, `@todo`, etc). Additionally, one explicitly start a new note, by typing `bn` and follow with the note’s title. 
More than anything, the workflow is completely 100% open-source, built in Go, and by a helpful developer ([Chris Redford](https://github.com/drgrib)), who is always open to new contributions, ideas, and feature suggestions. I hope to have been helpful (and not too annoying) to Chris in the development of this workflow, if not on the coding side, at least, with suggestions and feedback.

If Alfred and Bear are two apps you use on a daily basis, you absolutely must [download](https://github.com/drgrib/alfred-bear/releases) this. It will let your productivity skyrocket.
Haaaay. Super Shooter is OUT on itch.io. Check it out.
Tags: android, gamedev, shooter, itchio
Published: 2020-06-30 15:34:30

As the title says, my new game 'Super Shooter' is out on itch.io for Android and Windows. If you have time, please check it out. Aaaaaand remember to leave a feedback.


[SuperShooter](indigo123.itch.io/super-shooter/)
🛑🛑  How to Handle Proxy in Selenium(with Demo)? 🛑🛑
Tags: testing, tutorial, webdev, beginners
Published: 2020-06-30 15:31:32

✅ Join us - https://sendfox.com/thetestingacademy

In this video, We are going to learn How to Handle Proxy in Selenium(with Demo) | Handle Proxy Authentication.

### 🚀 What is a Proxy Server?
A proxy server acts as a gateway between you and the internet. It's an intermediary server separating end users from the websites they browse.

Proxy servers act as a firewall and web filter, provide shared network connections, and cache data to speed up common requests

[![ Proxy in Selenium](https://i.imgur.com/6d5y0AR.png
)](https://youtu.be/8_C8as0lyXk " Proxy in Selenium") 

###  🚀 Code to Handle it
Download Code : - https://scrolltest.com/automation/proxy


### 🚀 How to Handle Proxy Authentication?

You can do via MultiPass for HTTP basic authentication

Download the extension from
https://chrome.google.com/webstore/detail/multipass-for-http-basic/enhldmjbphoeibbpdhmjkchohnidgnah

Download the extension as crx. You can get it as crx from chrome-extension-downloader

After that the config is simple.

```java

  static  void initDriver() {
        ChromeOptions cOptions = new ChromeOptions();
        cOptions.addExtensions(new File("MultiPass-for-HTTP-basic-authentication_v.crx"));
        driver = new ChromeDriver(cOptions);
        configureAuth(
                "https://the-internet.herokuapp.com/basic_auth",
                "admin",
                "admin");
    }

 static void configureAuthWithExtension(String url, String username, String password) {
        driver.get("chrome-extension://enhldmjbphoeibbpdhmjkchohnidgnah/options.html");
        driver.findElement(By.id("url")).sendKeys(url);
        driver.findElement(By.id("username")).sendKeys(username);
        driver.findElement(By.id("password")).sendKeys(password);
        driver.findElement(By.className("credential-form-submit")).click();
    }
```

###  🚀 Charles DownLoad : 
https://www.charlesproxy.com/

--
Be sure to subscribe for more videos like this!

[![ TheTestingAcademy](https://dev-to-uploads.s3.amazonaws.com/i/r7vcy6wbvyjbk1y1uu0o.png
)](https://www.youtube.com/TheTestingAcademy?sub_confirmation=1 "TheTestingAcademy")
Finally, there was time to mount a video of the process of drawing sprites for the game 🕊
Tags: indiedev, gamedev, gameart, dev
Published: 2020-06-30 15:27:52

Watch the video here: https://youtu.be/7NoeTwRfpyM

Follow the dev:
https://store.steampowered.com/app/1213020/PAPER_TANKS/
https://twitter.com/PAPERTANKS2
🇬🇷Vlog: Final exams & a broken leg🤦‍♀️ +bloopers | 2020
Tags: exams, productivity, vlog, student
Published: 2020-06-30 15:27:26

⬇️In this video:
💪I'm preparing for my final exams for my master's degree (Graphic arts and multimedia). For the 1st time, my exams are going to be oral due to COVID-19. As you'll see in the video, I had an issue with my leg. If you currently watching this video then you know what happened both with my leg and my exams 😉

Have a beautiful and productive week.

🙆Last's year [vlog-exams](https://youtu.be/tENqgiPfAk8) in Athens, Greece 

************************************

👋Hello, I' m Eleftheria, an app developer, master student, public speaker, and chocolate lover.

🍩Would you care about buying me a coffee? You can do it here: [paypal.me/eleftheriabatsou](paypal.me/eleftheriabatsou) but If you can't that's ok too!

**************************************

🙏It would be nice to subscribe to my [Youtube](https://www.youtube.com/c/EleftheriaBatsou) channel. It’s free and it helps to create more content.

🌈[Youtube](https://www.youtube.com/c/EleftheriaBatsou) | [Codepen](https://codepen.io/EleftheriaBatsou) | [GitHub](https://github.com/EleftheriaBatsou) | [Twitter](https://twitter.com/BatsouElef) | [Site](http://eleftheriabatsou.com/) | [Instagram](https://www.instagram.com/elefintech/)
How Much Have You Made Off Of DEV Monetization?
Tags: watercooler, discuss, monetization
Published: 2020-06-30 15:25:04

It's now over 2 weeks since DEV announced that it added Web Monetization:

{% link https://dev.to/devteam/dev-is-now-web-monetized-21db %}

I thought it would be fun for us to show off how much money we've all raked in!

![person making snow angel in a pile of bills. ](https://media.giphy.com/media/LCdPNT81vlv3y/giphy.gif)

Personally I decided to point my content at my Bitcoin ledger, so I can finally say I own Bitcoin!

As you can see, I'm currently the proud owner of about ฿0 (accurate to about 4 decimal places).

![Screenshot of my Uphold balance showing a balance of 0.00043349 Bitcoin, or 3.98 USD. ](https://dev-to-uploads.s3.amazonaws.com/i/1k9pihnvzjpwa4xxpfro.png)

Clearly I have a ways to go before I can quit my day job.

How much have you made so far?
i18n for react applications
Tags: react, i18n, localisation, translation
Published: 2020-06-30 15:23:06

This post is first in the series of react i18n integration.

# What is i18n and why is it required?
Internationalization(i18n) is the design and development of a product, application or document content that enables support for local languages and cultural settings.

# What all topics are covered in the series.
  - Installation
  - Configuring i18n for react 
  - Exposing API using React provider
  - Binding translations to views

### Tech
* [i18next](https://www.i18next.com/) -  internationalization-framework for JavaScript.
* [react-i18next](https://react.i18next.com/) - Provides framework binding for react.

Alright enough Bla Bla. Let's get started with some action.

### Installation

```sh
$ npm install react-i18next i18next --save
```
Wouldn't it be nice if our react application can do the following

- Detect language based on geography.
- Load our translation from a external file.
- Store those contents in a cache or localStorage.
let's add that capability by installing...

```sh
$ npm install i18next-browser-languagedetector i18next-xhr-backend i18next-localstorage-backend i18next-chained-backend
```


For a smaller application one wouldn't mind storing translations inside config file.

However, For a large applications this won't be an ideal solution.
 
Hence, to address this we will create locale folder inside the public directory that holds all our translations. For the sake of this tutorial our application will support English (EN) and Spanish (ES).

```sh
. public
    ├── locales
        ├── en
            ├── common.json
            ├── terms.json
            ├── home.json
        ├── es
            ├── common.json
            ├── terms.json
            ├── home.json
```

> As you can see, In the above folder structure we have multiple JSON files for each locale. The **common.json** file contains all translation that are common across multiple routes. **terms.json** and **home.json** holds translated content for terms and home routes respectively.

> The reason behind choosing i18next was it provides ecosystem containing various tools for integration with different languages and framework. Same learnings can be applied for other languages as well.

Now that we are done with the installation, we will now look into how the above pieces are connected together to make a config file.

Find the github repo containing all codes mentioned in this series [here](https://github.com/devAbhijeet/react-i18n-app)

{% codesandbox blue-brook-xgg5v %}
HTTP version evolution 2 
Tags: http
Published: 2020-06-30 15:20:45

---
title: HTTP version evolution 2 
published: true
description: 
tags: HTTP
---
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3rmlzrhjnewq46j5hdhx.jpg)

I have record article about **HTTP** beginning at [HTTP version evolution](https://dev.to/ihavecoke/http-version-evolution-2cef). this article i will share my note with **HTTP** evolution 2

### What are the problems with HTTP/1.1

##### HTTP 1 features 

* Added persistent connections 
* The browser maintains up to 6 TCP persistent connections simultaneously for each domain name
* Using CDN to realize the domain name fragmentation mechanism

##### HTTP problems

The problems is utilization of bandwidth is not ideal

> Bandwidth refers to the maximum number of bytes that can be sent or received per second. 
>
> the maximum number of bytes that can be sent per second is called **upstream bandwidth**
>
> the maximum number of bytes that can be received per second is  **downstream bandwidth**

The reason why **HTTP/1.1** is not ideal for bandwidth utilization is because it is difficult for **HTTP/1.1** to use up bandwidth for the following three reasons

* **TCP ** slow start
* Simultaneously open multiple **TCP** connections, then these connections will compete for fixed bandwidth
* The problem of **HTTP/1.1** queue blocking.

### HTTP 2.0 

To solve the above problem the idea of  **HTTP/2** is that a domain name uses only one long **TCP** connection to transmit data, and realizes parallel requests for resources,it can send requests to the server at any time without waiting for the completion of other requests.

#### Multiplexing implementation

##### The introduction of the binary framing layer realizes the multiplexing technology of HTTP

* First the browser prepares the request data, including the request line, request header, and other information. If it is the **POST **method then there must be a request body.
* After the data is processed by the binary frame layer, it will be converted into frames with request ID numbers, and these frames will be sent to the server through the protocol stack. 
  After receiving all the frames, the server will merge all the frames with the same ID into a complete request message.
* The server then processes the request and sends the processed response line, response header, and response body to the binary framing layer, respectively.
* Similarly the binary framing layer converts these response data into frames with request ID numbers and sends them to the browser through the protocol stack.
* After receiving the response frame, the browser will submit the frame data to the corresponding request according to the ID number.

#### Other features

* You can set the priority of the request, when sending the request mark the priority of the request
* Server push you can directly push the data to the browser in advance
* Header compression, which compresses the request header and response header



Hope it can help you :)
What Can Be Recycled From A Vehicle
Published: 2020-06-30 15:18:40

Recycling cars is big business. With 1.2 million <a href="https://www.car.co.uk/media/guides/scrapping-your-car/the-process-of-vehicle-recycling">cars recycled each year in the UK</a> what else from a vehicle can be recycled and how can it be used?

<strong>Seat and upholstery fabrics</strong>
These can be recycled by extracting them from the vehicle. The fabrics that have kept you comfortable on your car journeys are likely to become household furnishings – such as sofas, cushions, chairs, and even mattresses. 

<strong>Glass</strong>
Glass can be broken back down into sand. As sand, it can be reused in construction, tableware, ornaments, vases, or possibly even kitchen or bathroom tiles.  

<strong>Tyres</strong>
Tyres can be removed and with improvements in recycling processes can be recycled. Next time you see a children’s play area or sports court – take a look at the soft-touch rubbery floor – chances are it was once wrapped around a wheel!

<strong>Catalytic converter</strong>
These contain precious metals and are one of the most desirable parts of a scrap car – as they contain a range of precious metals. When these tiny amounts of desirable metals are recovered and combined, they can be used in a range of products – from specialist medical devices to wedding rings.


<strong>Steel Panels & Body Parts</strong>
The possibilities for the steel body panels and chassis that make up your car are almost endless. Some parts might end up on supermarket shelves as the cans for beans, soup, or drinks – and some might end up melted down to become railway tracks, bridges, or the steel reinforcing bars (rebar) that underpin buildings or roads. 

<strong>Engine oil</strong>
With the right processes, even dirty engine oil can be reused. More often than not, engine oil will be treated and used as maritime fuel – powering the enormous engines that move containerships around the planet.

As you can see - there are many ways a car can live on and be recycled in many forms!
The story begins
Tags: typescript, reactive, state, javascript
Published: 2020-06-30 15:02:10

This is a blog about [ChronoGraph](https://github.com/bryntum/chronograph) development and various insights in the TypeScript/JavaScript programmer's life.

ChronoGraph is an open-source, reactive state management library I'm developing at [Bryntum](https://bryntum.com). It successfully powers the business logic of Bryntum [Gantt](https://www.bryntum.com/examples/gantt/advanced/) and [Scheduler Pro](https://www.bryntum.com/examples/scheduler-pro/pro-dependencies/).

ChronoGraph has started as an internal project of rewriting the business logic layer and has undergone several major iterations, maturing into the reactive state management system. This evolution seems to be a natural continuous process and every iteration brings something new and exciting.

I'll be writing about most interesting things along the way.

Stay tuned!

The chronograph image used in this post comes from the following respectful author: 
* https://www.flickr.com/photos/shanelin/5014544374

Shane Lin, https://creativecommons.org/licenses/by-nc/2.0/
I created a "Search Everything" add-on for the 3d software, Houdini. [Python/Qt]
Tags: python, qt, houdini, sidefx
Published: 2020-06-30 14:59:16

Being that most folks here are developers, what the add-on is for may not be of much interest as it is a "Search Everything" add-on for the 3d software Houdini, but the add-on itself might be neat to see some pics and such of.

It's written in Python2.7 (as that is what Houdini currently uses) and Qt.Py/PySide2(Qt interface). 

It uses Full-Text Search 5(FTS5) to provide fuzzy/abbreviated search capability to be able to find and execute most all actions/commands as well as UI menus and items directly from the search window. 
![Abbreviated](https://i.imgur.com/kz3OPHX.png)

I created custom tooltips that show up in a dedicated info bar and created some debug metrics.
![](https://i.imgur.com/A1cdPbc.gif)

I was then compelled to animate the settings menu. I have a typical info window, then the bug report menu, depending on what is selected from the drop down, sends you to the github issues page and utilizes the appropriate issue template. Lastly is a small theming menu to change some of the colors around.
![](https://i.imgur.com/1EoIY7B.gif)


Then lastly, for anyone interested in the actual Houdini part of its functionality, short video of it in action. 
[Video1](https://youtu.be/YBG1atLljZo)  
As well as one of it's other main features, being able to mouse-over windows/panes and view all available actions/commands for that particular window.
[Video2](https://www.youtube.com/watch?v=ZzwwaVjVKaU)

All in all, I am quite pleased with how it came out.  


\*Thanks to [this post](https://dev.to/halivert/convert-mp4-to-gif-3idd) for the nice ffmpeg command/settings, which were used to make the gifs in this post.