teleren/devto huggingface dataset:
Flowrift - Tailwind CSS UI blocks
Tags: tailwindcss, css, frontend, webdev
Published: 2021-09-29 17:02:18

Introducing [Flowrift](https://flowrift.com?utm_source=devto&utm_medium=organic), an assistant library made of beautifully designed Tailwind CSS UI blocks. All blocks are vanilla HTML and work with Tailwind CSS' default configuration. Go big or go small: Stack blocks on top of each other to build full-page layouts, or selectively copy small code snippets. Your imagination is the only limit.

All blocks are well organized inside a highly performant app. Just _view, copy & customize_.

- Are you Busy?
- Missing a section in your design?
- Lacking inspiration?

We got you covered.

![Flowrift UI Blocks](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/twfb5tjwix3s6ksmm6hl.png)

**Some highlights:**
⭐ Growing Library
⭐ Responsive Preview
⭐ Code View
⭐ Keyboard Shortcuts
⭐ Randomizer

👉 [Go to the Flowrift App](https://flowrift.com?utm_source=devto&utm_medium=organic)
👉 [More about Flowrift](https://about.flowrift.com?utm_source=devto&utm_medium=organic)
Calculation of Insurance using Logical Operators.
Tags: operations, operators, calculation, insurance
Published: 2021-09-29 16:59:11

Cаlсulаtіоn оf Inѕurаnсе uѕіng Lоgісаl Oреrаtоrѕ. 
 
 
An Inѕurаnсе соmраnу fоllоwѕ fоllоwіng rulеѕ to саlсulаtе рrеmіum. 
 
(1) If a реrѕоn'ѕ health іѕ excellent and thе реrѕоn іѕ bеtwееn 25 and 35 years оf аgе and lіvеѕ in a city аnd is a mаlе thеn the рrеmіum is Rѕ.4 per thousand аnd his роlісуаmоunt саnnоt еxсееd Rѕ.2 Lakhs. 
 
(2) If a реrѕоn ѕаtіѕfіеѕ аll the аbоvе conditions except thаt thе ѕеx is fеmаlе thеn thе premium іѕ Rs.3 per thousand and her policy amount саnnоt exceed Rs. 1 lakh. 
 
(3) If a реrѕоn'ѕ health іѕ poor аnd thе person is bеtwееn 25 аnd 35 уеаrѕ of аgе аnd lіvеѕ іn a vіllаgе аnd іѕ a male thеn thе рrеmіum іѕ Rѕ. 6 реr thоuѕаnd аnd his роlісу cannot еxсееd Rs. 10,000. 
 
(4) In аll the other саѕеѕ thе реrѕоn is not insured. 
 
 
 
#include<stdio.h> 
mаіn() 
{ 
int аgе,рrеmіum, mаx_аmоunt; 
 
char hеаlth, location, ѕеx; 
 
 
printf("Enter Health - g fоr gооd / b fоr bad\nEnter Lосаtіоn - c fоr сіtу / v fоr vіllаgе"); 
 
printf("\nEnter sex - m fоr mаlе / f for fеmаlе"); 
 
рrіntf("\nEntеr thе hеаlth, age, lосаtіоn аnd ѕеx of thе реrѕоn:"); 
 
ѕсаnf ("%с %d %с %с", &hеаlth, &аgе, &location, &sex); 
 
 
 
іf ((health=='g') && ((аgе>=25)&&(аgе<=35)) && (lосаtіоn=='с') && (ѕеx=='m')) 
 
{ 
рrеmіum=4; 
mаx_аmоunt=2; 
рrіntf("Thіѕ реrѕоn is insured.\nThe рауаblе premium іѕ Rs. %d реr thоuѕаnd\n and thе max роlісу amount іѕ Rѕ. %d Lakhs", рrеmіum, mаx_аmоunt); 
 
} 
 
еlѕе if ((health=='g') && ((аgе>=25)&&(аgе<=35)) && (location=='c') && (ѕеx=='f')) 
 
{ 
рrеmіum=3; 
max_amount=1; 
рrіntf("Thіѕ person is insured.\nThe рауаblе premium іѕ Rs. %d реr thоuѕаnd\nаnd thе mаx роlісу аmоunt іѕ Rs. %d Lakhs", рrеmіum, mаx_аmоunt); 
 
} 
 
еlѕе іf ((hеаlth=='b') && ((аgе>=25)&&(аgе<=35)) && (lосаtіоn=='v') && (ѕеx=='m')) 
 
{ 
premium=6; 
mаx_аmоunt=10000; 
рrіntf("Thіѕ реrѕоn is insured.\nThe рауаblе рrеmіum is Rѕ. %d per thousand \nаnd thе mаx роlісу аmоunt is Rs. %d ", premium, mаx_аmоunt); 
 
} 
 
еlѕе 
{ 
рrіntf("Thіѕ реrѕоn іѕ not insured."); 
} 
 
} 

Articel Created By https://www.indexmedia.eu.org/
How to convert HTML to PDF using Angular
Tags: angular, tutorial, typescript, ionic
Published: 2021-09-29 16:52:25

Yesterday, I was working on [Hyperpanels'](https://hyperpanels.com/) dashboard feature and my coworker [@albertobeiz](https://twitter.com/albertobeiz) said the sentence every front-end developer fears: 

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

> Can we generate a PDF from that?

Let's see how I did it.

First, you'll need some help, so run the following commands:

    npm i --save dom-to-image
    npm i --save jspdf

Once we have this two packages, we can use them in our code 

    import { jsPDF } from 'jspdf';
    import domtoimage from 'dom-to-image';

Add an ID to the HTML element you want to print:

    <ion-content class="grid-container">
        <div id="dashboard">

Finally, the function to turn that HTML into a PDF:

    toPdf() {
        const dashboard = document.getElementById('dashboard');

        const dashboardHeight = dashboard.clientHeight;
        const dashboardWidth = dashboard.clientWidth;
        const options = { background: 'white', width: dashboardWidth, height: dashboardHeight };

        domtoimage.toPng(dashboard, options).then((imgData) => {
             const doc = new jsPDF(dashboardWidth > dashboardHeight ? 'l' : 'p', 'mm', [dashboardWidth, dashboardHeight]);
             const imgProps = doc.getImageProperties(imgData);
             const pdfWidth = doc.internal.pageSize.getWidth();
             const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
      
             doc.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight);
             doc.save('Dashboard for hyperpanels.pdf');
        });
    }

This will create a PDF that will be saved from your browser:

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/caspguw6htehstgnb1f2.png)

And voilá, your HTML turned into a PDF:

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8arvcrrcogn4uim27l04.png)

But as the comment show, not everyone is printing just a dashboard image, so let's improve our PDF.

First, let's add a new page:

    doc.addPage()

Now we can add some text with another simple function

    doc.text('My PDF Tutorial', 20, 20);

Also, we can add links with the following code: 

    doc.textWithLink('Vist DEV.to', 35, 35, { url: 'https://dev.to/' });

As a result we get the following PDF:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fj6cfii4mauebp06o4y8.png)

Let me know if you have any doubts or comments.

Happy coding!
Ordinalize: Adding "-st", "-nd", "-rd", "-th" to dates
Tags: rails, javascript, programming, todayilearned
Published: 2021-09-29 16:44:29

Ever written a giant case statement to add "-st", "-nd", "-rd", "-th" to display dates like "March 7th" or "September 1st"?

Converting numbers like 1, 2, 7, 19 into "1st", "2nd", "7th", "19th" is called ordinalizing.

> ordinalize(number)
> Turns a number into an ordinal string used to denote the position in an ordered sequence such as 1st, 2nd, 3rd, 4th.

Instead of manually add special cases, check if your language, library, or framework has a helper built-in.

For example, in Rails, you can call the `ordinalize` method on a number or use the `long_ordinal` date format.

```ruby
> 3.ordinalize
=> "3rd"

> Date.today.to_s(:long_ordinal)
=> "September 29th, 2021"
```

Happy hacking!
Map Structures (Dictionary) in Dart
Published: 2021-09-29 16:40:55

The map structure is one of the list types that allows us to keep more than one data. The most important features of
Map:

* It works as key – value.
* unordered

We can think of this structure as a dictionary. A word has only one meaning. Here too, `word=key`, `meaning=value`
corresponding to the word.

It is also important because we use the Map structure a lot when *using a database*. Below are examples of uses of the
map structure.

```dart
main() {
  Map<String, int> map1 = {'zero': 0, 'one': 1, 'two': 2};
  print(map1);

  Map map2 = {'zero': 0, 'I': 'one', 10: 'X'};
  print(map2);

  var map3 = {'zero': 0, 'I': 'one', 10: 'X'};
  print(map3);
}
```

Output:

```
{zero: 0, one: 1, two: 2}
{zero: 0, I: one, 10: X}
{zero: 0, I: one, 10: X}
```

&nbsp;

```dart
main() {
  List<String> letters = ['I', 'V', 'X'];
  List<int> numbers = [1, 5, 10];
  
  Map<String, int> map = Map.fromIterables(letters, numbers);
  print(map);
}
```

Output:
```
{I: 1, V: 5, X: 10}
```

Follow my blog for more [baransel.dev](https://baransel.dev/).
Overview on MVC framework
Published: 2021-09-29 16:24:41

MVC Stands for Model-View-Controller. It is a famous architectural pattern used to build scalable and extensible web applications. It separates an application into 3 components i.e. Model, View and Controller.
![architecture flow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8pawdj1r7gsp403yk2ne.png)
**The Model**
Model component corresponds to all data-related logic that the user works with. It could be business-related data or application-related data.
**The View**
The Html page which is rendered in the browser is written in this component. As the name suggests, this component deals with the view interface of the user i.e. UI.
**The Controller**
The controller acts as neurons for view and model components. It takes the request from the user, then manipulates the data through the model, then show the result via view to the user.
**Evolution of MVC**
It was first introduced by Trygve Reenskaug into Smalltalk-79 while visiting the Xerox Palo Alto Research Center (PARC). Its use in web apps was exploded after the introduction of NeXT web objects in 1996. Later frameworks such as Spring, Django and Rails have increased the popularity outside traditional enterprise environments.
**Features of MVC**
It is a highly extensible, testable and pluggable framework.
It supports URL routing for SEO friendly URL
There is a clear separation of logic via Model, view and controller components.
Earthly Stickers And Hacktoberfest
Tags: hacktoberfest, contributorswanted
Published: 2021-09-29 16:13:03

---
title: Earthly Stickers And Hacktoberfest
published: true
description: 
tags: #hacktoberfest, #contributorswanted 
//cover_image: https://direct_url_to_image.jpg
---

Earthly is excited about Hacktoberfest and we are looking for contributors.

Last year we saw lots of great contributions from the community and sent out a bunch of Earthly stickers to participants.

## What Is Hacktoberfest?

The hosting provider DigitalOcean is once again organizing the [Hacktoberfest](https://hacktoberfest.digitalocean.com/) to celebrate open source. Hacktoberfest invites you to submit pull requests to open-source projects. People who submit four or more pull requests, get a free t-shirt from DigitalOcean.


## What Is Earthly?

[Earthly](https://earthly.dev/) is the command-line build tool you didn't know you needed. It combines the isolation of containers with great usability.

## Sticker Rewards

{% twitter 1329394070393925635 %}

In addition to this official event, Earthly would also like to kick in some rewards for people who contribute.

Earthly is a free and open build tool. &nbsp;It lets you build everything using containers.

The first 40 participants who submit at least one pull request that is accepted [Earthly's GitHub Repository](https://github.com/earthly/earthly) between October 1, 2021 and November 1, 2021, will get an earthly sticker. &nbsp;We have labeled many issues [`hacktoberfest`](https://github.com/earthly/earthly/issues?q=is%3Aissue+is%3Aopen+label%3Ahacktoberfest) to get you started.

You can also qualify for the sticker by adding a working Earthfile file to another open-source project, including your own personal project.

## How Do I Claim my Earthly Stickers?

Once your PR has been accepted please fill out this [form](https://forms.gle/DVkrWCu4yD2wMPmE8). All PRs that are contributing value will get an Earthly sticker!

## Questions / Help ?

If you have any questions, or if you need any assistance, [join our slack channel](https://earthly.dev/slack). We are here to help!

Questions about a specific issue or PR are best left on that issue or PR.

Happy hacking!
Vocabulary Building Day 21
Published: 2021-09-29 16:01:18

1. **elude**(verb):escape understanding.
![alt text](https://c8.alamy.com/comp/GR3R96/character-escape-representing-break-free-and-elude-3d-rendering-GR3R96.jpg)
[Checkout Pronunciation](https://www.google.com/search?q=elude&oq=elude&aqs=chrome..69i57j0i433i512l2j0i512l7.2267j0j7&sourceid=chrome&ie=UTF-8)

2. **humdrum**(noun): lacking excitement or variety; boringly monotonous.
![alt text](https://miro.medium.com/max/1200/1*rVOYN6EW6cTDuYQyXMZLVA.jpeg)
[Checkout Pronunciation](https://www.google.com/search?q=humdrum&oq=humdrum&aqs=chrome.0.69i59j0i433i512j0i20i263i512j0i512l7.3843j0j9&sourceid=chrome&ie=UTF-8)

3. **insidious**(adjective): working in a subtle but destructive way.
![alt text](https://previews.123rf.com/images/doppelganger4/doppelganger41605/doppelganger4160500086/56096202-businessman-wear-the-mask-smile-but-face-in-insidious-vector.jpg)
[Checkout Pronunciation](https://www.google.com/search?q=insidious+meaning&oq=insidious+meaning&aqs=chrome.0.69i59j0i20i263i512j46i433i512l2j46i512j46i433i512l2j0i512j46i433i512j0i512.7735j1j9&sourceid=chrome&ie=UTF-8)

4. **gaudy**(adjective): too colorful and overly decorated.
![alt text](https://happydays365.org/wp-content/uploads/2017/10/Wear-Something-Gaudy-Day.png)
[Checkout Pronunciation](https://www.google.com/search?q=gaudy&oq=gaudy&aqs=chrome..69i57j0i20i263i433i512j0i20i263i512j0i512l7.8040j0j9&sourceid=chrome&ie=UTF-8)
5. **flippant**(adjective): not showing a serious or respectful attitude.
![alt text](https://mammothmemory.net/images/user/base/English/62-flippant.jpg)
[Checkout Pronunciation](https://www.google.com/search?q=flippant+meaning&oq=flippant&aqs=chrome.0.0i20i263i433i512j69i57j0i20i263i512j0i512l7.5744j1j9&sourceid=chrome&ie=UTF-8)
I hope this helps you if you are preparing for GRE exams.
MYSQL FOR BEGINNERS! - PART ONE
Tags: mysql, dbeaver, coding
Published: 2021-09-29 16:01:02

Intro
MySQL is a huge part of the data world and often people are scared to get started, because they don't know how, where or what to start with.

Before start the tutorial you will need to install MySQL Server on your machine along with MySQL Client for writing SQL.

I'll write out the steps for Ubuntu Users, if your not using Ubuntu you will need to google the setup steps.

First off: Update your OS.
No start of a project is complete without an apt update :)

    sudo apt update && sudo apt upgrade

This ensures your repo's are all up to date.

Install MySQL
On Ubuntu this is dead easy, no crazy warren of pages to find the right download.

    sudo apt install mysql-server

Accept any of the prompts about disk space and continue.

Next you need to run the secure installer.

    sudo mysql_secure_installation

Type y for all of the questions you get until it asks what level of security you want, then type 0 for the lowest settings of security.

Note: This really doesn't matter as its a local test DB, if it was live we would need to use more secure passwords.

And thats it.... MySQL is installed.

Now onto the MySQL Client

Install Dbeaver CE
DbeaverCE is a free open source Database management tool. I used to use a tool called DB Visualiser but this was a premium tool (over £100) and to be honest didn't give enough of a benefit over a free version so now i use either Jetbrains DataGrip or Dbeaver.

to install simple type the following in your terminal.

    sudo snap install dbeaver-ce

Done! Its now installed and you can open it from the applications menu!

Now onto Sample Database.

Employee Database installation
MySQL link to a few Example DB's but i quite like the Employee one for getting started with.

To install simply open up a terminal and cd to a location you're happy with like Documents. When there type the following into the terminal:

    git clone https://github.com/datacharmer/test_db.git

Now cd into this directory...

    cd test_db/

Once in this directory type the following in the terminal:

    mysql < employees.sql

You should then see the below.

![SQL Import screenshot](https://raspada-blog.co.uk/storage/wink/images/CgS8caYZGXNm7YiPQncJ3MF6llWcGKIXf8f7x12c.png)

Conclusion
In this post we have looked at VERY basic database requests, next post we shall bring in another table and also SELECT aliasing.

If you found this post useful please consider following me on twitter @skino2020 for future updates to this series and if you found it really helpful consider buying me a coffee here.
tsafe: A new assertion function for TypeScript
Tags: typescript, testing
Published: 2021-09-29 15:41:30

Three GIFs to convince you that you need [`tsafe`](https://github.com/garronej/tsafe) in your life:  

Assert thing you know are true, get runtime error if you where wrong:
![ex1](https://user-images.githubusercontent.com/6702424/134988258-9d3d4097-628b-4b8f-b00b-d256f7c2361c.gif)

Test the type definitions of your APIs:
![ex2](https://user-images.githubusercontent.com/6702424/134994250-29f1b5c3-2193-49ba-ad75-e3c981723724.gif)

Make TypeScript believe whatever you say:

![ex3](https://user-images.githubusercontent.com/6702424/134994590-f01b8aee-a94a-4b4c-8f43-ee5ce8911443.gif)

[Here is the repo](https://github.com/garronej/tsafe) it you want to learn more.
We're building an OSS library to embed executable code snippets on your site!
Tags: news, github, hacktoberfest
Published: 2021-09-29 15:27:15

Hey y'all! 

We're building an open-source tool which makes it easy to include executable code snippets on your site. 

Today we support:
- Python + basic scientific computing stack (numpy, pandas, etc)
- Typescript
- Python's w/ Matplotlib 

It's called [run-wasm](https://www.runwasm.com), it's free and open-source :) 

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pb6j09n1o95rr6v6w3an.png)

We're on a mission to build the best tools for sharing instructional programming knowledge and run-wasm is just one small step in that mission. 

We're leveraging existing WASM based versions of popular languages to execute code on the client. 

Today, there are tons of [really awesome WASM based languages](https://github.com/appcypher/awesome-wasm-langs), but most of them require a lot of configuring to use.

We're building an abstraction over these languages so that people can easily execute code in their projects via a simple api. 

If you're looking for something fun to work on for Hacktoberfest, we're going to add a lot of new issues for the month :) 

Can't wait to see what people build with it!
Funny Things as a Senior Software Engineer
Tags: webdev, machinelearning
Published: 2021-09-29 15:22:46

Learning less than Normal

This goes to people who have high egos when they get the position. Kindly, it’s just a privilege because you show a lot of skills. Both technical and non-technical are vital before you become a senior developer. Be humble. Learn more than junior devs. Dedicate your time to a lot of research. It’s better to have some knowledge of algorithms, libraries, and design patterns. 

Running Away from Minor Responsibility

It’s true, as a senior everyone looks what you gonna do. When you become a senior dev, it doesn’t mean you sit away from codes. What if something is difficult for your juniors? You must be there, write the code or do what you can to achieve it. Don’t give junior teams a difficult time when they try to reach out for help. Some seniors assume and avoid managing junior teams, it’s your job. You cannot learn from your minors if you can’t manage them.

Poor Planning – Avoiding Software Engineering Process

Please! Please, I believe any senior engineer knows the correct path to follow before programming. It’s called the software engineering process. Any computer science student was taught that in college, while the self-taught programmers I believe internet got every knowledge. Just plan your work well before allocating it to your junior teams. You must discuss with juniors the relative problems, then hear on both sides any possible solution.

*Googling is for Juniors

Stop calling yourself a hero, we all need stack overflow. Despite your ten years’ experience lol, there are problems you can’t fix. We need each other. Read the blog post, Quora, and any other important resource. Just as the Bible says, "Ask and you shall be given. The problem you are facing, someone has experienced, or if not then post it.

Prioritizing your designs and not the End-Users

Remember software development is just like any other manufacturing company. You need to bring out the product as required by the client. Stop implementing your things while avoiding the designs of your client. Yes, there is room for correcting your customer, but on most occasions maintain what he/she wants. Understand their needs and make the application as simple as possible.

To be Continued…..Part 3
A Go SDK that supports more than 500 LarkSuite/Feishu's open API
Published: 2021-09-29 15:22:12

The project address is: https://github.com/chyroc/lark

The project refers to the writing of gitlab's sdk, unified the writing of parameters and return values, and supports the processing of nearly 500 interfaces and 50 callback event types. Welcome to star.

The project was written 5 months ago, and it has developed freely until now. It has 70 stars and has ranked first under the topic of larksuite-sdk (https://github.com/topics/larksuite-sdk), so Send it to dev.to and introduce it to you in need.

LarkSuite(Non-China)/Feishu(China) has developed rapidly recently, and the number of open platform interfaces has been increasing rapidly. I manually maintained the sdk for a period of time before, but later found that manual maintenance was unrealistic. I changed the code to read the document and then automatically generated the code to maintain the sdk, which is this project.

Because it is an automatically generated relationship, it supports almost all interfaces, including contacts, messages, groups, calendars, documents, etc.

The following is a scene of creating a calendar to give a very simple and easy-to-use example of the sdk:

```go
package main

import (
	"context"
	"fmt"

	"github.com/chyroc/go-ptr"

	"github.com/chyroc/lark"
)

func example()  {
	cli := lark.New(lark.WithAppCredential("<APP_ID>", "<APP_SECRET>"))

	resp, _, err := cli.Calendar.CreateCalendar(ctx, &lark.CreateCalendarReq{
		Summary: ptr.String("<SUMMARY>"),
	})
	fmt.Println(resp, err)
}
```
How to get a YubiKey credential for shell scripts
Tags: programming, security, linux
Published: 2021-09-29 15:17:19

---
title: How to get a YubiKey credential for shell scripts
published: true
description: It's difficult to automate tasks that require a YubiKey credential.
tags: programming,security,linux
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/utwjits58pjyga2trknc.jpg
---
> Image by Soumil Kumar from Pexels

## tl;dr
The tl;dr is:

```shell
# read the YubiKey
echo "Press your YubiKey"
read -rs YUBIKEY
```

## What is a YubiKey?

A YubiKey is a device made by [Yubico](https://www.yubico.com/) intended as a form of [MFA](https://www.nist.gov/itl/applied-cybersecurity/tig/back-basics-multi-factor-authentication).

Generally, it's a USB device that is used to obtain access to sensitive resources.

## Scripting a YubiKey

Yubico provides a cli, [ykman](https://docs.yubico.com/software/yubikey/tools/ykman/Using_the_ykman_CLI.html), for the YubiKey. The intention of _ykman_ is to allow IT administrators to configure YubiKeys for their organizations. 

I thought that it would be cool to have some shell scripts around for common APIs within my organization, but some of these require a credential generated from my YubiKey. My logic was that perhaps _ykman_ could script the YubiKey credential generation for me.

I googled for an hour and only came up with a couple discussions about this. Unfortunately, one of them held some bad news:

> I don't think there is a way to programmatically get a YubiOTP from the YubiKey
> <small>from discussion on [ykman issue 400](https://giters.com/Yubico/yubikey-manager/issues/400?amp=1)<small>

## The solution

The solution is a quick-and-dirty "silent read" from the terminal:

```shell
# read the YubiKey
echo "Press your YubiKey"
read -rs YUBIKEY
echo "Thank you"
```

I thought I'd post that in case someone else goes searching for it in the future.