teleren/devto huggingface dataset:
What the heck is Tailwind CSS and should I use it?
Tags: webdev, css, tailwindcss, react
Published: 2023-01-22 23:27:10

Before I started at Flatiron School, I had to learn three different programming languages, JavaScript, HTML, and (my least favorite) CSS. I _hate_ working with CSS, it's super annoying, naming classes is hard, and I always end up with a really ugly and bloated css file at the end of a project. There was no way I could possibly keep working with it, so I decided to go out and find a better way. While there are a lot of CSS frameworks out there that could solve this problem, today I'll be writing about one I've been messing with - Tailwind.

On the [official Tailwind website](https://tailwindcss.com/) they describe the framework as "a utility-first CSS framework" that you can use "directly in your markup". After I read a little bit and watched a couple of videos, I knew that I had to give this a shot. Tailwind offers a lot of customization with lots of pre-built utility classes, which would make your HTML look something like this; `<h1 class="text-green bg-gray-100 font-mono">Hello world!</h1>`. This doesn't produce anything super detailed, just green text with a gray background in a monospaced font.

Now you may be asking yourself "Chase, is this amazing framework compatible with a component-based JavaScript framework? How about React?" The answer is yes, I'll even walk you through a quick installation guide (that can also be found [here](https://tailwindcss.com/docs/guides/create-react-app)).

First, using create-react-app, you want to create a new React app like so `npx create-react-app tailwind-project`

Next, change into your new project directory and install TailwindCSS using the following command `npm install -D tailwindcss`

Now that we have Tailwind installed, we need to initialize the configuration file with `npx tailwindcss init`

Navigate into the new file called tailwind.config.js and make the following changes:

![making changes in our tailwind config file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6bdv87ay258fcq21sgd3.png)

Finally, navigate into your index.css file and make these changes as well: 

![making changes in index.css](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q72c24jrxzz28zyi0qwt.png)

And next time you use `npm run start`, you can make your new project beautiful with the power of Tailwind! Hooray! Here's a little example of a hello world item in Tailwind and the code that goes along with it.

![tailwind hello world example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zedgn0dkgnh52sir9ay9.png)

![tailwind hello world code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m32ebtb8mikt2cs7ctsi.png)
Deploy Shopify Apps to Northflank
Published: 2023-01-22 23:20:19

If you develop custom shopify apps and search for a option to host your apps for your different environments. I can only recommend having a look at [northflank.com](northflank.com).

With Heroku canceling all free plans, Northflank comes with a great developer experience and allows to start free and scale up as your app grows.

At the Northflank blog, you can find some features they provide (more here https://northflank.com/blog/hosting-a-shopify-application-on-northflank).

The blog does provide the features, but unfortunately it's not a tutorial. As lot of posts regarding shopify are not up-to-date, i document my steps here :)

### Setup

Fresh Shopfiy app with NodeJS, created by the shopify-cli. Shopify does create an app for you within Shopify and does update the client-id + secret when you start the app.

If you want to have different app-environments, best just create another app in Shopify partner portal for using it within Northflank.

You can open a free account at Northflank, this provides you with all resources for starting your app.

### Deploy to Northflank

Luckily Shopify does create already an Dockerfile for you, in Northflank go and import your Github Repo with your Shopify app, within the setup process you can select the Docker setup, Northflank setups and detect the necessary configs automatically. You only need to check that your fresh container is public available!

The standard Shopify app does some black magic in the background and uses some env-variables out of the box. You have to setup Northflank correctly here.

#### 1. Container build arguments

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


#### 2. Container enviroment

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


#### 3. Shopify app setup url 


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



And you are good to go with your running staging setup!

If you have any questions, just drop me a msg

cheers
AWS Lambda features #1: Event-driven workflows
Tags: aws, lambda, serverless, eventdriven
Published: 2023-01-22 22:52:15

In this series we will talk about the features that come from  AWS Lambda. In this first article we will cover one of the feature of Lambda - event-driven workflows. 

Before serverless, when the servers wanted to respond to e.i. API call it was necessary that the server was listening on a particular port every minute of a year for a request. Lambda is not doing that. 

The new approach that Lambda is bringing is based on event - driven workflow. The Lambda function is invoked by Lambda service when some event happens. 

There is a lot of services that Lambda can be awaiting the event from. It could be for example Dynamo DB, Amazon S3 or API gateway. For the specific event for example -> there could be a file upload to Amazon S3 which can trigger the invoke of a Lambda function. It could be also a Dynamo DB table update or API call and many more.


![Event-driven feature of Lambda](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bazx1x2ijr1rjk2yw340.png)

As described above and on the image. Firstly there should be an event source -> which invokes the lambda and then the code within lambda is executed. There is a result from it which can also continue to some of the other AWS services. 

Let's describe some [use case examples from AWS website.](https://docs.aws.amazon.com/lambda/latest/dg/applications-usecases.html)

1. File processing
![File processing example from AWS website](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h8apa33hxr00d6b1tium.png)

2. Website
Let's say there is a calculator for exchange rates. After entering the from, to amount and the currencies we hit Convert button and there is a request made to an endpoint which route the request to Lambda -> then the result is calculated by lambda and give back the result.

![Website example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bz1ibcgg629ji7j41y5l.png)



There are lot of other services that can be taken as the event source that will invoke the Lambda function. Find more information on AWS website in this article -> [Using AWS Lambda with other services](https://docs.aws.amazon.com/lambda/latest/dg/lambda-services.html)

FOLLOW [tellitwithcode](https://www.instagram.com/tellitwithcode/) on Instagram


Sources:
[Introduction to AWS Lambda & Serverless Applications](https://www.youtube.com/watch?v=EBSdyoO3goc)

[Serverless 101: AWS Lambda](https://www.youtube.com/watch?v=GEABePyhFPA)

[Common Lambda application types and use cases](https://docs.aws.amazon.com/lambda/latest/dg/applications-usecases.html)
DNS Basics Explained
Tags: dns, networking, infographics
Published: 2023-01-22 22:50:27

---
title: DNS Basics Explained
published: true
description: New series of funny pictures explaining basics of DNS
tags: DNS, networking, infographics
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ywdj76ptrp6gc9g5hq3j.png
# Use a ratio of 100:42 for best results.
published_at: current
---

Another series of funny pictures explaining very basics of how DNS works. Enjoy!
Let me know in the comments if you find this format enjoyable and informative.

![DNS picture 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zabjmm23n0m8e3s7gf2i.png)
![DNS picture 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3rpdr05pajiqqxbdaave.png)
![DNS picture 3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w0sfhb81t5k5txt73k6l.png)
![DNS picture 4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xs6vtqw3o7yowwd1wwwv.png)
![DNS picture 5](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1b0khsi4nc5fqqoeixh7.png)
![DNS picture 6](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bjp59vre0d0cqmy4pbyb.png)
![DNS picture 7](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a56u6zyrb3f0yssfvigv.png)
![DNS picture 8](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cetjmr1prwevlc7p29wd.png)
Create Nice-looking Schema Diagrams in PlantUML
Tags: database, plantuml
Published: 2023-01-22 22:37:33

---
title: Create Nice-looking Schema Diagrams in PlantUML
published: true
description: 
tags: database, plantuml
---

[PlantUML](https://plantuml.com/) is a descriptive language to generate a number of types of software diagrams, such as sequence, class, deployment and state diagrams, and many others. PlantUML does not generate very good-looking schema diagrams out of the box, but it supports themes and preprocessed macros. If you use themes and macros, you can not only use a simplified syntax, but also generate beautiful diagrams. 

Here is an example of a PlantUML schema diagram, and we will build up the code to generate it.

![Schema diagram](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1wxlre7honzzrk3zxpa3.jpg)

To start, describe your schemas, tables and columns using this syntax as an example. 

```
$schema("PUBLISHER_SALES", "id_7f7f6c20") {

  $table("SALES", "id_751e68cc") {
    $column("POSTALCODE"): VARCHAR NOT NULL
    $column("COUNTRY"): VARCHAR NOT NULL
    $fk("BOOKID"): INTEGER
    $fk("COUPON_ID"): INTEGER
    $column("PERIODENDDATE"): DATE
    $column("TOTALAMOUNT"): DOUBLE
  }

}
```

You can pick any id, as long as it is unique across the diagram. This will allow you to have tables with the same name in different schemas.

Then, using those ids, you can define foreign key relationships like this:

```
id_208b5502.id_f521e766::ID  ||--o{ id_208b5502.id_ead84c5d::AUTHORID : FK_AUTHOR
```

The secret sauce to this meta-language is in the file header, and it looks like this:

```
!theme plain
hide empty methods

!procedure $schema($name, $slug)
package "$name" as $slug <<Rectangle>>
!endprocedure

!procedure $table($name, $slug)
entity "<b>$name</b>" as $slug << (T, Orange) table >>
!endprocedure

!procedure $view($name, $slug)
entity "<b>$name</b>" as $slug << (V, Aquamarine) view >>
!endprocedure

!procedure $pk($name)
<color:#GoldenRod><&key></color> <b>$name</b>
!endprocedure

!procedure $fk($name)
<color:#Silver><&key></color> $name
!endprocedure

!procedure $column($name)
{field} <color:#White><&media-record></color> $name
!endprocedure
```

Here is an [example file](https://gist.github.com/sualeh/ea272410356527d3132809061e8ba5b4#file-schema-puml) with everything put together. You can visualize diagram this online using [PlantText](https://www.planttext.com/) editor, and then create your own.

Take a look at [SchemaCrawler](https://www.schemacrawler.com/), which extends functionality by [connecting to your database server and generating a PlantUML schema diagram from it using this technique](https://dev.to/sualeh/generate-good-looking-plantuml-diagrams-for-your-database-3g19).
Analytics Hub Data Exchange Platform
Tags: gcp, bigquery, data, analytics
Published: 2023-01-22 22:28:45

Analytics Hub is a data exchange platform that enables sharing of data and insights.
The core components of Analytics Hub are:

- Analytics Hub Publisher: Publishes the data and share data at real time.

- Listings: Enables sharing of data without replicating the shared data. 

- Analytics Hub Subscriber: Discover the data one is looking for, can combine data with existing datasets and leverage Bigquery for various analytics. When subscribed to a listing a linked dataset gets created in the project.

- Analytics Hub Viewer: One can browse through the datasets that are accessible in Analytics Hub.

- Analytics Hub Administrator: Create data exchange enabling data sharing. Grant permission to data publishers and subscribers to access these data exchanges.

Architecture Flow:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1kca0cli7nyx48lnklbc.png)
Shared datasets are the collection of tables and views defined by the data publisher.
Data subscriber get read only linked dataset inside their project and VPC perimeter that they can then combine with their own datasets. This is read only data.

Steps in creating and subsribing datasets in the analytics hub.
1. _Enable Analytics Hub API_
2. _Create exchange by clicking on the Create Exchange link_

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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yhsdwyfhb2ssvf7etl05.png)
Complete the details by providing Region, Display name etc. Setting permissions.

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

3. _Search for available listing and subscribing to the dataset_

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

Filter for Trends and we find Google Trends data.

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zkdwv99qa9sryq4ipghh.png)
Add the dataset to our project.

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

We can run our queries and do various analytics and dashboarding.

Use Cases: Data sharing in real time.

Reference: https://cloud.google.com/bigquery/docs/analytics-hub-introduction
Remote Work
Published: 2023-01-22 22:27:51

## REMOTE WORK: What do you think about ?

The truth is that today's world allows us to work remotely! We have fast internet, several means of communication that allow us to keep in touch in real time and if we need to travel to visit clients, for example, we also have many options. In addition, work in most companies today is results-oriented. You don't need to be physically there at the company to show that you're working.

Remote work: work from anywhere in the world!
Home office: Requires you to work from home.

OK, but how are companies positioning themselves in relation to all this?
There are those that are known as remote-first, that is, in that company, working remotely is the standard. These companies have less "paperwork" and more electronic material, the employees' schedules are public to facilitate communication and they do not need to have a physical headquarters.
On the other hand, there are remote-friendly companies that accept the employee to work remotely. They may even open remote work vacancies, but their default is Onsite Work. In these companies, meetings happen in conference rooms, there are more employees on site than remote and they use "paperwork" more than electronic material.
About tools that help with day-to-day tasks and communication for those who work remotely: Slack, Zoom, Google Drive, Trello, Quip, Pipefy, etc.
Disadvantages remote work: limited contact with professionals, loss of focus with day-to-day distractions, getting lost in working hours, putting too many rules at home.
Advantages: time saving, financial savings, schedule flexibility, no dress code.
Companies that accept remote work: Gitlab, Github, Dell, Spotify, Toptal, Amazon, Adobe, StackOverflow, among others.

In the last 4 years I have been working remotely and it's been a very good experience!
How to use React useReducer asynchronously
Published: 2023-01-22 22:26:34

## Introduction
When building large projects with large states, managing them becomes a lot, in this case using a reducer function helps extracts logic for optimizing performance and making the code simple and readable. According to the official React page

> useReducer
 is usually preferable to useState
 when you have complex state logic that involves multiple sub-values or when the next state depends on the previous one.

Because of the way useEffect is implemented, coming from redux, you can’t use it as a asynchronous function. But from my scouting and try and error, I found an easy way to implement it asynchronously.

## Implementation
Let’s say we want to fetch some data from an Api and add it to our App.

```javascript
const initialState = {
  posts: [],
};

const reducer = async (state, action) => {
  const { type, payload } = action;
  switch (type) {
    case "getPost":
      const results = await axois.get(
        "https://jsonplaceholder.typicode.com/posts"
      );
      return {
        ...state,
        posts: {
          ...state,
        },
      };
    default:
      return state;
  }
};

import React, { useEffect, useReducer } from "react";

function Posts() {
  const [state, dispatch] = useReducer(reducer, initialState, third);

  useEffect(() => {
    dispatch({ type: "getPost" });

    console.log(state);
  }, []);

  return <div>Posts</div>;
}

export default Posts;
```
this returns a <Promise> Error in your code after dispatching the ‘getPost’ type.
To safely asynchronously fetch your data and add it to your state, you must fetch the data first before dispatching the reducer. By doing this we get our fetch results then add it to our state.

```javascript
const initialState = {
  posts: [],
};

const reducer = (state, action) => {
  const { type, payload } = action;
  switch (type) {
    case "getPost":
      return {
        ...state,
        posts: {
          posts: payload.posts,
        },
      };
    default:
      return state;
  }
};

import React, { useEffect, useReducer } from "react";

function Posts() {
  const [state, dispatch] = useReducer(reducer, initialState, third);

  const handleGetPosts = async () => {
    const results = await axois.get(
      "https://jsonplaceholder.typicode.com/posts"
    );
    dispatch({
      type: "getPost",
      payload: {
        posts: results,
      },
    });
  };

  useEffect(() => {
    console.log(state);
  }, [state]);

  return <div>Posts</div>;
}

export default Posts;
```
With this simple code we can use useReducer hook asynchronously. there are other methods, but I think this is the simplest method.

## Conclusion
Hope this clearly solves your problem with implementing useReducer asynchronously.
!Thank you for reading this blog. 
I post a blog weekly. Please don't forget to buy me a coffee, [Mathias Martey](https://www.buymeacoffee.com/mathiasmartey). Follow me on twitter [@blaq_xcobar](https://twitter.com/blaq_xcobar)
I want a system for organizing shell scripts.
Tags: shell, bash
Published: 2023-01-22 21:59:16

I would love a system for organizing, nesting, documenting, and testing shell scripts. I think about it like a library that can be used with any project you may have in the future.

I'm curious how others organize their shell scripts. I have a shell function called "[register](https://gist.github.com/reggi/92bcfcf5adc44b2b6c14058e7113d7f6)" that allows me to document a function after it's declared. This allows me to source a single file and keep adding functions to that file and I get a whole bunch of documentation for free. 

```sh
# ...other register code

function uri-encode() {
    node -e "console.log(encodeURIComponent('$1'))"
}
register "uri-encode" "<string>" "encodes a string for use in a uri"

function uri-decode() {
    node -e "console.log(decodeURIComponent('$1'))"
}
register "uri-decode" "<string>" "decodes a uri string"

```

When I run "usage" I get this:

```sh
➜  usage 
uri-encode <string>
  encodes a string for use in a uri
uri-decode <string>
  decodes a uri string
```

This allows me to easily document my shell scripts. I've had other methods in the past for creating subscripts and avoiding collisions. But I'm curious how others manage their scripts, let me know in the comments!
The language that grew up with me
Tags: webdev, css
Published: 2023-01-22 21:55:26

You know those kid’s bikes that you can upgrade from a balance bike to a something that will take your child to elementary school? CSS did something like that for me.

---

I can still remember the days of floating layouts. We used a lot of hacks to get things to behave like we wanted them to, like the [Clearfix](https://css-tricks.com/snippets/css/clear-fix/) or [browser-detecting media queries](https://stackoverflow.com/a/32547561). The designs were just starting to move from table-based layouts to the box model, which allows a bit more freedom and flexibility in its implementation, but pixel-perfectness was still the gold standard of layout execution.

I felt clever writing CSS under those limitations. My code was illegible, my hacks were obscure and I got the thing working somehow. CSS just wasn’t as good at getting the job done in a clean and efficient way (which is probably where it picked up its bad reputation that it still has today).

But CSS grew up and so did I.

Webfonts were a huge milestone for me. I could do some typography on the internet without using images, and their sprites respectively. Gradients and rounded corners as well for similar reasons. It felt like taking the training wheels off my code.

I recently explained to a younger developer what [image sprites](https://css-tricks.com/css-sprites/) were. He was baffled that we needed something like this and amazed at the ingenuity and jank of it in equal parts. Hey, skeuomorphism can be really hard with just SVGs! Speaking of which, SVGs have only been natively supported in Internet Explorer since version 9.

I don’t need dirty hacks anymore just to code basic layouts. `grid` and `flex` are powerful tools (Firefox is even pushing for [native masonry](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Masonry_Layout)). Layouts have become more complex, but media queries help to adapt to the user’s needs. Websites aren’t as monolithic anymore. We’re putting them together component by component. I still love [BEM](https://en.bem.info/methodology/css/) and I really like [CUBE](https://cube.fyi/) as methodologies to do so, and I’m very looking forward to introduce and [container](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries) and [style queries](https://css-tricks.com/digging-deeper-into-container-style-queries/) to my workflow.

Over time, I added parts that helped me achieve more mature projects fast and efficiently. I replaced the training wheels with a crankset, and shifters, and proper brakes… I learned to use the right tool for the job and CSS kept providing me with them.