teleren/devto huggingface dataset:
Day 11/30 : Custom Radio Buttons using HTML and CSS
Tags: html, css, webdev, tutorial
Published: 2021-05-30 12:14:43

Welcome to Day 11 of this [Challenge](https://dev.to/somanathgoudar/30dayschallenge-30-days-extreme-html-css-challenge-50k1). This is what I created today. 

**➜ Here is the Demo :**
![Custom Radio Buttons](https://1.bp.blogspot.com/-YaD0CjeewSQ/YKSz9Vj-vkI/AAAAAAAAAEY/V1JouxUYK7MsBfdOXPxiShfid2UNX2hFwCLcBGAsYHQ/s600/11.gif)

**➜ Video Tutorial :**

{% youtube ixx5hctmhFU %}
**➜ Source Code :**
https://www.futurecodersweb.com/2021/05/how-to-create-custom-radio-buttons-with.html


**➜ Instagram Post and Reel for Day 11 :**
[See Post and Reel](https://www.instagram.com/future_coderss/)

------------------------------------------------------------------

Hey, If You don't know what is happening here. Don't Worry, I am doing a crazy challenge 😅. Read More about it from the post below.

{% link https://dev.to/somanathgoudar/30dayschallenge-30-days-extreme-html-css-challenge-50k1 %}

**Support Me :**
👉 Buy me a Coffee: https://www.buymeacoffee.com/somanathgoudar
👉 [Follow Me on Instagram](https://www.instagram.com/somanath_goudar/)
👉 [Follow Future Coders on Instagram](https://www.instagram.com/future_coderss/)
👉 [Subscribe to My Main Channel](https://www.youtube.com/channel/UC_nTrhTr5fnBGjOxnkPUmmA)
👉 [Subscribe to Channel Created for this Challenge](https://www.youtube.com/channel/UCzGSyMOf2jPt1MkNBB3SJ3g)

------------------------------------------------------------------
Day 77 of 100 days of SwiftUI
Tags: swift, 100daysofcode
Published: 2021-05-30 12:07:01

I just completed day 77 of 100 days of SwiftUI. Today, I completed a milestone( day 62-day 76). I reviewed what I learnt about views and how to intergrate them into SwiftUI. I also started working on the milestone project but I'm far from done.
Daily Developer Jokes - Sunday, May 30, 2021
Tags: jokes, dailydeveloperjokes
Published: 2021-05-30 12:00:04

---
title: "Daily Developer Jokes - Sunday, May 30, 2021"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Sunday%2C%20May%2030%2C%202021"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e1259169f6cb.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit.*

<!-- 
Joke text:
___Q:___ A SQL developer walked into a NoSQL bar.

___A:___ They left because they couldn't find a table.
 -->
Marketing Your Mobile App, The Steps For Continued Success
Tags: android, ios, webdev, marketing
Published: 2021-05-30 11:51:50

Here are some tips for continued success in marketing your app to new users and maintaining your existing userbase. 

**Ask Users For Feedback**
If people are using your app constantly, it is a sign that have made a connection with the product. Give them the opportunity to express their opinions with a popup invitation to leave a review, but remember that user experience should not be sacrificed by this tactic. Think about when and how you want to ask for a review and make sure it flows well with the user experience so it won’t frustrate users. The more strategically the popup is placed, the better the chances are for a positive review.

**Consider A Burst Campaign**
A “burst campaign” is one of the most popular techniques used by mobile app marketers who want to climb the app store ranks. The idea of a burst campaign is to provide a “burst” of exposure for your app in which you aggressively purchase paid media exposure over a short period of time – usually between 24 and 72 hours, depending on budget.
The goal is to get as many paid installs as possible, boosting your ranking. All this with the hope of increasing the volume of quality organic installs – that should follow when the app is finally ranked high enough to be discovered. While you should attract more organic downloads from a successful burst campaign, continued paid advertising will maintain steady downloads. You need to keep the momentum going.

**Offer A Referral Bonus**
Offering your users a bonus or benefit when they promote your app online is a surefire way to get them to spread the word. With a staggering 3900% growth rate, Dropbox is an excellent example of how powerful referrals can be. The company had just 1,00,000 registered users in 2008, which climbed to a staggering 4,000,000 registered users within a mere 15 month period as a result of their referral program. This post from Localytics explains how Dropbox used referrals to exponentially increase their user base
Understanding Kubernetes in a visual way (in 🎥 video): part 15 – Deployment Rolling Update
Tags: kubernetes, devops, docker, beginners
Published: 2021-05-30 11:51:10

---
title: Understanding Kubernetes in a visual way (in 🎥 video): part 15 – Deployment Rolling Update
published: true
description: Serie of videos about Kubernetes. Explaining in a visual way Kubernetes principles.
tags: Kubernetes, DevOps, Docker, beginners
series: Understanding Kubernetes in a visual way - (in video) in video
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4jn9zw5s8hpy72s9z7fa.jpg
---

Understanding Kubernetes can be difficult or time-consuming. In order to spread knowledges about Cloud technologies I started to create sketchnotes about Kubernetes, then I've auto-published a book and since now I've started a new serie of video! :-)

I imagined a serie of short videos with a mix of sketchnotes and speech.

I think it could be a good way, more visual, with audio & video to explain Kubernetes (and others technologies).

This episode is focused on Deployment Rolling Update.

{% youtube w2_-Q4QuDY8 %}

The video is in French BUT I done the subtitles in english (and french too).

If you liked the video and are interested to watch another ones, please give me some feedbacks (and you can also subscribe to [my Youtube channel](https://www.youtube.com/channel/UCrRk0kOP58lBMl9B8ZS8Vlg), if you want to ❤️).

If you are interested, I published all the sketchnotes on Kubernetes (and new ones!) to make a "book" of 165 pages: ["Understanding Kubernetes in a visual way"](https://gumroad.com/aurelievache#uCxcr).

If you like theses sketchnotes, you can follow me, I will publish others sketchs shortly :-).
Full Tutorial #12: Querying Using GraphQL and Storing Data in Recoil | Microservices Chat App Using React, Node and GraphQL
Tags: react, node, webdev, javascript
Published: 2021-05-30 11:47:39

**About Me:** I've been a professional web developer for just over 10 years now. I'm currently the lead web development instructor at [Better Coding Academy](https://codebetter.com.au), and as part of what I do, I post videos on our YouTube channel at [https://www.youtube.com/c/BetterCodingAcademy](https://www.youtube.com/c/BetterCodingAcademy).

_(Subscribe for awesome web development content!)_

Part 12 of the Microservices Chat App is here! In this episode, I show how we can query the GraphQL API using [Apollo Client](https://www.apollographql.com/docs/react/), and store the resulting information using [Recoil](https://recoiljs.org/).

{% youtube vTzLE66Y4qQ %}

Happy coding!

Source code: [https://github.com/lucaschen/microservices-chat-demo](https://github.com/lucaschen/microservices-chat-demo)
Reverse a string without using  function  ?
Published: 2021-05-30 11:32:00

<script type="text/javascript">
	
    
    function reverseString(string){
    		let reverse = '';
    	  for(let i=0;string[i]!=undefined;i++){
			reverse = string[i]+reverse;
		  }
		  console.log("Reverse String :", reverse);
    }
    reverseString("Arvind Singh");
</script>
How to find number of frequency in an array ?
Published: 2021-05-30 11:28:39

<script type="text/javascript">
var array1 = [4,3,6,6,6,6,3,4,3,9];


function getElementFrequency(a){

	let newObject = {};
	var newArray = [];

	for(let i=0;i<array1.length;i++){

		  if(newObject[a[i]]){
		  		newObject[a[i]] += 1;
		  }
		  else{
		  	  newObject[a[i]] = 1;
		  }
	}
	console.log("Get frequency of number :", newObject);
	
	for(let index in newObject ){
		  
		  if(newObject[index]>1){
				newArray.push(index)
           }
		    
	}

	console.log("duplicate array :", newArray);
}


getElementFrequency(array1);

</script>
Light/dark mode: user input
Tags: webdev, css, javascript
Published: 2021-05-30 11:28:20

In the previous post, we saw how to use CSS variables to adapt the display to user system preferences.

{% post https://dev.to/ayc0/light-dark-mode-the-simple-way-46nh %}

But users of your website cannot change their theme directly from the website, they have to change their system mode to change it. Which can be a bit annoying when you want your OS to be in light mode and the website in dark mode for instance.

## The CSS

The easiest is to apply a data attribute to the html light/dark.

> Note: I'd still recommend setting the `:color-scheme` to `light` and `dark` for native inputs.

The CSS is still fairly simple:

```css
:root[data-theme="light"] {
  color-scheme: light;
  --text: black;
  --background: white;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --text: white;
  --background: black;
}

body {
  color: var(--text);
  background: var(--background);
}
```

## The JS

We’ll have to store the user preference for future visits to the website. You can do that with the method you prefer:
- localStorage (if everything is done in the frontend)
- cookie (if you want to have access to it from the backend)
- remote database (if you want to apply the same theme to multiple devices)

> If you store the preferences in a remote database, I'd still recommend to double save it in a cookie/localStorage, because we'll see later how to avoid blinks when loading the pages. And this needs synchronous access to the stored value.

I'm gonna stick with localStorage here, because it's the easiest to deal with, but it doesn't really matter for this example.

### Reading and writing the theme

We can use this couple of function as first class getters/setters of the theme:

```js
function getTheme() {
  return localStorage.getItem('theme') || 'light';
}
function saveTheme(theme) {
  localStorage.setItem('theme', theme);
}
```

### Setting the theme

As we only used a data attribute on the html, applying only corresponds to setting the attribute on it.

This leaves us with this function:

```js
function applyTheme(theme) {
  document.documentElement.dataset.theme = theme;
}
```

### Assembling the whole ensemble

Now that we have all the elements, this is basically like legos: we need to assemble everything.


```js
const themeToggler = document.getElementById('theme-toggle');

let theme = getTheme();
applyTheme(theme);

themeToggler.onclick = () => {
  const newTheme = rotateTheme(theme);
  applyTheme(newTheme);
  saveTheme(newTheme);

  theme = newTheme;
}
```

> Note: if you don't want any blink when users will load the page (seeing an empty white page when reloading the page for instance while they picked a dark mode for your website), it's important that this JS is executed in a blocking way, so that browsers won't render the html/css without having first computed this JS and applied the data attribute on the html.


{% codepen https://codepen.io/ayc0/pen/NWpwgqM %}
How to get highest number in an array ?
Tags: javascript, programming
Published: 2021-05-30 11:17:09

<script type="text/javascript">
	
   function findHeighestNumber(array){

   	 var heighest = 0;
   	 for(let i=0;i<array.length;i++){
        if(array[i] > heighest){
        	  heighest = array[i];
        }
   	 }
   	 console.log("Heighest Number :", heighest);
   }

   var array = [1,2,33,8,43,5111,897];
   findHeighestNumber(array);

</script>
Sort an Array Element Ascending order without sort() Method ?
Tags: javascript, programming, php, node
Published: 2021-05-30 11:14:38

<script type="text/javascript">
   	
   	function bubbleSort(array) {
	  	var done = false;
	  	while (!done) {
	    	done = true;
		    for (let i = 0; i < array.length; i++) {
		      if (array[i] > array[i+1]) {
		         done = false;
		         var tmp = array[i];
		        array[i] = array[i+1];
		        array[i+1] = tmp;
		      }
		    }
	  	}
  		console.log(array); 
	}

var numbers = [12, 10, 15, 1, 11, 14, 13, 16];
bubbleSort(numbers);
</script>
How to get unique record from array ?
Tags: javascript, programming
Published: 2021-05-30 11:12:00

How to get unique record from array ?

	var   a = [1,3,2,4,5,5,6,6];
	a.sort();
	var b = [];
	let temp;
	for(let i=0;i<a.length;i++){
		if(a[i]!== temp){
		  	b.push(a[i]);
		  	temp = a[i];
	    }
	}
	console.log("b:", b);
Remove blank values easily in Rails 6.1
Tags: rails, ruby, activesupport
Published: 2021-05-30 11:11:00

Rails 6.1 adds `compact_blank` and `compact_blank!` methods to `ActiveSupport`. It makes easier for removing blank or nil values from an Enumerable ActionController::Parameters.

Here is the [pull request] (https://github.com/rails/rails/pull/36412).

### Before Rails 6.1.0

We can remove blank values from an array as like:

```
[1,nil,'',:bar].reject(&:blank?)
# [1,:bar]
```
We can remove blank values from a hash as like:

```
{ x: nil, y:[], z: :bar }.reject{|key,value| value.blank? }
# { :z => :bar }
```
### After Rails 6.1
we can use `compact_blank` and `compact_blank!`:

Array:
```
[1,nil,'',:bar].compact_blank
# [1,:bar]
```
Hash:
```
{ x: nil, y:[], z: :bar }.compact_blank
# { :z => :bar }
```

We can use `compact_blank!` which mutates it's receiver:

Array:
```
array = [1, "", nil,2, " ", [], {}, true, false]
array.compact_blank!
# [1,2,true]
```
Hash:

```
hash = { a: 1, b: "", c: nil, d:"string", e:" ", f:[], g:{}, h: true, i: false }
hash.compact_blank!

# { :a => 1, :d => "string", :h => true }
```
Buying a new domain is not the way to start your side project
Tags: sideprojects, discuss, domain
Published: 2021-05-30 11:08:22

💡 When an idea strikes, the very next thing to do is buy a domain 😅


I do this a lot and started to slow down recently. 

- You take a shower and the idea generator puts an awesome idea in your head
- It would be the most incredible idea you have ever come across. 
- Rush to laptop see if that perfect domain name is available and boom 💥 
- What did just happen? You got a dopamine effect of achieving something. Feels like the project is half done right? Nope. Wrong. 
- In reality, you did nothing. You just paid some few $$
- Now you have 1 year to work on the project before it expires. 


Guess what? You will probably let it expire or worse, renew it for one more year assuming some miracle is gonna happen this year. Nope, you are wrong again. 
 

I started keeping aside at least an hour for side projects starting March and obviously, I ended up buying few domains - nonolist.me, shipit.club, myfailedstartups.com


Wanna know the current status of these projects? MVP is not ready yet. 


Meanwhile, I started thinking about this domain hoarding problem and hit the aha shower moment again 💡


Let's build a website to find out how many domains people own 😂


For some miraculous reason, I didn't buy a domain for this 😹


📝 I created a form using typeform and tweeted the link asking how many domains people own. 


😱 oh boy, many owned hundreds of domain names 


👨‍💻 Ok, now I hit that rush to buy a domain to build a website for this. 


🐣 [HIGHSCORE.domains](https://highscore.domains) is born. A fun leaderboard to find out who owns more domains. 


🤔 I know you are reading this and thinking "oh wait, how many domains do I own actually?" 🤣


😎 HIGHSCORE.domains is the project I bought the domain after seeing people are responding to it and might have some potential. 
Guess what? this is the only project which is live and not yet another "Sign up for early access" page.


🙋 Do you face this problem as well - ie, ended up buying domains and not use them? Is there any tricks/realization you had recently which helped to overcome this?
How to receive video in real-time for computation?
Tags: node, deeplearning, android
Published: 2021-05-30 10:56:05

Hello developers, I want to create a Deep learning model which can detect objects in real time, I'll be creating an Android application which will send realtime video. The Backend which will be created in node.js will receive the video and forward it to the DL model to for further computation in real-time. After that the model will providee the results which needs to be sent back toh the Android application / client for displaying the results.

How to receive the video in Backend in realtime so that the DL model can do the computation?
Mobile menu bottom slide
Tags: html, css, todayilearned, codenewbie
Published: 2021-05-30 10:50:14

### Hello dear folks,

Today i will explain you how to make a mobile menu which look like this.

![Mobile menu](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bj2cfgjhnva55j0w68e5.png)

So lets create this eye catchy mobile menu

---
First of all create a index.html file with your favorite code editor and  write create container class for button and menu.

after that create menu and button with the following codes.

![mobile menu html](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zmdgcfh34t338mlw086r.png)

hurrrrrey, you have completed the HTML part of the mobile menu.

---

[![CSS course eduonix](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/az71k2lp2eeyll27izng.png)](https://www.eduonix.com/css-bootcamp-master-in-css-including-css-grid-css-flexbox/UHJvZHVjdC0xMzE1MDIw)

---

Now let's move to CSS part of the mobile menu create CSS file.

Write the following code to design HTML document and container class.

![Mobile menu document styling](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cconkp4qr2uugbxz40y1.png)

---

And then we will give an attractive look to our button and menu.

write the following code

![Mobile menu button styling](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/95z0saqfxkpk81o0q52r.png)

---

Now we will design our menu

To give a nice look let's write this CSS code.

![Mobile menu styling](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y1hhqashd4f6nhq4cpfd.png)

---

Now it's time to write a JQuery code to add toggle effect on button.

![Mobile menu jquery](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/325yw3kocbrjus46vjoa.png)

In this jquery code, we are just targeting button click on click, jquery will override menu-close class for menu. Same with button and button close

---

OK so you have just created a nice looking mobile menu.

And this is how it looks in real.

{% codepen https://codepen.io/atulcodex/pen/rNyGRxB %}

#### Thanks a lot for interest, Hope you have enjoyed to invent this mobile menu.

Share your opinion an feedback in comment section.

And if possible 

[![Atul - Buy Me A Coffee](https://media.giphy.com/media/513lZvPf6khjIQFibF/source.gif)](https://www.buymeacoffee.com/atulcodex)
Legacy Interface
Tags: java
Published: 2021-05-30 10:47:03

>Suppose you are working on a **very very big** java project.
*Congratulations!!!*

### Problem Scenario 
Suddenly your senior comes to your desk and says- "Hey X, we need to add a new method to *XYX* interface".

### Inside your brain
Holy Crap! 

Impossible, I can't do this. 

It will break all existing code blocks. 

No, it is not possible. 


### Why it is not possible?
 
According to [oracle documents](https://docs.oracle.com/javase/tutorial/java/concepts/interface.html), a java interface is a group of related methods with empty bodies. Like- 
```
interface Bicycle {

    //  wheel revolutions per minute
    void changeCadence(int newValue);

    void changeGear(int newValue);

    void speedUp(int increment);

    void applyBrakes(int decrement);
}
```

Suppose, already 100 classes implement Bicycle interface. So, if you want to add a new method in the Bicycle interface-
- You need to modify 100 classes. Complete the method's body in each and every classes, who implements bicycle interface.

### Can it be a feasible solution?
>No, never. 

### Solution
Java 8 introduced completely a new concept to overcome this crucial situation. 

>It is **default method**

Using default keyword, you can add a *complete method* in a java interface(*magic*), this will help you maintain existing legacy code, untouched.

With a new default method in Bicycle interface- 
```
interface Bicycle {

    void changeCadence(int newValue);

    void changeGear(int newValue);

    void speedUp(int increment);

    void applyBrakes(int decrement);

    //method with body in an interface
    default void saveTheWord(){
      System.out.println("Haha! it is a magic");
    }
}
```
Now, you don't need to modify 100 existing classes(if you wish you can). However, after this point, newly implemented classes can use/override this method if they want.

### Extending Interfaces That Contain Default Methods
When you extend an interface that contains a default method, you can do the following:

- Not mention the default method at all, which lets your extended interface inherit the default method.
- Redeclare the default method, which makes it abstract.
- Redefine the default method, which overrides it.
  
## Cheers
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i716wjvko2i9tl38841y.jpg)
segments will not allow you to do what?
Tags: googlecloud, analytics, go
Published: 2021-05-30 10:41:13

Segments will not allow you to do what?

Answer:
Create subsets of sessions or users
**Permanently alter data**
Build custom Remarketing lists
Isolate and analyze data
 
Find all other answer related to this certification at: 
<a href="https://www.answerswami.com/google-analytics-individual-qualification-exam-answers-2021-pdf-file/" target="_blank" rel="dofollow"> Google Analytics Individual Qualification Exam Answers</a>
The PDF file is also available
Explanation:

A segment is a subset of your Analytics data. For example, of your entire set of users, one segment might be users from a particular country or city. Another segment might be users who purchase a particular line of products or who visit a specific part of your site.

Segments let your isolate and analyze those subsets of data so you can examine and respond to the component trends in your business. You can also use segments as the basis for audiences.

Note that segments aren’t destructive, filters are.

Source:<a href="https://www.answerswami.com/segments-will-not-allow-you-to-do-what/" target="_blank" rel="dofollow"> Segments will not allow you to do what?</a>