teleren/devto huggingface dataset:
Creating trigger functions with Supabase
Tags: sql, tutorial, postgres, react
Published: 2022-04-18 13:11:56

One of the really interesting products, I've tried recently is [supabase](https://supabase.com/). It allows to create a backend for a react app with Postgresql as a database in a few minutes. 

One of the most powerful features of Supabase is that it allows to use advanced Postgresql capabilities in a very easy way. 

For instance, I needed to produce a table with aggregated statistics from another table, and update the aggregated stats on every data change. We often need this aggregated state of the data for analytics and charts. 

![pie chart](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ph9e4i64049x15zt0b3r.png)

To do this, we will use postgresql triggers in order to subscribe for particular events, like records `update`, `insert` and `delete`. 

This capability is available in a Supabase -> Database section. 

First, we need to create a function, that will fire off on any changes in the table. To do so, go to Database -> Functions -> Create a new function. 

The return type of the function would be `trigger`. 

![creating supabase function](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z0awla7e11tj2st5u7mp.png)

The function I use creates an aggregated statistics from the funding table, resulting in amount of startup funding generated by country and industry type. 

```sql
begin
  insert into public.investment_industry_country(industry_id, country_id, total_usd)
  SELECT 
  s.industry, 
  s.startup_hq, 
  SUM(f.amount_usd) AS ku
FROM public.startups s 
LEFT JOIN public.funding f 
  ON s.id = f.startup_id
GROUP BY 
  s.industry, 
  s.startup_hq

on conflict(industry_id, country_id) 
do update set total_usd = EXCLUDED.total_usd;
return null;
end;
```

Also, as this function should have access to our tables, we need to set it up as a security definer. 

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

To make use of this function, we need to set up an actual trigger via Database -> Triggers -> Create a new trigger. 

After we gave a name to the trigger, and assigned a table it will keep track of, we can select what types of events we are interested in. As I want an aggregated view, I selected all types of data changes - `create`, `update` and `delete`. 

![supabase triggers](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2sstuop8v2c78hqnsftw.png)

Then, we could select a function we've created earlier, which would run after table changes. 

![supabase trigger select a function](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xh8hxu54cfgro2km7cnv.png)

Once we click "confirm" the trigger is ready and the work of creating table for analytics is automated.  

Here is how using extended supabase backend, we've created an aggregated table, that allows to produce some charts and statistics. Supabase makes it quite easy to utilise advanced Supabase capabilities and extend the database functionality.
002 NextUI Avatar
Tags: javascript, nextjs, nextui
Published: 2022-04-18 13:10:29

```
import { Grid, Avatar } from '@nextui-org/react';
export default function App() {
    return (
      <Grid.Container gap={2}>
        <Grid>
          <Avatar 
            squared 
            src="https://i.pravatar.cc/150?u=a042581f4e29026024d" />
        </Grid>
        <Grid>
          <Avatar 
            squared 
            text="Junior" />
        </Grid>
        <Grid>
          <Avatar 
            squared 
            src="https://i.pravatar.cc/150?u=a042581f4e29026704d" />
        </Grid>
        <Grid>
          <Avatar 
            squared 
            text="Jane" />
        </Grid>
        <Grid>
          <Avatar 
            squared 
            src="https://i.pravatar.cc/150?u=a04258114e29026702d" />
        </Grid>
        <Grid>
          <Avatar 
            squared 
            text="Joe" />
        </Grid>
        <Grid>
        <Avatar text="JR" size="xs" />
      </Grid>
      <Grid>
        <Avatar
          src="https://i.pravatar.cc/150?u=a042581f4e29026024d"
          size="sm"
        />
      </Grid>
      <Grid>
        <Avatar text="Joe" size="md" />
      </Grid>
      <Grid>
        <Avatar
          src="https://i.pravatar.cc/150?u=a042581f4e29026704d"
          size="lg"
        />
      </Grid>
      <Grid>
        <Avatar text="John" size="xl" />
      </Grid>
      <Grid>
        <Avatar
          src="https://i.pravatar.cc/150?u=a04258114e29026702d"
          css={{ size: "$20" }}
        />
      </Grid>
      </Grid.Container>
    );
  }
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/34q2y5fxb7nlm41ukim3.png)
What is NPM?
Tags: npm, node, beginners, learning
Published: 2022-04-18 12:52:42

Starting out in my JavaScript journey there were a few things I was told to just "accept" and not worry about how they work. There are plenty of processes and moving parts when writing code and one that I never quite understood was NPM. NPM stands for Node Package Manager, and is used in a few ways. NPM provides an online database of 'packages' or JavaScript tools that can be published by anyone and used in your projects. On top of being an online database, NPM is also a command line tool used to interact with that database and install/manage the packages you install from the database!

## What is a package, though?

![packages](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x3wg64fvbmnjknij58k9.jpg)
Think of packages like the brick and mortar of your applications. You can install and combine multiple packages together in order to create the most efficient program for your end users and all those packages are easily maintained by NPM. The NPM database helps keep all your packages up to date by allowing the packages to be managed and updated by their publishers and other developers. Whenever an update or improvement is made to a package and uploaded to NPM's database, all users who currently use that package can easily fetch those updates from the server and always keep their packages up to date. NPM also helps handle package dependencies.

## What is a dependency?
Some packages are built directly upon other packages in NPM and 'depend' on them to function properly; these relationships are called dependencies. Dependencies would typically cause problems when trying to use different packages, but NPM handles all the hard work for you. When installing packages through NPM the service will automatically search for and install all required dependencies for any packages you're attempting to use/install. 

## In conclusion:
NPM is a wonderful tool for developers to not only share reusable code, but to keep that code updated and working for all future projects. There are hundreds of packages to chooses from and plenty that can be built and expanded upon. Who knows, maybe one day you'll be posting and updating a package of your own for the world to use!

![library](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/raduus03on2iwdu3gfr5.jpg)
A few of the most popular libraries (in no particular order, just ones I'd heard of or used before) are:
**jQuery:** a small and fast feature-rich JavaScript library making HTML document traversal, manipulation, and event handling much easier.
**Express:** noted as one of the best NPM packages offering a server framework for web applications.
**Lodash:** A particularly useful tool, especially when working with lots of numbers or arrays. Makes the creation of complex functions much easier.
**React:** a declarative, efficient, and flexible JavaScript library for building user interfaces.
We look into Ceph erasure coding
Published: 2022-04-18 12:43:22

---
title: We look into Ceph erasure coding
published: true
description: In this video, we look into Ceph erasure coding. This is a feature where you can use more of the available space in your cluster without losing too much redundancy. It's more complex and gives you the option to have more or less safety.
tags:
cover_image: https://i.ytimg.com/vi/nVxZcWvTI5M/maxresdefault.jpg
---

{% youtube nVxZcWvTI5M %}

In this video, we look into Ceph erasure coding. This is a feature where you can use more of the available space in your cluster without losing too much redundancy. It's more complex and gives you the option to have more or less safety.
We look into analytics with Plausible
Published: 2022-04-18 12:43:07

---
title: We look into analytics with Plausible
published: true
description: We install plausible and test how the analytics with plausible works. We read the code and try to understand what kind of features are available and look at how to integrate them into your site.
tags:
cover_image: https://i.ytimg.com/vi/miTtaTvJlgI/maxresdefault.jpg
---

{% youtube miTtaTvJlgI %}

We install plausible and test how the analytics with plausible works. We read the code and try to understand what kind of features are available and look at how to integrate them into your site.
把md檔變成Medium文章
Tags: md, medium
Published: 2022-04-18 12:39:10

- 訂閱patreon即可看到更多文章 https://www.patreon.com/wade3c
- 會員文章列表 https://coda.io/d/YT-channel_dLrb0LRX0xj/Patreon_supr9#_lu-tL
- 公開文章列表 https://coda.io/d/YT-channel_dLrb0LRX0xj/Patreon_sucfV#_luJfw
- Youtube頻道 https://www.youtube.com/c/增廣建文
- 粉專 https://www.facebook.com/wade3c/
- GitHub https://github.com/johnny12150
- Digital Ocean推薦連結 https://m.do.co/c/1edcf7d6c08e
- Linode推薦碼 https://linode.gvw92c.net/a19zeW

---

由於Medium不支援直接用markdown輸入文章實在很頭痛

Google了一番發現目前網路上的自動轉工具幾乎都需要登入你的GitHub帳號，因為他會幫你把code-block自動轉成gist

但是這個作法除了不是很安全外，他還會把你的gist變的亂七八糟，每一個code-block都會獨立新增一個gist

這是我目前在GitHub上找到唯一一個不會自動轉成gist的專案，在多數情況下使用起來還算方便

> [https://github.com/fanderzon/markdown-to-medium-tool](https://github.com/fanderzon/markdown-to-medium-tool)

但是他在處理heading還有code-block有時候會跑版 (Medium在這兩部份都有改版過)

這導致我每次都到Medium後都還要手動調整，所以就想來自己找一套更方便的workflow

這時突然想到很久以前有看過一個叫`medium-editor-markdown的`專案

他支援了把Medium的文章轉成md的功能，但是不能反過來使用

突發奇想如果我們要借助這個套件把md轉成Medium格式

或許可以先把md先轉成html，再把html給塞進這個專案

`medium-editor-markdown`這個專案使用到的是turndown.js與medium-editor這兩個套件

前者負責把md轉成html，後者負責顯示html成Medium Style

實際的改造作法就會如下：

## Step 1. MD -> HTML

這裡可以用之前分享過的marked.js專案或是上面提到的turndown.js，都能輕鬆且快速的把md轉成html

如果不想安裝套件去轉，可以直接使用marked.js的demo網頁版來轉

> [https://marked.js.org/demo/](https://marked.js.org/demo/)

![image.png](https://res.craft.do/user/full/71bea674-0503-893e-0a7a-91e236797ff9/doc/11b8c26d-6322-4827-a886-c275ef54d46d/354367c3-a3ae-4219-9fcf-52dcc449f488)

如果你用的是macOS，還有`marked 2`這個App可以協助你快速取得Html

![Image.png](https://res.craft.do/user/full/71bea674-0503-893e-0a7a-91e236797ff9/doc/11b8c26d-6322-4827-a886-c275ef54d46d/3D1D4D53-0D86-4FE0-BEE4-F7EA882B27C5_2/lx6Vi33FpTOMx0YtyGsp8QxDKXzpckVFBDEWzajmzeMz/Image.png)

## Step 2.HTML -> Medium

再來只要把剛剛拿到的HTML給貼到這個專案中的`index.html` 內的`editor class`下的`left class`裡面就好 (要覆蓋掉原本的內容)

![image.png](https://res.craft.do/user/full/71bea674-0503-893e-0a7a-91e236797ff9/doc/11b8c26d-6322-4827-a886-c275ef54d46d/652c4128-e4fd-4536-a3dd-fa6f54277ff3)

開啟這個專案的網頁之後，畫面左側就會顯示Medium形式的內容

![image.png](https://res.craft.do/user/full/71bea674-0503-893e-0a7a-91e236797ff9/doc/11b8c26d-6322-4827-a886-c275ef54d46d/94c821e0-3842-499d-aaf3-a3541561c7ff)

有些不支援的寫法就會像上圖一樣跑版

把左側的Medium Style內容複製起來直接貼去Medium就能發文了

> 轉出的code-block內不會有syntax highlight是正常的，因為Medium本身就不支援

底下就是實際貼到Medium上的成果

## All-in-one Site

最後為了方便日後在ithelp和Medium都能發表一致的文章，我有把它包成一個完整的服務

這個服務是Patreon會員限定的，有興趣可以到我的patreon查看
> https://www.patreon.com/wade3c


----

## Reference

[GitHub - IonicaBizau/medium-editor-markdown: A Medium Editor extension to add markdown support.](https://github.com/IonicaBizau/medium-editor-markdown)
Diary of a programmer #1 - Making contact
Tags: relationship, devjournal, programming, career
Published: 2022-04-18 12:34:00

This is the first article of one series called "Diary of a programmer", where I pretend to write about the problems, challenges, happiness, and atomic bombs of every day of a common software developer.

In this article, I will talk a little about communication in the workplace. Make no mistake if you think this is a trivial matter, a lot of time can be saved by a simple well-written message.

Something I still haven't been able to understand is why people simply text with a short, cryptic "Good morning", with no other words, just a "Good morning". 

Every time I get this I keep thinking about what she wants me to answer back, maybe another "Good morning" or maybe "Hello, what do you need?" or maybe "I know! You're in some captivity and the only thing you managed to write without the kidnapper noticing was this? Right?".

If you, like me, use some chat software for communication at work, you've probably already received several of these enigmatic contact codes. When you open the message, you realize that the person on the other end is typing and then your mind teleports to another universe, and you can't think which of the thousands of possibilities the next message will be.

What I want to say here is that, at least for me, it's very annoying and unpleasant to receive hundreds of messages with few words, many times I'm coming up with a new logic to solve that performance problem and out of nowhere those shattered messages appear just to disturb my thinking.

I think on-boarding processes should address this issue, remote work is a global reality and the need for written communication is increasingly common, so why not invest a little time in teaching new team members how to send intelligent and effective messages? 

Imagine the team level where all members write effectively. The book "The Passionate Programmer" by Chad Fowler, addresses this issue and asks an interesting question about it: How can we consider that a programmer will do a good job in the code expressing his idea to solve a problem if he can't communicate properly with team members?

Maybe you think it's a little too much to demand from a programmer that, in addition to clean code, he needs to write clean messages, but the truth is that clean code is not written for machines to understand better, but for other humans to have a clear view of the subject when carrying out eventual code maintenance.

In the same way, clear and well-detailed messages can save the recipient a great deal of time. 

So when you send a message, try to detail as much as possible, write the traditional and indispensable "Good morning" but also take advantage of the thousands of characters available to detail the reason for the contact, try to make the receiver aware of why you are distracting him. 

If you disagree or agree with what has been said, please leave your opinion in the comments.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hhafrry5t57iod9qb8if.png)
Image by [Canva](https://www.canva.com/)
Building a Product Website with HTML and TailwindCSS
Tags: tailwindcss, html, webdev, beginners
Published: 2022-04-18 12:21:35

I will be building a basic Product Website with HTML and TailwindCSS. I will also be using a tool called Astro (https://astro.build/) which is a modern static site builder.

If your looking to try out Astro check out the documentation here (https://docs.astro.build/en/getting-started/)

Steps on completing the project

1. Before I started on my project I had to make sure that Node.JS was installed. This is the link i used to download Node.JS for the operating system that I was using https://nodejs.org/en/

2. I had to create the folder where I'm going to store my project. After that I opened my favorite IDE which is VSCode and opened the terminal. 

3. I used the Astro documentation to get Astro set up in my development environment. It is also helpful to actually download the Astro extension on visual studio code as well.
Here is the documentation of getting started with astro https://docs.astro.build/en/getting-started/

4. After setting up Astro I had to add tailwindCSS to Astro. The command to run to add tailwind is `npx astro add tailwind`. After that you will need to run `npm run dev` again. There you should see the tailwind effects on the website.

Adding Top Menu and Footer

I added a nav-bar with anchor tags from the navigation on top of my header of the page. I also added a footer to my page as well.


Adding a section regarding the product

Next I have added a section where I can talk more about the product. I used a grid column with TailwindCSS properties to add the columns on the page.


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


Added a Pricing section

I added a pricing.astro page to discuss the pricing plans of
the product.


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

Added a Blog Section

Last I added a mini blog section to talk about recent updates to the product.


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


This is only Part 1 of the project. Next I will add some functionality (JavaScript) to the Landing Page to make it stand out more. Stay Tune
Python Decorators 201
Tags: python, beginners, programming
Published: 2022-04-18 12:16:07

In the previous article [Python decorators 101](https://sureshdsk.dev/python-decorators-101) we learnt, how to create a simple function based decorator and how it works under the hood. In this article, we will improve the traceability and the readability of the decorator function. 

Let's add some docstrings to our code. A docstring is a string literal that is written as the first statement in a module, function, class, or method definition. It becomes the __doc__ special attribute of that object. docstring acts a a built-in documentation.

```python

def hello_decorator(func):
    """Simple decorator function"""

    def wrapper(*args, **kwargs):
        """Simple decorator wrapper function"""
        result = func(*args, **kwargs)
        return result

    return wrapper


@hello_decorator
def add(a, b):
    """Simple function that returns sum of two numbers"""
    return a + b


@hello_decorator
def multiply(a, b):
    """Simple function that returns multiplication of two numbers"""
    return a * b


if __name__ == '__main__':

    help(add)

    print(add.__name__)
    print(add.__doc__)
```

### Output
```
Help on function wrapper in module __main__:

wrapper(*args, **kwargs)
    Simple decorator wrapper function

wrapper
Simple decorator wrapper function

```

As you notice that, help and doc string of add function returns the doc string from the decorator wrapper function. This is not good for readability and IDEs will show wrong definition and signature of the decorated function. we don't want this to happen. Lets see how we can fix this,

## Fix decorated function docs using functools
```python
from functools import wraps


def hello_decorator(func):
    """Simple decorator function"""

    @wraps(func)
    def wrapper(*args, **kwargs):
        """Simple decorator wrapper function"""
        result = func(*args, **kwargs)
        return result

    return wrapper


@hello_decorator
def add(a, b):
    """Simple function that returns sum of two numbers"""
    return a + b


@hello_decorator
def multiply(a, b):
    """Simple function that returns multiplication of two numbers"""
    return a * b


if __name__ == '__main__':

    help(add)

    print(add.__name__)
    print(add.__doc__)

    output1 = add(2, 2)
    print('Result:: ', output1)

    print("=" * 25)
    help(multiply)
    print(multiply.__name__)
    print(multiply.__doc__)
    output2 = multiply(4, 2)
    print('Result:: ', output2)

```

`@wraps` function tracks both original function and decorator function and fixes the doc string properly.


In the next article, we will implement various kinds decorator recipes. Stay tuned for upcoming articles. Connect with me on [twitter](https://twitter.com/sureshdsk) to get my future articles.
How To Create A Header / Banner in HTML & CSS
Tags: html, css, programming, tutorial
Published: 2022-04-18 12:13:38

---
canonical_url: https://softauthor.com/html-css-create-a-simple-header-banner/
---

In this article, you’re going to learn how to design a simple header in CSS for your website using the traditional approach as well as the flexbox approach.

HTML

```HTML
<section class="header">
    <h1>Company Name</h1>
    <p>Company Mission Statement goes here</p>
    <a class="btn-bgstroke">Call To Action</a>
</section>
```

The HTML code above has a section container with a class name header and it has three children that are **h1**, **p** and **a** respectively.

Pretty straight forward!

![alt text](https://softauthor.com/wp-content/uploads/2020/04/create-a-banner-hero-unit-html-only-1.png)

CSS

```CSS
@import url(https://fonts.googleapis.com/css?family=Lato:400,300,100,700,900);

h1,
p,
a{
  margin: 0;
  padding: 0;
  font-family: 'Lato';
}

h1 {
  font-size: 2.8em;
  padding: 10px 0;
  font-weight: 800;
}

p {
  font-size: 1.1em;
  font-weight: 100;
  letter-spacing: 5px;
}

.header {
  width: 100%;
  padding:60px 0;
  text-align: center;
  background: #33cccc;
  color: white;
}


.btn-bgstroke {
  font-size: 20px;
  display: inline-block;
  border: 1px solid white;
  padding: 10px 20px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 300;
  margin-top: 30px; 
}

.btn-bgstroke:hover {
  background-color: white;
  color: #33cccc;
}
```

As you can see the CSS is pretty straight forward.

I used text-align: center rule to the .header class to make the inner elements center horizontally.

To center the elements vertically, I gave top and bottom paddings to the .header class as well.

This is better than giving a fixed height so that the outer container can grow vertically as the content of the inner elements grow.

![alt text](https://softauthor.com/wp-content/uploads/2020/04/create-a-banner-hero-unit-in-css-1.png)
Sincronizador de productos: Classicges con PrestaShop
Published: 2022-04-18 11:21:00

¿Todavía subes tus productos a la web a mano? ¿No tienes un stock actualizado de tu tienda física conforme al de la tienda online? Hoy ponemos fin a todo este tipo de problemas que pueden surgir con el stock y los productos de tu tienda online/física. Desde digitalDot proponemos una solución que unifique el programa Classicges y la plataforma PrestaShop con un desarrollo que permita una sincronización automática de los productos en todo momento. A continuación os damos una breve explicación sobre como funciona nuestro **[sincronizador de Prestashop con Classicges](https://www.digitaldot.es/conector-classicges-prestashop/)**.

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

Recuerda que en nuestra **[agencia de diseño web](https://www.digitaldot.es/diseno-web/)** también nos encargamos de que tu tienda online consiga llegar a una automatización de tareas que te quitan tu preciado tiempo para que lo dispongas y lo dediques en otras más importantes. Como Agencia partner de PrestaShop prestamos nuestros servicios de **[Mantenimiento web](https://www.digitaldot.es/mantenimiento-web/)** y **[diseño de tiendas online](https://www.digitaldot.es/diseno-web-digitaldot/)** dando a los usuarios de esta plataforma un servicio informático de calidad avalado por la propia.