teleren/devto huggingface dataset:
Move Zero
Tags: javascript, webdev
Published: 2021-01-24 07:04:47

---
title: Move Zero
published: true
date: 2021-01-23 00:00:00 UTC
tags: javascript, webdev
canonical_url: https://hiltonmeyer.com/articles/move-zero.html
---

Another [Leet Code](https://leetcode.com/problems/move-zeroes/) problem walk through today. This was moving all zeros in an array to the end. Seemed simple enough yetI didn't want brute force. I came up with a solution of an index and another number counting the zero's removed that could then be added on at the end. This solution was accepted although I knew that it wasn't ideal with the two loops.

On the first loop, I check if the value is zero, if it is remove it from the array and then add it to the zero's counter. I did this with a while loop as the array size changes and didn't want anything funny happening with the index out of bounds issues. After that, I had a for loop for the number of zero's adding them to the end of the array

```
/**
 * @param {number[]} nums
 * @return {void} Do not return anything, modify nums in-place instead.
 */
var moveZeroes = function (nums) {

    let i = 0;
    let zeros = 0;
    while (nums.length >= i) {
        if (nums[i] === 0) {
            nums.splice(i, 1);
            zeros++;
        } else {
            i++;
        }
    }
    for (let i = 0; i < zeros; i++) {
        nums.push(0)
    }
};
let arr = [0, 1, 0, 3, 12];
moveZeroes(arr);
console.log(arr);

```

A more elegant solution that I saw afterward was keeping track of two indexes and swapping the value between them if zero. You loop through the array, if it is not zero then swap this value with the value at the anchor. The anchor keeps track of the non-zero's and moves along only when there is a non zero. So the zero's get moved on and the non-zeros are moved up. Very clever and yet again a solution that may come in handy.

```
var moveZeroes2 = function (nums) {

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

        if (nums[i] !== 0) {
            let temp = nums[anchor];
            nums[anchor] = nums[i];
            nums[i] = temp;
            anchor++;
        }
    }
};

```
Who am I?
Published: 2021-01-22 23:32:53

####Hello World
My name is Jonas and I'm a junior at The Pennsylvania State University, pursuing my B.S. in Information Sciences & Technology: Design and Development. This degree involves designing software and integrating information technologies to meet users’ specific needs, as well as working with unfamiliar software programs and computer languages, developing applications, troubleshooting problems, and thinking logically to solve complex problems. Beyond the classroom, I am involved with multiple clubs and organizations, most of which relate to STEM.

##Okay, so what?
Well, I thought it would be nice to introduce myself so you can know a little more about the guy behind the tutorials I'm making. To start off, I recorded an explanation as to why the notorious "turn it off and on again" method works.

##Alright, tell me more 🤔
Whenever our computers, smartphones, or [insert pretty much any device] freezes, oftentimes one of the many apps we have running is the culprit. Due to faulty programming, some apps get stuck in a dead-end. Though a series of logical twists and turns, if the user finds themselves in a situation that was unaccounted for during the programming phase, they might get stuck.

##Can you put that into normal people speak, please?
The example I used in my video was as follows:

Imagine that you're hiking along a trail through the woods and you come across a fallen tree. No big deal, you can just climb over it or walk around it.

Now, imagine that path leads to a bridge, stretching over a raging river. Just one thing… the bridge has collapsed. If that bridge was the only way to cross the river for 50 miles on either side, then you’ll just have to turn around, head back the way you came from, and start over.

This is similar to how computers work in the event of errors. If the problem is small enough, like our fallen tree example, there might be another way for the program to “get around” the issue and execute the desired operation.

However, when it comes to our bridge example, and the program encounters a very large problem, we’re then stuck in a never-ending loop left with no other choice but to start from the very beginning.

##Example
Let's say you're watching a YouTube video on your phone of somebody explaining this whole concept (linked below). Your phone is connected to Wi-Fi, but all of a sudden the signal fades. Instead of just stopping in place, your phone is "smart" enough to switch over to mobile data. You are able to watch your video fairly seamlessly. This is an example of a small "hiccup" like our fallen tree.

However, in the event of a much more severe incident (a collapsed bridge), our device just cannot find a way through or around the problem and simply has to start back at square 1.

##TL;DR
[Just watch this video](https://www.youtube.com/watch?v=lh9Ex2rDMIY&ab_channel=JonasJason)
How to check whether a checkbox input element is checked using JavaScript?
Tags: javascript
Published: 2021-01-23 00:00:00

---
  title: How to check whether a checkbox input element is checked using JavaScript?
  published: true
  tags: JavaScript
  date: Sat Jan 23 2021 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/check-if-checkbox-input-element-is-checked-javascript
  cover_image: https://melvingeorge.me/_next/static/images/main-fa15f3c9b4acb61685d393299760f3b2.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/check-if-checkbox-input-element-is-checked-javascript)
  
To check whether the checkbox input element is checked, you can use the `checked` property of the checkbox element in JavaScript.

#### TL;DR

```js
// get reference to the checkbox input element
const checkbox = document.getElementById("myCheckbox");

// check if checkbox checked
console.log(checkbox.checked);
```

For an example, consider we have a checkbox input like this,

```html
<!-- Checkbox input -->
<input type="checkbox" id="myCheckbox" />
```

The first thing we have to do is get the reference to the checkbox input element. We can use the `document.getElementById()` or similar functions and pass the id of the checkbox element to the function to get the reference to it.

It can be done like this,

```js
// get refernce to the checkbox input element
const checkbox = document.getElementById("myCheckbox");
```

After that, we can add a `click` event to the checkbox element using the `addEventListener()` method on the element so that when the user clicks on it, we can get the properties regarding it.

```js
// get refernce to the checkbox input element
const checkbox = document.getElementById("myCheckbox");

// add click even to checkbox
checkbox.addEventListener("click", (event) => {});
```

Now, all we have to do is use the `checked` property in the element which will give us the state of the checkbox.

It can be don elike this,

```js
// get refernce to the checkbox input element
const checkbox = document.getElementById("myCheckbox");

// add click event to checkbox
checkbox.addEventListener("click", (event) => {
  console.log(event.target.checked);
});
```

See this example live in [JSBin](https://jsbin.com/yamalugibu/2/edit?html,js,console,output).

That's it.

### Feel free to share if you found this useful 😃.

---
Digital Clock using HTML,CSS,JS
Tags: 100daysofcode, html, css, javascript
Published: 2021-01-22 23:54:39

Third day of my 100 days of code.
Digital Clock:
##HTML Code: 
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Digital clock</title>
    <link href="style.css" rel="stylesheet">
</head>
<body>
    <h1>Digital Clock</h1>
    <div id="clock">10:24:35</div>
    <script src="index.js"></script>
</body>
</html>
```
We need to add a div with a time which can be replaced by .innerHTML

##JS Code:
```
function showTime() {
    let today = new Date();
    let hours = today.getHours();
    let minutes = today.getMinutes();
    let seconds = today.getSeconds();
    let period = 'AM';
    console.log(today);
    console.log(hours);
}
showTime();
```
Create a function showTime() and new Date() will give the current date. Get hours, minutes and seconds using function and check the current time in console.The hours will be displayed in 24 hour format.
```
const time = `${hours} : ${minutes} : ${seconds}  ${period} `;
    document.getElementById('clock').innerHTML = time;
```
Display the time in UI by replacing the div value.Now the time is displayed in 24 hr format but each time for updating the time, need to reload the page. 
```
setInterval(showTime,1000);
```
For that purpose we are using setInterval.This function evaluates the function for every 1s.
To display in 12 hr format set the condition:
```
// Set the clock in 12 hr format
    // If hours is equal to 0 at midnight, we set to 12, and if greater than 12, we will
    //subtract it from 12.
    if (hours == '0')
    {
        hours = 12;
    }
    if (hours > 12) {
        hours -= 12;
        period = 'PM';
    }

    // when the hrs is less than 10, we are concantenate with 0, otherwise leave it hrs.
    hours = hours <10 ? `0${hours}` : hours;
    minutes = minutes <10 ? `0${minutes}` : minutes;
    seconds = seconds <10 ? `0${seconds}` : seconds;
```
To view the full code, check [Github](https://github.com/umapreethi-dev/100-days-of-code/tree/master/Digital%20clock)
In Defence of the Liskov Substitution Principle
Tags: design, solid
Published: 2021-01-25 15:40:59

---
title: In Defence of the Liskov Substitution Principle
published: true
date: 2021-01-22 23:17:11 UTC
tags: design, solid
canonical_url: 
---

 ![](https://rnowif.github.io/media/posts/14/stormtrooper-1343877_1920.jpg)

The Liskov Substitution Principle (LSP for short) is the “L” in the [SOLID](https://en.wikipedia.org/wiki/SOLID) principles. Even though many people know this principle, at least by name, I cannot keep track of how many times it is skipped when the SOLID principles are being explained. Most of the time, the explanation of the LSP is reduced to stating its name and showing a half-assed example to which nobody can relate!

## Perceived Complexity

I think that the LSP is often overlooked because of its perceived complexity, starting with its name. Indeed, this principle is named after the computer science pioneer and Turing Award winner [Barbara Liskov](https://en.wikipedia.org/wiki/Barbara_Liskov), who laid the base for our understanding of modules and abstraction. As such, it is the only SOLID principle that has not a self-explaining name and I believe that it could throw people off.

Funnily enough, Barbara Liskov explained - during a [conference talk](https://youtu.be/oeknOtb0gzQ?t=1339) she gave in 2020 - that someone asked her once what this principle meant and she was pretty confused because she wasn’t even aware of its existence.

<iframe loading="lazy" width="560" height="315" src="https://www.youtube.com/embed/oeknOtb0gzQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

## It’s Just Semantics

In a nutshell, the LSP means that there must be a **_semantic_** relationship between a class and a subclass - sharing methods with the same name is not enough. For instance, stacks and queues may both have `add` or `remove` methods but these classes should not inherit from each other as these methods mean completely different things: a stack would work in a _last-in-first-out_ (LIFO) fashion as opposed to _first-in-first-out_ (FIFO) for a queue. Consequently, if your program is built using a queue and you _substitute_ it for a stack, it might not work anymore.

## Temper your Expectations

The idea behind the LSP revolves around expectations and contracts. If I use a stack, I _expect_ it to be a LIFO and would not be happy if it turned out to be a FIFO instead. Any subtype of the stack should respect this _contract_.

We can therefore infer that a subtype violates the LSP if

- it expects more than what the contract states (e.g. non-null input, specific concrete type for an interface, etc.)
- it does less than what the contract requires (e.g. return null when it shouldn’t, does not return a list in proper order)
- it does not implement a method defined in the base class or interface.

The LSP also means that the client code should not rely on something that is not in the contract.
Tail-kit : 200+ free Tailwind
 components / templates
Tags: javascript, webdev, nextjs, showdev
Published: 2021-01-22 23:06:18


Hi everybody 🤘 

I'm Charlie, a french JS developer 🇫🇷
I just release a free and open source project, **[tail-kit](https://www.tailwind-kit.com)**. 
It's a kit of components and templates fully coded with tailwind css 2.0 ready to copy paste.

- The link : [https://www.tailwind-kit.com](https://www.tailwind-kit.com)
- The Github : [https://github.com/Charlie85270/tail-kit](https://github.com/Charlie85270/tail-kit)

Made with React + NextJS + Typescript 🔥

What do you think of this project ? 🙂
All comments, likes, shares, stars, contributions are welcome and really help me to improve the kit ! 👊


### Here is an overview of some features

#### Live code editor
![Tailwind-Kit](https://i.ibb.co/g3n4NMg/Capture-d-e-cran-2020-12-27-a-12-06-16.png)

Tail-kit include a live code editor, you can change the components or templates code and see in live your modifications.

#### Dark mode
![Tailwind-Kit](https://www.tailwind-kit.com/demo.gif)

Most components and templates are implemented with a light and dark version, with the new dark mode 2.0 feature of tailwind CSS. 

#### Templates examples

Tai-kit contains some templates like landing pages, folio pages ect. All are fully Coded and ready to copy paste.

![Tailwind-Kit](https://www.tailwind-kit.com/template.png)

![Tailwind-Kit](https://www.tailwind-kit.com/template2.png)



##### and may other things will coming soon....
Built my first C#/NuGet package!
Tags: showdev, csharp, nuget, aws
Published: 2021-01-22 23:01:14

Yesterday, I pushed <a href="https://www.nuget.org/packages/ara225.DynamoDBUserStore/">ara225.DynamoDBUserStore</a> my first ever NuGet package. Basically, it's a wrapper around DynamoDB functions which allows ASP NET Core Identity to store user account details and role information in AWS DynamoDB (otherwise known as a custom user & role store for ASP .NET Core).
It's not glamorous or perfect, but it is somewhat complex and as well engineered and tested as I can make it, so I'm rather proud of it on a technical level. 

It's also a fairly large achievement on a personal level. I used to be scared of more complex langues (namely C. C++, Java, and C#) because I tried and failed to learn C++ as a kid (and promptly gave up programing as a result). But, frankly that was about a decade ago, and I didn't have proper resources or know any developers so it's been an irrational fear for a long time. 

Anyway, three months ago, I decided to throw myself in the deep end with C# by building a ASP .NET core app. I couldn't think of anything good to make, so I made a basic CRUD app (posing as a project management app) with authentication and made some unusual requirements (store everything in DynamoDB being the core one). I ended up making my own user store which became this thing.
Day 293 : Been So Long
Tags: hiphop, code, coding, lifelongdev
Published: 2021-01-22 22:59:47

_liner notes_:
- Professional : Can't believe it's Friday already! The week flew by. Had a team meeting and afterwards helped a team mate with an issue they were having. I basically played a rubber duck and had them walk through their code and asked questions and gave suggestions along the way. They were super happy they got it working. haha. Basically spent the rest of my time working on my slides. It's been so long since I started! haha Also drove to my folks place (which also takes way too long, haha). I've got my presentation next week and want to make sure I have stable internet connection. Plus, some packages I ordered came in.

- Personal : Last night, went through some tracks for the radio show and worked on my slides till it got too dark for me to think. haha.

![View into a lake surrounded by green mountains in Urnersee Lake, Switzerland](https://dev-to-uploads.s3.amazonaws.com/i/l205j1p0fxxpll98j4kj.jpg)

Going to finish putting together the radio show tomorrow and watch the newest episode of WandaVision. Depending on when I get that done, I want to go back to my slides. I just have a few more. Been battling with how I want the information laid out.

Have a great night and weekend!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube kVyc3irgOyg %}
Working With Google Colab
Published: 2021-01-22 22:56:50

Gone are the days when computing resources were scarce (to run the simplest task takes years). With the advent of sophisticated computing resources, human beings have been able to leverage these tools to solve human problems.

Motivation
Running a machine learning project on a local system can be really daunting and time-consuming; during my undergraduate, I’d to train a facial recognition system to be utilized by a front-end application on a 4Gb RAM, 1.8GHZ CPU computer system which is nothing to write home about.

Here comes Google Colab to the rescue!

What is “Colab”?
Google Colaboratory, or “Colab” for short, is a free cloud service and it also supports free GPU which was developed by Google Research. Colabs allows anyone to write python code(specifically for machine learning and data analysis tasks) through the browser.

How to get started with Colab
1.Creating folder on Google Drive
As a data scientist or machine learning engineer, you will have to work with a folder which could be saved on Google drive. In order to import the folder, we first need to specify the folder we want to work with. For this demo, I created a folder named “Demo” on my Google Drive. You can use a different name that suits you or use the default Colab Notebooks folder.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3vl6x2cedaxrwuohv6of.PNG)

2.Creating a new Colab Notebook
 To create a new notebook, just click on the file, and click on New Notebook.

3.Setting up Free GPU or TPU 
You can use both GPU AND TPU BY
Clicking on the “Runtime” dropdown menu. Select “Change runtime type”. Now select anything(GPU, TPU)that you want in the “Hardware accelerator” dropdown menu.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/w3gd5ze3cvqz1vthy504.PNG)
And that's the end of the short guide to working with Google Colab. Thanks for reading!
Day 7: Building first KNN model
Tags: machinelearning, python, 100daysofcode
Published: 2021-01-22 22:41:59

Today's the day to build my first model!
![Celebrate the good times](https://thumbs.gfycat.com/DapperPlaintiveAmericanrobin.webp)
I decided to go with a K-Nearest Neighbours model since I've never done one of those before and I already have the code on how to do it. I've attempted to do linear regression and logistic regression before, but it didn't go well.
Next, I hunted on Kaggle for some data that I could use. I wanted to find one that someone else has used with a KNN before, so that way I know it is possible. After a quick Google search I found this dataset on [Diabetes](https://www.kaggle.com/uciml/pima-indians-diabetes-database).
I tried to follow the steps I'd been taught on the Data camp course and examine the data first. However, I hit a snag. I've not worked with data like this before so I don't know if it's okay for features such as skin thickness to be 0. So I found someone else's notebook that had worked on this before to see what they did (it's okay because I'm still learning right?). They also weren't sure, so they filled the zero values with the mean values, so I did this too. Now the brain is really sweating.
![Working so hard I start sweating](https://thumbs.gfycat.com/PerkyForkedIcefish.webp)

Okay, so the next step was to build the actual model. I did this by only looking at my notes and I actually managed to get it to work first time! I did have some problems trying to get GridSearchCV (if you're unfamiliar, this is a way to find the best value for your hyper parameters). I think I'll come back to that on Monday and see if I can get that working. Instead, I managed to get a simple for loop working. Then I finished up by making a ROC curve and getting the area under the curve value. It's not perfect, but I'm pretty proud of getting this far and mostly understanding everything I've done.
![Super smiley Ron Swanson](https://thumbs.gfycat.com/LoathsomeUnsightlyEidolonhelvum.webp)

I don't really have code to show today since it was just putting everything together from the last week. However, if you'd like to see what I've done you can [look for yourself](https://www.kaggle.com/jamiedumayne/diabetes-data-set-knn/edit/run/52484973). Anyway, have a good weekend. I'll be back on Monday!
![Waving bye](https://thumbs.gfycat.com/SpecificThirstyIbadanmalimbe.webp)
Maven plugins that I like
Tags: java, maven, tips
Published: 2021-01-22 22:02:27

I’ve been through a couple of projects until now and I’m noticing that there are a couple of maven plugins that are useful but are not that famous. I’ll list them below, together with a small explanation of why I find them useful.

## Build Number Maven Plugin (org.codehaus.mojo)

Sometimes you want to expose the current build version of your application without necessarily updating the artifact version (when you’re iterating fast and using *-SNAPSHOT). I didn’t get to use this one, but I can imagine that it would be good to have in a /info endpoint.

## Apache Maven Shade Plugin

Sometimes you need to package all your dependencies into a single jar file. If you’re using Spring-Boot, you’ll have an easier life if you use the spring-boot-maven-plugin. Most of the time I use it for small projects, where I want to keep everything compact.

## License Maven Plugin (org.codehaus.mojo)

Sometimes you need to add a license header to all the files of your project or you need to pack with your application a file with all the licenses of the 3rd party libraries that you’re using. I wish I would have known about it three years ago when I was updating THIRD-PARTY.txt files manually.

## Versions Maven Plugin

Sometimes you want to update the libraries that you’re using to the latest version. This plugin makes managing that update a lot easier. You have good control over the strategy of the version advance. This plugin makes your life easier, assuming you have enough tests to make sure that the update didn’t break your application. I just discovered this plugin and I like that it makes the library update chore a breeze.

## Apache Maven Enforcer Plugin

Sometimes you need to make it clear what versions of OS, Java, etc. the application can be built with (because of incompatibilities). I like that the set of already-made rules is extensive.

## Apache Maven Checkstyle Plugin

Sometimes you need to enforce the codestyle that the team has agreed to. A bonus is that it helps the new members of the team to pick up the code standards immediately. I have a love and hate relationship with this plugin, but overall I’m happy to see the same kind of code everywhere.

## OWASP Dependency-Check Plugin

You always want to have an application that is as secure as possible. This plugin allows you to automatically check for the latest reported vulnerabilities. I knew about the [OWASP Top Ten](https://www.owasp.org/index.php/Category:OWASP_Top_Ten_Project) for a couple of years and I learned about this plugin 2 months ago. I’ll never stop using it.