teleren/devto huggingface dataset:
The unsolvable z-index auto-increment.
Tags: css, html, todayilearned, discuss
Published: 2020-11-21 10:52:57

# The idea.
If you wrote my previous series [CSS Only: to the infinity and beyond](https://dev.to/cadienvan/series/1551) you know I like to play with CSS to explore its limits, and today I woke up with a strange, but simple idea: *Auto-incremental z-indexes*.


The development is pretty simple and straightforward: Being able to have a container div with many `.layer` divs inside of it, each one with an incremental `z-index`, auto-calculated via CSS.

I did many tries and I'll try to explain them in a simple and quick way.

> TL;DR: It doesn't work. Or, at least, I didn't find a way to.

Let's go!

# The HTML
The HTML part is the easiest one as it's exactly the one explained above:
```
<div class="main">
  <div class="layer">
    1
  </div>
  <div class="layer">
    2
  </div>
</div>
```

# The CSS - Part 1
I wanted to use some modern CSS and went for [Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) aka CSS Variables.
```
.main {
  --z-index: 0;
}

.layer {
  z-index: var(--z-index);
}

.layer + .layer {
  --z-index: var(--z-index) + 1;
}
```
As soon as I wrote that, I remembered you can't do calcs like that in CSS. So I went for the [calc()](https://developer.mozilla.org/en-US/docs/Web/CSS/calc()) function.

# The CSS - Part 2
```
.main {
  --z-index: 0;
}

.layer {
  z-index: var(--z-index);
}

.layer + .layer {
  --z-index: calc(var(--z-index) + 1);
}
```
Buuuuut, it doesn't work either.
You can't calc things like that in CSS, so I had to find another way.

# Eureka!
Have you ever read about [CSS Lists And Counters](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters)? I did in the past, but I've never used them as I never had a chance to, so, I though, "Maybe I could give it a try!"

# The CSS - Part 3
Let's go full counters then!

```
.main {
  counter-reset: section;
}

.layer {
  z-index: counter(section);
}

.layer + .layer {
  counter-increment: section;
}
```

I started with a counter-reset and then counter-incremented it at every subsequent selector.

But the CSS counter() function returns a `<string>` and the z-index property is looking for an `<integer>`, so well.. It doesn't work.

# Conclusion
I guess my dream will stay a dream for a little as I don't know any other possible CSS-only solution for this.

That's why I'm asking *you* to think about it and let me know if you can find a way to achieve my goal.

Can we do it with the current CSS specs? Will we ever be able to?

Let's *#discuss* it in the comments.

Wanna give it a try? [Here](https://codepen.io/Cadienvan/pen/GRqbvdP)'s a Codepen you can fork.
Create your own Virtual Writing Board - p5.js
Tags: webdev, p5js, javascript, animation
Published: 2020-11-21 10:40:09

<h1>My Writing Board</h1>
<p>
This is a simple writing board created using concepts of keyframes, mouse events in computer graphics ( p5.js - a JavaScript library for drawing functionality ).
</p>

<h2>How to use ?</h2>
<ul>
    <li>Click & Drag to Draw with the help of mouse.</li>
    <li>If it is a touch screen, draw slowly with your fingers or stylus pen.</li>
    <li>Hit key <b>'r'</b> on keyboard to Replay your sketch and to Continue drawing.</li>
    <li>Hit key <b>'e'</b> on keyboard to Erase / reset everything.</li>
</ul>
<br>
<h1>
<a href="https://editor.p5js.org/GudiVaraprasad/full/wyWLNkvjR" target="_blank">Give it a try here</a>
</h1>

<h2>Source Code : </h2>

```javascript

const drawing = [];
const recorded = [];
let frames = 0;

function setup() {
  createCanvas(windowWidth, windowHeight);
}

function mousePressed() {
  drawing.push(new Path());
}

function mouseDragged() {
  drawing[drawing.length - 1].points.push(new Point(mouseX, mouseY));
}

function keyPressed() {
  if (key == "r") {
    recorded.push(...drawing);
    drawing.splice(0);
    frames = 0;
  } else if (key == "e") {
    recorded.splice(0);
    drawing.splice(0);
    frames = 0;
  }
}

function draw() {
  background(255, 255, 153);
  for (const path of drawing) {
    stroke(0);
    strokeWeight(2);
    noFill();
    beginShape();
    for (const v of path.points) {
      vertex(v.x, v.y);
    }
    endShape();
  }
  for (const path of recorded) {
    if (frames >= path.time) {
      stroke(0);
      strokeWeight(2);
      noFill();
      beginShape();
      for (const v of path.points) {
        if (frames >= v.time) vertex(v.x, v.y);
      }
      endShape();
    }
  }
  frames++;
}

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.time = frames;
  }
}

class Path {
  constructor() {
    this.points = [];
    this.time = frames;
  }
}

// Gudi Varaprasad

```

 <br>

***&copy; 2020 GVP, All rights reserved***
New Github REPOS
Tags: github, html, firstyearincode, beginners
Published: 2020-11-21 10:37:18

1 
Avolon

Your site is ready to be published at https://mk-knight23.github.io/avalon

Your site is ready to be published at https://avalon-web.onrender.com

2
wise

Your site is published at https://mk-knight23.github.io/wise

Your site is published https://wise23.onrender.com

3
Future Imperfect

website : https://mk-knight23.github.io/future
Selenium WebDriver Methods- Selenium Online Training
Tags: selenium, automation, manual, career
Published: 2020-11-21 10:02:23

1. Creating New Instance Of Firefox Driver – this will open a new Empty browser
WebDriver driver = new FirefoxDriver();
2. Command To Open URL In Browser
driver. get(“http://selenium-suresh.blogspot.com”);
This syntax will open the specified URL of the software web application in a web browser.
3. Clicking on any element or button of webpage
driver.findElement(By.id(“id of any element or button”)).click();
4. Store text of targeted element in variable – This will retrieve text from targeted element of software web application page and will store it in variable = suresh
String suresh = driver.findElement(By.tagName(“select”)).getText();
5. Typing text in text box or text area.
driver.findElement(By.name(“txtboxname”)).sendKeys(“My First Name”);
6. Applying Implicit wait in web driver – This syntax will force webdriver to wait for 15 seconds if an element not found on the page of a software web application.
driver.manage().timeouts().implicitlyWait(15, TimeUnit.SECONDS);
7. Applying Explicit wait in webdriver – This will wait for 15 seconds for the expected text “Time left: 7 seconds” to appear on the targeted element.
WebDriverWait wait = new WebDriverWait(driver, 15);
wait.until(ExpectedConditions.textToBePresentInElementLocated(By.xpath(“xpathofelement”), “Time left: 7 seconds”));
8. Get page title in selenium webdriver
driver.getTitle();
9. Get the Current Page URL In Selenium WebDriver- It will retrieve the current page URL and you can use it to compare with your expected URL.
driver.get current URL();
10. Get domain name using javascript executor – This will retrieve your software application’s domain name using web driver's javascript executor interface and store it into a variable.
JavascriptExecutor javascript = (JavascriptExecutor) driver;
String CurrentURLUsingJS=(String)javascript.executeScript(“return document.domain”);

For more details please visit: https://nareshit.com/selenium-online-training/
Front-end Challenge #2 Landing page darkmode.
Tags: html, codenewbie, design
Published: 2020-11-21 09:56:12

Hi Guys this is Front-end challenge 2 if you haven't checked the first one you can check it here [Front-End Challenge #1](https://dev.to/kelvinconrad/week-1-frontend-challenge-3jdl)

##Challenge: Figma startup landing page darkmode

Improve your front-end coding skills by building real projects 
I couldn't post the full design in Dev. due to size limit
You can Preview the design [Preview](https://www.figma.com/file/tOgQVsBPqI2BvnNHluHnYO/Figma-startup-landing-page-dark-Community?node-id=0%3A3517)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/e91ojc62mt8fs5rhj3xa.jpg)

View Full Design [Preview](https://www.figma.com/file/tOgQVsBPqI2BvnNHluHnYO/Figma-startup-landing-page-dark-Community?node-id=0%3A3517)

##Brief
So this Week's Challenge is to build out this landing page and get it looking as close to the design as possible.

This project will test your layout skills. If you're starting to get confident with Flexbox or Grid, this will provide a nice challenge!

You can use any tools you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a Go

##Getting Started
All the files are included in my [Github repo](https://github.com/kelvinconrad/Figma-landing-page-darkmode) so the where all the Assets are ie: Images, Figma design file

1. Go to [Github](https://github.com/kelvinconrad/Figma-landing-page-darkmode) and clone the repo which contain all the starter files that you'll need to complete the challenge.

Clone the repo `git clone https://github.com/kelvinconrad/Figma-landing-page-darkmode.git`

2. Start the project
3. To host your Project you can use any services which are free eg: [Githubpages](https://pages.github.com/), [Zeit](https://vercel.com/), or [Netlify](https://www.netlify.com/). Personally i use Netlify.
If you don't have any idea on how to use any of this please comment and i will create a post on how to host in vercel, Github pages & vercel

**After finishing your project you can share it dev.to community by using the [#frontendchallenge](https://dev.to/t/frontendchallenge) hashtag**

##Ideas to test yourself
Not a must but if you can try it will be good for you.

1. Write your styles using a pre-processor, such as Sass, Less, or Stylus
2. Train your eye for detail by getting your solution as close to the design as you can
3. Use a JavaScript framework/library to practice templating and/or building using components
4. Try estimating the time it will take for you to build the project. Then see if the time taken matches up to your estimate.

If you guys think this is a good idea please let me know so that I can keep posting new design and challenge every Saturday
go mod, updating to latest versions, and gvm
Tags: go
Published: 2020-11-21 09:55:30

So, I installed Golang using `apt` (inside WSL Ubuntu Linux); created a project outside GOROOT with `go mod init`, then want to update to the latest Go version (1.15.5).

The easiest way to do this (as far as I have experimented), is using [gvm](https://github.com/moovweb/gvm). (Similarly, Python => pyenv; Node.js => nvm; Ruby => rbenv; Java => SDKman.)

```sh
zsh < <(curl -s -S -L https://raw.githubusercontent.com/moovweb/gvm/master/binscripts/gvm-installer)
# or bash < <(...)
```

Then, edit the `./go.mod`

```
go 1.15.5
```

I think, knowing this is important, when you are using `go mod`, because `go version` will then be fixed inside `go.mod`.

Actually, VSCode itself can also choose `go version`, but much less flexible.
First Mile almost over!
Published: 2020-11-21 09:41:38

Hello all, my name is Tristan Hawes, though I tend to go by TJ.  I am not very good at writing personal blog blurbs like this and am still a little unsure as to what the criteria for these posts are, but I will try my best.   I've been interested in learning to properly code programs for some time now, and my ideal dream would be to be part of a game development team some day, though I am trying to take things one step at a time.  
  I spent about 2 and a half years attending California State University Monterey Bay, but ultimately came to the realization that the standardized academic teaching system was not quite the right fit for me, so I began to research other options.  I came across several different online coding bootcamps, like Hack Reactor, Coding Dojo, and Flatiron School.  after much deliberation I ultimately decided to attend Flatiron, and thus far have had a positive experience.  I did fall behind a bit due to personal situations, but like any unhealthy college aged geek, I have been sacrificing sleep to catch back up again.  It's already been an entire 2 weeks as of my writing this.  I look forward to learning even more as I go.  Thank you!  -TJ Hawes
How TCP/IP Stack works under the hood 🤷
Tags: tutorial, career, discuss, beginners
Published: 2020-11-21 09:39:12

Started this Computer Networking practical series while back 👨‍💻
✅ Just uploaded 🔟th video of the Lecture)🔥🔥

About me: 
I am a senior software engineer with 5 yrs of experience. My objective is to present a topic with practical way of explanations which every engineer should have some level understanding. I run a channel (Techie Dheeraj) on youtube.

❌ DON’T MISS IT AND DON’T FORGET TO LIKE, SHARE AND SUBSCRIBE 🔥🔥

https://youtu.be/plSkNAxwrSA
building an image dataset
Tags: machinelearning, computervision
Published: 2020-11-21 09:25:47

It's bit of hectic process in creating image datasets. It Basically consists of below mentioned pipeline.(to my understanding)

1. Model Bias.
2. Whats your model goal?
3. Ways to collect images.
4. Cleaning the data.
5. Resizing the images.

-----


### Model Bias

 Can you solve this riddle??

 >A man and his son are in a terrible accident and are rushed to the hospital in critical care. The doctor looks at the boy and exclaims "I can't operate on this boy, he's my son!" How could this be?


Firstly most people generally think what i think😃, this is an example for human bias.

If you train your model with more cat images and expect it to perform well on detecting cats and dogs, this happens


![](https://i.pinimg.com/474x/e0/15/ab/e015aba63fad149f0fe9a83ca788fc52.jpg)

> source: [Sidney Harris](http://www.sciencecartoonsplus.com/index.php)

For more details on data bias you can go through this excellent slides by cs224n: [Bias in the Vision and Language of Artificial Intelligence](https://web.stanford.edu/class/archive/cs/cs224n/cs224n.1194/slides/cs224n-2019-lecture19-bias.pdf)



### Ways to collect data
here's a just a sample list of sources to collect images data

* Search engines 🔍
(Google, Bing, Yandex, Duck Duck Go)
* Social Media > through hashtags#️⃣
* Youtube videos and flickr📹
* take a camera/mobile and go around collect data by yourself.

### Cleaning the data. 
1. Trash the Images which can't be loaded/ corrupted.
2. find out duplicate images(due to various search engines).
3. Do what's necessary...

### Resizing the images

* Resize maintaining its aspect ratio. 
* If you have images of different sizes, and you try using resize with padding(filling the pixels with black/white).
* Smaller your images >>> faster your model training.


----


### Codes you need(💪 open source)

> Some of these requires chromedriver and selenium.

For images downloading based on Search engines:
* Image Downloader by [sczhengyabin](https://github.com/sczhengyabin/Image-Downloader)  [google | bing]

* google images download by [hardikvasa](https://github.com/hardikvasa/google-images-download)

* yandex images download by [bobokvsky] (https://github.com/bobokvsky/yandex-images-download)

* Bulk Bing Image downloader by [ostrolucky](https://github.com/ostrolucky/Bulk-Bing-Image-downloader)

* Flickr image-scraping software developed by [Ultralytics LLC](https://github.com/ultralytics/flickr_scraper)


For downloading from instagram based on hashtags:
* Instagram-scraper by [arc298] (https://github.com/arc298/instagram-scraper)



For duplicate images cleaning:
* Imagededup by [idealo] (https://github.com/idealo/imagededup)✨ 😎

This "imagededup" package uses Convolutional Neural Network (CNN) and hashing algorithms to find duplicates in images.
JavaScript Code Daily Challenge #1
Tags: javascript, challenge, beginners, codenewbie
Published: 2020-11-21 08:51:03

# **About**

This is a series of JavaScript Code Daily Challenge. Each day I show a few solutions written in JavaScript. The questions are from coding practice/contest sites such as HackerRank, LeetCode, Codeforces, Atcoder and etc.

> Day 1: Hello, World
> https://www.hackerrank.com/challenges/js10-hello-world/problem

```javascript
'use strict';

process.stdin.resume();
process.stdin.setEncoding('utf-8');

let inputString = '';
let currentLine = 0;

process.stdin.on('data', inputStdin => {
    inputString += inputStdin;
});

process.stdin.on('end', _ => {
    inputString = inputString.trim().split('\n').map(string => {
        return string.trim();
    });
    
    main();    
});

function readLine() {
    return inputString[currentLine++];
}
```
> Function need to be change
```javascript
function greeting(parameterVariable) {
    console.log('Hello, World!');
    console.log(parameterVariable)
}
```
```javascript
function main() {
    const parameterVariable = readLine();
    
    greeting(parameterVariable);
}
```
Inline & Extract
Tags: inline, extract, codequality
Published: 2020-11-21 08:48:49

---
title: Inline & Extract
published: true
description: How often do you inline and extract functions?
tags: inline,extract,codequality
---

```
                      extracting functions
                              -->

      MONOLITHIC                               FRAGMENTED
   small number of                           large number of
   large functions                           small functions

                              <--
                       inlining functions
```

No matter what you consider the sweet spot for function size, maintaining it requires extracting and inlining to take place with equal frequency.

In your day-to-day work, do you inline functions as often as you extract them?
Formulas to Calculate Subtotal by Colors in Excel Office 365!!
Tags: excelformula, excelformulas
Published: 2020-11-21 09:02:16

---
title: Formulas to Calculate Subtotal by Colors in Excel Office 365!!
published: true
date: 2020-11-21 08:48:41 UTC
tags: ExcelFormula,Excelformulas
canonical_url: https://geekexcel.com/formulas-to-calculate-subtotal-by-colors-in-excel-office-365/
---

This page will show the simple **Formulas to calculate the subtotal by colors in Excel Office 365**. Let’s see them below!! Get an official version of ** MS Excel**  from the following link: [https://www.microsoft.com/en-in/microsoft-365/excel](https://www.microsoft.com/en-in/microsoft-365/excel)

[![Formulas to subtotal by colors](https://eadn-wc04-371788.nxedge.io/cdn/wp-content/uploads/2020/11/Formulas-to-subtotal-by-colors.png)](https://geekexcel.com/formulas-to-calculate-subtotal-by-colors-in-excel-office-365/formulas-to-subtotal-by-colors/#main)<figcaption id="caption-attachment-17805">Formulas to subtotal by colors</figcaption>
## General Formula:

- To calculate the subtotal by color in Excel, use the below formula.

**=SUMIF(color\_range,criteria,number\_range)**

## Syntax Explanations:

- **SUMIF** – It will return the sum of cells that meet a single condition. Read more on the **SUMIF Function**.
- **Comma symbol (,)** – It is a separator which helps to separate a list of values.
- **Parenthesis ()** – The main purpose of this symbol is to group the elements.
- **Range** – It represents the input range from your workbook.
- **Criteria**  – It is the condition that is used to count the values.

## Example:

- Let’s consider the below example, to calculate the subtotal by colors.
- First, you need to give the input values.
- In the below image we will give the input values in **Column B** and **Column C**.
- After that, enter the given formula in the selected area.
- Finally, we will get the result in **Cell F3**.

![Example](https://eadn-wc04-371788.nxedge.io/cdn/wp-content/uploads/2020/11/Example-54.png)<figcaption id="caption-attachment-17804">Example</figcaption>

## Wind-Up:

In this article, we described the **formulas used to calculate the subtotal by colors in Excel Office 365**. Hope you like this article. If you have any suggestions, feel free to share it with us. Thank you so much for Visiting Our Site!! Continue learning on **[Geek Excel](https://geekexcel.com/)!! **and [**Excel Formulas**](https://geekexcel.com/excel-formula/) **!!**

### Read Also:

- **[Excel Formulas: Summary Count of the Non-Blank Categories!!](https://geekexcel.com/excel-formulas-summary-count-of-the-non-blank-categories/)**
- **[Formulas to Count with Percentage Breakdown in Excel Office 365!!](https://geekexcel.com/formulas-to-count-with-percentage-breakdown-in-excel-office-365/)**
- **[Excel Formulas to Count Visible Rows Only with Criteria!!](https://geekexcel.com/excel-formulas-to-count-visible-rows-only-with-criteria/)**
- [**Excel Formulas to Count Visible Rows in a Range!!**](https://geekexcel.com/excel-formulas-to-count-visible-rows-in-a-range/)
Stylq: 5000+ downloads
Tags: stylq, javascript, npm, showdev
Published: 2020-11-21 08:32:26

---
title: Stylq: 5000+ downloads
published: true
description: Stylq has been downloaded 5000+ on NPM
tags: stylq, javascript, npm, showdev
//cover_image: https://direct_url_to_image.jpg
---

### Hi, Thank You for 5000+ downloads on Stylq

Stylq is the cool syntax language, allows user to make website more easily and effectively.

* Stlyq is the Rich Syntax file that generate HTML file. 
* Stylq uses variable to make website fastly and effectively.

Download and enjoy [here](https://www.npmjs.com/package/stylq)

[Star on GitHub](https://github.com/aj1thkr1sh/stylq) if you like Stylq

### Stylq CLI

One can also use [Stylq CLI](https://www.npmjs.com/package/stylq-cli) to achieve the same more effectively

[Stylq-CLI Github](https://github.com/aj1thkr1sh/stylq-cli)


Thanks for the support