teleren/devto huggingface dataset:
#1 Building Headless Commerce with Nuxt 3, Shopify, and TailwindCSS
Tags: nuxt, tailwindcss, vue, javascript
Published: 2022-06-20 04:16:41

When I first saw a video by @simonswiss about Building Headless Commerce with Next.js, Shopify, and Tailwind, I really liked the straightforward approach of explaining the topic by Simon. There were many topics explained in this video, yet Simon managed to explain it in very simple words and right after watching this video I was able to code similar application. 

As I am more of a Nuxt.js fan, I started looking if there are similar videos but using Nuxt instead of Next but couldn't not found any. So I decided to record one myself!

{% youtube QK6wPHFiRyM %}

In this video, we will be building a simple Headless Commerce website with Nuxt 3, Shopify, and TailwindCSS.

We will fetch the products from Shopify GraphQL API and build our frontend by using Nuxt 3 and TailwindCSS.

I wont be coding all steps here in the article as they are explained step by step in the video. Instead I will just add some useful links that you could check out if you want to build a similar application.

If you are looking for a production-ready Nuxt application with Shopify, check out https://www.vuestorefront.io/ and especially, the integration with Shopify https://docs.vuestorefront.io/shopify/.

* Github repo -> https://github.com/Baroshem/nuxt-shopify-tailwind
* Deployed website -> https://nuxt-shopify-tailwind.vercel.app/
* Simon's video -> https://www.youtube.com/watch?v=xNMYz74zNHM
Cara Setting Printer Ubuntu P1102W
Tags: ubuntu
Published: 2022-06-20 04:13:48

## Setting Ubuntu Printer HP P1102W
[Link contekan](https://operatorgugus3tangsel.blogspot.com/2020/11/menambah-printer-hp-laserjet-p1102-.html)

Sebenarnya Ubuntu sudah mendeteksi Printer P1102W sudah coba add dan berhasil ditambahkan tapi belum bisa ngeprint. 
Bagaimana caranya : 
1. Hapus dulu printer yang sudah ditambahkan sebelumnya 
2. Ketikkan `sudo hp-setup -i` kemudian ikuti langkah selanjutnya, mudah insyallah.

Alhamdulillah berhasil.
Heroku Error: item could not be retrieved unauthorized
Tags: heroku, deployment, webdev, errors
Published: 2022-06-20 04:08:08

It has taken me a while to figure out why I got this particular error (`displaying in red at the top right corner under my profile image` in Heroku) since I did not find any relevant info in Google search. 

The error means that there is an issue with an authorization specifically on your Github account (this could be due to, I guess, inactivity in the deployment of GitHub projects linked with Heroku).

The solution is pretty straight forward: 
(1) Click on the `Deploy` section in Heroku
(2) Scroll to `App connected to GitHub`
(3) Click on the `Disconnect...` button 
(4) Allow the authorization in the connection between Github and Heroku -> Enter your Github password 
(5) Reconnect to your Github project 
(6) Then you should be able to deploy successfully in the `Manual deploy` or `Automatic deploys` sections!!

Hope this helps if you also encounter the similar issue! :)
Billboard Artist Recommendation Software
Tags: beginners, programming, python, algorithms
Published: 2022-06-20 04:03:58


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

This was my final project for the Data Structures and Algorithms course in the Codecademy Computer Science Career Path. This program utilizes a data set built around the top 50 artists on the billboard top 100. Utilizing a modified TreeNode class, a modified Binary Search, and a Quicksort algorithm, this program allows the user to input the beginning of a potential genre they'd like to find an artist for and then provides a list of possible genres back to search from until they've dialed in on a single genre. The program then provides a list of recommended artists based on their ranking alongside album and song info about the artist. For those interested, the required code can be found here on github; https://github.com/Dwayne-Lacey/Artist-Recommendation
820. Leetcode solution in CPP
Tags: cpp
Published: 2022-06-20 03:54:58

```
struct TrieNode {
  vector<TrieNode*> children;
  int depth = 0;
  TrieNode() : children(26) {}
  ~TrieNode() {
    for (TrieNode* child : children)
      delete child;
  }
};

class Solution {
 public:
  int minimumLengthEncoding(vector<string>& words) {
    int ans = 0;
    TrieNode root;
    vector<TrieNode*> heads;

    for (const auto& word : unordered_set<string>(begin(words), end(words)))
      heads.push_back(insert(&root, word));

    for (TrieNode* head : heads)
      if (all_of(begin(head->children), end(head->children),
                 [](const auto& child) { return child == nullptr; }))
        ans += head->depth + 1;

    return ans;
  }

 private:
  TrieNode* insert(TrieNode* root, const string& word) {
    TrieNode* node = root;
    for (const char c : string(rbegin(word), rend(word))) {
      if (!node->children[c - 'a'])
        node->children[c - 'a'] = new TrieNode;
      node = node->children[c - 'a'];
    }
    node->depth = word.length();
    return node;
  }
};
```
ALL WE ALL IN ?
Published: 2022-06-20 03:32:17

## Tech Community 
Personally I'm very new to the tech to community. Like many before me I had always heard such great things about how welcoming the community is. Fortunately up to this point I have been very fortunate to meet some wonderful people and have not experienced many negatives at all since entering. 

But after this too day conference my mind was blown 🤯🤯. 

## The Challenge 
As I listened to a number speakers the message was overwhelming clear. A lot of speakers spoke about not having representation of their race, gender, and disabilities. How it seems we have unintentionally created apps without considering some of these everyday users. The challenges they face using some of the apps that we use everyday.

Some Examples: 
1) Elderly people trying to navigate a phone to check the weather. 
2) A person with a missing limb trying to navigate a screen with no mouse. 
3) A person with bad vision using a screen reader to get important information. 

## The Progress 
As I learned there are some government standards for website and apps to include some of the challenges these people face. How many times do we as developers miss some of these edge cases. When developing apps. One speaker went as far as challenging us to build open source project to help with some of these challenges. Since some of these services can get expensive and not everyone can afford it. 

## A Step in the right direction
How can we in tech help with some of these problems. Since after all we are problem solvers. 
1) Make it personal. 
I speaker made a joke but its was 🎯. One day we are all going to get old and be faced with some of these challenges.
2) Do you research. One thing I learned was that there are organizations out there that will answer question. Some are even willing to help test your app for you give you feedback. 
3) Educate yourself on what available for you to use to teach others. Learn how to use some of the features on your phone, tablet or computer ...etc. Use the screen reader, voice commands, study and learn how to navigate around the computer without a mouse. Then teach others. 

Now I mean this as no slight at the community but I hope we can have conversations about these topics and begin to create things that continue to help make the world a better place. 

Keep creating keep reaching and keep changing lives. 

Happy Coding 👨🏿‍💻👨🏻‍💻👩🏾‍💻👩‍💻🧑🏾‍💻
Microfrontends - Primer
Tags: beginners, microservices, react, javascript
Published: 2022-06-20 02:04:55

We all know what microservices did to the backend. We must admit, even though we do not fully implement the #microservices in its purest form, we are habitual to it; the buzz word, may be started thinking in the direction of writing more modular backends, clean code, separation of domains and more importantly the individual deployment and scaling of domain specific services.

I agree the change and the adoption is gradual, it will allow everyone to learn, adopt and implement keeping the lights on 💡

The same concept is picking up very rapidly for the frontend. I wanted to use this primer to set the stage for #microfrontends. I have been evaluating, assessing and implementing few methodologies, frameworks and libraries to do clean and not too much of #opinionated implementation of micro frontend
Medios de producción disruptivos
Published: 2022-06-20 01:19:37

English translation:
https://dev.to/jmrsuarez/disruptive-means-of-production-40k7

## Web and web APPS como un medio disruptivo de producción

un instrumento tecnologica que nos habilitan los negocios "disruptivos" een la web y en las app, Web APPs.

Un comercio electronico con carrito de compra y sistema de pagos, STPFS / CIPS 

Mover criptos bitcoin ethereum XRP Web DAPPS

Mover nanopagos, peticones de donativos. enlaze a plataformas de donativos, ko-fi, patreon.  un link para recibir donaciones o un QR. 

Un uber de x con telegram API para la cercania por Geotagging Enlazar propuestas de negocio con prospectos de clientes. 

Cuponera de comisiones, tumins Es como una fuerza de ventas instantanea, programa de afiliados o de referencias. 

Una cripto fountain, microempleo. 

Crear videos con WASM y FFMPG

Un Paywall, es un sistema que nos pertimite una parte web que sea publica y gratuita y que tengamos una parte que sea solamente para miembros. 

Un videojuego o servicio como software conectado a una tienda o a una red sociodigital

Una API de precios

Una APP para acercar las cosas del dia a dia a los abuelitos


https://dev.to/girlie_mac/support-web-monetization-and-hodl-how-to-receive-micropayment-in-btc-or-oge-on-your-website-5c5d
Getting a cookie's expiry value on a server
Tags: node, cookie
Published: 2022-06-20 01:12:41

---
title: Getting a cookie's expiry value on a server
slug: https://zellwk.com/blog/getting-a-cookies-expiry-value-on-a-server/
tags: node, cookie
cover_image: https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2072&q=80
published: true
---

Browsers handle cookie expiry so they don't pass the cookie's expiry value to the server. You have to make some adjustments if you want to get the cookie's expiry value on the server.

There are two methods:

- You can create a cookie with a JSON value
- You can use another cookie to signify the expiry

## Creating a cookie with a JSON value

You can create a cookie with a JSON value. It looks like this:

```js
const cookieValue = JSON.stringify({
  value: 'hello world',
  expiry: Date.now() + 3600 * 1000
})

res.cookie('myCookie', cookieValue)
```

If you use Express, you can indicate to [cookie-parser](https://www.npmjs.com/package/cookie-parser) that a cookie is a JSON cookie by prepending the value with a `j:`. Cookie-parser will automatically decode the JSON cookie and turn it back into an object.

```js
// Setting a JSON cookie for cookie-parser
const cookieValue = JSON.stringify({
  value: 'hello world',
  expiry: Date.now() + 3600 * 1000
})

res.cookie('myCookie', `j: ${cookieValue}`)
```

```js
// Reading the JSON cookie
import cookieParser from 'cookie-parser'

app.use(cookieParser())

app.get('/', (req, res) => {
  const { myCookie } = req.cookies

  if (myCookie.expiry < Date.now()) {
    // Do something
  }
})
```

Of course, if you want the browser to remove the cookie automatically when it expires, you can still set the `maxAge` property.

```js
res.cookie('myCookie', 'j:' + cookieValue, { maxAge: 3600 * 1000 })
```

## Creating another cookie to store the expiry

You can create another cookie to store the expiry value. Here's what it looks like (including the `maxAge` property).

```js
res.cookie('myCookie', 'hello world', { maxAge: 3600 * 1000 })
res.cookie('myCookieExpiry', Date.now() + 3600 * 1000 { maxAge: 3600 * 1000 })
```

You'd be able to check the cookie expiry value in the server like this:

```js
import cookieParser from 'cookie-parser'
app.use(cookieParser())

app.get('/', (req, res) => {
  const { myCookie, myCookieExpiry } = req.cookies

  if (myCookieExpiry < Date.now()) {
    // Do something
  }
})
```

That's it!

<hr>

Thanks for reading. This article was originally posted on [my blog](https://zellwk.com/blog/getting-a-cookies-expiry-value-on-a-server/). Sign up for [my newsletter](https://zellwk.com) if you want more articles to help you become a better frontend developer.
[error] [mysql] 1251
Tags: npm, mysql, node, spanish
Published: 2022-06-03 20:59:13

Por si le sirve a alguien...

Al usar la imagen de [*mysql*](https://hub.docker.com/_/mysql?tab=tags) en Docker y tratarlo de enlazar desde una app con *node* + [*mysql*](https://www.npmjs.com/package/mysql) me aparecía el siguiente error:

```
[error] [mysql] 1251 - Client does not support authentication protocol requested by server; consider upgrading MySQL client
```
-----
Al parecer es un plugin de cifrado de contraseñas (caching_sha2_password) incompatible con la versión de [*mysql*](https://hub.docker.com/_/mysql?tab=tags) que se encuentra alojada en Docker hub.

Hay dos opciones o hacer un *pull* de una versión anterior de mysql (en este caso la 5.7)

```
docker pull mysql:5.7
```
o modificar dicho plugin...

Para saber si el error corresponde a lo de los plugins, y verificar si el usuario con el que se conectan a la BBDD lo usa, ocupar el siguiente comando, desde una terminal conectada a la BBDD mysql

```
select user, plugin from mysql.user;
```
si efectivamente usa **caching_sha2_password** modificar la contraseña usando el plugin correspondiente con lo siguiente (modificar el *root* y el *new_password*)
```
alter user 'root'@'%' identified with mysql_native_password by "new_password";
flush privileges;
```
Webpack devServer : writeToDisk
Published: 2022-06-19 23:53:30

As per default , **webpack devServer** will serve bundle <u>in-memory (session)</u> without writing to disk i.e.:

> **TIP** : the following `writeToDisk: false` is suitable for development mode specifically !

```diff
    ...,
    devMiddleware: {
      ...,
      writeToDisk: false, /* default : serve in-memory only */
      ...,
    },
    ...,
```

---

Served in-memory & written <u>in-disk (persistency)</u> with respect to any changes within your code base made whilst developing : 

```diff
    ...,
    devMiddleware: {
      ...,
      writeToDisk: true, /*serve in-memory as you did before but save to disk as well (changes to file[s] respected) */
      ...,
    },
    ...,
```

> **NOTE** : `writeToDisk:<value=false|true>` becomes quite useless if explicitly bundled with `(npx) webpack bundle` prior to any serving done !

---

### Refs

[devServer.writeToDisk](https://github.com/webpack/webpack-dev-middleware#writetodisk)
How to use React useSyncExternalStore hook and RxJS together
Published: 2022-06-19 23:39:52

---
title: How to use React useSyncExternalStore hook and RxJS together
published: true
description: Sample to write and use new react `useSyncExternalStore` hook along with RxJs
tags: 
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
---
After discovering the `useSubscription` a while ago and using along with RxJS, it required at least two statements to use it with `Rx.BehaviorSubject`, create the subscription object and then call `useSubscription(subscription)`:
```javascript
// create the subscription object
const subscription = useMemo(
  () => ({
    getCurrentValue: () => behaviorSubject.getValue(),
    subscribe: callback => {
      const subscription = behaviorSubject.subscribe(callback);
      return () => subscription.unsubscribe();
    }
  }),

  // Re-subscribe any time the behaviorSubject changes
  [behaviorSubject]
);
// call the hook
const value = useSubscription(subscription);
```
See the details here [https://www.npmjs.com/package/use-subscription](https://www.npmjs.com/package/use-subscription).

With this new `useSyncExternalStore` hook, you have it simpler and integrated in React since version 18.1.0:
```javascript
const counter$ = new BehaviorSubject(0);

function useCounter() {
  const count = useSyncExternalStore(
    useCallback(
      (callback) => {
        const subscription = counter$.subscribe(callback);
        return () => subscription.unsubscribe();
      },
      [counter$]
    ),
    () => counter$.getValue()
  );
  return count;
}
```
As we saw, you still have to wrap the subscribe handler function in a `useCallback` hook, to prevent the re-subscription and unsubscribe on every change or render.

See a the full example here: [https://codesandbox.io/s/react18-2-rxjs-s3b781](https://codesandbox.io/s/react18-2-rxjs-s3b781).
Disruptive means of production.
Tags: web, economy, web3, blockchain
Published: 2022-06-19 23:28:39


A technological instrument that enables "disruptive" businesses on the web and in the apps, Web APPs.

An electronic commerce with shopping cart and payment system, STPFS / CIPS

Move cryptos bitcoin ethereum XRP Web DAPPS

Move nanopayments, donation requests. link to donation platforms, ko-fi, patreon. a link to receive donations or a QR.

An uber of x with telegram API for proximity by Geotagging Link business proposals with customer prospects.

Commission coupon, tumins It's like an instant sales force, affiliate or referral program.

A crypto fountain, micro-employment.

Create videos with WASM and FFMPG

A Paywall is a system that allows us a web part that is public and free and that we have a part that is only for members.

A video game or service as software connected to a store or a socio-digital network

A pricing API

An APP to bring the things of the day to day to the grandparents

https://dev.to/girlie_mac/support-web-monetization-and-hodl-how-to-receive-micropayment-in-btc-or-oge-on-your-website-5c5d
Making a regex engine in Rust from scratch.
Tags: rust, regex, watercoler, javascript
Published: 2022-06-19 22:29:40

So I'm starting a new project in Rust called LexRs that will be a Rust remake of my original (misnamed) [ParseJS](https://github.com/CalinZBaenen/ParseJS) library.  
There was this one feature I wanted in the original library that I couldn't figure out how to make.
To alleviate this issue I thought that when making the Rust version I'd take a hand at making my own regular expression engine based on JavaScript's.

## What I have so far.
I have `chars.rs` which contains `REChar` and `REString`, the former being a representation of a character in a regex.
I have `pattern.rs` which contains information for patterns, such as `PatternType` and `PatternSize`.

## `PatternType`
The following are the pattern types; only three patterns are planned to be supported by my engine (for now):
```rust
enum PatternType {
    NoneOf(REString),   // Same as JS  /[^xyz]/.
    AnyOf(REString),    // Same as JS  /[xyz]/.
    Char(REChar)        // Same as JS  /x/.
}
```
These are equivalent to `[^xyz]`, `[xyz]`, and `x` respectively.

## `PatternSize`
The following are the sizes a pattern can be; only four distinct sizes will be supported:
```rust
enum PatterSize {
    OoM,        // Short for "One or More".
                // Same as JS  /x+/.
    ZoM,        // Short for "Zero or More".
                // Same as JS  /x*/.
    ZoO,        // Short for "Zero or One".
                // Same as JS  /x?/.
    N(usize),   // Represents a N-repetitions.
                // Same as JS  /x{N}/ where `N = int > 0`.
}
```
These are equivalent to `/x+/`, `/x*`, `x?`, and `x{1}` respectively.

## `Flags`
The following are the flags that will be supported by the regex:
```rust
struct Flags {
    case_insensitive:bool,   // Same as JS  /x/i.
    multiline:bool,          // Same as JS  /x/m.
    global:bool,             // Same as JS  /x/g.
}
```
These are equivalent to [the **`i`**, **`m`**, and **`g`** flags](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions#advanced_searching_with_flags) respectively.

## Before the analyzer.
Before I work on the lexer for the regular expressions I feel I might want to work on the matching system first by [matching](https://xlinux.nist.gov/dads/HTML/stringMatching.html) a string against multiple `Pattern`s.

## How it's going so far.
I think things are going well and I am really excited to do this.
I look forward to seeing the technology I make work in action!

<br/>

<center><b><h2>Þanks for reading!<br/>Cheers!</h2></b></center>
Texting.io - Send mass text messages easily
Tags: sms, bulksms, communication, automation
Published: 2022-06-19 23:05:29

Powerful SMS marketing platform that allows businesses of all sizes to reliably send mass text messages, pictures/files as well as communicate with their subscribers 1 on 1.

Create SMS appointment reminders to reduce no-shows, set up autoresponders to automatically respond to incoming text messages, and send out any number of text messages you require.

Visit us at: https://texting.io
Retreiving GPS data in decimal format from EXIF data in photos
Tags: gps
Published: 2023-01-06 03:00:18

---
title: Retreiving GPS data in decimal format from EXIF data in photos
published: true
date: 2022-06-19 23:01:35 UTC
tags: GPS
canonical_url: https://brandonrozek.com/blog/gps-exif-data-from-photos-decimal-format/
---

For a new feature that I’m cooking up for my website, I need to grab the GPS information from the EXIF data stored in my images. Luckily, `imagemagick`comes to our rescue.

```
identify -verbose $IMAGE_FILE | grep GPS

```

This will return something like the following:

```
exif:GPSAltitude: 1250/100
exif:GPSAltitudeRef: .
exif:GPSDateStamp: 2022:06:12
exif:GPSImgDirection: 137/1
exif:GPSImgDirectionRef: M
exif:GPSInfo: 1004
exif:GPSLatitude: 40/1, 50/1, 1815/100
exif:GPSLatitudeRef: N
exif:GPSLongitude: 73/1, 53/1, 3625/100
exif:GPSLongitudeRef: W
exif:GPSTimeStamp: 17/1, 32/1, 30/1
exif:GPSVersionID: ....

```

To request a specific field, for example Latitude:

```
identify -format "%[EXIF:GPSLatitude]\n" "$IMAGE_FILE"

```

As with the verbose flag, it will return the information in degrees format

```
40/1, 50/1, 1815/100

```

The following bash function will take the degrees format and convert it to the more common decmial format:

```
DegreesToDecimal() {
        L0=$(echo "$1" | cut -d "," -f 1)
        L1=$(echo "$1" | cut -d "," -f 2)
        L2=$(echo "$1" | cut -d "," -f 3)
        echo "scale=6;$L0 + $L1/60 + $L2/3600" | bc
}

```

For example:

```
LAT=$(identify -format "%[EXIF:GPSLatitude]\n" "$IMAGE_FILE")
LAT_DEC=$(DegreesToDecimal "$LAT")
echo "$LAT_DEC"

```

will output:

```
40.838374

```

We can then package this into a script which will output the latitude, longitude, and altitude (m) of an image in decmial format.

```
#!/bin/sh

set -o errexit
set -o nounset
set -o pipefail

show_usage() {
    echo "Usage: getLLA.sh [imagefile]"
    exit 1
}

# Check argument count
if ["$#" -ne 1]; then
    show_usage
fi

# Check that relevant command exist
if ! command -v identify > /dev/null; then
    echo "Command identify from imagemagick not found. Exiting..."
fi

IMAGE_FILE="$1"
LAT=$(identify -format "%[EXIF:GPSLatitude]\n" "$IMAGE_FILE")
LAT_DIR=$(identify -format "%[EXIF:GPSLatitudeRef]\n" "$IMAGE_FILE")
LON=$(identify -format "%[EXIF:GPSLongitude]\n" "$IMAGE_FILE")
LON_DIR=$(identify -format "%[EXIF:GPSLongitudeRef]\n" "$IMAGE_FILE")
ALT=$(identify -format "%[EXIF:GPSAltitude]\n" "$IMAGE_FILE")

DegreesToDecimal() {
        L0=$(echo "$1" | cut -d "," -f 1)
        L1=$(echo "$1" | cut -d "," -f 2)
        L2=$(echo "$1" | cut -d "," -f 3)
        echo "scale=6;$L0 + $L1/60 + $L2/3600" | bc
}

LAT_DEC=$(DegreesToDecimal "$LAT")
LON_DEC=$(DegreesToDecimal "$LON")
ALT_DEC=$(echo "scale=6;$ALT" | bc)

LAT_PREFIX=$([$LAT_DIR == "S"] && echo "-" || echo "")
LON_PREFIX=$([$LON_DIR == "W"] && echo "-" || echo "")

echo "$LAT_PREFIX$LAT_DEC"
echo "$LON_PREFIX$LON_DEC"
echo "$ALT_DEC"

```