teleren/devto huggingface dataset:
HTML : Apply Base 64 version of image, CSS etc
Tags: html, css, webdev, tutorial
Published: 2021-05-27 16:21:54

We can assign base 64 encoded string as a source/href attribute of image, JavaScript, iframe, link etc

# But how to convert this to Base64?
Well, you can visit https://greywyvern.com/code/php/binary2base64 and get the conversion done.


<a href="https://www.buymeacoffee.com/rkycom" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" ></a>

With all that being said, I highly recommend you keep learning!

Thank you for reading this article. Please feel free to connect with me on [LinkedIn](https://www.linkedin.com/in/www-rajeshkumaryadav-com/) and [Twitter](https://twitter.com/rky_com).
HTML : Specify the CSS for printing
Tags: html, css, tutorial, webdev
Published: 2021-05-27 16:06:45

```html
<link type="text/css" rel="stylesheet" href="screen.css" media="screen" />
<link type="text/css" rel="stylesheet" href="print.css"  media="print" />
```

The example below specifies different font families for screen and print. The next CSS uses the same font size for both screen as well as printer.
```html
<style type = "text/css">
  
      @media screen {
         p.bodyText {font-family:verdana, arial, sans-serif;}
      }

      @media print {
         p.bodyText {font-family:georgia, times, serif;}
      }
      @media screen, print {
         p.bodyText {font-size:10pt}
      }
  
</style>
```


<a href="https://www.buymeacoffee.com/rkycom" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" ></a>

With all that being said, I highly recommend you keep learning!

Thank you for reading this article. Please feel free to connect with me on [LinkedIn](https://www.linkedin.com/in/www-rajeshkumaryadav-com/) and [Twitter](https://twitter.com/rky_com).
How to Create Custom Scrollbar in CSS | Awesome Scrollbar
Tags: html, css, beginners, codenewbie
Published: 2021-05-27 16:06:34

***Hello guys, In this video we will learn how to create creative custom scrollbar using html and css.***

First, we need to create two files index.html and style.css then we need to do code for it.

## Step:#1
Add below code inside index.html

```html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>How to create custom scroll bar like csstricks</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <link rel="stylesheet" href="style.css" />
</head>

<body>

</body>

</html>
```

## Step:#2

Then we need to add code for style.css which code I provide in the below screen.


```css
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  width: 100%;
  height: 300vh;
  background: #262626;
}

html::-webkit-scrollbar {
  width: 16px;
  height: 16px;
}

html::-webkit-scrollbar-track {
  background: linear-gradient(90deg, #434343, #434343 1px, #111 0, #111);
}

html::-webkit-scrollbar-thumb {
  background: #434343;
  border-radius: 16px;
  box-shadow: inset 2px 2px 2px hsl(0deg 0% 100% / 25%),
    inset -2px -2px 2px rgb(0 0 0 / 25%);
}
```

{% youtube sCJOEAOQdyw %}
Let's code a Netlifx Clone with GraphQL Pagination (Reviewed by a NETFLIX ENGINEER!)
Tags: tutorial, video, graphql, react
Published: 2021-05-27 16:03:04

In this video, I build a Netflix Clone using React, Apollo GraphQL, DataStax Astra + Netlify Serverless Functions! For more free credits on top of your already free ones, use code ANIA200 on https://www.datastax.com/

This video is great for those wanting to see how I build an app that fetches data from our Cassandra database using the GraphQL API, as well as learn how to use pagination and slicing. Here are just a few things we will be covering:

00:00 Introduction
04:32 Signing up to our Datastax Astra Cassandra database
07:16 Using the GraphQL Playground
09:51 Creating Tables using GraphQL mutations
18:22 Adding Data using GraphQL mutations (you can use my pre-made data below)
25:03 Retrieving Data using GraphQL queries
26:20 Adding our Movies to our database
34:48 Retrieving all of our Movies by Genre
36:39 Limiting our Data in GraphQL queries
38:01 Creating our React App
41:31 What is LOLOMO at Netflix?
43:05 Setting up Netlify Serverless Functions
49:36 Adding your DataStax token and endpoint
46:03 Adding the Netlify config
46:56 Writing a serverless function to get the Genres
57:36 Getting the Genres using GraphQL
01:04:48 Getting the Movies by Genre in our browsers
01:20:45 Pagination in GraphQL
01:23:51 Calling the next page by button
01:31:19 Loading more Genres when we hover at the end of the screen
01:38:20 Adding a NavBar and HeroSection
01:42:20 Making our Movie Cards pop out when we hover over them
01:51:24 Making videos auto-play and show more info on hover
01:55:28 HeroSection
02:13:36 Font Awesome Icons
02:16:20 Final basic styling

Movie Data: https://github.com/kubowania/netflix-clone-graphql-datastax

As always, please take this project and make it your own. I have done some basic styling for you to get going. This is not a tutorial on styling, it is more to practise your database management skills, so please go wild on the styling yourselves :D! I would love to see what you have made!!

{% youtube g8COh40v2jU %}

The full finished project can be found here: https://github.com/kubowania/netflix-clone-graphql-datastax/tree/main/data

___
⭐ In most videos I use Tabnine as my A.I autocompletion tool. You can download it for free here: http://bit.ly/tabnine-top-tool

⭐ You can get a blockchain domain with my affiliate link here: http://bit.ly/get-a-crypto-domain

⭐ If you would like to buy me a coffee, well thank you very much that is mega kind! : https://www.buymeacoffee.com/aniakubow

⭐ Sign up for weekly coding tips from my newsletter partnership: https://bit.ly/JS-tips

You can also find me on:
Twitter: https://twitter.com/ania_kubow
Instagram: https://instagram.com/aniakubow

#codingbootcamp​ #coding
Makefile, in practice
Tags: makefile, otimizar, python, code
Published: 2021-05-27 15:57:08

# What is Makefile ?

According to the [Guia Linux](https://guialinux.uniriotec.br/make/) "The make utility is used to check which files need to be compiled (have changed since the last compilation or have never been compiled) and to issue the compilation (and linking) order."

OBS: Rewritten text in English. 

The makefile is utilized in sereval programming languages, like: C, C++, C#, Python, JavaScript, TypeScript, PHP between others.

### To use, we have some commands:

* -f: specific the file
* -e: for variable of file makefile

### How to use Makefile:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zc49qy71awb5p72typbq.gif)

when starting a command, you have to create a file with a specific nomenclature, make will search your directory for:

* GNUmakefile
* makefile
* Makefile

### Write a Makefile

First create a file called "Makefile", how I will utilize python how example, inside him, you add the next:

```
.PHONY: help
SHELL := /bin/bash

help: ##This help.
	@awk 'BEGIN {FS = ":.*?## "} /^[a-zA-Z_-]+:.*?## / {printf "\033[36m%-30s\033[0m %s\n", $$1, $$2}' $(MAKEFILE_LIST)

.DEFAULT_GOAL := help
```

In it, you are creating the command help, passing the terminal, it goes list all the command of makefile that you can use.

Then create:

```
run-file: ## run the file main.py
    python main.py
```

When you run this command in terminal thus `make run-file`, it will run what have inside of file main.py. Note that have two "#" later of command, it suits to describe the command. 

Complete code:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0671j6117zq4xl74q9in.png)

This example demonstrates how to optimize your time and your project is, more robust, reducing commands that you would have to execute among others, solving your problem. This was <b>logbook #05</b> we are saying goodbye here. We will return with another logbook.

<p align="center">
  <a href="#">
    <img src="https://cdn.dribbble.com/users/1889486/screenshots/5081642/thankyou_.gif" width="500">
  </a>
</p>

<b>Was this article useful for you?</b>
<b>Leave a comment below.</b>

## References

* [Embarcados: Introdução ao makefile](https://www.embarcados.com.br/introducao-ao-makefile/)
* [Guia Linux: Make](https://guialinux.uniriotec.br/make/)
What is State management ?
Tags: todayilearned, redux, javascript, codenewbie
Published: 2021-05-27 15:33:55

In this blog , I will be going over what is state management and why we need it. State management acts as a base, before we start playing around with state management libraries of different framework.

Let's get going

**State** is basically a container which holds the information about a component, on what stage it is in at the current moment. 

For Example, condition of the button will be in a `disabled` mode if the input data entered by the user is not a valid one. This `disabled` to be `true` value will be contained in a plain javascript object which is state. 

```javascript
let inputState = {
disabled: true;
}
```

Now with help of this value we can listen to the input values and change it back to `false` if the input value is expected. 

The process of changing the state value is state management. 

One thing which can be inferred from the above example is, state of the one UI component always depends on the other. 

State management becomes complex once the application grows , as there will be no `single source of truth`.

What did I mean by `single source of truth`? 

Let us just say , you have two user categories ( free and premium ) and you want restrict the user with free access to certain pages, then maintaining the state of the `type of user`  across all the pages will result in code duplication and also it will not be a efficient. 

You can use state management library or create a plain JS object which will be `single source of truth` and we can access the category of the user from the pages. 

Some of the state management libraries 

VueX -- Vue JS.
Redux, Flux , MobX -- React.
RxJS -- Angular. 

Hope the information was useful. Thank you for reading and please let me know in the comments if I have missed something. 

I have also attached some of the useful resources. 

Resources:

1. [things-ive-learned-about-state-management-for-react-apps](https://medium.com/@veeralpatel/things-ive-learned-about-state-management-for-react-apps-174b8bde87fb)

2. [State management](https://en.wikipedia.org/wiki/State_management#:~:text=State%20management%20refers%20to%20the,in%20a%20graphical%20user%20interface.&text=Examples%20of%20state%20management%20libraries,js%20JavaScript%20framework.)

3. [Redux Docs](https://redux.js.org/)

4. [Props Drilling](https://kentcdodds.com/blog/prop-drilling)

5. [State and single source of truth](http://www.hackingwithreact.com/read/1/12/state-and-the-single-source-of-truth) 

Stay Safe and Happy Coding.
Day 74 of 100 Days of SwiftUI
Tags: swift, 100daysofcode
Published: 2021-05-27 15:23:06

I just completed day 74 of 100 days of SwiftUI. Today, I learnt about Accessibility.

App accessibility simply means developing apps for disabled users in mind. An app is truly accessible if a disabled user can use all of its features perfectly. 

There are many ways to make your app accessible: 
1. Use meaningful labels: Since your app would be read out loud by accessibility software like VoiceOver for iOS or TalkBack for Android. It's always best to use meaningful names as labels. You can give views that an accessibility label using the `accessibility(label: TextView)` modifier.

2. Hide non-accessible views: Sometimes, some views are decorative. For disabled users, these views are simply distracting. To hide them, you can simply use the `accessibility(hidden: true)` modifier function.

3. Group views: Sometimes, many views are used to display a single piece of information. In order to make these views accessible, you simply have to wrap the views in a `Vstack` and  use the `.accessibilityElement(children: .combine)` or the `.accessibilityElement(children: .ignore)` modifier on the `Vstack`. Using `combine`, makes the accessibility reader take the views as one. It will read all of them automatically but there will be a bit of a pause in between them. Using the `ignore` will simply ignore the labels. You can then manually add your label using the  `accessibility(label: TextView)` modifier. Using the second option, the accessibility software would read everything as one. 

 This is the second time I am learning about accessibility this week. We had a tech talk about testing for accessibility at work. It showed me the importance of app accessibility. 
I'll leave you this breathtaking video about the power of app accessibility.
https://www.youtube.com/watch?v=XB4cjbYywqg
Communicating between browser tabs
Tags: webdev, javascript, vue
Published: 2021-05-27 15:12:59

I recently came across the issue of sharing some data between different tabs of the same web application. Using OAuth to retrieve an external provider's API key, saving it and finally displaying it on our platform. The first solution implied reloading the entire page. But the user experience was heavily compromised. In a SPA point of vue, imagine being in /process/emailing/... and redirected to /process 😕

While looking for a more suitable solution, I came across the Broadcast Channel API.
> It allows communication between different documents (in different windows, tabs, frames or iframes) of the same origin. Messages are broadcasted via a message event fired at all BroadcastChannel objects listening to the channel.

Let's start by creating a broadcast channel:

```
const channel = new BroadcastChannel('oauth')
```

Here we specified the name *oauth* that will later be used in other parts of our app to listen on any message sent through this channel.

```
channel.postMessage(data)
```

Here we send a message and, we can pass any object we like. In our case, we just needed an indication to know a certain task was done so the content did not really matter, feel free to pass useful data according to your need.

The data sent can be any of those supported values:

* All primitive types, excluding symbols
* Arrays
* Object literals
* String, Date, RegExp objects
* Blob, File, FileList objects
* ArrayBuffer, ArrayBufferView objects
* FormData objects
* ImageData objects
* Map and Set objects

Now we need to listen to the same channel in other parts of our app. To do so, we create a channel with the same name and use the **onmessage** event handler

```
const channel = new BroadcastChannel('oauth')
channel.onmessage = (e) => {
  // Business logic here
  // data sent through the channel is available at e.data
}
```

And that's it! We successfully sent data from a different window, tab or frame to another 😀.

Finally, to make a channel stop receiving messages you can close it using:

```
channel.close()
```

You can achieve the same result using the SharedWorker API or even Local Storage but, personally I found this method the most intuitive. Do you know any other alternative ?
Open spot for a 6 month mentorship
Tags: beginners, help, backend
Published: 2021-05-27 15:10:11

I have a new spot open to mentor a junior/starting developer for free for the next 6 months. Read along if you are interested and see if this matches your profile:

1️⃣  What you will learn?

A. Backend development and a bit of DevOps
B. I'll define a project for you and I'll teach you everything I know to complete it. The exact contents will be based on your experience
C. Focus is on problem solving and proper thinking

2️⃣ For who? 

You should fall into one of the following categories:

A. Looking for a job
B. A Recent graduate of a coding school or a CS degree
C. Changing career into tech and self-learning

3️⃣ What is the format?

A. Weekly/bi-weekly calls

B. Code reviews

C. Pair-programming

D. Direct access to me on Slack to ask any technical questions

4️⃣ When do we start?

I need to make sure that you are serious and genuinely want to learn, so send me a DM on twitter: [@hossein761](https:twitter.com/hossein761) and we schedule a call.
WAO: How do you make money with your side hustle?
Tags: watercooler, discuss, wronganswersonly
Published: 2021-05-27 15:05:53

_Cover photo by [Michal Matlon](https://unsplash.com/@michalmatlon?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/wrong-answer?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)_
 
---

# Wrong Answers Only

How do you make money with your side hustle? Whether that's writing articles (like here on DEV) or freelancing or making your own game: what's the worst way to make money with it?

---

Comment your wrong answer!
The Truth About No-Code | Podcast
Published: 2021-05-27 14:59:04

{% spotify spotify:episode:2JNtbU4aCoc74GiBniFB6T %}

## What is HTML All The Things

HTML All The Things is a [web development podcast](https://podcast.htmlallthethings.com/) and [discord community](https://discord.com/invite/jweMCx9) which was started by Matt and Mike, developers based in Ontario, Canada. 

The podcast speaks to web development topics as well as running a small business, self-employment, and time management. You can join them for both their successes and their struggles as they try to manage to expand their Web Development business without stretching themselves too thin. 

## What's This One About?

In this episode Matt and Mike discuss a recent trend in the industry, no-code tools. While no-code tools may seem like they're only for non-programmers, they can be extremely useful for teams of all sizes. No-code tools can help small teams take on more work without the need to scale up, while non-tech savvy folks can try out their ideas for apps and websites which may eventually become something more down the road. 

## Show Notes

1:50 - Introduction

### No-code Pros
6:35 - Faster development with quick customizations
10:50 - Administration and support is handled by the no-code company
18:22 - Collaboration
23:00 - No code tools can be extended with code
23:40 - Great way to start learning how projects are thrown together
32:20 - No code can get your side hustle up and running quickly

###No-code Cons
41:20 - Easy to overlook simple support requests 
43:10 - Scalability has its limits preset
48:35 - Feature limitations 



##Key Takeaways
* Using no code tools passes the IT infrastructure problems to those companies (Wix, Squarespace, Webflow)
* No code is not going to 'take our jobs'. It's going to open us up to work on larger more complex projects, which are more profitable. 


##Social Links

You can find us on all the podcast platforms out there as well as

[Instagram (@htmlallthethings)](https://www.instagram.com/htmlallthethings/)
[Twitter (@htmleverything)](https://twitter.com/htmleverything)
[Facebook (Html All The Things)](https://www.facebook.com/htmlallthethings)
[Tiktok (htmlallthethings)](https://www.tiktok.com/@htmlallthethings?lang=en)
Goodbye, Internet Explorer. You will not be missed.
Tags: watercooler, internetexplorer, finally
Published: 2021-05-27 14:48:55

My first draft of this post focused on all of the good that followed IE6 in the world of web development but I think it’s worth focusing on why we're so happy to be saying goodbye to my nemesis for a lot of the last 20 years. Later this year [support for Internet Explorer officially comes to an end](https://blogs.windows.com/windowsexperience/2021/05/19/the-future-of-internet-explorer-on-windows-10-is-in-microsoft-edge/) and in mid-2022 it will be retired completely.

From 3-pixel bugs, to different implementations and interpretations of the CSS specs, the end of internet explorer couldn’t come soon enough. Never heard of the 3-pixel bug? If you have access to IE 11, then [go here](http://titan.dcs.bbk.ac.uk/lo/dw230Bugs/IEbug1_3pixeljog.htm) and use emulation to pretend you're in IE5 (IE6 is not available for some reason) and you'll see a three pixel indent of the first paragraph in the green box. Maddening.

I had the misfortune to not only have to support IE6 in my development career, but also IE5.5 and even Internet Explorer for Mac too. Internet Explorer for Mac. Truly trying times.

Microsoft eventually moved onto Internet Explorer 7 but the improvements were minimal. IEs 8, 9, and 10 were not much better and even now 11 is painfully slow. Over the past 5 years, I've lost count of how many times I have been asked to look into performance issues and it turns out it's the browser itself struggling. The code itself is good enough for everyone else, the user's hardware rarely an issue and the APIs themselves performant. Every other browser coped without any issues.

Edge is a clear improvement on the browser experience for Windows users and long overdue. Built on top of Chromium, the dev tools are there and so are all of the performance benefits that come with things like the V8 JavaScript engine.

Goodbye, Internet Explorer. You will not be missed.
.NET Hot Reload First Look
Tags: visualstudio, productivity, c, beginners
Published: 2021-05-27 14:47:59

---
title: .NET Hot Reload First Look
published: true
description: We'll take a look at .NET Hot Reload which shipped in the latest Visual Studio 2019 preview. 
tags: visualstudio, productivity, c#, beginners
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/edb24x0easgnvwjl5z8m.png
---

Hello everyone, 

In today's video, we'll take a look at .NET Hot Reload which shipped in the latest Visual Studio 2019 preview. In short, you can modify your apps source code while the application is running, without the need to manually pause or hit a breakpoint. Just make a change and click the "apply code changes" button and the magic happens.

Note: I'm not on this team at MS. I'm just a dude playing around with new bits like everyone else. 

Supporting Materials:

https://visualstudio.microsoft.com/vs/preview/
https://devblogs.microsoft.com/dotnet/introducing-net-hot-reload/
https://www.microsoft.com/en-us/p/esheep-64bit/9mx2v0tqt6rm#activetab=pivot:overviewtab

Video (6 mins)
{% youtube 3y5ACfQbsHk%} 

Conclusion

Feel free to checkout my [Twitch streams](https://twitch.tv/mbcrump) as we learn about security and app development or you can watch the condensed version of all of my streams by subscribing to my [YouTube](https://youtube.com/mbcrump). 

Stay connected with me on social platforms for daily software development news.

-[Twitter](https://twitter.com/intent/follow?screen_name=mbcrump) | [Twitch](https://twitch.tv/mbcrump) | [Instagram](https://instagram.com/mbcrump) | [YouTube](https://youtube.com/mbcrump) | [GitHub](https://github.com/mbcrump) | [Website](https://www.michaelcrump.net)