teleren/devto huggingface dataset:
Tooltip Using CSS
Tags: css, webdev, beginners, w3hubs
Published: 2020-04-07 05:07:41

Tooltip is a cool graphic interface to show on hover simple message. So here we made simple and basic Tooltip Using CSS and HTML.

In this element, we used basic HTML tags and css3 properties. Here we used CSS before and after selectors with and position properties. Also, we used hover effects with the content properties of CSS. Content CSS properties in great properties for showing your content to a before or after with and display properties.

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

[Download Source code](https://w3hubs.com/tooltip-using-css/)
The Journey of a Developer
Tags: codequality, purpose, problemsoving, nextsteps
Published: 2020-04-07 05:04:17

Development is more than a trade for me. It is a part of my DNA.  As a child, I always took things apart and tried to put them back together.  Sometimes I discovered you can make things better if you understood how they were intended to work.  It doesn’t matter what language you write, there is always a unique signature that accents your digital impact.  Being a polyglot I tried many different languages to discover advantages with one language versus the next.

I have learned many things over the years and found out that superpowers are real. After creating and developing for over 20+ years I found comfort in the C# language as my core stack to develop with and I currently work with various desktop, mobile, tv, and web technologies.  One fact I discovered early on is that the purpose of your application outweighs the code itself.  As developers, we strive to solve problems and create new experiences.  That is why we always have to focus on the next person that will interact with your creations and not get in our own way.

I have surrounded myself around many great people that have helped me learned what I need to know today, and as technology continues to evolve one thing will never change. The REASON.  We all code, create, solve, and live for a reason.  That reason is also what makes a good versus great at what we do.

I implore you to identify your superpower if you haven’t already had and made yourself the most powerful being in your space.
Mengenal Web Service dan Web Server
Tags: webdev, service, server
Published: 2020-04-07 05:01:36

Pada artikel kali ini kita akan membahas mengenai web service dan web server. Sering kita dengar dan kali ini kita akan memahami dua hal tersebut.
Pertama – tama kita akan membahas mengenai web server terlebih dahulu. Web server merupakan sebuah software yang memberikan layanan berbasis data dan berfungsi menerima permintaan dari HTTP atau HTTPS pada klien yang dikenal dan biasanya kita kenal dengan nama web browser (Mozilla Firefox, Google Chrome) dan untuk mengirimkan kembali yang hasilnya dalam bentuk beberapa halaman web dan pada umumnya akan berbentuk dokumen HTML. 

Singkatnya, web server adalah tempat kita untuk menghosting file dan dapat diakses oleh browser.

Web server memliki fungsi melakukan atau akan mentransfer berkas permintaan pengguna melalui protokol komunikasi yang telah ditentukan sedemikian rupa (HTTP atau HTTPS contohnya).

![XAMPP Logo](https://dev-to-uploads.s3.amazonaws.com/i/jy0jvgal6z8md044pxpq.png)

Contoh dari web server yaitu Apache, Lighttpd, Sun Java System Web Server, dll.

Yang kedua, kita akan membahas yaitu web service. Web service sendiri merupakan software atau perangkat lunak yang mendukung interoperabilitas serta interaksi antar sistem pada suatu jaringan. Web service merupakan suatu fasilitas yang disediakan oleh website sebagai layanan dalam bentuk informasi kepada sistem lain sehingga dapat terjadi interaksi di semua sistem yang terlibat. 
Dengan kata lain, web service merupakan penyedia data yang dapat kita gunakan untuk mengisi informasi. Web service juga dapat dikonsumsi oleh system lain meskipun berbeda platform.

![Web Services](https://dev-to-uploads.s3.amazonaws.com/i/8vrn7qwnofy14vhpad97.jpeg)

Web service pada umumnya digunakan untuk melakukan response dan request yang dilakukan antara client dan server. Sebagai contoh, seorang pengguna layanan web tertentu mengetikan alamat url web untuk membentuk sebuah request. Request akan sampai pada server, diolah dan kemudian disajikan dalam bentuk sebuah respone. Dengan singkat kata terjadilah hubungan client-server secara sederhana.
Itulah beberapa pembahasan mengenai web service dan web server. Semoga bermanfaat untuk menambah pengetahuan, and as always

Happy Coding :D

Source :
https://idcloudhost.com/pengertian-web-server-dan-fungsinya/
https://www.nesabamedia.com/pengertian-web-service/
https://www.codepolitan.com/mengenal-restful-web-services
https://www.nesabamedia.com/pengertian-web-service/
https://aninditasaktiaji.com/pengenalan-web-service/
Coronavirus info dashboard with React
Tags: react, javascript, showdev
Published: 2020-04-07 04:39:13

In an attempt to learn new things and improve my skills, I thought it's a good idea to develop a Coronavirus dashboard although we got tons of these dashboards already.
 
Please let me know what you think about, any comments or suggestions are appreciated.


Website:
https://corona-virus-stats.netlify.com/

Code:
https://github.com/esnz/coronavirus-stats/
Bootable USB to try Linux
Tags: linux, beginners
Published: 2020-04-07 03:56:26

Many years ago I was very intrigued when I found out that you can run a computer with an operating system from a CD/DVD, all while not touching the hard drive or even needing the hard drive.  Today this done using a USB drive which runs much faster than an optical drive thanks to USB 3.1.  

How this works is the computer loads the OS from the thumb drive and creates a virtual hard drive in RAM.  So, instead of it running the operating system from the hard drive, it runs from a partition in RAM.  The best part is when things start acting unusual all you have to do is reboot and start over or try a different version of Linux.  I use this to tryout or test different programs to see which ones I like or work for the application I need like Atom.  After I find what I want I reboot to clean the ones I don't.

This is done with a tool called Yumi from www.pendrivelinux.com.  Yumi is a Windows based tool that allows you to install Linux distributions on there based on the space of the USB.  It will also allow you to change the distributions without having to redo the entire USB.  

After downloading Yumi and running it from Windows, the best place to download Linux distributions is www.distrowatch.com.  This website has years of Linux distros logged on file from Arch Linux to UBUNTU, all the way back to 2001 which was pretty close to when I started visiting this site.  One of the first distros I started with was a credit card distro called DSL or Damn Small Linux due to it being about 200MB and it was able to fit on a credit card size CD.  Thanks to to my 56k dial up modem, it was one of the easiest ones to download but still took almost an hour.

Once you have a Linux distro on the USB you need to be able to boot from it.  Some computers require you to change the BIOS settings, while others are capable of temporarily changing the boot option with a function key.  If you Google your PC for alternate boot options it will tell you if a function key will allow you to boot your computer.

If you did all that you should be up and running with Linux.  A lot of people are intimidated by Linux because they think it is 100% terminal based but tend to be surprised it is actually GUI (graphical user interface) based.  My distro of choice is KNOPPIX.  This distro is not for the faint of heart due ot the tools it comes with but for the most part the basic stuff is like Windows.  I love to use it for troubleshooting PC's and networks along with everyday internet surfing.
Introducing Vim Un-Alphabet
Tags: vim, screencast, learninpublic
Published: 2020-04-07 01:52:04

A while back, [chantastic](https://twitter.com/chantastic/status/1080620197701050368) announced and expertly executed a month of screencasts on Vim. The idea was to cover one letter of the alphabet each day, showing off what it does in Vim. Vim Alphabet.

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">This is dope — I’ve been wanting to do a series like this. Excited to tune in!</p>&mdash; 🔥 Josh Branchaud 🕺🏼 (@jbrancha) <a href="https://twitter.com/jbrancha/status/1080635771365789697?ref_src=twsrc%5Etfw">January 3, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

I was excited not just to watch, but also because it sparked some creativity I'd been sitting on. I continued to sit on it for about another year, but I'm excited to announce a similar series.

Vim Un-Alphabet

The idea behind this screencast series is to cover the capabilities of all the different non-alphabet, special character keys. I'm about 6 days in and I'm committed to publishing a video a day over the course of April.

If you're an avid Vim user, you may be familiar with cool functionality that a number of the special character keys open up. In this series, I look at the common and the uncommon, so you're sure to learn some new things.

{% youtube 7LDlUMMbv6k %}

Check out [this screencast series](https://www.youtube.com/playlist?list=PL46-cKSxMYYCMpzXo6p0Cof8hJInYgohU) and [let me know what you think](https://twitter.com/jbrancha). Here is the [twitter thread](https://twitter.com/jbrancha/status/1245543827257114630) if you'd rather follow along that way.
Retro Mini Gallery with Modern CSS
Tags: showdev, css, webdev, codepen
Published: 2020-04-07 03:27:57

This project is a tribute to a time in web design (not so very long ago) that was ruled by gradients, patterns, and textures 💅🌈🎨

I wrote the initial version of this on JSFiddle in early 2012 with the comment "Yay pseudo elements!" 😂

This updated version is responsive and uses modern CSS techniques, features, and tools like:
- grid layout
- object-fit on the image
- Sass (technically around but not _quite_ stable/well-known in 2012)

It also uses properly semantic and hierarchical HTML, and considers accessibility 🤘

The "retro" techniques used are:
- not-quite-realistic wood grain background texture
- text-shadow to "inset" the headline
- skeumorphic(ish) "Polaroid" design of the cards
- borderline-offensive gradients on the buttons 😅

Please enjoy!

{% codepen https://codepen.io/5t3ph/pen/RwPzqgE %}

If you're curious about the cut-out effect around the "love" button, it's accomplished by setting the same fixed position background image on the body and the `::after`:

```css
body,
.gallery-card__actions::after {
  background: url(http://subtlepatterns.com/patterns/wood_pattern.png) top left repeat fixed;
}
```
HTMLField with Image Uploads in Django Admin
Tags: django
Published: 2020-04-07 03:12:01

---
title: HTMLField with Image Uploads in Django Admin
published: true
description: Useful for creating pages on the fly
tags: django
---

Well, this is mostly a reminder for myself on how to do this. The goal is to set up a generic "HTMLField" for models, which you can add photos to as well.

Here are the steps:

1. Install [django-tinymce4-lite](https://github.com/romanvm/django-tinymce4-lite)
2. Install [django-filebrowser-no-grappelli](https://github.com/smacker/django-filebrowser-no-grappelli)
3. In your `settings.py`, add `X_FRAME_OPTIONS = 'sameorigin'` (the filebrowser uses an iFrame which gets blocked by default)
4. Let's say your MEDIA_ROOT is `/media`, and you want to upload files to `/media/uploads`. In `settings.py`, add `FILEBROWSER_DIRECTORY = 'uploads/'`. Then, make sure `/media/uploads` actually is a folder, or you will see an error.
Expressions, operators, statements in JavaScript
Tags: javascript, expressions, operators, statements
Published: 2020-04-07 02:35:46

There are some terminological confusions in translating these concepts from English to Russian. So, I have tried to clarify...

[Source code](https://yababay@bitbucket.org/snippets/js-invite/pn8Rr8/025-operators-statements-expressions.git). Based on [this article](https://medium.com/launch-school/javascript-expressions-and-statements-4d32ac9c0e74).
[COVID-19] SMS to old people
Tags: twiliohackathon, adonisjs, javascript
Published: 2020-04-07 02:01:45

Medicines(SMS) to old people

In this project, I'll create a platform to send SMS to older people that need some specific medicines and with the problem because COVID-19, it's not a good idea older people walk around pharmacies to try to find some medicines or specific medical things.

The idea is, older people put two contacts (Email, mobile phone, and address) and choose some medicines that he needs.

After this, all pharmacies have a backoffice to see in the city, what the older people need and can send an SMS to notify the person.

Stack:
Backend - AdonisJS (API REST)
Database - MySQL
Frontend - VueJS or NuxtJS

Best regards.
FREEApril from PluralSight
Tags: freeapril
Published: 2020-04-07 00:54:30

Build in-demand tech skills without leaving your house. Get free access to 7,000+ expert-led video courses and more all month long. 

HOW #FREEAPRIL WORKS
Times are tough right now. To help you be productive, make progress toward your goals or build skills toward a new career, we’re making all 7,000+ expert-led video courses completely free for the month of April.

Sign up for a free account*
We don’t need your credit card. Creating an account is quick and easy. 


Get to know the platform
We’ll help build your skills in top technology topics with expert-led courses, skill assessments, paths and more.

Start your personalised skill development journey
We’ll help identify your strengths and weaknesses and serve up content recommendations to help you improve with assessments.

Share your #FreeApril story**
Hop on social and share what course you’re watching or what your goals are this month using #FreeApril.

https://www.pluralsight.com/offer/2020/free-april-month
It's here! Right click to explain commands on your browser
Published: 2020-04-07 00:53:06

The kmdr browser extension breaks down commands to return descriptions of each attribute. Simply select the command you want to understand and right-click for the explanation. The modal window rendered contains what you selected with syntax highlighting and displays descriptions upon mouse over.

{% youtube se8apEaThlE %}

By running as a browser extension in Chrome and Firefox, kmdr will allow you to more quickly understand program syntax when and where you find commands. kmdr works on commands within web app messages, on GitHub or GitLab, in official documentation, StackOverflow, or any other website where code is selectable.

{% youtube vovhcAXNHJQ %}

The browser extension is more powerful than its CLI predecessor in that it can explain multi-line commands, more complex bash constructs, and performs 100x faster (yes, 100). kmdr explains the syntax common in bash scripts by detecting commands within constructs like loops, sub-shells, and command substitutions. The common documentation practice of using `$` prompts is accounted for in the browser as well as comments preempted by `#`.

We’re inviting members of our mailing list to access the browser extension early as participants in our user study. To be included in the pre-release study, please [join our mailing list](https://kmdr.sh/sign-up/).

See our updated [website](https://kmdr.sh/) for more information on the browser extension including an [FAQ](https://kmdr.sh/FAQ/), [gallery](https://kmdr.sh/gallery/), and option to [pre-order](https://kmdr.sh/#pricing-03-87241) at an early adopter price.
Detect extension in a directory using node js
Tags: javascript, node, showdev
Published: 2020-04-07 00:38:08

---
title: Detect extension in a directory using node js
published: true
description:
tags: #javascript #node #showdev
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/6i3kisvwar3zpqlm3cqv.png
---
Reading files from any package is essential before production. But since we as developers love automating things. Validating package accessibility and detect extensions among other things should be done by code.

The good news is, this can be achieved easily in the [node file system](https://nodejs.org/api/fs.html).

let's start by working on getting a file extension. We have input: `filename.extension` splitting the input by `"."` should achieve our goal easily.

```js
`filename.extension`.split(".") 
// (2) ["filename", "extension"]

`filename.test.extension`.split(".");
// (3) ["filename", "test", "extension"]
```

As you notice, we need to get the last element of the result. This can be done in different ways. One of them is using [pop](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/pop) which returns the last element of the array.

```js
function getExtension(fileFullName) {
  return fileFullName.split(".").pop();
}
```

We still have a problem. We don't have the file full name. We actually have to auto-detect the extension by knowing the project root.

The first step, using [readdirSync](https://nodejs.org/api/fs.html#fs_fs_readdirsync_path_options) to read all files that exist in our directory.

```js
const files = fs.readdirSync(dir);

// (4) [ 'a.js', 'b.js', 'index.js', 'package.json' ]
```

Then, we can use [find](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find) which returns the value of the first element that satisfies function result.

```js
const found = [10, 20, 30].find((number) => number > 10);
// 20
```

Now let's update our function

```js
import fs from "fs";

function getExtension(rootDir, entry) {
  const files = fs.readdirSync(rootDir);
  // (4) [ 'a.js', 'b.ts', 'index.js', 'README.md', 'package.json' ]

  const filename = files.find((file) => {
    // return the first files that include given entry
    return file.includes(entry);
  });

  const extension = filename.split(".").pop();

  return extension;
}

// reading form current directory
const result = getExtension(".", "b");

// result: ts
```

We can still upgrade our function, as we usually have an `index` as default entry from the current directory.

```js
function getExtension(rootDir = ".", entry = "index") {
  //
}

const result = getExtension();

// result: js
```

Our mission is not finished yet, but that's enough for now. Next, we will build validate together.

See you soon!

---

Do you like it? Please leave ⭐️. I appreciate any feedback 👋👋👋
How YOU can learn Kubernetes
Tags: kubernetes, devops, tutorial, showdev
Published: 2020-04-07 00:37:44

---
title: How YOU can learn Kubernetes
published: true
description: You've heard the word many times but you have no idea where to even begin? This series of tutorials is for you. From baby steps to proficient
tags: kubernetes, devops, tutorial, showdev
---

Follow me on [Twitter](https://twitter.com/chris_noring), happy to take your suggestions on topics or improvements /Chris

- [Free Azure Account](https://azure.microsoft.com/en-gb/free/?wt.mc_id=devto-blog-chnoring) If you want to try out AKS, Azure Kubernetes Service, you will need a free Azure account
- [Fundamentals](https://dev.to/azure/kubernetes-from-the-beginning-part-i-4ifd)
Kubernetes is about orchestrating containerized apps. Docker is great for your first few containers. As soon as you need to run on multiple machines and need to scale up/down and distribute the load and so on, you need an orchestrator - you need Kubernetes

- [Nodes, Pods, Services, and Labeling](https://dev.to/azure/kubernetes-part-ii-revisiting-pods-and-nodes-and-introducing-services-and-labeling-5fi7)
This second part aims to give additional context to Nodes, Pods and introduce the concept Service. There is some theory and some practice with Kubectl.

- [Static scaling](https://dev.to/azure/kubernetes-part-iii-scaling-1mmi)
This third part aims to show how you scale your application. We can easily set the number of Replicas we want of a certain application and let Kubernetes figure out how to do that. This is us defining a so-called desired state.

- [Auto scaling](https://dev.to/azure/kubernetes-from-the-beginning-part-iv-autoscaling-54l6)
This fourth part is also about scaling but we are not talking about setting the number of Replicas. Instead, we are talking about automatic scaling, of letting Kubernetes scale to as many Replicas as it needs based on settings you set on CPU and other metrics. This is a great way to handle a sudden barrage of incoming requests.

- [YAML files in Kuberenetes](https://dev.to/azure/how-you-actually-use-kubernetes-starring-yaml-files-3c0k)
Learn about YAML files and how to use them in Kubernetes
My Favorite Slack Shortcuts
Tags: webdev, productivity, remote, todayilearned
Published: 2020-05-04 08:35:48

---
title: My Favorite Slack Shortcuts
published: true
date: 2020-04-07 00:00:00 UTC
tags: webdev, productivity, remote, todayilearned
canonical_url: https://includejs.dev/slack-shortcuts
---

I work remotely, and most of our communication happens on Slack. Besides that we use Google Hangouts and [Whereby](https://whereby.com/user) for **video** communication and [Notion](https://www.notion.so/) for **documentation** and issue tracking.

## Favorite Slack Shortcuts (so far)

- **`shift + enter`**

Create a new line in your message ('Enter' is for sending).

- **`up arrow`**

Edit your last message.

- **`cmd + u`**

To upload files (I use this one all the time for sharing screenshots of my work in progress).

- **`cmd + shift + enter`**

Create a new code snippet. 💡Use single backticks for inline code and tripple backticks for a short code snippet.

- **`/away`**

To toggle away status (useful for when you want to take a peek at your Slack group, but not be seen as online).

- **`cmd + shift + y`**

Edit your status - to quickly tell your team that you are unavailable.

- **`cmd + shift + a`**

Open all unreads. (Meh, not sure yet whether this one is useful for me).

- **`alt + up arrow/down arrow`**

Navigate up and down channels or DMs 💪.

- **`cmd + number`**

To switch between different slack groups 💪.

- **`cmd + k`**

Quick switcher (sort of like command palette in VSCode).

- **`cmd + /`**

Toggle the keyboard shortcuts panel.

- **`/remind [who] [what] [when]`**

To set reminders in Slack.

**Pro tips:**

- I use [Rocket emoji](https://matthewpalmer.net/rocket/) for all my emoji dispensing.

- Add [Giphy for Slack](https://slack.com/intl/en-be/help/articles/204714258-Giphy-for-Slack) for GIF posting via `/giphy` command.