teleren/devto huggingface dataset:
Product Card HTML CSS
Tags: card, productcard, carddesign, htmlcss
Published: 2021-06-07 12:56:27

Hello guys, we are going to create an Animated Product Card using HTML CSS, and JavaScript. Before I have created lots of product card design by using HTML CSS, Animated Profile Cards is one of them but today we will add Little JavaScript too, and I sure that helps to make out Product Card Template more beautiful

What is a Product Card?
A product card is a sample of the specific product from where the user can choose the product, product's size, colour and designs as they need. Basically, product card on the webpages helps for users to find products for buying and for the company to sell.

Generally, on the product card design, we add any types details as we want but some major things we must add are:
High-Resolution Image of Product
Names and logo of the Product
Price of the Product
Add To Cart Button
Colour and Sizes Option 
 
The image of the Responsive Product Card that you are seen on the webpage is not only a design, but it is also an animated design. I mean that when I clicked on the colour option, the shoe colour changes according to the circle colour.

If you want to watch the real demo of Responsive with Animated Product Card, I highly recommend you to watch the given tutorial of this product card. And another benefit of watching the video tutorial is that you could get an idea of all the codes that I have used on this product card design.

##Product Card HTML CSS | Free Source Code##
You can download all source code from the given link. <a href="https://www.codinglabweb.com/2021/06/product-card-html-css.html">Click Here To Download All Source Code</a>
Day 19/30 : Awesome Animated Search Bar using HTML and CSS
Tags: html, css, webdev, tutorial
Published: 2021-06-07 12:19:55

Welcome to Day 19 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 :**
![Awesome Animated Search Bar using HTML and CSS](https://1.bp.blogspot.com/-9mvx3QOg2GQ/YKi1lno-u2I/AAAAAAAAAGQ/FYq1rKQlq387mKfey-eoao8OrRJXUAmbgCLcBGAsYHQ/s600/19.gif)

**➜ Video Tutorial :**

{% youtube 1NAbwz4Reyw %}
**➜ Source Code :**
https://www.futurecodersweb.com/2021/06/awesome-animated-search-bar-using-html.html?m=1


**➜ Instagram Post and Reel for Day 19 :**
[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)

------------------------------------------------------------------
Thoughts on DjangoCon Europe 2021
Published: 2021-10-01 00:22:11

---
title: Thoughts on DjangoCon Europe 2021
published: true
date: 2021-06-07 12:00:03 UTC
tags: 
canonical_url: https://sarahabd.com/blog/djangocon-europe-2021-thoughts/
---

Hi there, it has been a while since my last post, but I’ m now returning from a great conference: DjangoCon Europe.

It was my first virtual conference. Thanks to the organizers, it was well done despite the difficult circumstances. We had a [gather.town](https://gather.town/) to meet people, talks hosted in loudswarm, which worked great! It was very interesting. There were great talks and met amazing people!

I’m also exhausted lol. I guess it’s another experience as I imagine and due to the return of people who did it in real life. I hope to have the ability to attend to another one in person. As people said, you come for the syntax and stay for the community!

I gave my first lightning talk at the DjangoCon: “Run Django tests with GitHub Actions” which was a little introduction to GitHub Actions and how to use it with Docker services. I’m completely nervous about things like that but I did it. I’m happy I received some positive feedback. I know also what to improve if I choose to undertake the experience again :)

If you have one in mind, go for it. You will never regret and it’s a good experience. You will help someone or make someone discover something that you didn’t imagine you could. For the sprints, it was complicated for me to manage the two days, but I was able to be mentor for DjangoGirls on Saturday. It was a good experience for me.
Daily Developer Jokes - Monday, Jun 7, 2021
Tags: jokes, dailydeveloperjokes
Published: 2021-06-07 12:00:01

---
title: "Daily Developer Jokes - Monday, Jun 7, 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=Monday%2C%20Jun%207%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/5e1258ca137e1.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 was the computer freezing?

___A:___ It left its Windows open!
 -->
What's the key mantra for machine learning ?
Tags: machinelearning, ai
Published: 2021-06-07 11:56:12

---
title: What's the key mantra for machine learning ?
published: true
description: 
tags: machineLearning, artificialIntelligence
//cover_image: https://direct_url_to_image.jpg
---
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iknjyn30w6cym5ll6bvg.png)

1. Have lots of data
2. Have the data labelled
3. Let the machine figure out the relationships between the data and the labels
4. The output of above exercise is the machine learning model, which can be used to predict/classify.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/07nqknyy9bufh6bsphpt.png) Courtesy: @lmoroney
SASS - CSS with super power
Tags: scss, css, saas, webdev
Published: 2021-06-07 11:32:30

Hi Folks,

If we work on small projects, there won't be a lot of need to maintain CSS, but if you're dealing with major projects? Maintaining CSS will be difficult. That's when SASS comes into play.

SASS or Syntactically Awesome Style Sheets is a scripting language and CSS preprocessor which compiles into CSS. This means when we write code in SASS, it automatically converts sass code into CSS.

### Why SASS?

- It follows, "Don't repeat yourself principle" also called **DRY PRINCIPLE**
- Helps us to maintain our CSS code in a more organized manner.

### SASS comes up with 2 syntaxes:

1. SCSS: Sassy CSS is a superset of CSS. In simple terms, a valid CSS file is a valid SCSS file. SCSS files have .scss file extension
2. Intended syntax: Intended syntax mainly focuses on indentation. Intended files have a .sass file extension. 

SASS comes with a lot of features such as variables, nested rules, mixins, inline imports, built-in functions, etc. What we learn in detail.

### SASS features.

**Variable**

You can declare variables globally and can use its placeholder at multiple places.

SCSS,
```
$color-primary: #000;
$color-secondary: #333;
.nav-links{
       background-color: $color-primary;
       color: $color-secondary;
}
``` 
CSS,
```
.nav-links{
          background-color: #000;
          color: #333;
}
``` 
**Nesting**

We can nest selectors which share the same parent name which makes CSS more readable.
SCSS,

```
li{
display: inline-block
margin-left: 30px;
&:first-child{
margin: 0;
}
``` 
CSS,

```
li{
display: inline-block;
margin-left: 30px;
}
li:first-child{
margin:0;
}
``` 
**Mixins & Include** - Mixins allow us to define CSS rules as a blueprint and we can use these rules in our selectors. To use mixins we have to use @ include followed by mixin name.
SCSS,
```
$color-primary: #333;
@mixin header-main($bg-color){
color: $color-primary;
font-size: 3rem;
border: 2px solid $color-primary;
background-color: $bg-color;
}
.header {
@include header-main(#2b2b2b);  /*We can use this statement at multiple places if 
required by passing different bg-color parameter*/
}
``` 
CSS,

```
.header {
color: #333;
font-size: 3rem;
border: 2px solid #333;
background-color: #2b2b2b;
}
``` 
**Functions** - Yes, SASS allows us to create functions. To use functions we prefix function keyword with @ symbol.
```
@function divide($a/$b){
@return $a/$b;
}
.header{
padding: divide(30,7);
}
``` 
### Conclusion
These are some of the most useful features SASS comes with. You can read more about SASS here <a href="https://sass-lang.com/documentation/syntax">Official Doc</a>. This is one of the good things about learning SASS as a developer that saves so much time. However, there are disadvantages too in SASS, which you can read here <a href="https://www.javatpoint.com/sass-advantages-and-disadvantages">Disadvantages</a>

Regarding SAAS, please let me know if this article was helpful in the comments. And your feedback is welcomed.
VueJs/Nuxt Components Library You should be using
Tags: vue
Published: 2021-06-07 11:24:25

As a developer that uses VueJs in most projects. I actually  been searching component library to make my life easier when developing the UI for my web projects.

I will only list the components libraries that I like and I believe it has a very good and useful components.

`This list is not in order.`

### 1. [Vuetify](https://vuetifyjs.com/en/getting-started/installation/)
Vuetify is one of the most popular component library for VueJs, and support for vue 3 is on the way. [Check it Here](https://vuetifyjs.com/en/introduction/roadmap/#v30-titan).

This library provides probably most components that you needed to build a website, from landing pages to admin platform sites. But this library might might make your web page load slower (Checking it in web.dev or developer tool lighthouse).

This uses the google material like designs.

### 2. [Buefy](https://buefy.org/)
My second favorite component library is Buefy, its a library made on top of [bulma](https://bulma.io/) which is one popular css library that creates beautiful website.

This also provides most of the components, what I like about buefy is its lite and fast.

### 3. [Ant Design Vue](https://2x.antdv.com/components/overview/)
Third is the andDesignVue, which is also a beautiful ui for your front end.

The design is also beautiful, If your creating ecommerce website this might be a good choice or admin websites.

### 4. [iView](https://www.iviewui.com/docs/introduce-en)
This is also a beautiful component library, and its really awesome for creating e-commerce and admin pages.

### 5. [Vuesax](https://vuesax.com/)
When you visit this component library its really beautiful, it was built by a designer so its really awesome.

My problem with this one is that, its not being maintained in the moment and I don't know if they will continue maintaining this library.

### 6. [Equal](https://quatrochan.github.io/Equal/)
open-source Vue 3 components system for your next project based on TypeScript.

### 7. [Naiveui](https://www.naiveui.com/)
Now this is a new UI framework but it provides most of components that websites needs..

This is the components libraries that I am using. Try and check them out. :)
How to build xv6-riscv on mac
Tags: riscv, qemu, mac, tutorial
Published: 2021-06-07 11:22:11

There're three parts:
1. riscv-gnu-toolchain installation
2. qemu installation 
3. build xv6-riscv


## Part1: riscv-gnu-toolchain installation
> Env: macOS Catalina `10.15.7`

Step1: 
```sh
git clone --recursive https://github.com/riscv/riscv-gnu-toolchain
```

> Although it doesn't need `--recursive` in README, [this issue](https://github.com/riscv/riscv-gnu-toolchain/issues/909) still happened on mac.

Step2: 

```sh
brew install python3 gawk gnu-sed gmp mpfr libmpc isl zlib expat
```

Step3: 
```sh
cd riscv-gnu-toolchain
./configure --prefix=/opt/riscv --enable-multilib
```

> [To build either cross-compiler with support for both 32-bit and 64-bit](https://github.com/riscv/riscv-gnu-toolchain#installation-newliblinux-multilib)

Step4: find your `.zshrc`, append this line ```sh
export PATH="$PATH:/opt/riscv/bin"
```
and then
```sh
source .zshrc
```
## Part2: qemu installation
> After installing riscv-gnu-toolchain, I chose to building qemu for macOS first and installed qemu.

Step 1: install prerequisites
```sh
brew install libffi gettext glib pkg-config autoconf automake pixman ninja
```
[Explained](https://wiki.qemu.org/Hosts/Mac)

Step2: pull the source of qemu
```
curl -L https://download.qemu.org/qemu-5.2.0.tar.xz > qemu-5.2.0.tar.xz
```
([why qemu 5.2.0](https://github.com/mit-pdos/xv6-riscv/issues/76#issuecomment-854273681))

Step3: unzip 
```sh
tar xf qemu-5.2.0.tar.xz
```

Step4: build and install qemu
```sh
cd qemu-5.2.0
```
 and  
```sh
mkdir build && cd build
../confgiure`
make
make install
```
## Part3: build xv6-riscv

> After installing `qemu` sucessfully, let's start to build [xv6-riscv](https://pdos.csail.mit.edu/6.S081/2019/schedule.html)

Step1: Pull the source of xv6-riscv
```sh
git clone git://github.com/mit-pdos/xv6-riscv-fall19.git
```
NOTE: [The `xv6-riscv-fall19` repository differs slightly from the book's `xv6-riscv` in order to make the labs easier.](https://pdos.csail.mit.edu/6.S081/2019/labs/util.html)

Step2:
```sh
cd xv6-riscv-fall19
```
and 
```
make
make qemu
```

That's it!
Thanks for your reading~
Create a Next.js based PWA With Tailwind — create-next-pwa
Tags: nextjs, pwa, tailwindcss, javascript
Published: 2021-06-07 11:20:25

So a couple of days back, I started learning about Progressive Web Apps (PWA) and how they make your web app a standalone desktop application and sort of like an android application. I was really intrigued by the whole concept. I knew about PWAs before but I have never experimented with them. And this time, I decided to do just that. 

So to indulge in my curiosity, I went ahead and created a Next.js app with create-next-app. And afterward, I started making all the changes in the code that were required for a PWA. In the end, I was successful but it took me some time since I was coming from a background where I had no experience with PWAs. 

Later I decided to use Tailwind for my project. I looked up its documentation and followed all the steps I needed to perform to set up Tailwind in my Next.js application. And here again, I spent some time figuring out what to do and what not to do.

After going through all this, figuring stuff out, I realized that some kind of automation tool can come in real handy when doing all these configurations. And that is when I started building [create-next-pwa](https://github.com/msaaddev/create-next-pwa). 🏗

## ⚡️ CREATE-NEXT-PWA

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/331s3rxzrwgrifylvdko.jpg)

[create-next-pwa](https://www.npmjs.com/package/create-next-pwa) is an extremely lightweight, zero-configuration Node.js-based CLI tool that I have built to automate everything I have talked about above. It can set up your Next.js PWA with a single command: 

```sh
npx create-next-pwa@latest [app_name]
```

If you want to set up Tailwind for your PWA, you can easily do this with [create-next-pwa](https://github.com/msaaddev/create-next-pwa) with a single --tailwind flag like this:

```sh
npx create-next-pwa@latest [app_name] --tailwind
```

I have also integrated Prettier as a dev dependency in the PWA. It means you can format your entire project when you are building your PWA by just running:

```sh
npm run format
```

Everything you needed to do before in order to set up a Next.js-based PWA with or without Tailwind can now be done with a single command. How awesome is that?! 🥂

If you still want to set up Next.js-based PWA by yourself, I would then recommend reading this awesome [article](https://itnext.io/pwa-with-next-js-create-next-app-in-2020-%EF%B8%8F-9ee0e1a6313d) by Eshwaren. And on top of this to integrate tailwind, you can follow the official [documentation](https://tailwindcss.com/docs/guides/nextjs). 

## 🙌🏻 WRAP UP

If you folks want me to integrate something else like I have integrated Tailwind then open an issue in the [repository](https://github.com/msaaddev/create-next-pwa) and I will get back to you. Also if you like this application, be sure to star it as well. 😉 

Cheerios ✌🏻
Get 30+ Free Resources, Tools and Discount with your College Email id
Tags: codenewbie, beginners, news, computerscience
Published: 2021-06-07 10:49:59

I conducted a workshop on "Get FREE 30+ tools, learning resources and amazing discount just with your College Email I'd"

*You can see my workshop here:
https://lnkd.in/ehSSkWy*

*Links of all the 30+ Resources:
http://shorturl.at/ovCDO*

In this workshops,
I explained and gave some hands-on example to avail these things.
As a College Student, you get lots of benefits and everyone should enjoy these tools. 
These 30+ contains LEARNING RESOURCE, PREMIUM TOOLS, DISCOUNTS ON PREMIUM APP AND FLIGHTS, LEARINING A NEW LANGUAGE FOR FREE and MANY MOREEE!!
[UPDATED] How to Get Form Field Data as JSON Using Plain JavaScript
Tags: codepen
Published: 2021-06-07 10:18:46

<p>

Thank you <a href="https://codepen.io/jlengstorf/
">https://codepen.io/jlengstorf/</a><br>
A plain JavaScript example of extracting a form's fields into an object using the field name as the key and the field value as the value. This can work in lieu of things like jQuery's <code>.serialize()</code> or <code>.serializeArray()</code>, which leave something to be desired if we need to work with the form data in JavaScript.</p>

{% codepen https://codepen.io/jlengstorf/pen/rNMpJNy %}
Test `history` in React Router
Tags: react, unittest
Published: 2021-06-07 10:02:30

---
title: Test `history` in React Router
published: true
description: 
tags: react, unittest
---

# Problem
When we use hooks `useHistory` of `react-router-dom`
How to expect the `history` are changes?
How to mock the `history`?

# Solution
Don't try to expect global `window.location` or `window.history`.
Just render test component as a children of `<Router>`, it's require `history` object just create a simple Javascript object with mock on specific function (depend on your needs)

example from [React Router document](https://reactrouter.com/web/api/Hooks/usehistory) :p
```jsx
// HomeButton.jsx
import { useHistory } from "react-router-dom";

export function HomeButton() {
  let history = useHistory();

  function handleClick() {
    history.push("/home");
  }

  return (
    <button data-testid="button" type="button" onClick={handleClick}>
      Go home
    </button>
  );
}
```

the test file 
```jsx
// HomeButton.test.jsx
import { render, screen, act } from '@testing-library/react';
import userEvent from '@testing-library/user-event';

import { HomeButton } from './HomeButton';

describe('HomeButton', () => {
  // the test might throw an error about required properties, it's depend on your component's dependencies.
  const mockHistory = {
    push: jest.fn(),
  }

  it('should go to home after click', () => {
    await act(async () => {
      render(
        <Router history={mockHistory}>
          <HomeButton />
        </Router>
      )

      userEvent.click(screen.getByTestId('button'))
    })

    expect(mockHistory.push).toBeCalledTime(1)
    expect(mockHistory.push).toBeCalledWith("/home")
  })
})
```
Help with JavaScript Learning Roadmap
Tags: javascript, discuss, career, help
Published: 2021-06-07 10:01:58

---
title: Help with JavaScript Learning Roadmap
published: true
description: trying to find the best roadmap for JS 
tags: javascript, discussion, career, help
cover_image: https://miro.medium.com/max/800/0*aH8YUI7nqAZ6b-V_.png
---

Hi community, I need help and I believe that it can also help tones of people so i'll go straight to the point with the Use case: 

A friend of mine wants to enter the project development world and he wants to be a JS full stack dev.

The end requirements would be:
<ul>
<li>Javascript (^ES6)</li>
<li> Services and Microservices </li>
<li>React
<ul>
<li> Redux</li>
<li> Hooks</li>
</ul>
</li>
<li> Node.js
<ul>
<li> Express</li>
<li> PostgreSQL </li>
<li> Sequelize </li>
<li> Mongo DB </li>
<li> Mongoose </li>
<li> Apollo (after GraphQL) </li>
<ul></li>
<li> GraphQL </li>
</ul>

I'm always hands on tones of things and <strong>I would like to specialise myself on JS too </strong> because i'm coding since 10+ years ago but worked with java, php, asp, html, css, Sass, bootstrap, js, C++, react, preact, angular and other languages and libs, so I also need that (I feel kinda frustrated and I want to keep a main language and the overall environment), plus I love JS.

So here I am asking for your experience on this questions:
<ul>
<li>Should I add (or remove) other stuff in the requirements? Which ones and Why?</li>
<li>The learning roadmap I set (in order) would be fine and suffice or it lacks something? </li>
<li>Do you think the roadmap would be the same for me (10+ years of coding experience) than for my friend (a complete begginer that knows something about HTML and CSS only)?</li>
<li> Feel free to comment whatever you feel like about the topic </li>
</ul>
Try find satisfaction in teaching as well as learning (100 Bytes Of Wisdom: Day 53)
Tags: career, journey, advice
Published: 2021-06-07 09:29:52

---
title: Try find satisfaction in teaching as well as learning (100 Bytes Of Wisdom: Day 53)
published: true
description: Bytes of Wisdom is a new project by Sam Jarman that brings together snippets of advice for software engineers
tags: career, journey, advice
//cover_image: https://direct_url_to_image.jpg
---

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

A lot of junior developers get a lot of satisfaction out of learning lots of new stuff. Their brains are fresh and are a sponge for anything and everything. However, this does fade a bit (but shouldn't go away, a byte for another time) as you get more senior. 

However, I believe that as developers progress in their careers, they should also try find satisfaction in teaching. Imparting their knowledge to the next generation. You must remember this pay it forward mentality. You were only able to learn as much as you have because someone taught you - not just in a classroom,  but at your desk, in a pull request, in a blog post, a conference or even a colourful instagram account. 

I think truly senior developers find that balance between wanting to learn and wanting to teach. Leading others and forging the path. 

Heads up: As with any terse bit of advice, there will be exceptions of course, and subtleties and nuance that can't possibly be captured in a Byte of Wisdom. This has been what I've experienced, I'd love to hear yours in the comments too!

You can catch up with all the other bytes at http://bytesofwisdom.com/