teleren/devto huggingface dataset:
The definitive guide to Intellij IDEs with WSL2
Tags: wsl2, phpstorm, windows, webdev
Published: 2020-12-11 13:17:13

Hey everyone 👋

TLDR: Now you can use IntelliJ IDEs installed on Windows & store projects on Linux filesystem without needing to configure anything else & with a full speed advantage 🎉.

Windows Subsystem for Linux is out for quite some time right now & it's finally getting into perfect shape and becoming a perfect tool for most developers.

> Note: This is not an intro nor a guide on how to set up and install WSL2!

I've been a huge fan from the start, even with WSL1, but I still kept my dual-boot, mainly cause of performance. It is incomparably better on WSL2 and made me switch full-time to Windows.

However, the main issue from the start was that many development tools didn't support it. However, if you're a Visual Studio Code user you got that first-class support from day one, but with tools like WebStorm, PhpStorm, unfortunately, it wasn't like that.

The first workaround was, store everything on the Windows side & then just open the folder in PhpStorm. However, that caused performance drawbacks. Things are much much faster if you just host & store all of your files under the \\wsl$ folder of your distro.

Problem was, if you try to open \\wsl$ in the PhpStorm, you'll be presented with this:

![phpstorm-warning-about-mounting](https://youtrack.jetbrains.com/api/files/74-904806?sign=MTYwNzk1MDgwMDAwMHwxMS0xfDc0LTkwNDgwNnxrVW9FcGNmNEVjSzlsWXJlQTE5ZmxWblcwY0Vx%0D%0AbXZqMkREa2Rya3NpMTU0DQo%0D%0A&updated=1597490121409)

When you open the integrated terminal, it will open Powershell not the WSL2 bash terminal of your distro.

Fast forward today, things are much much better. At the moment of writing, the latest version is 2020.03, and things are **just working**.

Now when you open the \\wsl$ folder it will just work.

If we open the terminal, it will automatically register it for us and give us a nice bash!

![phpstorm64_OXt0mQ53xt](https://dev-to-uploads.s3.amazonaws.com/i/sda8knbz160gwp0aawo0.png)
 
When you open the settings it configures stuff for you really nicely!

![phpstorm64_75JByaJF5w](https://dev-to-uploads.s3.amazonaws.com/i/0d57gppcz45e4cktz0uj.png)

Now, comes the question, why I wrote this article?

Most of the articles on the web regarding this topic at the moment are out-of-date. Why?

To explain this, let's have a look at two types of articles:

1. Installing PhpStorm on Windows side & storing projects on the Windows side also and then just using WSL2 as a bash prompt. ❌

Not needed anymore. You can store projects on the \\wsl$ & use the full potential and speed of WSL2.


2. Installing PhpStorm on the Linux side + X server on the Windows side. ❌

Not needed anymore, since #1 works just fine. 
 
.. so to conclude, the definitive guide to using IntelliJ IDEs with WSL2 would be.. just install them & use them because they work out of the box. 

Cheers 🎉
Floating Action Button with Social Icons In Materialize CSS
Tags: css, html, webdev, uiweekly
Published: 2020-12-11 13:17:12

The social sharing element is mostly used in every dynamic website for share any items etc. So here we design social icons with the help of buttons(onclick) and lit will open vertically with simple effects.

We used font awesome social icons for share options. Here we not used a single line of CSS or not modify any class just we used icons. Following this element, you can use in your any website for sharing purpose.

Make it yours now by using it, downloading it and please share it. we will design more elements for you.

[Source Code](https://w3hubs.com/floating-action-button-with-social-icons-in-materialize-css/)
How do you build Forms?
Tags: discuss, productivity, forms
Published: 2020-12-11 13:14:09

---
title: How do you build Forms?
published: true
description: 
tags: discuss, productivity, forms
cover_image: https://res.cloudinary.com/practicaldev/image/fetch/s--LguMuJeA--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/7scyr2oalmyn8fce7z6x.png
---
Nowadays writing modern forms from the ground-up can be really verbose and time-consuming, even more, almost every full-stack app you build will require some.

Therefore it is useful to know and use some form libraries and tools, that simplify this process, making you more productive.

So far I'm aware of just [React-hook-form](https://react-hook-form.com/) and [Formik](https://formik.org/). What are your favorite approaches for building forms?
Daily Developer Jokes - Friday, Dec 11, 2020
Tags: jokes, dailydeveloperjokes
Published: 2020-12-11 13:00:16

---
title: "Daily Developer Jokes - Friday, Dec 11, 2020"
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%20Dec%2011%2C%202020"
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/5e1258d16351b.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:___ What do you get when you cross a computer and a life guard?

___A:___ A screensaver!
 -->
PHP Tutorial for Beginners
Published: 2020-12-11 12:51:09

PHP is a general-purpose programming language used to build web-based applications. Php is used to handle dynamic content, databases, and e-commerce sites are also developed. PHP is an open-source language that can be conveniently embedded in HTML files, and HTML codes can also be written in PHP files. The extension to PHP file is .php. If you want to learn PHP then visit here. https://www.phptpoint.com/php-tutorial/
A quick start with Next.js
Tags: javascript, react, beginners, nextjs
Published: 2020-12-11 12:38:51

Next is a react framework for server-side rendering and generating static websites to React-based web applications.
It requires zero configurations and it provides a common structure that makes you able to build frontend react apps while handles server-side for you
Next had been developed by a Vercel team and it trusted by big famous platforms such as TikTok, Twitch, Netflix, and many more check out the official websites' showcase [page](https://nextjs.org/showcase)

It's worth the popularity because of it's great development experience and features that we are going to mention some of them
in the post:

#1-Page based routing system with the support of dynamic routing
In the file structure created by `create-next-app` there is a top-level directory with the name `pages` each file in this directory is actually a route or in other words, it's automatically available as a route.
So, if you have a file named post.js in the pages directory with simple configurations you can have a route to that component and link to it using the `<Link>` component provided by next
#2-Hot code reloading(Fast refresh)
Fast Refresh is a Next.js feature that gives you instantaneous feedback on edits made to your React components.
Click [here](https://nextjs.org/docs/basic-features/fast-refresh) for more explanation
#3-Automatic code splitting
Next.js Automatically breaks up your app and renders the pages with only the packages and JavaScript they need.
This ensures the first-page load is as fast as it can be
and can result in loading and better performance. 
#4-Pre-rendering 
Next.js supports two types of pre-rendering, **Static Generation** and **Server-side rendering** 
The **Static Generation** is the pre-rendering method that generates the HTML at build time. The pre-rendered HTML is then reused on each request.
and it's recommended for cases that have no frequent data updates like blog posts, Ecommerce listings, documentation, etc... because it's faster than **Server-Side rendering**.
 
But if your app has frequent data updates you need **Server-side rendering** where the HTML is generated on each request
check the images below for a visual explanation

![https://nextjs.org/learn/](https://nextjs.org/static/images/learn/data-fetching/static-generation.png)
![https://nextjs.org/learn/](https://nextjs.org/static/images/learn/data-fetching/server-side-rendering.png)

#5-Typescript support
Next is written in Typescript and of course, it comes with excellent support for it.

To get started with Next.js visit [this tutorial page](https://nextjs.org/learn/basics/create-nextjs-app) on the official Next.js Website.

*Thank you for your time. Feel free to like, comment, or share this post with your friends*
How to Link CSS and JS File in Shopify?
Tags: qrolic, shopify
Published: 2020-12-11 12:37:24

In this tutorial, I will show you how to link CSS and JS files. 

First of all, open the template.liquid file and navigate to the inner head tag. 

##To link a CSS file, add this code:

```
<linkrel="stylesheet" href="{{'theme.css'|asset_url}}" type="text/css")">
```

##And add the following code to link JS file: 

```
<script src="{{'theme.js'|asset_url}}" defer="defer"></script> 
```

Now you are done. Run your app to test this code.
Designing of Personal Assistant By WinForm in C#
Tags: design, csharp, dotnet
Published: 2020-12-11 12:35:01

I have designed a personal assistant by using WinForms in C#. Here I used the system.Speech.Recognition, system.Speech.synthesis dll. For Windows Form Application with (.NET Framework)
If You Need to modify it. I can share my code with that person.


Happy Coding!
Aqua hunt
Tags: codepen, css, javascript, game
Published: 2020-12-11 12:32:42

<p>Find aqua background by clicking button.
If you found it send it to the comments ;) 
If you find it you'll be <b>veryveryvey</b> lucky 😉</p>

{% codepen https://codepen.io/Jonas2007/pen/zYKoKNx %}
gem install mysql2
Tags: ruby, rails, mysql, gem
Published: 2020-12-11 12:20:02

I've come across this error several times throughout my development career so I figured it was finally time to write it down.

## Scenario

Whenever I try to install certain versions of the `mysql2` gem in a Ruby on Rails application, I get the following error:

```
Gem::Ext::BuildError: ERROR: Failed to build gem native extension
...
make "DESTDIR="
compiling client.c
compiling infile.c
compiling mysql2_ext.c
compiling result.c
compiling statement.c
linking shared-object mysql2/mysql2.bundle
ld: library not found for -lssl
clang: error: linker command failed with exit code 1 (use -v to see invocation)
make: *** [mysql2.bundle] Error 1

make failed, exit code 2

An error occurred while installing mysql2 (0.5.2), and Bundler cannot continue.
Make sure that `gem install mysql2 -v '0.5.2'` succeeds before bundling.
```

## Solution

In order to fix this issue on macOS, first make sure that you have `cmake` installed.

```sh
brew install cmake
```

Then you can install the gem via the following command:

```sh
gem install mysql2 -v '0.5.2' -- --with-ldflags=-L/usr/local/opt/openssl/lib --with-cppflags=-I/usr/local/opt/openssl/include
```

Hope this helps save someone some time!
E-learning software template 🚀 Free, responsive, customizable
Tags: showdev, technology, frontend, startup
Published: 2020-12-11 11:11:44

Hi community,

Anyone looking for a solution to quickly digitize educational activities?
Here's a free ready-made e-learning software template from UI Bakery.

Based on the predefined widgets you can adjust & brand, it is:
✔️Customizable.
✔️Responsive.
✔️Downloadable as a code.

[Check it out here](https://uibakery.io/templates/e-learning-software?utm_campaign=ui_bakery%20-%20template%20-%20e-learning%20-%20cacq%20-%20xx%20-%20views&utm_source=Dev&utm_medium=webdev&utm_content=template_release)
Kubernetes is deprecating Docker as a container runtime after v1.20! What does it mean for YOU?
Tags: kubernetes, docker, devops
Published: 2020-12-11 11:05:34

Kubernetes is deprecating Docker (or more specifically Dockershim) as a container runtime! If you want to **understand the details behind and how it affects you**:
- as a *software developer*, who is using Docker and Kubernetes or
- as a *DevOps engineer*, who is administering Kubernetes using a Managed Kubernetes Service or a self-managed Kubernetes cluster.


I hope with this video I can clarify all your questions you might have 💡 👇🏻
{% youtube 7KUdmFyefSA %}


##I cover the following questions:##
- Why has Docker been deprecated?
- Container Runtime alternatives?
- What does this change mean for YOU as a Kubernetes User?
- What does this change mean for YOU as a Kubernetes Administrator?
  - when using Managed Kubernetes Service
  - with self-managed Kubernetes cluster
- When do you need to take action?
- Impact on using Kubernetes locally with Minikube and Docker Desktop
- Still learn Docker? CI/CD Pipeline with Docker?

----------
Useful Links 🔗:
- [kubernetes.io/blog/2020/12/02/dockershim-faq](https://kubernetes.io/blog/2020/12/02/dockershim-faq/)
- [kubernetes.io/blog/2020/12/02/dont-panic-kubernetes-and-docker](https://kubernetes.io/blog/2020/12/02/dont-panic-kubernetes-and-docker/)


-----------------
► Get **30% off** - with this code: UDEMY_NANA_NOV2020: [Udemy course here](https://bit.ly/35qF26i)
► **Kubernetes 101**: [Compact and easy-to-read ebook bundle 🚀](https://www.techworld-with-nana.com/e-books) 
It's a handy way to quickly look something up or refresh your knowledge at work and use it as your cheatsheet  😎


**Like, share and follow me** 😍 for more content:
- [Private FB group](https://www.facebook.com/groups/techworldwithnana)
- [Twitter](https://twitter.com/Njuchi_)
- [YouTube](https://www.youtube.com/channel/UCdngmbVKX1Tgre699-XLlUA?sub_confirmation=1)
- [Instagram](https://www.instagram.com/techworld_with_nana/)
- [LinkedIn](linkedin.com/in/nana-janashia)
Composition in Ruby
Tags: ruby, modules, composition, singleton
Published: 2020-12-11 10:57:35

As Rubyists prepare for the most anticipated release of Ruby 3.0, its worth looking to unchanged principles. 

## Composition
One exiting feature of the ruby language is the presence of `Modules`. 
``` ruby
module LimitOrder
  def price
    @price
  end
end
class Order 
   attr :what, :amount
  (...)
end
class StockOrder < Order
  include LimitOrder
  (...)
end
```
`StockOrder` inheritances anything from `Order` and has access to properties and methods of `LimitOrder`.

* `include` works on instances of an object. Thus, any object generated by `Stockorder.new` can access the `price` method.

* `extend` on the other hand _includes_ properties and methods  to classes and modules.

### Instantiate Objects without publicly calling `new`

Let's design a module `OrderPrototype`. Its main purpose is to provide a method `order`, which finally calls `Order.new`.
```ruby
module OrderPrototype
  def defaults
   { }
  end
  def order  **fields
    (...)   ## process fields and fillup arguments
    Order.new **arguments
  end
end
```
The composition process starts by defining a module `Limit`:
```ruby
module Limit
 extend OrderPrototype
 
 class << self
   def defaults
     super.merge { order_type: :limit,  tif: :good_till_cancelled }
   end
 end
end
```
`class << self` assigns the following methods to the class-level.  `defaults` are processed by `OrderProtoype.order`. 

**`Limit.order size: 1, (...)` instantiates a specialized `Order`-Object without inheritance.** Other useful order prototypes are `Market.order`, `StopLimit.order` a.s.o. 



The `Limit`-object acts as a singleton
masquerading as constructor for conventional ruby objects. 

The approach is implemented in: https://github.com/ib-ruby/ib-extensions/blob/master/lib/ib/order-prototypes.rb
and further [documented here](https://ib-ruby.github.io/ib-doc/order_prototypes.html)
Natal: contrate freelancers para o seu negócio neste fim de ano
Tags: freela, freelancer, contratar, devops
Published: 2020-12-11 10:38:54

(Crédito da foto: Adobe Stock)

 

O Natal,  assim como a Black Friday e o Dia das Mães, é uma das datas mais lucrativas para o comércio — tanto físico quanto online. Apesar de 2020 ter sido um ano totalmente atípico devido a pandemia de covid-19, os consumidores parecem animados para o fim de ano, pois é um período de comemorações em família e propício para a compra de presentes. 

 

Contudo, os hábitos de consumo dos brasileiros mudaram, dando mais espaço para as compras online, que traz uma maior facilidade de entrega das compras, contribuindo para não ter contato físico ou sair de casa. Uma recente pesquisa realizada pela Confederação Nacional de Dirigentes Lojistas (CNDL) apontou que 47% dos brasileiros pretendem comprar os presentes de Natal pela internet em 2020.

 

Isso significa que os lojistas e empresários de e-commerces devem preparar suas lojas virtuais para receber os clientes da melhor forma possível, transmitindo informações claras a respeito dos produtos, assim como confiabilidade e segurança para o momento da compra. Para quem já vende em loja física e quer adentrar no universo online ainda há tempo. Pensando nisso, contar com uma equipe extra ou contratar freelancers que possam ajudar a estruturar a loja virtual e as comunicações é o recomendado para esse período festivo de final de ano. 

 

Por que contratar freelancer para as demandas de final de ano? 

 

Por ser uma demanda pontual para ações de Natal e final de ano é vantajoso contratar freelancer, ao invés de contratar profissionais formalmente, visto que a demanda de Natal é alta e os meses seguintes são mais baixos em comparação com dezembro. Confira abaixo três motivos para contar com o apoio de um ou mais freelancers: 

 

investimento em site bem estruturado e que traga segurança aos clientes: com o apoio de um programador ou desenvolvedor web freelancer, você garante aos seus clientes um site com boa usabilidade e que mantenha os dados dos usuários em segurança durante todo o processo de compra.
 

investimento em uma comunicação assertiva e que chame a atenção dos clientes: ao contratar um designer ou um profissional de comunicação freelancer, você garante que o visual e a escrita do seu site, ou até mesmo das redes sociais, sejam assertivos aos compradores. Ou seja, com banners atrativos e representando o clima natalino, bem como com textos informativos e cativantes, os clientes terão mais interesse em seus produtos, principalmente se a comunicação deixar claro as promoções especiais de fim de ano. 
 

facilidade de contratação e zero burocracia: diferente de um processo seletivo para contratar um profissional formal, o contato com freelancers é mais direto e fácil, sem burocracias, especialmente se você buscá-los em marketplaces de serviços, como o FreelaWeb, que te conecta diretamente com o profissional ideal que vai atender suas demandas. 
 

Redação: Alice Bachiega
6 levels of product code growing (frontend)
Published: 2020-12-11 10:37:30

Hello friends! My name is Nick Stepanov.

This is my first post here.

I work many years as a Front-end developer and took part in different projects - from small startups to large companies.

The problems start on the stage of planning. Many companies (especially startups) don't know how to write code fast and with high quality. On bellow is a detailed diagram.

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

I think you can understand everything, but I explain it.

Here 6 level’s model of quality for frontend development.

Each level extend previous, for example level 3 contains level 2 and level 1.

You see that quality of code proportional to Budget / Time resources. Certainly everything need a resources.

In left side you can see gradation of stage project / size company:

**Startup level of project**

Usually a startups have a less resources. First need to do MVP. Here speed more important than architecture. My recommendation do a strategy for improving code after MVP and do next step of growing your company. I think for a startups need minimum level 2 of quality code. Just do a good UI library for your project and do MVP fast, test your idea. After it you can fix business issue’s and redid logic's and go to next stage of company.

**Middle company level of project**

In this stage a companies have investment and can be have customers and small income. But resources still limited. A company can do refactoring and improve architecture. Accessible to grow to level 4 quality.

**Large company /or big budget level of project.**

In this time growing a company can hire many developers with high experience, for building everything tested and documented code. And a Goal here is do open source projects - it is “head of mountain”. If company doing open source projects it is mean that this company not only doing something for self, company doing for everybody - company can impact to world of IT. This is level 6 of coding.

* **Certainly, a startup could get big investment and build 6 levelled quality code from zero.**

Thank you for reading. I will glad if my idea helping to your project. Please write your idea's :-)

Nick Stepanov.
Kubernetes v1.20 Soon 
Tags: kubernetes, docker, devops, architecture
Published: 2020-12-11 10:33:04

## New features

* External credential provider for client-go

* CronJob controller v2 is available through feature gate 

* PID Limits graduates to General Availability

* API Priority and Fairness graduates to Beta

* IPv4/IPv6 run

* CSI Volume Snapshot graduates to General Availability

* Non-recursive Volume Ownership (FSGroup) graduates to Beta

* CSIDriver policy for FSGroup graduates to Beta

* Security Improvements for CSI Drivers (Alpha)

* Introducing Graceful Node Shutdown (Alpha

* Runtime log sanitation

* Pod resource metrics 

* Introducing RootCAConfigMap

* kubectl debug graduates to Beta

* Removing deprecated flags in kubeadm 

* RuntimeClass feature graduates to General Availability


## Dockershim Deprecation

Maintaining dockershim has become a heavy burden on the Kubernetes maintainers. The CRI standard was created to reduce this burden and allow smooth interoperability of different container runtimes. Docker itself doesn't currently implement CRI, thus the problem.

Dockershim was always intended to be a temporary solution (hence the name: shim). You can read more about the community discussion and planning in the Dockershim Removal Kubernetes Enhancement Proposal.

Additionally, features that were largely incompatible with the dockershim, such as cgroups v2 and user namespaces are being implemented in these newer CRI runtimes. Removing support for the dockershim will allow further development in those areas.

## Link

https://kubernetes.io/blog/2020/12/02/dockershim-faq/

https://kubernetes.io/docs/setup/release/notes/