teleren/devto huggingface dataset:
How to create a jelly button
Tags: html, css, javascript, beginners
Published: 2021-01-10 16:08:26

**Hello, guys in this tutorial we will create a jelly button using HTML CSS & <a href="https://greensock.com/tweenmax/" target="_blank">TweenMax.js</a>.**

The HTML element represents a clickable <a href="https://blog.stackfindover.com/?s=button" target="_blank" rel="dofollow">button</a>, used to submit forms or anywhere in a document for accessible, standard button functionality. By default, HTML buttons are presented in a style resembling the platform the user agent runs on, but you can change buttons’ appearance with <a href="https://blog.stackfindover.com/?s=css" target="_blank" rel="dofollow">CSS</a>.

First, we need to create two files **index.html** and **style.css** then we need to do code for it.
###Jelly button Step:1###
**Add below code inside index.html**
```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>How to create jelly button</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="style.css" />
    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&display=swap" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.12.1/TweenMax.min.js"></script>
  </head>
  <body>
    <button class="button">
      <span>Click me</span> 
    </button>
  </body>
  <script type="text/javascript">
    var $button = document.querySelector('.button');
    $button.addEventListener('click', function() {
      var duration = 0.3,
          delay = 0.05;
      TweenMax.to($button, duration, {scaleY: 1.2, ease: Expo.easeOut});
      TweenMax.to($button, duration, {scaleX: 1.2, scaleY: 1, ease: Back.easeOut, easeParams: [3], delay: delay});
      TweenMax.to($button, duration * 1.25, {scaleX: 1, scaleY: 1, ease: Back.easeOut, easeParams: [6], delay: delay * 3 });
    });
  </script>
</html>
```
###Jelly button Step:2###
Then we need to add code for **style.css** which code I provide below screen.

```css
* {
  padding: 0;
  margin: 0;
  font-family: 'IBM Plex Sans', sans-serif;
}
body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background: #f1f2f3;
}
.button {
    position: relative;
    border: 0;
    padding: 12px 40px;
    border-radius: 50px;
    font-size: 18px;
    color: #fff;
    cursor: pointer;
    outline: 0;
    background-image: linear-gradient(-180deg, #FF89D6 0%, #C01F9E 100%);
    box-shadow: 0 1rem 1.25rem 0 rgba(22,75,195,0.50), 0 -0.25rem 1.5rem 
                                 rgba(110, 15, 155, 1) inset, 0 0.75rem 0.5rem 
                                 rgba(255,255,255, 0.4) inset, 0 0.25rem 0.5rem 0 
                                 rgba(180, 70, 207, 1) inset;
}
```
###Jelly Button video Output:###
{% youtube k18cVPk5xEk %}

###Jelly Button codepen Output:###
{% codepen https://codepen.io/stack-findover/pen/QWdYdNj %}


> For more interesting content

<a href="http://blog.stackfindover.com/" target="_blank">Visit for more!</a>
Do you schedule your blog posts?
Tags: watercooler, productivity, writing
Published: 2021-01-10 16:03:04

---
title: Do you schedule your blog posts?
published: true
description: 
tags: watercooler, productivity, writing
cover_image: https://primaradio.co.id/wp-content/uploads/2020/10/Cuti-Bersama.jpg
---
Knowing when to post on every social platform is one important way to stay a step ahead and make sure your content reaches as much audience as possible.

Here are [detailed stats](https://sproutsocial.com/insights/best-times-to-post-on-social-media/) about when is the best time to post on Facebook, Instagram, Twitter, and LinkedIn.

Do you follow some specific patterns on which days and time it is best to post? Does anyone have similar stats on DEV, Hashnode, Medium, and Hackernoon?
Do you keep a backlog of 'ready-to-publish' articles?
Tags: watercooler, productivity, writing
Published: 2021-01-10 16:02:28

---
title: Do you keep a backlog of 'ready-to-publish' articles?
published: true
description: 
tags: watercooler, productivity, writing
cover_image: https://scx2.b-cdn.net/gfx/news/hires/2015/tacklingunet.jpg
---
Keeping a backlog of 'ready-to-publish articles' is useful as it provides you with some material to post when you feel less inspired or have no time to work on new material.

What's your approach? Do you prepare posts in advance?
How to manage ideas and repos
Tags: dohackathon, programming, management
Published: 2021-01-10 16:01:03

I completed my bachelor's degree in mid-2020. I always made it a point to put whatever meaningful projects I built on GitHub. That combined with forks of some projects and a few more projects that I actively managed left me with more than 50 repos.

I was already looking for some tool which can provide me an overview of all my repos and categorize and manage them in a better way, but couldn't find anything which exactly fit the bill.

<a href="https://giphy.com/gifs/U4VXRfcY3zxTi">![disappointed](https://media.giphy.com/media/U4VXRfcY3zxTi/giphy.gif)</a>

So I decided to build one such tool on my own and started working on the basic concept in November, 2020. It did not look like much work back then.. just dump metadata from GitHub APIs into some DB and add a few additional fields and that's it!

<a href="https://giphy.com/gifs/outlander-season-4-starz-PoHTJgxBHCCJ2zCbvf">![naive](https://media.giphy.com/media/PoHTJgxBHCCJ2zCbvf/giphy-downsized.gif)</a>

I already had a basic structure in my mind by the 2nd week of December. In my initial designs the app looked like a single Kanban board (you can also call it a Trello board). Each lane would signify a stage in the lifecycle of the idea:

1. Idea
2. Active (initial POC completed)
3. WIP (more detailing is being done)
4. Active (is being actively monitored for issues and features)
5. Archive (project has gone stale)

The cards in `Idea` lane here might or might not have a GitHub repo. All the cards in all other lanes would have been populated using GitHub repos of the logged in user.

I had originally planned to deploy it on Heroku, as the Postgres db with 10k row limit that comes with the free tier would be more than sufficient for my needs. It was at this stage that I came across the post [Announcing the DigitalOcean App Platform Hackathon on DEV!](https://dev.to/devteam/announcing-the-digitalocean-app-platform-hackathon-on-dev-2i1k)

Cover image: <span>Photo by <a href="https://unsplash.com/@pankajpatel?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Pankaj Patel</a> on <a href="https://unsplash.com/s/photos/project-management?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></span>
Animated Accessible Navigation
Tags: codepen
Published: 2021-01-10 16:00:34

<p>Accessible, Progressive-Enhanced Navigation Menu with a circular animated background.</p>
<p>Find more demos: <a href="https://www.w3tweaks.com/javascript-toggle-menu.html">Link</a></p>

{% codepen https://codepen.io/mxbck/pen/xdaGNL %}
JSON WEB TOKENS [ JWT ]
Tags: javascript, serverless, security, webdev
Published: 2021-01-10 16:00:27

In my research and preparation for a new video on my YouTube channel, where I am demonstrating how to use JWT ( why JAWT ? why is the A in the middle? ) for authentication in Flask microframework, I decided to write a script for better understanding and to have a clear picture about what is going on underneath the hood.

Here it is ..

There are 2 ways to make user authentication on the web:

Sessions and Tokens

And the traditional approach is cookie based server side sessions.

1- The process begins when the user logs in with username and password and submits to the server.
2- Then the server stores a session in the database and responds by sending a session ID to your client computer, more specifically hands it over to your browser.
3- which stores this session ID in a cookie, and a cookie is a text file saved in your local storage in the browser in a form of 
{key: value} pairs. 
4- that will be sent back to the server  for every subsequent request; and the server will respond to that corresponding request for the current logged in user.

In other words, we have a stateful session between the frontend client and the backend server.

This approach is good, but lacks some security measure, and can be vulnerable to different malicious attacks [ CSRF ] 
Where the attacker points the user to a site they logged into to perform actions such as changing password or secret question; however the risk is very low if you're using modern frameworks like Rails and Django to implement your code for your website 

The bigger problem  is that you need to store your session ID in a database or on the server as most of today's cloud apps are scaled horizontally this can be a huge bottleneck for production.

And here comes the Token-Based Authentication 

So, the process begins the same way as with server-side session :

1- user submits login form to the server, 
2 -but instead of storing a session in the database and responding with a session ID, the server creates a JWT with a private key.
3 - Then the server sends this JWT Token to be kept in the local storage in your browser 
4 - On future requests, the JWT will be added to the authorization header prefixed by the bearer of that token, the server only needs. to validate the signature; and nothing is stored on the server like in the sessions scenario.   

The most important thing to understand :
-----------------------------------------
A- In sessions, the authentication state is handled on the server , while JWT tokens are managed on the client.
 
B- Stateful protocol--> Uses Sessions and store sessions in database while handling the client a session ID.

C- Stateless protocol --> No session information is retained by the server (like HTTP and Internet Protocol).

The End.
SitePage for React. sitepage.jsx
Tags: react, javascript, typescript, webdev
Published: 2021-01-10 15:54:26

Releasing the ReactJS version of sitepage.js. sitepage.jsx 1.0.0-rc for ReactJS has been released. This version has bring the feature to load ReactJS component at runtime. 

GitHub Documentation:
https://github.com/pixelbyaj/sitepage.jsx/tree/1.0.0-rc

Demo link:
https://stackblitz.com/edit/sitepagejsx
A pipeline dashboard for multi repository builds with GitHub Actions
Tags: dohackathon
Published: 2021-01-10 15:44:34

## What I built
A pipeline dashboard for multi repository builds with GitHub Actions
### Category Submission: 
Built for Business
### App Link
https://pipeline-graph-viewer-7oa6n.ondigitalocean.app/
### Screenshots
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1tr54y35cvtrh2pirbfd.png)
### Description
Please, see either https://pipeline-graph-viewer-7oa6n.ondigitalocean.app/
or
https://github.com/MindaugasLaganeckas/pipeline-graph-viewer
### Link to Source Code
https://github.com/MindaugasLaganeckas/pipeline-graph-viewer
### Permissive License
MIT
## Background
An actual problem, that we face in our organization.

### How I built it 
I have learned a lot about ReactJS and its integration with DotNet 5.

### Additional Resources/Info
None
Beautiful FREE Tailwind CSS Blog Theme
Published: 2021-01-10 15:41:37

I am proud to introduce our very first completely open source blog theme, Simple-blog:
{% github easytailwind/simple-blog no-readme %}
It is MIT licensed and completely free to use for all.


Interested in contributing, just [navigate](https://github.com/easytailwind/simple-blog) to our repo and see the details.

Pics:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2pcuo4tj1khz3e7qjo7l.jpeg)
Indexed Bookmark
Tags: dohackathon
Published: 2021-01-10 15:35:28

## What I built
I have built a search application where we can add useful links (like bookmarks) and quickly search them when required.

### Category Submission: 
Random Roulette

### App Link
https://indexed-bookmark-frjpg.ondigitalocean.app/
**Kubernetes version**
http://139.59.193.16:8080/

### Screenshots
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2qxgrfsiuntnyrkurxuc.PNG)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/b52sxofxcp82ivskfask.PNG)


### Description
With this application useful links (i.e. bookmarks) can be stored and when needed searched near real time. This is based on ElasticSearch, so full text search is supported.
New bookmarks can be added with name, url and tags which will be used to index for faster search. Also the existing bookmarks can be updated. 

### Link to Source Code
https://github.com/sivanandapanda/indexed-bookmark

### Permissive License
MIT

## Background
Sometimes there are too many bookmarks or list of useful link we save for future reference and the useful ones could be hard to find when we need them most. Google results may be overwhelming with what we are looking for. With this application useful site or link can be added with a common tag and then later on can be searched. 

### How I built it 
(How did you utilize DigitalOcean’s App Platform? Did you learn something new along the way? Pick up a new skill?)
For backend I have used Java/Quarkus and for frontend qute template and bootstrap. ElasticSearch is used for full text serach and  mongodb is used for persistence. This is deployed to Digital Ocean as a docker container and can be deployed as a kubernetes Load Balancer service as well.


### Additional Resources/Info
Cara Membuat Scrift Termux Untuk Pemula
Tags: termux, scrift, bash
Published: 2021-01-10 15:34:21

Apa Itu Termux?

Termux, merupakan aplikasi Terminal android, yang hampir mirip dengan Linux, namun Termux tidak memerlukan akses Root layaknya Linux.

Selain itu Termux juga merupakan Linux environment, ibaratnya seorang anak dari linux itu sendiri.

Kegunaan Termux?

Banyak sekali kegunaan Termux, karena tersedia, berbagai macam Tools, meskipun tidak terlalu lengkap, menurut saya Termux untuk pemula sangatlah Cocok.

Cara Menggunakan Termux

Termux ini kan Terminal, sehingga membutuhkan, command atau perintah dari si pengguna.

Oleh karena itu di sini saya akan memberikan beberapa command Termux yang saya ketahui.

$ ls
berguna untuk melihat folder dan file

$ cd
berguna untuk membuka suatu folder

$ mkdir
berguna untuk membuat sebuah folder

$ touch
berguna untuk membuat sebuah file

Mungkin segitu saja dulu, hal yang wajib kamu ketahui, karena akan berguna sekali pada saat nanti akan membuat scrift.

Cara Membuat Scrift Termux

1. Silahkan masuk Ke Aplikasi Terminal Termux
2. Buatlah sebuah file dengan ekstensi (sh) karena di sini kita akan membuat scrift, dengan bahasa pemrograman (bash)

cara membuat file
Silahkan jalankan perintah berikut :

$ touch nama-file
$ chmod +x nama-file

3. Kemudian install tools nano

Cara install tools nano
jalankan perintah berikut :

$ pkg install nano

4. Kemudian ambil scrift di [Link Expired]
5. Jalankan perintah berikut

$ nano nama-file.sh

6. Tempelkan scrift selesai

Untuk info lebih lanjut silahkan ke situs saya : https://www.ixt.my.id
Digital ocean hackathon app platform submission
Tags: dohackathon
Published: 2021-01-10 15:22:00

## What I built
My wedding website invitation

### Category Submission: 
Random Roulette

### App Link
https://my-wedding-p5omi.ondigitalocean.app/

### Screenshots
![Frontpage screenshot](https://dev-to-uploads.s3.amazonaws.com/i/hmgb9k1pocvn3s2p9vbv.png)

### Description
Syeikh Anugrah personal digital wedding invitation xD

### Link to Source Code
https://github.com/syeikhanugrah/my-wedding

### Permissive License
MIT

## Background
It's my wedding invitation, so I make of fun of it :D

### How I built it 
Deploy without knowing server things, just select repo, configure yarn command, env variable and boom! I started love digital ocean, though!


### Additional Resources/Info
Alert, Confirm, Prompt dialog box (modal) in Web Components
Tags: codepen, javascript, webdev, showdev
Published: 2021-01-10 15:21:24

<p>This is the first time again I tried to create a html web component after the changes in specification. This is also a chance for me to practice Javascript promises, and async/await.</p>

<p>In this pen, I used Web Components to implement message box in HTML, CSS, and Javascript.</p>

<p>I didn't use any preprocessors, libraries, and frameworks in my Javascript code, so that I could use this dialog box wherever I want.</p>

<p>I used custom element to create my own dialog box, and shadow DOM for me to style my component without affecting any of the styles outside the shadow DOM. Although, I used a class name, I think that might be unique.</p>

<p>Because I used Web Components, Promise, async/await to implement the dialog box, this pen might not work on older browsers.</p>

<p>The color scheme of dialog box can be light or dark depends on the color scheme of your system.</p>

{% codepen https://codepen.io/takaneichinose/pen/LYRrQmW %}
Ways to preserve knowledge
Tags: maintenance, knowledge, management
Published: 2021-01-10 15:17:25

Recently I found article [about maintenance](https://clarityincode.com/software-maintenance/).

It is pretty old(2010) but looks still valid. One of the principal factors affecting maintenance complexity mentioned in the article is "Preserving knowledge".

From my experience, there could be such ways to achieve that:
1. Document every process and algorithm used: keep at least high level overview.
2. Split all project's code into areas and identify who would maintain each of them. If the person decides to leave project, then he should share his knowledge with his successor. 

Which ways do you use at your projects?
If you use 2nd approach, then how do you achieve it? Do you use any tools?
Well, I guess I can say MYSQL is up now.
Published: 2021-01-10 15:17:19

series: [“Ordinary Geeks Covid Tracker 6”]

Seriously, Like 2 hours later and I finally finish getting MYSQL integrated into my ASP.Net workflow.  I didnt do all the previous steps when I created my new user and ran into some trouble.  Ok.  Now I just got to call the apis, update my android app, and write some DB logic.  Let's go.

Side note, always save your old seed info before doing another EF migration.  Don't feel like replicating that code =(.
How to Create a CSS Only Loading Spinner 💫🔥
Tags: css, webdev, html, tutorial
Published: 2021-01-10 15:14:48

How are good are loading spinners? I know I love them, so today we're going to build one using CSS. This is simple to do, and you can easily add them to your own web projects 🙂

## Video Tutorial
As always, if you prefer this tutorial in video form, feel free to watch it here, or on my YouTube channel [dcode](https://www.youtube.com/dcode-software)
{% youtube trsuokl2Fp4 %}

## The source code
If you want to follow along with the code, here you go:
{% codepen https://codepen.io/dcode-software/pen/BaLOoMe %}

### Writing the HTML
For the HTML, we're going to add a sample `<div>` which will act as the container for the loader. In a real-world application, this would be the space where your content goes once its loaded.

Inside the container, we have another `<div>` which represents the actual loading spinner.

```html
<div style="width: 150px; height: 150px;">
    <div class="loading loading--full-height"></div>
</div>
```

And that's it for the HTML!

### And now for CSS...
To achieve the spinning effect, we're going to be taking advantage of [CSS animations](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations) and [pseudo-elements](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements).

First, we can style the `.loading` class:

```css
.loading {
    display: flex;
    justify-content: center;
}
```

We use `display: flex` here so we can easily center the spinner horizontally and vertically.

Next, we take advantage of the `:after` pseudo-element to represent the loader.

```css
.loading::after {
    content: "";
    width: 50px;
    height: 50px;
    border: 10px solid #dddddd;
    border-top-color: #009579;
    border-radius: 50%;
    animation: loading 1s ease infinite;
}
```

**By using a top border (`border-top-color`) in combination with a `border-radius` of `50%`, we create a half-circle outline on the top of our pseudo-element, like this:**

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

On the last line, we are specifying that the `loading` animation gets applied to the spinner, and that it should run infinitely. Let's create that animation now.

```css
@keyframes loading {
    to {
        transform: rotate(1turn);
    }
}
```

**And that's it!** We have a very simple CSS only loading spinner. If you enjoyed this tutorial, check out my profile or YouTube Channel [dcode](https://www.youtube.com/dcode-software) for more 😁
Scrum poker on the net 
Tags: dohackathon, react, websocket, scrum
Published: 2021-01-10 15:09:48

---
title: Scrum poker on the net 
published: true
description: Play scrum poker with your team online!
tags: dohackathon, react, websocket, scrum
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/mwg72yn1h6g8zh6m58u2.png
---

## What I built
I've build a website where you and your team can play scrum poker when you can't meet in a physical place. It used websockets for realtime communication.

### Category Submission: 
This project belongs to the **Program for the People** category.

### App Link
https://mitsumori.app

### Screenshots
![mitsumori.app_home](https://dev-to-uploads.s3.amazonaws.com/i/mexihclzke4b5yep1yml.png)

![mitsumori.app_create_room](https://dev-to-uploads.s3.amazonaws.com/i/5f4ms01ac06trnfpyer6.png)

![mitsumori.app_user_joined](https://dev-to-uploads.s3.amazonaws.com/i/fe9ondffzwtn8u9kk4zq.png)

![mitsumori.app_voting](https://dev-to-uploads.s3.amazonaws.com/i/kcilwfehvkr9b3npge1m.png)

![mitsumori.app_voted](https://dev-to-uploads.s3.amazonaws.com/i/xozvpgw4pix46ykhzb9t.png)
   

### Description
With `mitsumori` you can play scrum poker with your team online. Simply create a room and give yourself a name or join an existing one.

If you're someone who doesn't have to participate in the voting but would like to facilitate the meeting instead, you can change to an observer.

After everyone has voted, the votes become visible and after your discussion, the round can be reset by anyone.

`mitsumori` comes standard with two decks: Fibonacci and the original Fibonacci sequence. 

### Link to Source Code
https://github.com/UNRULYEON/mitsumori

### Permissive License
`mitsumori` is licensed under the MIT license. View the license [here](https://github.com/UNRULYEON/mitsumori/blob/main/LICENSE)

## Background
During lockdown, I couldn't go to school and my team and I had to meet online. We could do most things except play scrum poker. The websites that existed required some form of signing up or were broken; we would be out of sync with who voted what after one or two rounds.

That's why I decided to build one of my one where you can quickly create a room for your team.

### How I built it
`mitsumori` is build with a React frontend and an Express backend. The communcation between the two is done via websockets. This allows for the realtime feedback from other members in the room like changing the name or casting a vote.

After I've build the app, I simply added docker support and went through the steps to create an App on DigitalOcean’s App Platform. App Platform simply recognized that I had a `Dockerfile` and used that to build the app.

### Additional Resources/Info
If you'd like, you can modify the `config.ts` to add or modify existing decks and spin up your own `mitsumori`.

[![Deploy to DO](https://www.deploytodo.com/do-btn-blue.svg)](https://cloud.digitalocean.com/apps/new?repo=https://github.com/UNRULYEON/mitsumori/tree/main)