teleren/devto huggingface dataset:
A Perfect Product Card Using HTML & CSS
Tags: html, webdev, css, beginners
Published: 2021-07-23 15:28:00

Hello Guys,

Today I created a Amazing Product Card Using HTML & CSS. this simple product card using some css properties flex and box-shadow to create the card effect. I hope you like this also comments about your thoughts.

{% post https://dev.to/nikhil27b/glassmorphism-sign-in-form-using-html-css-3a2a %}

For more content follow me on Instagram  [@developer_nikhil27](https://www.instagram.com/developer_nikhil27/).

Thank you!

{% codepen https://codepen.io/NikhilBobade/pen/XWRzRXr %}
Web Features That May Not Work As You’d Expect
Published: 2021-10-05 11:19:20

---
title: Web Features That May Not Work As You’d Expect
published: true
date: 2021-07-23 15:24:43 UTC
tags: 
canonical_url: https://codelab.farai.xyz/elsewhere/unexpected-web-features/
---

_[Web Features That May Not Work As You’d Expect](https://codelab.farai.xyz/elsewhere/unexpected-web-features/) was first published on [Farai's Codelab](https://codelab.farai.xyz/)._
* * *

> As the web gets more and more capable, developers are able to make richer online experiences. There are times, however, where some new web capabilities may not work as you would expect in the interest of usability, security and privacy.
> 
> I have run into situations like this. Like lazy loading in HTML. It’s easy to drop that attribute onto an image element only to realize… it actually needs more than that to do its thing. We’ll get into that specific one in a moment as we look at a few other features that might not work exactly as you‘d expect.

This is the first post I’ve written for an online web dev publication. I’m embarassed to say that it took 6 months to get it out, but here it is! Thanks to Geoff and Chris for helping me with this! I do hope to write more content for other publications throughout the rest of the year.

Read [Web Features That May Not Work As You’d Expect on CSS Tricks](https://css-tricks.com/web-features-that-may-not-work-as-youd-expect/)

* * *

Thanks for reading! If you liked this post, consider [supporting my work](https://codelab.farai.xyz/support/) by:

- sharing my work,
- refering me for a job (or hire me for freelance work),
- sponsoring me on [Patreon](https://patreon.com/faraixyz),
- [buying Me A Coffee](https://www.buymeacoffee.com/faraixyz),
- [buying Me A Ko-Fi](https://ko-fi.com/faraixyz),
- [sending me a tip on Paypal](https://paypal.me/fgandiya),
- ~~[buy something on Amazon with my affiliate link](https://amazon.com/?tag=faraixyz03-20) (I’ll earn a commision on this as an amazon affiliate)~~,
- or [buy a domain on Namecheap with my affiliate link](https://shareasale.com/r.cfm?b=467188&u=2110247&m=46483&urllink=www%2Enamecheap%2Ecom%2F&afftrack=).

You can also [subscribe to my newsletter](https://buttondown.email/faraiscodelab).

Have feedback? Send an email to [gandiyafarai+feedback at gmail dot com](mailto:gandiyafarai+feedback@gmail.com?body%3dHey%2bI%2bread%2bthat%2bpost%2band%2bI%2bthought%2bit%2bwas%2bamazing%2521%2bAnd%2byet%252C%2bI%2breally%2bthink%2bthat%25E2%2580%2594I%2btotally%2bdidn%2527t%2buse%2bthe%2bprepopulated%2bemail.%26subject%3dFeedback%2bon%2bWeb%2bFeatures%2bThat%2bMay%2bNot%2bWork%2bAs%2bYou%25E2%2580%2599d%2bExpect)
Terms Every Android Dev Should Know
Tags: android, terms, devs
Published: 2021-07-23 15:21:53

##Accelerometer
An accelerometer is a sensor that measures the acceleration of an object in order to determine the movement of a mobile device.

##Gyroscope
An instrument that measures the orientation of a device in order to orient the display.

##Emulator
The emulator is an application that duplicates the functionality of the hardware or operating system for testing purposes.

##Native App
An application that is written in a programming language that is directly compatible with the target platform.

##Native Bridge
The native bridge is an abstraction layer that gives non-application access to mobile device APIs.

##WebView
A view that displays web pages within a mobile app.

##Splash Screen
The first screen is visible to the user when the app is launched and used to display some illustrations and animations.

##SDK
(Software Development Kit) A set of programming tools and resources built to aid software development on a particular platform.

##Hybrid App
A mobile application is written on web technologies that use a web-to-native abstraction layer.

**Read More:** [Terms Every Android Dev Should Know
](https://aslisach.in/2021/terms-every-android-dev-should-know/)
Interview help!
Tags: career, machinelearning, python
Published: 2021-07-23 15:00:05

Hi! I'm interviewing for a frontend developer position, they sent me a coding challenge that that I need to prepare for that is titled "data-science-coding-interview" - the reqs are to build a baseline machine learning model using Python, numpy and scikit-learn. I asked if this was the correct challenge and they said yes...Is this normal for a frontend role?

HELP
Problem while compiling and executing Java program with JAR file
Tags: java
Published: 2021-07-23 14:54:10

One fine day, I was creating a mini project in Java. The concept of the project was to demonstrate the CRUD operation using Swing, i.e. using GUI. As it was to demonstrate CRUD, I used JDBC in the program as well. If you are familiar with JDBC then you must be knowing that it requires a JDBC driver’s JAR file to successfully compile and execute a JDBC program.

I followed all the steps, wrote a clean code and added the JAR file in the root directory of the project. I compiled the program using the following command:

**_javac -cp “.;relative/path/to/jar/file” filename.java_**

The compilation was successful. Then I tried to execute the program with the following command:

**_java -cp “.;relative/path/to/jar/file” classname_**

But instead of successfully executing, it displayed the following error:

**Error: Could not find or load main class classname
Caused by: java.lang.ClassNotFoundException: classname**

I googled a lot about the right procedure to compile and execute a JDBC program but either the result contained the same procedure or contained the steps to program on IDE like NetBeans.

After doing a lot of research I went to Stackoverflow, and from the answers there I concluded that I had done a slight mistake in the commands. I was specifying the relative path to the JAR file whereas I was supposed to provide a fully qualified path of the JAR file, i.e. the absolute path for the file. Also, it didn’t require to specify classpath while compiling as the JAR file was in the same directory.

So the new compiling and executing command goes like this:

**_javac filename.java_**
**_java -cp “.:fully/qualified/path/to/jar/file” classname_**

Another thing to notice here is that I changed the semicolon(;) with a colon(:) in the classpath to separate two different classpaths. Because Linux based OS uses the colon as a separator but Windows uses a semicolon as a separator as the colon is used for drive specification in the Windows system.
Placement Series 2021
Tags: placements2021, batchof2022, computernetworks
Published: 2021-07-23 14:50:39

Placement season for the batch of 2022 will be starting in few days across most of the NITs and other engineering colleges. While most of the students would be preparing hard for their placements, one might also get intimidated by the huge syllabus which the academics offer. The post (and subsequently some other posts also) intends to provide some important topics about all the important subjects regarding Placements. #ComputerNetworks is quite an important subject with respect to placements.
Here are some of the important topics to look at:

1) OSI Model and TCP/IP Model (Thorough idea of each layer and also a protocol which is used in each layer)
2) IP Address (IP4, IP6)
3) MAC Address
4) Packet Switching and Circuit Switching
5) Ethernet (Ethernet Header)
6) CSMA/CD, Exponential backoff
7)DNS, DNS Header (What happens when you enter the URL and hit enter)
8) Framing
9) Routers and Routing Algorithms (Count to Infinity Problem)
10) Knowledge about Ports, Swithes, Bridge, Repeater, Hub (In which layer do they operate in)
11) Error Correction (Parity Bit, 2D Parity, CRC Check)
12) Check Sum Computation (Hamming Code)
13) TCP vs UDP
14) TCP Header, 2 way Handshake and 3 way Handshake
15) Protocols (HTTP, HTTPS, ARP, TCP, UDP, FTP, SMTP)
16) Sliding Window Protocol
17) HTTP vs HTTPS
18) Does DNS use TCP or UDP ?
19) Network Topologies
20) CIDER, Classful and Classless Addressing

I personally found these topics to be the most frequently asked ones. Any suggestions are most welcome. Best of luck for Placements !!
Dealing with the lifecycle of a Tempfile
Tags: ruby, tempfile
Published: 2021-07-23 14:50:15

When dealing with `Tempfile`s in Ruby it's important to remember that when a tempfile object gets deallocated, the referenced file gets deleted as well.

```ruby
require 'tempfile'

def foo
  Tempfile.new.path
end

path = foo # => "/tmp/20210723-30107-1h52x7" 

# Soon after:

File.exists?(path) # => true

# But wait for it..
 
File.exists?(path) # => false 
```
How to Supercharge your Software Engineering Skills
Published: 2021-07-23 14:17:21

We will talk about software engineering skills and how to take them to the next level.
as usual in our posts, we focus on completing the picture and filling the gap between learning and real-life situations and problems.
### So, Let's start 👌. 

1. [Dot-Conferences](https://www.youtube.com/user/dotconferences) 
2. [WeAreDevelopers](https://www.youtube.com/channel/UCSD0dLRGQk_T-D3RvpM5aFQ)
3. [GOTO Conferences](https://www.youtube.com/c/GotoConferences/playlists)
4. [NDC Conferences](https://www.youtube.com/channel/UCTdw38Cw6jcm0atBPA39a0Q)
5. [This Dot Media](https://www.youtube.com/c/ThisDotMedia/playlists)
6. [Pusher](https://www.youtube.com/c/Pusher_realtime)
7. [JSConf](https://www.youtube.com/user/jsconfeu)
Generate your own application with End-to-End testing thanks to JHipster.NET
Tags: cypress, jhipster, e2e, csharp
Published: 2021-07-23 14:12:29

![JHipster.NET and Cypress](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1vv4pti8hy5artx48i2z.png)
# Introduction
When [generating your application with JHipster.NET](https://zenrac.medium.com/generate-your-asp-net-core-application-with-jhipster-net-377315c43e71), you can decide to generate some optional Tests :
- Performance tests with [Gatling](http://gatling.io/).
- Behaviour-driven tests with [Cucumber](https://cucumber.io/).
- Angular/React/Vue integration tests with [Cypress](https://www.cypress.io/).

Today we're going to talk about [Cypress](https://www.cypress.io/), a next generation front end testing tool built for the modern web.
# Generate Cypress tests
When generating your application, make sure to select Cypress (by pressing the space bar).
![Choose Cypress](https://miro.medium.com/max/636/1*T8YsyVY7Oe2a7y_c4BuDzg.png)
# Run your Cypress tests
Once your application is generated, you can optionally add some entities (check [this article](https://zenrac.medium.com/generate-your-asp-net-core-application-with-jhipster-net-377315c43e71) to get started with entity generation), it will auto-generate the corresponding tests for your entities. Execute cypress using this command :
```
src/YourApplication/ClientApp/node_modules/.bin/cypress open
```
# Conclusion
Now you should be able to generate End-To-End tests though Cypress thanks to JHipster !
Feel free to contribute to JHipster.NET's GitHub repository and don't forget to put a star if you liked it.
Control your Github from the command line with the Github CLI
Published: 2021-07-23 14:00:22

Want to create a repository, but don't want to go to [Github](https://github.com) and follow that manual and perhaps long process, every single time.

Use the [Official Github CLI](https://cli.github.com/). It can do a lot of stuff ranging from creating a repo to closing a PR. I have written down some important commands in this blog post. (Have also linked the docs for the commands)

## [Login](https://cli.github.com/manual/gh_auth_login)

First, to use some of the commands listed below, you will have to authenticate the CLI by running

```
gh auth login

```

## [Creating a repository](https://cli.github.com/manual/gh_repo_create)

This is probably the command I use the most

```
gh repo create repo_name

```

## [List repositories of a user](https://cli.github.com/manual/gh_repo_list)

```
gh repo list username

```

## [View Repository in web](https://cli.github.com/manual/gh_repo_view)

### View any repository in web

```
gh repo view owner/repo_name --web

```

### View the repository you're currently in (cloned repository)

```
gh repo view --web

```

## [Aliases](https://cli.github.com/manual/gh_alias)

### List Aliases

```
gh alias list

```

### Set Alias

```
gh alias set <alias> <expansion>

```

### Delete Alias

```
gh alias delete <alias>

```

These are my most used commands but there are a lot more which can be found on the Github CLI Docs. And most of these commands listed above can also be used with some flags which are listed in the documentations.
[App/OpenSource] Find the best runway for takeoff or land
Tags: showdev, javascript, react, webdev
Published: 2021-07-23 13:38:39

Hi developers! :heart_eyes:

Just released a new open source project based on my previous project:
https://dev.to/epranka/app-airportdb-api-service-c7j

The new project lets pilots to easily find the best runway for takeoff or land based on wind data.

Runway calculator app: [runway.airportdb.io](https://runway.airportdb.io)

:book: The source code: [epranka/runway-app](https://github.com/epranka/runway-app)

## About

On the main page of the application, enter the airport ICAO code from that you want to take off or land.

![](https://raw.githubusercontent.com/epranka/runway-app/master/public/social.png)

After entering the airport ICAO you will be redirected to the result page.

In the first part of the result page, you will see the airport name, last METAR update date, METAR data itself, and wind direction.

![](https://camo.githubusercontent.com/a7f1b56ee6e9185c699fc8477ff9a07a664dfd3679e78151b554544d874927e4/68747470733a2f2f692e6962622e636f2f4438526346736a2f696d6167652e706e67)

A little below is the main information: runway suggestions. All runways are sorted by two properties. In the first place, you will get all runways that have headwind, in the second crosswind, and the last tailwinds. Every group of runways is also sorted by cross-wind in ascending order. So the first runway in the list should be the best option because it should be with a headwind (if exist) and with a minimal crosswind.

![](https://camo.githubusercontent.com/e0dd67bfa28018784ed732559da3afaacb2772eb0c7673fd2ece9e1e850638d5/68747470733a2f2f692e6962622e636f2f79346673726e332f696d6167652e706e67)

And the last part of the page shows the minimal airport runways map. Green arrows show the headwind runways and the yellow arrows - crosswind runways. Also in the background, you will see light blue arrows which represent wind direction.

![](https://camo.githubusercontent.com/fe5bd45779174a64b8eb88de341107a7f492267e52643ed1a0f086a67dc91e94/68747470733a2f2f692e6962622e636f2f7664595a6279772f696d6167652e706e67)



<hr />

Any feedback or suggestions are appreciated! 😊
🦊 GitLab Cheatsheet - 8 - GitlabCI - Cache & artifacts
Tags: gitlab, tutorial, devops, cheatsheet
Published: 2021-07-23 13:27:35

This cheatsheet speaks about cache and artifacts in GitlabCI.


<a href="https://jeanphi-baconnais.gitlab.io/img/cheatsheet/GitLabCheatsheet-8-GitlabCI-Cache-Artifacts.jpg" alt="8 - GitLabCI - Cache & Artifacts" target="blank">

<img src="https://jeanphi-baconnais.gitlab.io/img/cheatsheet/GitLabCheatsheet-8-GitlabCI-Cache-Artifacts.jpg" alt="8 - GitLabCI - Cache & Artifacts" />

</a>

I will create others cheatsheet. Tell me if you have comments or suggest about those cheatsheet 😃.
Modifying Array Data with Indices
Tags: javascript, codenewbie, beginners, webdev
Published: 2021-07-23 13:11:41

In this *episode* of the series, let's learn **How to Modify Array Data with Indices**.

In addition to accessing array data with index, we can also modify them with the same `square bracket []` notation. We can `set an index` with a `new value` replacing the `existing one`, with the same notation.

For Example: 

```js
let numArr = [50,60,70];
numArr[1] = 20;
console.log(numArr[1]); //output: 20
console.log(numArr); //output: [50,20,70]
```
In the above example, the value of the *index 1* is assigned to the value *20*. If we see the console, we will notice that index 1 is now holding the *new value 20*, replacing the *initial value 60*. The *numArr* is holding the value [50,20,70]

Let's see another easy example to modify the same array. In this example, we will `add a new index` with `a new value` in the existing array , with the same notation. The new index with new value will be added at `the end` of the array.

```js
let numArr = [50,60,70];
numArr[3] = 80;
console.log(numArr[3]); //output: 80
console.log(numArr); //output: [50,60,70,80]
```
We can notice that, the array is initialized with `three indices` 0,1 and 2 holding the value, 50,60 and 70 respectively. Here, *numArr[3]* simply added a `fourth index` to the array assigned with a value of 80. Now if we see the console, the *numArr* is holding the value [50,60,70,80], adding the *fourth index* with the value 80.

In the next episode, we will discuss about other methods to modify an array by *adding* or *removing* it's elements.
SQL Performance - composite indexes
Tags: sql, backend, performance, index
Published: 2021-07-23 13:05:45

Recently I have been reading [SQL Performance Explained by Markus Winand](https://www.goodreads.com/book/show/17225810-sql-performance-explained) and I wanted to share with you what I have learned about the composite index. 

You are probably familiar with the concept of the index in the Database. In very simple terms, you can imagine that it is similar to telephone directory (B-tree structure in DB) - instead of traversing through the whole book (DB), you are using directory (DB index) to find it faster. For more about indexes, you can read [here](https://use-the-index-luke.com/sql/anatomy).

Imagine you have table employees with columns *id, department, name.*

As you have some SELECT queries accessing those fields, you have created index for *department* and index for *name:* 

`CREATE INDEX department_index ON employees(department);`

`CREATE INDEX name_index ON employees(name);`

It works well for queries like: 

`SELECT * FROM "employees" WHERE "department" = 'IT';`

or 

`SELECT * FROM "employees" WHERE "name" = 'Rafal';`

Now, imagine you have a query that selects **both** department and surname: 

`SELECT * FROM "employees" WHERE "department" = 'IT' AND "name" = 'Rafal';`

You already have an index on those fields, right? So what is the problem? 

DB engine will use only one of the indexes you have created. Going back to the example with telephone directory - you have created two separate directories - those are two separate structures and you either look in one or another. When two fields are selected,  one of the fields will be selected to choose index structure and then found in this index to select the results.  The second field will be traversed based on the selected results. You can imagine with *department* index example: *department* (IT) index will be selected and then the *name* (Rafal) entry will be searched for in the leaf nodes of index. So if the name column will consit of "Agata, Tomek, Rafal, Zenek, (...)" it will traverse through several entries to find a correct entry (Rafal). 

A Solution for that would be to use a composite index. You can create it like: 
`CREATE INDEX composite_index_name on employees(department, name)`

It will then create an index on two columns. With telephone directory example - you will have a directory that consists of both of those informations and directs to the right place. So query: 

`SELECT * FROM "employees" WHERE "department" = 'IT' AND "name" = 'Rafal';`

will hit exactly one entry in the index with one leaf node.

Might be useful if you are using heavy queries used at hot spots in the system and performance there is crucial. 

DISCLAIMER: Be aware indexes also do use storage and every INSERT/UPDATE needs to update the index structure as well :)
Check if an array includes a value in Javascript
Tags: javascript, html, programming
Published: 2021-07-23 12:58:57

### In this article, I am going to describe 4 methods

- Using The indexOf() method
- Check if array includes a value in Javascript
- Check for NaN
- Check for Undefined

## Using The indexOf() method

Using `indexOf()`, we can determine if an element is present in an array or not. Similar to the `includes()` method the `indexOf()` method also works on arrays and, it takes one argument. 

See the code below.

```js

var students = ["john", "jane", "jim"];

console.log( students.indexOf("jane") > -1 );  
// true

```
Even though the `indexOf()` method supports both old and new browsers, it has few drawbacks.

[Read more ...](https://anjandutta.com/check-if-an-array-includes-a-value-in-javascript/)
How to See Which Branch Your Teammate is on in IntelliJ
Tags: programming, webdev, productivity
Published: 2021-07-23 12:32:29

*“What branch are you on?”* is often the first question you ask when a teammate says *“The tests aren't passing”* or *“The build failed”*. Here’s how you can get an answer to that question without even needing to ask.

In IntelliJ, open up the Team Window by clicking GitLive on the bottom tool window bar.


![IJ-ultimate_2-box.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1627036920483/eweZ9VMcY.png)


This will show a list of your teammates, if they are online (or away) and the issue they are currently working on. Locate the teammate you are interested in and click the arrow on the left-hand side of their avatar.




![image2-full-window-cropped.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1627035106698/ccVTONK3K.png)




Now you will see all the repositories they have cloned including the name of their current branch! 




![image3-full-croped.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1627036090036/vUfca-xY0.png)



**NOTE**: If an issue has been connected to the branch you’ll see the issue name instead, if that's the case just hover your cursor over the issue name and a tooltip will appear showing you the branch name (and even the commit hash)






![img-4-full-figma-cropped.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1627036103488/ATgcnjXzt.png)



Don’t have the GitLive extension installed yet? You can find it [here](https://plugins.jetbrains.com/plugin/11955-gitlive) and, if you need help setting it up, follow the instructions  [here](https://docs.git.live/docs/installation/).
Daily Developer Jokes - Friday, Jul 23, 2021
Tags: jokes, dailydeveloperjokes
Published: 2021-07-23 12:00:16

---
title: "Daily Developer Jokes - Friday, Jul 23, 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=Friday%2C%20Jul%2023%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/5e12596739999.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:___ Why couldn't the React component understand the joke?

___A:___ Because it didn't get the context.
 -->