teleren/devto huggingface dataset:
Next.js Shopify eCommerce Starter with Perfect Web Vitals 🚀
Tags: nextjs, webdev, react, javascript
Published: 2024-04-12 16:58:43

Hey, we are coming [again](https://dev.to/jjablonskiit/free-nextjs-boilerplate-for-high-performance-enterprise-apps-14f7) with a Next.js boilerplate made by [Blazity](https://blazity.com).
This time it's a brand new [enterprise-commerce](https://github.com/Blazity/enterprise-commerce) - ⚡ Next.js storefront for high-performance eCommerce with AI features and one-click deployment.
✨ Live demo [here](https://commerce.blazity.com/) ✨

## Architecture
![Architecture graph](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ae7nga44d2ciqpn8i0gg.png)

In Enterprise Commerce high-level architecture, Meilisearch serves as the primary source for all product data and potentially other types of data in the future. The system is designed to easily integrate AI personalization tools without needing to modify any frontend code. While we are integrated with Shopify by default, we are not tightly bound to it, and you can use any system that works with Meilisearch and can adapt data to our format.

From a structural viewpoint, we use a monorepo [(Turborepo)](https://turbo.build/) to manage packages, even though we currently have only one Next.js app. We chose this setup because it prepares us for future developments, which will include additional apps. This arrangement helps keep the packages well-separated and self-contained.

## Features
🔀 Next.js App Router & Turborepo
⚛️ React Server Components (RSCs), Suspense and Streaming
🖥️ Server Actions
🖼️ Dynamic OG Images
🧠 AI Vector Search
⚡ Lightning fast search & filtering
✏️ Designed with v0
📸 AI Image captioning
🏎️ Perfect Performance & SEO
🔎 Extremely strict TypeScript
✏️ Draft Mode
📊 A/B Tests
🎨 TailwindCSS, Shadcn UI
📈 Analytics (GTM, Vercel)
💡 Highly Scalable SEO Redirects (Bloom Filters)
🏗️ Complete and fast CI/CD pipelines
🌐 Platform agnostic (integrated with Shopify by default)
📝 Easy migration - migrate your existing solution in minutes
✅ Conventional commits git hook
🎭 Playwright - write end-to-end tests like a pro
📚 Storybook - create, test, and showcase your components
⚙️ T3 Env - manage your environment variables with ease
🔧 Patch-package - fix external dependencies without losing your mind
🔗 Components coupling and cohesion graph - a tool for managing component relationships

### Check out the code at ✨ [GitHub](https://github.com/Blazity/enterprise-commerce) ✨
INVESTORS AND VICTIMS OF SCAMMED CRYPTOCURRENCY HIRE TECHNOCRATE RECOVERY
Tags: cryptocurrency, bitcoin, ethereum, usdt
Published: 2024-04-12 16:52:47

My quest to retrieve my $56,000 worth of stolen cryptocurrency came to an end when Technocrate Recovery helped me. I was shocked to learn that 56,000 dollars' worth of cryptocurrency had been stolen from my wallet through hacking. With the hope of making significant gains, I had put years' worth of savings into several cryptocurrencies, including Bitcoin and Ethereum. It was a horror to lose so much money that I had fought so hard to accumulate. I spent weeks scouring crypto forums and contacting various so-called "crypto recovery experts", but no one could help me get my stolen funds back. Many demanded outrageous fees with no guarantee of actually recovering my stolen crypto. I started to lose hope that I would ever see those lost funds again. Finally, I came across a cryptocurrency recovery company called Technocrate Recovery. Their stellar reviews and reports of successfully recovering millions in stolen crypto gave me a glimmer of hope. I reached out, provided proof of my stolen funds and was assigned a dedicated crypto recovery specialist. Over the next few months, they tirelessly tracked the thief's digital footprint across blockchains, exploited flaws in their anonymizing techniques and finally were able to identify and locate the stolen crypto funds. Their extensive cybersecurity expertise and ethical hacking methods succeeded where others had failed. In the end, Technocrate Recovery was able to recover and return my entire 56,000 dollars worth of stolen cryptocurrency. I was overjoyed to have this life-changing amount of money back in my possession. This experience taught me the importance of proper crypto security and the value of hiring a professional recovery service like Technocrate Recovery when things go wrong. With their help, my long journey to reclaim my stolen crypto finally had a happy ending. I call everyone whose bitcoin is in bad hands to contact Technocrate Recovery through:

(Technocratrecov e ry@contractor. n et) (w w w.t e chnocraterecov ery.sit e) WhatsApp (+1-573-356-3708)

![Uploading image](...)
EIP 712: A simple example using Ethers.js & Hardhat
Tags: eip712, ethereum, webdev, ethers
Published: 2024-04-12 16:48:15

Several months ago, I was trying to use EIP712 to create verifiable signatures using structured data. It’s a standard way of signing structured data, so theoretically it should be super simple: Sign a message and then decode to verify it, right? 

In practice, I had a tough time getting this to work. I looked at various documentation and code examples, but I noticed they all had:

- different implementations of signing and verifying (decoding) signature
- different implementations by ethers version
- different decode implementations
- overcomplicated demos
- No end to end example of using ethers.js (only web3.js)

With all these little issues combined, I just couldn’t do a simple sign & verify using EIP712. I ended up wasting so much time.

Here’s a sample repo to help anyone having trouble using EIP-712.  If you can’t do a simple sign & verify within 15 minutes, just use my code: https://github.com/alinobrasil/eip712_product_registry

By utilizing EIP712, you will have:

1. Enhanced Security: EIP712 helps prevent certain types of replay attacks and phishing attacks, thereby enhancing the security of transactions and interactions within the Ethereum ecosystem.
2. Improved User Experience: EIP712 provides a better user experience by enabling wallets and dApps to display transaction information in a structured, human-readable format, reducing the likelihood of user errors and increasing overall usability.
3. Interoperability: EIP712 facilitates interoperability between different wallets and dApps by defining a standard for how transaction data is structured and signed, thereby promoting seamless interaction and integration across the Ethereum network.
Natural Ingredients Present In FitSpresso Fat Burner
Published: 2024-04-12 16:40:15

Product Name :- FitsPresso

Main Benefits:- Weight Loss, Official Store And Price

Composition:- Natural Organic Compound

Side-Effects:- NA

Rating:- ⭐⭐⭐⭐⭐

Availability:- Online

Where to Buy:- Official Website – {Buy Now Here — Click Here}

FitsPresso:- 

According to the manufacturer, just by drinking coffee, you can burn body fat and lose weight drastically. The FitSpresso ingredients will boost your metabolism in such a way that your body burns fat around the clock.

Official News:- https://www.theweek.in/focus/health-and-wellness/2024/04/06/fitspresso-coffee-reviews-fitspresso-work-scam-exclusive-ingredients-is-fitspresso-coffee-loophole-really.html 
Official Website:- https://allsupplementstore.com/fitspresso-reviews/ 
Facebook:- https://www.facebook.com/FitSpressoReviewsUnitedStates/ 
https://www.facebook.com/TryFitSpressoReviewsPrice/ 
Official Blogs:-
https://fitspresso-reviews-cost.jimdosite.com/ 
https://fit-spresso-reviews-us-work.jimdosite.com/ 
https://fitspresso-reviews-purchase.jimdosite.com/ 
https://sites.google.com/view/fit-spresso-reviews-us-offer/home 
https://sites.google.com/view/fitspresso-reviews-offer/ 
https://sites.google.com/view/fitspresso-reviews-cost/ 
https://gamma.app/docs/FitSpresso-Reviews-2024-Customer-WARNING-Is-Fitspresso-Weight-Lo-7qepah9ex1frb42?mode=doc 
https://gamma.app/docs/FitSpresso-Reviews-Do-Not-Buy-Before-See-Buyer-Report-Know-Real-i1725rgt0jnfrqf 
https://medium.com/@jimmrobinson_75936/fitspresso-reviews-critical-analysis-of-ingredients-and-side-effects-in-the-coffee-loophole-b501973bc4fc 
https://medium.com/@rogepeters/fitspresso-reviews-controversial-or-real-fitspresso-reviews-hidden-truth-exposed-here-dont-buy-04d46433ccd4 
https://fitspressoreviewsshop.godaddysites.com/ 
https://fitspressoreviewsoffer.godaddysites.com/ 
https://fitspresso-reviews-buy.blogspot.com/2024/02/blog-post.html 
https://in.pinterest.com/pin/1010354497646214528/ 
https://in.pinterest.com/pin/975521969275882286/ 
https://fitspresso-reviews-offer.hashnode.dev/scam-exposed-fitspresso-reviews-weight-loss-warnings-alert-read-ingredients-cost-side-effects 
https://groups.google.com/g/fitspresso-reviews-offer/c/4GbIKgvKyCM 
https://groups.google.com/g/fitspresso-reviews-price/c/ZYKdVKNiSJw 

PDF.Site:- 
https://online.fliphtml5.com/lynht/wguo/index.html 
https://issuu.com/rogepeters/docs/fitspresso-reviews-do-not-buy-before-see-buyer-rep 
https://anyflip.com/gynfh/dzks 
https://online.fliphtml5.com/oblvt/tfbh/index.html#p=1 
https://anyflip.com/otuvz/omlr 
https://issuu.com/jimmrobinson/docs/fitspresso_reviews
InfogrAIphify: Create Infographics from Articles
Tags: cloudflarechallenge, devchallenge, ai
Published: 2024-04-12 16:31:57

*This is a submission for the [Cloudflare AI Challenge](https://dev.to/devteam/join-us-for-the-cloudflare-ai-challenge-3000-in-prizes-5f99).*

## What I Built

InfogrAIphify is a web app that crawls any given URL, searches for <article> or <main> tags, and uses their content to create a meaningful infographic for you! With it, summarization reaches new levels! ( an image :P )

The main problem with the original [Python script](https://github.com/phalkmin/InfogrAIphify) is that it demands an openAI API key, which is paid, so when the opportunity to use a free service, well, I embraced it as an alternative.
 
Layout and code is a [Next.js](https://nextjs.org/) project bootstrapped with [`c3`](https://developers.cloudflare.com/pages/get-started/c3).

**Features:**

- Analyze website content and extract key points.
- Generate a visually appealing infographic.
- User-friendly interface for easy input and interaction.

## Demo

The demo can be [seen and  here](https://infograiphify-nodejs-edition.pages.dev/)

**IMPORTANT**: check notes below

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

## My Code

{% embed https://github.com/phalkmin/InfogrAIphify-nodejs-edition %}

## Journey

This time, I decided to use a CloudFlare Page starter instead and if the whole app wasn't complex enough, it would be a breeze to finish and deploy. 

Some obstacles: 

- The original script uses GPT4 to analyze the <article>, which is fine, as he accepts a large input. The free LLMs of CloudFlare have a smaller limit, so I had to summarize the article using _Bart_ first;
- BUT: Bart on CloudFlare doesn't have (at least I wasn't able to make it work this way) a setting to make the summarization larger and more complete. So the LLM would have just a small phrase to use as a basis for the infographics;
- Another problem: the Models for text-to-image available on CloudFlare aren't exactly customized to create images like those described by the LLM, something that DALL3 does flawlessly. An infographic **is** created, but its final result isn't as cool as if you try the Python script.
- FINALLY: it wasn't exactly a good idea to upload TWO high-usage apps on the same free-tier account, so, probably, the example may not work. Try later.

I'm sure that with more time to code, test, and check the models for better prompts, I can improve the infographic's final result. For now, as a PoC, the status of the demo is:

![works, kinda](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kug33q1cz57avxvdtite.jpeg)


**Multiple Models and/or Triple Task Types**

Models in use: 
[bart-large-cnn](https://developers.cloudflare.com/workers-ai/models/bart-large-cnn/) 

[mistral-7b-instruct-v0.1
](https://developers.cloudflare.com/workers-ai/models/mistral-7b-instruct-v0.1/)
[stable-diffusion-xl-lightning](https://developers.cloudflare.com/workers-ai/models/stable-diffusion-xl-lightning/)
Web-App Allows You To Get FAST Page 1 Rankings
Tags: ai, css, community, softwareengineering
Published: 2024-04-12 16:21:53

We’ve The Entire Process of Finding, Targeting and Ranking For Low-Competition Keywords Into 4 Simple Steps:
full details info>>>> https://sites.google.com/view/serpsling-agency-information/home
Instantly Discovers High-Traffic, Low-Competition Keywords That You Can Rank For Quickly!
EVERY Keyword Will Have it’s Own “Difficulty Score” so you INSTANTLY know which keywords are EASY and which are HARD to rank for making it effortless to make your decisions
It will also SUGGEST even MORE keywords to you with our built-in Keyword Suggestion Engine so you never run out of more traffic-getting opportunities.
You’ll be able to Quickly find “people also search for” keywords which are some of the LOWEST hanging fruits you can target and get REALLY fast rankings with!
You’ll be able to Get a FULL Data Analysis of ANY keyword you’d like and know EXACTLY how easy or hard it’ll be to rank for, the search volume, the search trend, the average backlinks that would be needed to rank for it, and a FULL list of the top 10 organic and/or local rankings.
detailts info>> https://jvz6.com/c/3100259/406562/
You’ll be able to Analyze ANY Domain or ANY URL and know EXACTLY what keywords they’re ranking for, EXACTLY how many backlinks they have, the EXACT backlinks they have, the EXACT anchor text they have and MORE!
Essentially you’ll be Getting EVERYTHING You need To Rank High And Get MORE Free Traffic Under ONE Single Dashboard!
HUGE Bonus: Agency License INCLUDED So you Can Get More Ranking And More Traffic For Your Clients As Well!
HUGE BONUS Module: Unlock Our Built-In Affiliate Offer Finder to Quickly find offers you can promote for your SerpSling  Keywords!
and much much more!!
 details info>> https://jvz6.com/c/3100259/406562/
The difference between '||' and '??' in JavaScript.
Tags: javascript, programming, node, coding
Published: 2024-04-12 16:20:23

Today, we are going to look at the behavior of two operators in JavaScript - the Logical OR Operator (`||`) and the Nullish Coalescing Operator (`??`). These operators are usually confused or misunderstood, so let's get right to it.

They are usually used in writing one-liner "hotwires" (providing default values or fallbacks) and while they might seem similar, they serve different purposes and behave differently, especially in the context of handling `null` or `undefined` values in JavaScript.

## Logical OR Operator `||`
The logical OR operator `||` is a binary operator that returns the first truthy value it encounters or the last value if none are truthy. 
JavaScript considers a value that is not among the following truthy:
- `false`
- `0`
- `''` (empty string)
- `null`
- `undefined`
- `NaN`

It is used to test whether at least one of the operands is truthy. if the left-hand operand is truthy, it is returned. If it is falsy, the right-hand operand is evaluated and returned.

### Example
```javascript
let name = "Emmanuel";
let defaultName = "Guest";
let displayName = name || defaultName; // Emmanuel
```
the `name` variable is not falsy, so the `displayName` is evaluated to `"Emmanuel"`. Now consider this:

```javascript
let name = "";
let defaultName = "Guest";
let displayName = name || defaultName; // Guest
```
In this example, since `name` is an empty string (which is falsy), the || operator evaluates `defaultName` and assigns it to `displayName`.

## Nullish Coalescing Operator (??)

The nullish coalescing operator (??) is also a logical operator that returns its right-hand side operand when its left-hand side operand is `null` or `undefined`, and otherwise returns its left-hand side operand. Unlike the `||` operator, it does not consider other falsy values (`false`, `0`, `''`, `NaN`) as triggering the fallback.

### Example

```javascript
let age = 0;
let defaultAge = 18;
let userAge = age ?? defaultAge; // 0
```

In this example, even though age is `0` (which is considered falsy), the `??` operator does not consider it as a trigger for the fallback because `0` is not `null` or `undefined`. Therefore, `userAge` is assigned the value of age, which is `0`.

In summary, the `||` operator is used to test whether at least one of the operands is truthy, while the ?? operator is used to provide a default value for a variable, but only considers `null` or `undefined` as falsy.
Update to "My Custom Picker With Multi-Selection in SwiftUI" - Now With Images!
Tags: swift, swiftui, multiplatform, xcode
Published: 2024-04-12 16:19:09

I just wanted to start out by saying that this is an abridged version of my [originally published post from August 31, 2022 that you can find on my website here](https://www.simplykyra.com/update-to-my-custom-picker-with-multi-selection-in-swiftui-now-with-images/).

It is also a continuation (part two) of [my original post](https://dev.to/simplykyra/how-to-make-a-custom-picker-with-multi-selection-in-swiftui-1b17) which is also an abridged from my [originally published version from February 23, 2022 here](https://www.simplykyra.com/how-to-make-a-custom-picker-with-multi-selection-in-swiftui/).

---

After I posted my custom multipicker code someone reached out to me about having the selected items include images. I absolutely loved that idea and got to work switching the `String` array containing the items to a `Struct` array that could hold any possible thing you may want selectable. In this updated example I still store a `String` in the `Struct`, in this case holding the SF symbol name, but I could see this also including other types like `Data` or `Image` too.


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


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



If you’re interested in using this updated custom control in your code I saved it, in its entirety, to [my public SimplyKyraBlog GitHub repository](https://github.com/SimplyKyra/SimplyKyraBlog) and, if you want a direct link, [the file `CustomMultiSelectionExampleWithImages.swift` can be found here](https://github.com/SimplyKyra/SimplyKyraBlog/blob/main/SwiftExamples/CustomMultiSelectionExampleWithImages). The code is also shared as [a Github Gist](https://gist.githubusercontent.com/SimplyKyra/5cf6ec5da50cb937854facc572a95b82/raw/d792eab4ea4bef30846268aae77becc38f5e4583/CustomMultiSelectionExampleWithImages.swift) at the bottom of [my post from August 31, 2022](https://www.simplykyra.com/update-to-my-custom-picker-with-multi-selection-in-swiftui-now-with-images/) that also includes the backstory, specific updates to the original code, and the fix to the previous issue I mentioned. 

Hope this helps your code and you're having a great day!
I've just open sourced N8
Tags: android, kotlin, compose, navigation
Published: 2024-04-12 16:06:24

Hiya

[N8](https://github.com/erdo/n8) is a pure kotlin, state based navigation library.

I've open sourced it a bit earlier than I usually would have 😬 but that means there is still stuff to do if anyone is interested...

There are some easy issues added already, but there is also more juicy stuff available (to do those, you'll need to understand what's there first though).

I think it's turning into something I'd like to use... but it's early days still.

It's a pretty small library, about 1000 lines at the moment. And the idea is to handle a back stack of locations for you, as your user navigates around the app.

The client code can call functions like this:

``` kotlin
n8.navigateTo(Paris)
n8.navigateTo(Seoul)
n8.navigateTo(NewYork)
n8.navigateBack()
n8.navigateTo(Bangkok)
```

And N8 would maintain an immutable navigation state that looks like this:

``` kotlin
backStackOf(
    endNodeOf(Paris),
    endNodeOf(Seoul),
    endNodeOf(Bangkok), <--- current location
)
```

You can use it to pass data to new locations, or pass data back to previous locations, it handles nested tab style navigation, handles screen rotations, persistence, deep links etc, and you can use it to drive the UI for a compose app like this:

``` kotlin
setContent {

  N8Host { navigationState ->
        
    // this code runs whenever the navigation
    // state has changed e.g. the user has
    // pressed back or navigated to a new page

    val location = navigationState.currentPage()
            
    ModalNavigationDrawer(
        drawerContent = ...
        content = ...
    )
  }
}
```

The navigation state can get pretty complicated when nested tabs are involved:

``` kotlin
backStackOf(
    endNodeOf(Welcome), <-- home location
    tabsOf(
        selectedTabHistory = listOf(0,2),
        tabHostId = "TABHOST_MAIN",
        backStackOf(
            endNodeOf(MyFeed),
            endNodeOf(Trending),
        ),
        backStackOf(
            endNodeOf(Subscriptions),
        ),
        backStackOf(
            endNodeOf(MyAccount),
            endNodeOf(Settings),
            tabsOf(
                selectedTabHistory = listOf(0),
                tabHostId = "TABHOST_SETTINGS",
                backStackOf(
                    endNodeOf(Audio),
                    endNodeOf(Dolby), <-- current location
                ),
                backStackOf(
                    endNodeOf(Video),
                )
            )
        ),
    )
)
```

But the idea is that N8 handles all that (and calculating the back operations) for you.

Early feedback and PRs welcome!

Eric

PS it also needs a logo...