teleren/devto huggingface dataset:
Build Your UI Faster With These FREE UI Kits!
Tags: webdev, uikits, programming, productivity
Published: 2021-12-16 08:42:06

Sometimes, as UI designers, it is asked of us to churn out quick and fast, decent UI designs, and the emergence of Tailwind CSS has already made our jobs easy. But it could be much easier if only we could use pre-built components to plug into our code.

So here it is. I’ve done the hard work so _you_ don’t have to. Below is a compiled list of FREE UI Kits to help you achieve the completion of your project within a short time frame.

## 1. [Mamba UI](https://mambaui.com/)
Mamba UI provides various open-source collections of beautiful UI elements to help make your website in minutes for free. 

## 2. [Tailblocks ](https://tailblocks.cc/)
Tailblocks contains 60+ codeblocks that are responsive, have different color variations, and supports dark mode. 

## 3. [Kimia UI](https://kimia-ui.vercel.app/)
Kimia gives you customizable UI kits that are compatible with Gatsby, Next.js, and create-react-app. You just have to copy and paste the component you want to use. 

## 4. [Tailwind UI Kit](https://tailwinduikit.com/)
This Kit gives you 250+ free tailwindcss components with 30+ templates, all compatible with React, Angular, and VueJS. 

## 5. [Tail-Kit](https://www.tailwind-kit.com/)
Tail-Kit gives you 250 components and templates. It is also compatible with React, VueJS, and Angular. 

## 6. [Meraki UI](https://merakiui.com/)
Offers decent tailwindcss components that support RTL languages, and is fully responsive via Flexbox and CSS Grid. 

## 7. [Salvia Kit](https://www.salvia-kit.com/)
This kit is fully customizable, containing 4 variants: create-react-app, Next.js, Vue, Next.


So, yes. For your many thanks and appreciation gifts, you can post them all to 221B, Baker Street, and I’ll be there to receive them all with open arms. Until next time, fellow devs!


![happy coding](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3fdv4dnd9nd7yvdlj7r6.gif)
[_that's me btw, after making my life easy with UI kits lol_]
My street life
Tags: html, javascript, webdev
Published: 2021-12-16 08:38:54


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wyjvosox6ii554dhfuwe.jpg)
**"When the devil wants to dance with you, you better say NEVER,
Cuz' a dance with the devil might last you forever."**
Cassette: Structured async meetings for remote teams. 
Tags: meeting, async
Published: 2021-12-16 08:36:59

**Cassette** is a free multiplatform app created to disrupt the broken meeting culture using voice notes. We believe that asynchronous work should unlock your schedule and bring back your own time. **Cassette provides you an easy way to produce voice messages and consume them efficiently**. It enhances meetings by adding structure such as agenda, due date and reactions.

We are releasing our first public version and we are looking forward to having you and your teammates onboard. We have been using Cassette during the last months and have replaced ALL our reporting meetings (daily standups, weekly sync, status report …) so we have unlocked our time to have more focus and be more productive. Now we also do more in-call time for informal talks and team building. 

[Download](http://cassetteapp.com/?utm_source=devto&utm_medium=post&utm_campaign=launch-v1)

We hope you like it.
How could I add regex (regular expression) support to ParseJS using my current method of finding tokens?
Tags: javascript, webdev, help, watercooler
Published: 2021-12-16 08:24:11

So, ParseJS is a tokenization library I made for JavaScript.
It's core feature is to sort a string into an array of characters (`string`s whose length is strictly limited to one (1)) and symbols, where each symbol is a stand-in for a token. (Tokens are `symbol`s so you can easily tell between a token and a character.)

Anyways. Where am I going with this?
Well, ParseJS is _**good**_, but it's not _**great**_.  

You can statically parse tokens, like so:
```javascript
// Parameters: (str:string, toks:string[])
parse_string("test12 test1 test2 test", [
  "test",
  "test1",
  "test12",
  "test2"
]);
```
and it will reliably produce:
```javascript
[
  Symbol.for(test12),
  ' ',
  Symbol.for(test1),
  ' ',
  Symbol.for(test2),
  ' ',
  Symbol.for(test)
]
```

BUT- there is no way of creating abstract groups of tokens (e.g. like how variable names can be practically anything, but the language doesn't name them for you).

<hr/>
- What I have: 
```javascript
parse_string("class Test: end", [
  "class",
  ':',
  "end"
]);
// -> [Sym(class), ' ', 'T', 'e', ..., Sym(:), ...]
```
- What I want: 
```javascript
parse_string("class Test: end", [
  "class",
  ':',
  "end",
  /[^0-9\W]\w+]/ // 'g' flag added automatically.
]);
// -> [Sym(class), ' ', Sym(Test), Sym(:), ' ', Sym(end)]
```
<hr/>

The goal: 
 - Add regex support to allow abstract token groups to exist.

How I find tokens:
 - Loop through each string in `toks` and collect the first character of each string in `epl`.
 - Loop through each character of `str` as `c`, and if `c` is in `epl`, slice the next few characters ahead to see if a valid keyword exists.

The challenge(s):
 - Unlike strings, the length that a regex represents can be variable and would need to be computed.
 - The way I check for tokens is by seeing if the character of a keyword exists. \- But, I can't exactly do that, since there's no subscript operator, or way to get the character (or potential characters) in a regex.
 - I slice the substring to test based on the length of the keywords that exist. But, since I can't get the length(s) that a regex could be, I can't compute how big of a substring I need to slice to test.
Some method in PHP may work for you in your code
Tags: php, laravel, programming, beginners
Published: 2021-12-16 08:09:17

Let's start quickly with array_filter. I want to extract some results, let them be odd numbers, so what should I do
```php
function test_odd($var)
{
  return($var & 1);
}

$a1=array(1,3,2,3,4);
print_r(array_filter($a1,test_odd)); //Array ( [0] => 1 [1] => 3 [3] => 3 )
```
I want to do some arithmetic work on this array
```php
function myfunction($num)
{
  return($num*$num);
}

$a=array(1,2,3,4,5);
print_r(array_map(myfunction,$a)); //Array ( [0] => 1 [1] => 4 [2] => 9 [3] => 16 [4] => 25 )
```
I want to get the values ​​for the array only
```php
$a=array("Name"=>"Peter","Age"=>"41","Country"=>"USA");
print_r(array_values($a)); //Array ( [0] => Peter [1] => 41 [2] => USA )
```
I hope you enjoyed the code.
Cartoonize your images with CartoonGAN
Tags: machinelearning, opensource
Published: 2021-12-16 08:04:13

Cartoonizing images is now easier with CartoonGAN : https://huggingface.co/spaces/abhilash1910/CartoonGAN
Based on CVPR 2018 (http://openaccess.thecvf.com/content_cvpr_2018/papers/Chen_CartoonGAN_Generative_Adversarial_CVPR_2018_paper.pdf)
Youtube : https://youtu.be/PY7XJydYFaA

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2op7olmuho4qn0nk98pd.jpg)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jzkhk8gg23ysikhpffzw.jpg)
Native datetime formatter
Tags: codesnippet, node, datetime, intl
Published: 2021-12-16 07:47:12

---
title: Native datetime formatter
published: true
description: Simple native datetime formatter with Intl.DateTimeFormat
tags: codesnippet, node, datetime, intl
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j4fr5ai0s8nb3o4ewoe5.png
---

The simpler the better. Here's a dead simple date formatter snippet that works in all modern browsers as well as node apps.

```js
// define formatter
const locale = 'en-US';
const options = {
  year: 'numeric',
  month: 'short',
  day: 'numeric',
  hour: 'numeric',
  minute: '2-digit'
};
const formatter = new Intl.DateTimeFormat(locale, options);

// use
const date = new Date();
const formattedDate = formatter.format(date);
```

Typed version is also here:

{% gist https://gist.github.com/olegchursin/2b9d0718f3c1a5012335ac2a50326758.js %}


What's going on above? We grab the current date with `new Date()`, instantiate the formatter with `Intl.DateTimeFormat` providing the locale string and date format options object.

Tiny playground file:

`datetime-format.js`
```js
const date = new Date();
const locales = ['en-US', 'en-GB', 'en-CA'];
const options = {
  year: 'numeric',
  month: 'short',
  day: 'numeric',
  hour: 'numeric',
  minute: '2-digit'
};

for (let locale of locales) {
  const formatter = new Intl.DateTimeFormat(locale, options);
  const formattedDate = formatter.format(date);
  console.log(`formattedDate: ${locale} -->`, formattedDate);
}
```

Running it in node will produce the following result:

```bash
~/dev/node-playground » node datetime-format.js
formattedDate: en-US --> Dec 16, 2021, 2:28 AM
formattedDate: en-GB --> 16 Dec 2021, 2:28
formattedDate: en-CA --> Dec. 16, 2021, 2:28 a.m.
```

Sweet. No deps. Just using the platform.

---
More info on MDN: [DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat)
I just Callback to say: filter and map in PHP 🎶
Published: 2021-12-16 07:37:16

>**Just the Gist**  
>Yesterday the ghost of the present showed us some actual nice features. One of these were the first class function and how we could both assign functions to variables and also pass functions as arguments to other functions. Today we will see the latter in action when we pass some functions to `array_map` and `array_filter`. The function will be used as a *callback* to apply to each element of the array.  
  
Let's say we want to square all the numbers in an array. We can have a square function do this, by passing it into the `array_map` function. Let's have a look 👇  
```php
<?php 

$numbers = range(0, 5);

$square = function($n) {
    return $n * $n;
};

$squaredNumbers = array_map($square, $numbers);

var_dump($squaredNumbers);
/* Output:
array(6) {
  [0]=>
  int(0)
  [1]=>
  int(1)
  [2]=>
  int(4)
  [3]=>
  int(9)
  [4]=>
  int(16)
  [5]=>
  int(25)
}
*/
```
  
Now we can use the `array_filter` function to just get the even numbers. Here's how we can do that:  
```php
// ...the previous code as seen above. We have $squaredNumbers with same values.

$isEven = function($n) {
    return $n % 2 == 0;
};

$evenSquaredNumbers = array_filter($squaredNumbers, $isEven);

var_dump($evenSquaredNumbers);
/* Output: 
array(3) {
  [0]=>
  int(0)
  [2]=>
  int(4)
  [4]=>
  int(16)
}
*/
```
`array_filter` has successfully filtered out all the odd numbers. We are left with 3 elements in the array, however, you can see that it has preserved the respective indexes. In some cases, this may be what you want. But if we were to use a regular for-loop we might not get the result we are expecting. If we don't want the indexes preserved we can wrap the `array_filter` function in a `array_values` function, like this:  
```php
$evenSquaredNumbers = array_values(array_filter($squaredNumbers, $isEven));
```

## What about you?
Comment below and let us know what you think ✍

## Further Reading
* *First-class function* on Wikipedia: https://en.wikipedia.org/wiki/First-class_function
* *Callback* on Wikipedia: https://en.wikipedia.org/wiki/Callback_(computer_programming)
* *I Just Called to say I Love You* - Steview Wonder: https://www.youtube.com/watch?v=wyXNQiRCfRg
Magento 2 Xero Integration Extension
Tags: webdev, magento, extension, webdevlopment
Published: 2021-12-16 07:34:31

A simple and easy-to-use tool, [Magento 2 Xero Integration](https://marketplace.magento.com/fme-xero-integration.html) by FME extension lets you effectively manage all accounting data. This extension synchronizes data between Xero and Magento 2. This will automatically import order, customer, product, invoice and credit memo data into Xero. A success check is performed at the end. Xero Integration offers not only automatic data synchronization, but also manual data synchronization, allowing you to perform the process manually. 

You can optimize your sales and inventory records, sync your Magento Store and Xero accounts to sync purchases, invoices, credit notes, items and contacts. You can export transactions to Xero with  Magento Xero Integration extension in a few clicks and connect your online store with  accounting software in seconds. You can separately enable data updates for invoices, credit memos, items, and contacts. This way your financial information and business records will be as accurate as possible. Eliminate errors caused by human error by automatically entering data into the software and avoiding manual data entry.

Key Features

1. - Automated tracking of invoices and revenue
2. - Payment methods are synced with each invoice
3. - Taxes are imposed equally on purchased products
4. - Data sync between Magento 2 and Xero
5. - Xero invoice data can be imported into Magento 2
Truthy and Falsy Values in JavaScript
Tags: javascript, beginners, webdev, tutorial
Published: 2021-12-16 07:31:17

Before diving into truthy and falsy values, let us understand what  **boolean** data type is in JavaScript?

A JavaScript Boolean denotes one of two values: true or false.
For example,
![Boolean Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/atw8fymqrlpmy29wqqr5.png) 

Boolean() function can be used to find out if an expression (or a variable) is true or false.

Now let us know about truthy and falsy values.
### Falsy Values
- Falsy values are the values that are not actually false but will produce the result as false when converted into boolean.
- There are total 5 falsy values in JS - 0, undefined, NaN, null, '' .
![Falsy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uns116g6opvin7qe9a71.png)


### Truthy Values
- Truthy values are the values that are considered true when converted into Boolean.
- All values except `false, 0, undefined, NaN, null, ''` are truthy values.

![Truthy](https://cdn.hashnode.com/res/hashnode/image/upload/v1639635977300/Rn6O6etY6.png)


I hope you find this article simple and easy to understand JavaScript truthy and falsy values.
Make button transparent
Tags: webdev, beginners, css, tutorial
Published: 2021-12-16 07:24:45

Hello Everyone, In this post we're going to discuss How we can create a button with transparent background. Yesterday, I created a Linktree like website for my personal use. So, when I'm adding buttons to it, the button background was not looking cool. So, I decided to remove the background of buttons.

You can also check out my[ website](https://konnect-rohit.netlify.app/) for better understanding. 


![Final result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/83ybkmmuee62zw4rtdtc.png)

##HTML

HTML part is simple we just need a button.

##CSS

First of all we need to add a background image to our parent `<div>` (in my case it is `<body>`). Then `background-repeat:no-repeat` and `background-size:cover`. So, this makes sure that our background-image cover the whole `body` area.

Now, style the `button` 

```css
button{
background:transparent;
border:none;
}
``` 
So, when we set `background:transparent` the image that we used in`<body>` becomes visible through button but there is border around the button and we also remove it by using property `border:none`.

That's it for CSS part. We created our desired button. Now you can add some cool hover effect to make it more attractive(like neon effect).

If you love it♥ then show some love.
Product News | PolarDB-X Released on Alibaba Cloud
Tags: database, cloudnative, programming, distributedsystems
Published: 2021-12-16 07:19:56

PolarDB-X on Alibaba Cloud is an enhanced generation of Distributed Relational Database Service(DRDS). It's ideal for those who meet bottlenecks of single instance or single cluster, especially when the records of single table reaches 500,000 or plus that puts the production database on the line.

Comparing with its previous edition (DRDS), the followings make PolarDB-X a better product.
1> Shorter and simpler instance launch path
2> Easier compute and storage elasticity
3> More efficient O&M
4> Up to 40% performance enhancement
5> Better user experience, such as more options to create database

<img src="https://img.alicdn.com/imgextra/i4/O1CN01zgWSjl1onhzfAj1ZV_!!6000000005270-2-tps-2805-5613.png">

If you are interested in distribution technologies or have relative requirements, you are welcomed to start a free trial right away. Wanna know more about it? Check below.
[Start a PolarDB-X Free Trial >](https://www.alibabacloud.com/product/polardb-x#J_2609273090)
A11y tips: write a good title
Tags: a11y, tips, html
Published: 2021-12-16 07:11:26

When we navigate with a screen reader, the first thing that is announced is the `<title>` included within `<head>`. That is why it is very important to **make it descriptive of the content that the document includes**.

It is also advisable to **first provide the information that makes the `<title>` unique**. So being in a section, this is better ...

```
<title>Madrid - Wikipedia</title>
```

... that something like this ...

```
<title>Wikipedia - Madrid</title>
```

The user may already know that he is on Wikipedia, so **it is better to announce the specifics of that document first** so that he does not have to listen to the entire `<title>` before knowing exactly where it is.

In certain situations it is also convenient to **add extra information**, such as the number of search results or errors when submitting a form. For example:

```
<title>17 search results for madrid. Page 1 of 2 - Google</title>
```

Being the `<title>` an element that is very important for SEO, it can be tempting to fill it with words that help in the ranking of our content, but that will not help users. Think of the `<title>` as the business card of the document, try to **keep it as short as possible while offering the really useful information**.
How to Install Foxit PDF Reader on Ubuntu 21.04
Tags: ubuntu, linux, tutorial, tooling
Published: 2021-12-16 07:05:05

Foxit Reader is a free PDF reader, it is available in Windows, macOS, Android, IOS and more. Especial, Foxit Reader for Linux is one of the best PDF readers, which needs to be installed at first after installing any Linux distributions. Besides free versions, it also provides premium versions with many features, but for common demand, we can use the free version. This tutorial will introduce you to how to **install Foxit Reader on Linux**, especial Ubuntu 18.04, Ubuntu 21.04 or older. Let's go.

<div id="toc-post"></div>

## Which is Foxit Reader used for?

At the time I wrote this tutorial, Foxit Reader contains many features for Linux. These features include:

- Lightweight and quick
- Intuitive User Interface
- Comments support
- Multiple PDF documents support
- Protect PDF files
- Text search, page rotation
- Zoom in and out
- Annotate PDF support
- Print PDF documents
- Participate in a shared review

## Install Foxit PDF Reader on Ubuntu and other Linux distros

It is not a built-in application Linux. So that, in order to install Foxit PDF Reader on Ubuntu or on other Linux distributions, we need to follow these steps.

Read more: [Install Foxit PDF Reader on Ubuntu](https://linuxtus.com/install-foxit-reader-pdf-ubuntu/)
How the page load function works in Svelte / SvelteKit
Tags: svelte, javascript, webdev
Published: 2021-12-16 07:03:23

When starting off with SveltKit, I realized that somehow getting an url parameter into a page component wasn't super clear.

**The example**

Let's say you have a component `PostList.svelte` which holds some posts which you get from an external API and which you want to link to a url structure like `mydomain.com/blog/[id]` to show the detail of a blogpost.

Getting the `id` into the link inside the post loop is easy but then what?

First, let's create a Svelte file in `/src/routes/blog` named `[id].svelte`.

This tells SvelteKit that we have a template for `/blog/some_id` to use for our blog post detail.

Inside this Svelte file, we create the following code:

```
<script context="module">
  export async function load({page}) {
    const id = page.params.id;
    const url = `https://api.somedomain.tld/posts/${id}`;
    const res = await fetch(url);
    const product = await res.json();
    return {props: {post}}
  }
</script>

<script>
  export let post;
</script>

<h1>{post.title}</h1>
```

**What this does**

First, we tell Svelte that we need this JS to run first hand when we call the route, therefore the `context="module"` part.

Then, we create an `async` function `load` which gets the page from our requests - this holds the url params which we assign to a constant in the next line and use it to fetch the data from our API.

Once we've awaited the result we need to transform the resulting promise to json with `.json()` and return it as props for our Svelte component which then shows the post name in its headline.

This is just a quick and very basic example, more info on enriching your page components with `load()` functionality can be found in the Svelte docs at https://kit.svelte.dev/docs#loading
It's Prisma Time - Setup
Tags: javascript, typescript, database, orm
Published: 2021-12-16 07:03:17

Hi Guys,
welcome to the second article of this series.

Today I'll show you how to setup a project with Prisma.
This project in addition to prisma uses typescript, but let's start.

The first thing that you need to do is to initialize a folder as a node project. To do this you need to run the following command in your terminal. (I used yarn but if you prefer npm or something else feel free to use it)
```
yarn init -y
```
I suppose that if you are here you know what you did running this command.
We go on and add now to our workspace some dependencies using the next command.
```
yarn add -d typescript @types/node ts-node prisma
```
The first three dependencies are related to typescript and they are necessary to use typescript in our project, the last one is the [Prisma CLI](https://www.prisma.io/docs/reference/api-reference/command-reference). The Prisma CLI helps us to create, update or view our database, it is easy to use and it hasn't a lot of commands to remember. 
Now it's time to create our Prisma schema, for this series I decided to use SQLite as database service because it's the easiest to set up. Run the following command to generate the schema.
```
npx prisma init --datasource-provider sqlite
```
As you can see, this command created a file `schema.prisma` inside of the folder `prisma`.
In this file, you can see two sections: client and db.
The client section is used to identify the provider used to manage the connection with the source, whereas in the db section you can find the connection string to the database and the provider to identify the type of the source, in our case `SQLite`. 
The schema file is the single source of truth when we use Prisma, in this file, we add all the entities and all their relations. From this file, Prisma can generate our typescript types related to the entities and it can create our migration scripts to upgrade the schema of our source.
As you can see, the schema file needs to access an environment variable(DATABASE_URL), so to do this, it was created a file `.env` in the root of the project where inside we can find this variable.

The last thing I want to leave you today is related to the parameter `--datasource-provider` in the script. By default, if you don't pass this parameter the script uses PostgreSQL as database service, so if you need to use a different service you need to specify it using the `--datasource-provider` parameter.

I think this is all for today. In the next article we are going to create our first table with Prisma and we are going to start playing with this tool.

Ok guys, see you soon 👋


_You can find the code of this article [here](https://github.com/Puppo/it-s-prisma-time/tree/02-setup)_