DEV Community: haynajjar

Free Dataset of 51M+ Companies and Their Tech Stacks (Daily Updates!)

haynajjar — Tue, 10 Feb 2026 11:56:09 +0000

Ever wondered which companies use Shopify? Or how many businesses have adopted Stripe? What about finding every site running on Next.js?

I've spent the last few months crawling the web to answer these questions, and today I'm open-sourcing the entire dataset.

What I Built

tech-stack-datasets is a free, open-source collection of company data grouped by the technologies they use. The full database contains 51.3 million companies across 403 technologies, with 500 sample records per technology available as open data.

Think of it as getting a solid sample of the technographic landscape without any barriers.

The data covers 403 different technologies across categories like:

E-commerce platforms (Shopify, WooCommerce, Magento)
Payment processors (Stripe, PayPal, Adyen)
CMS systems (WordPress, Webflow, Contentful)
Analytics tools (Google Analytics, Mixpanel, Amplitude)
Cloud providers (AWS, Google Cloud, Azure)
And hundreds more...

Why This Exists

As a developer who's worked on several SaaS products, I kept running into the same problem: finding potential customers is hard.

If you're building a Shopify app, wouldn't it be helpful to know which companies use Shopify? If you're selling a WordPress plugin, where do you even start looking for leads?

Traditional sales tools charge $99+/month for this data. I thought developers deserved better.

Real-World Use Cases

🎯 For Sales & Marketing

# Each dataset contains 500 sample companies
$ cat companies-using-stripe.csv | wc -l
500

That's 500 verified examples to start your research. The full dataset (68,072 companies) is available through the pro version.

📊 For Competitive Analysis

Want to know who your competitors' customers are? Cross-reference tech stacks:

# Companies using both Shopify AND Klaviyo
comm -12 <(sort companies-using-shopify.csv) \
         <(sort companies-using-klaviyo.csv)

🔬 For Market Research

Track adoption trends over time. The data updates daily, so you can monitor:

How fast is Next.js growing vs. traditional frameworks?
Which e-commerce platform is gaining market share?
What's the average tech stack for a successful SaaS company?

🤖 For Data Scientists

Train ML models on real tech adoption patterns:

import pandas as pd

# Load multiple datasets
shopify = pd.read_csv('companies-using-shopify.csv')
stripe = pd.read_csv('companies-using-stripe.csv')

# Analyze correlation between technologies
merged = pd.merge(shopify, stripe, on='domain', how='inner')
print(f"Overlap: {len(merged) / len(shopify) * 100:.1f}%")

What's In The Data?

Each dataset provides 500 sample records from the complete database. Each company record includes:

Company name and domain
Geographic location (country/state)
Technology stack detected
Service type (B2B, B2C, etc.)
Quality scores for data verification
Last verified date

Here's a sample:

company_name,domain,country,technology,last_verified
Acme Corp,acme.com,United States,Shopify,2026-02-08
TechStart,techstart.io,United Kingdom,Next.js,2026-02-08

Why 500 records? It's enough to:

Test your analysis workflows
Understand market patterns
Build proof-of-concepts
Validate your targeting strategy

Need the full dataset? That's what Leadita Pro is for.

How I Built This

The crawler runs on a distributed system that:

Fetches website HTML and JavaScript bundles
Identifies technology fingerprints (CDN URLs, meta tags, script signatures)
Validates findings with multiple detection methods
Stores results in normalized CSV/JSON formats
Re-crawls daily to keep data fresh

Detection accuracy: ~96% based on manual spot-checks against 1,000 random samples.

Browse by Technology

Each technology has 500 sample companies available. Here are some popular ones:

JavaScript Frameworks:

Companies using React (500 samples from 12,411 total)
Companies using Next.js (500 samples from 340,205 total)
Companies using Vue.js (500 samples)

Backend Stacks:

Companies using Laravel (500 samples from 5,482 total)
Companies using Django (500 samples from 597 total)
Companies using Ruby on Rails (500 samples from 8,222 total)

SaaS Tools:

Companies using HubSpot (500 samples from 86,132 total)
Companies using Intercom (500 samples from 21,293 total)
Companies using Segment (500 samples from 8,573 total)

Getting Started

Download Individual Datasets

# Clone the repo
git clone https://github.com/leadita/tech-stack-datasets.git

# Navigate to a specific technology
cd tech-stack-datasets/leads/companies-using-shopify

# The data is available in both CSV and JSON
ls
# shopify-companies.csv
# shopify-companies.json

Quick Analysis with jq

# Count companies by country
cat companies-using-stripe.json | \
  jq -r '.[] | .country' | \
  sort | uniq -c | sort -rn | head -10

Load into PostgreSQL

CREATE TABLE companies (
  name VARCHAR(255),
  domain VARCHAR(255) PRIMARY KEY,
  country VARCHAR(100),
  technology VARCHAR(100),
  verified_date DATE
);

COPY companies FROM '/path/to/companies-using-shopify.csv' 
DELIMITER ',' CSV HEADER;

-- Query insights
SELECT country, COUNT(*) as total
FROM companies
WHERE technology = 'Shopify'
GROUP BY country
ORDER BY total DESC
LIMIT 10;

What's Free vs. What's Pro

Free (Open Source):

✅ 500 sample records per technology
✅ 403 technologies covered
✅ Daily updated data
✅ CSV & JSON formats
✅ No registration required

Pro Version:

🔒 Full datasets (millions of records)
🔒 Verified email addresses & phone numbers
🔒 API access
🔒 Historical data & trends
🔒 Custom filtering & exports

The sample data is genuinely useful for:

Exploratory analysis - Test your hypotheses before committing
Proof of concepts - Validate your product-market fit
Learning & research - Study tech adoption patterns
Portfolio projects - Build data apps with real data

For sales teams needing thousands of leads with contact info, check out Leadita Pro.

Current Stats

In the Open Repo:

200,000+ sample records (500 per tech × 403 technologies)
403 technologies tracked
Daily updates for data freshness
100% open source (MIT license)

Total Database:

51.3M+ companies indexed
Billions of data points
Daily crawls across the web

Roadmap

Some features I'm working on:

[ ] Historical data (track tech adoption over time)
[ ] API access for programmatic queries
[ ] More granular tech detection (framework versions, specific libraries)
[ ] Company employee count estimates
[ ] Funding/revenue data integration

Contributing

Found a bug? Have suggestions? Want to add new technologies to track?

Issues: GitHub Issues
Discussions: Share your use cases and ideas
PRs: Always welcome!

Try It Yourself

Pick a technology you're interested in and explore who's using it:

Browse the full list of technologies
Download the CSV/JSON for any tech
Run your own analysis
Share what you find!

Links:

GitHub Repo: leadita/tech-stack-datasets
Website: leadita.com
Questions? Drop a comment below 👇

If you find this useful, please ⭐ the repo on GitHub. It helps others discover the project!

Building tools that should be free. Follow along for more open data projects.

How to Embed a Free Instagram Widget on Your Website

haynajjar — Sat, 22 Mar 2025 15:54:46 +0000

If you are looking to embed your Instagram feed on your website without any coding hassle. Fouita’s Free Instagram Widget is the fastest way to do it! Whether you’re a blogger, business owner, or developer, Fouita makes it very easy to embed any Instagram feed on your site. Best of all, it’s completely free and works on personal and business profiles, and even hashtags, without connecting to the Instagram API.

Why Choose Fouita’s Instagram Widget?

Before diving into the how-to steps, let’s talk about why this widget is a game-changer:

No Coding Required: Just copy and paste the embed code.
Live Instagram Feed: Automatically updates with your latest posts.
Fully Customizable: Match the widget’s design to your website’s style.
Responsive & Fast: Works seamlessly on all devices and loads quickly.
No Login Required: Generate and embed.
No API Needed: Skip the complexity of Instagram’s API setup.
Completely Free: No subscription needed

Live Demo

Want to see it in action? Check out the live demo here.

How to Embed the Instagram Widget

Here’s a step-by-step guide to embedding the Instagram widget on your website:

Step 1: Visit Fouita's Instagram Widget Page

Go to Fouita’s Instagram Widget page to get started.

Step 2: Customize Your Widget

Insert your Instagram profile link, username, or hashtag to pull the feed.
Customize the layout and colors to match your website’s design.

Step 3: Copy the Embed Code

Once you’ve customized the widget, copy the generated embed code.

Step 4: Paste the Code into Your Website

Paste the embed code into your website’s HTML where you want the Instagram feed to appear.

Example Embed Code

Here’s what the embed code looks like:

<div id="ft-insta-app"></div>
<script type="module">
    import App from "https://cdn.fouita.com/public/instagram-feed.js"; 
    new App({ 
        target: document.getElementById("ft-insta-app"), 
        props: {
            "settings": {
                "layout": "carousel",
                "header": true,
                "autoplay": true,
                "zigzag": false,
                "cols": 4,
                "cardHeight": 300,
                "gap": 0,
                "direction": "down",
                "height": 700,
                "bgColor": "",
                "txtColor": "",
                "ukey": "xxxxxx-xxxx-xxxxx-xxxx-xxxxxxxxxx"
            }
         }
    });
</script>

Customization Options

The widget comes with a variety of settings to tailor it to your needs:

Option	Default Value	Description
`layout`	`"carousel"`	Choose between `"carousel"`, `"grid"`, or `"masonry"` layouts.
`header`	`true`	Show or hide the Instagram profile info.
`autoplay`	`true`	Enable auto-scrolling for carousel, grid, or masonry views.
`zigzag`	`false`	Works with masonry layout when autoplay is active.
`cols`	`4`	Set the number of columns (1 to 6).
`cardHeight`	`300`	Set a fixed card height in pixels. Use `0` for auto height.
`gap`	`0`	Adjust the gap between cards (1 to 5).
`direction`	`"down"`	Set the animation direction: `"down"` or `"up"`.
`height`	`700`	Set the full widget height in pixels. Use `0` for full height.
`bgColor`	`""`	Set the background color of the widget (transparent by default).
`txtColor`	`""`	Set the text color of the widget (defaults to your site’s font color).
`ukey`	`"xxxxxx..."`	Unique key generated for the feed request.

Need More Advanced Features?

If you’re looking for more advanced customization options (like removing branding or adding premium features), check out Fouita’s Advanced Instagram Feed Widget.

By embedding Fouita’s Instagram widget, you will enhance your website’s visual appeal and keep your audience engaged with your latest Instagram posts. Try it out today and see the difference it makes!

Open-Source NoCode Form builder

haynajjar — Thu, 29 Dec 2022 14:37:50 +0000

A Form builder built with svelte and tailwindcss

Most Form builders offer a powerful way to integrate and manage inputs, but they lack the design customization.

We built this simple form builder that can adapt easily with any website design.

Open Source

More details on how to install and use can be found on Form builder repo

Demo Link

Try it on Fouita Form Website

Cusomization

<script>
  import FormEditor from "@fouita/form-editor"

  // you can create a button to toggle the editable variable
  let editable = true
  let form =  {
      "name": "My Form",
      "version": "18"
    }

  const settings = {
      textColor: "250 250 250";
      bgColor: "0 0 0";
      outlineColor: "165 180 252";
      buttonBgColor: "79 70 229";
      buttonTextColor: "255 255 255";
      borderColor: "200 200 200";
      form: formSimple;
      rounded: "rounded-none";
      size: "full";
      rtl: false;
      transparent: false;
      btnsPosition: "start"; // start, end, center
  }

  // get updated data
  $: if(form) {
    // form is updated
  }

  function handleSubmit(evt) {
    // send data to your server
  }
</script>

<FormEditor bind:form {editable} {...settings} on:submit={handleSubmit} />

Hope you like it,

Any feedback is very appreciated.

Introducing Fouita Widgets

haynajjar — Sat, 10 Dec 2022 09:22:15 +0000

Simple Widgets designed to overcome the challenge of capturing leads and engaging customers.

The website: fouita.com
Explore widgets: fouita.com/explore

One challenge that many website owners face when trying to capture leads is that visitors may not always be ready to provide their contact information or commit to a purchase. This can be due to a variety of reasons, such as a lack of trust in the website or product, a lack of understanding of the value proposition, or simply not being at the right stage in the buying process.

To overcome this challenge, website owners can use various tactics to encourage visitors to provide their contact information or make a purchase. Some examples of these tactics include:

Offering a valuable and compelling lead magnet, such as a free e-book or webinar, in exchange for the visitor's contact information
Providing clear and concise information about the value proposition of the product or service, and highlighting the benefits and features that the visitor will receive
Using persuasive and persuasive language and design elements on the website to influence the visitor's decision
Creating a sense of urgency or scarcity by offering limited time discounts or promotions

By using these tactics, website owners can increase the likelihood that visitors will provide their contact information or make a purchase, and thus capture more leads.

Embeddable widgets that can help:

Hope you like it!
Thank you!

Tailwindcss dialog built with svelte

haynajjar — Sat, 19 Sep 2020 14:07:10 +0000

Svelte and tailwindcss Dialog component

Dialog component built with svelte and tailwindcss, show modal or info messages!

Installation

$npm i -D @fouita/dialog

Usage

To show the dialog component we just need to set true to the visible prop

<script>
 import Dialog from '@fouita/dialog'
</script>

<Dialog visible title="Simple Title" body="Simple message!" />

Show and hide + Filter

If we want to show the Dialog when clicking on a button, we better bind the value with bind:visible={value} prop.

We can use also filter={false} to show the dialog without background

<script>
 import Dialog from '@fouita/dialog'
 let visible = false
 function toggle(){
     visible = !visible
 }
</script>

<button class="px-4 py-2 m-2 border" on:click={toggle}>Toggle</button>
<Dialog bind:visible title="Simple Title" body="Simple message!" />

Change round and color

To change the rounding style we can use tailwindcss rounding suffixes none, sm, md, lg and to change the color we can from tailwindcss color names

<Dialog rounded=sm color=pink visible title="Simple Title" body="Simple message!" />

You can also invert colors by adding inverted prop

<Dialog rounded=sm inverted color=pink visible title="Simple Title" body="Simple message!" />

Add custom elements

To add custom elements in the title, we can use icon prop, and to update the body with html we can just write inside the Dialog tag

<script>
 import Dialog from '@fouita/dialog'
 import {LockIcon} from 'svelte-feather-icons'
</script>

<Dialog visible title="With Icon" icon={LockIcon}>
    <div class="p-4 text-center w-64 h-64 text-2xl">
        Cusom Body
    </div>
</Dialog>

Dialog position & align

position prop indicates the starting point when showing a dialog, there is 3 positions top, middle, bottom

align prop handles the horizontal position of the component left, center, right

by default we use middle and center to have the dialog in the center of the page

<Dialog visible title="Simple Title" inverted position=bottom align=left rounded=none >
    <div class="p-4 text-center w-64 h-64 text-2xl">
        Cusom Body
    </div>
</Dialog>

The follwing is an example of dialog that popsup from the bottom center of the page

<script>
    import Chip from '@fouita/chip'
    import Dialog from '@fouita/dialog'         
    import {CheckCircleIcon} from 'svelte-feather-icons'

    let visible = true
</script>

<Dialog bind:visible position=bottom align=center filter={false} rounded="md" >
    <Chip size="xl" rounded="none" color="teal" class="mx-0 my-0" onDelete={() => dialog4=false} >
        <div slot="avatar">
            <CheckCircleIcon class='w-5 h-5 mx-2' />
        </div>
        <div class="py-2">
            This is a success messsage
            <div class="text-sm font-base">
                More information about the message can be found <u>here</u>
            </div>
        </div>
    </Chip>
</Dialog>

Here is another example to show a list of icons in a dialog box

<script>
    import Dialog from '@fouita/dialog'
    import {LinkedinIcon,FacebookIcon,TwitterIcon,SlackIcon} from 'svelte-feather-icons'
</script>
<Dialog visible filter={false} align=right color=purple >
    <div class="p-4 text-center w-12 h-48 text-purple-600 text-2xl flex flex-col items-center">
        <LinkedinIcon class="w-6 h-6 m-2 cursor-pointer hover:text-purple-800" />
        <FacebookIcon class="w-6 h-6 m-2 cursor-pointer hover:text-purple-800" />
        <TwitterIcon class="w-6 h-6 m-2 cursor-pointer hover:text-purple-800" />
        <SlackIcon class="w-6 h-6 m-2 cursor-pointer hover:text-purple-800" />
    </div>
</Dialog>

Custom width and height

With position we can also indicate the width and the height of the dialog by using w and h props

<Dialog position=bottom w=full filter={false} rounded=none >
 ...
</Dialog>

or we can show a side bar like the following, we used closable={false} to hide the X icon and disable default closing

<Dialog visible h=full title="Side Menu" closable={false} inverted align=left rounded=none >
    <div class="p-4 text-center w-64 h-64 text-2xl">
        Cusom Menu
    </div>
</Dialog>

Source Code

Fouita dialog component

About

Fouita : UI framework for svelte + tailwind components

Svelte and tailwindcss Chip component

haynajjar — Fri, 18 Sep 2020 13:09:28 +0000

Svelte and Tailwindcss Chip component

Chip and alert component built with svelte and tailwindcss

Installation

$npm i -D @fouita/chip

Usage

You can use this component as a simple chip (label) or as an alert.

<script>
    import Chip from '@fouita/chip'
</script>

<div class="flex items-center">
    <Chip class="m-5" >Simple chip</Chip>
</div>

Changing size & color

To change size you can use tailwind size scale xs, sm, md, lg, xl, same goes for colors red, blue, yellow, orange, indigo, pink, purple, gray, green, teal.

You can use outline to change the background with lighter color and make the text darker

<div class="flex items-end">

    <Chip color=red >   Hello! </Chip>
    <Chip outline size=sm color=indigo> Hello! </Chip>
    <Chip size=md color=teal>   Hello! </Chip>
    <Chip outline size=lg color=pink>   Hello! </Chip>

</div>

Change rounding

You can use change the rounding of the Chip component by using the rounded prop and tailwindcss rounded options none, sm, md, lg, full

<div key=k1 class="flex items-end">

    <Chip color=red rounded=none >  Hello! </Chip>
    <Chip outline color=indigo rounded=sm>  Hello! </Chip>
    <Chip color=teal rounded=md>    Hello! </Chip>
    <Chip outline  color=pink rounded=lg>   Hello! </Chip>
    <Chip color=yellow rounded=full>    Hello! </Chip>

</div>

Closing a Chip

To close a Chip you need to pass onDelete prop with close method, like the follwoing. You can also choose the fade duration (in ms) when closing by adding tr_duration={N} , N=200 by default

<script>
    import Chip from '@fouita/chip'
    let show_chip = true
    function removeChip(){
        show_chip = false
    }
</script>

<div key=k1 class="flex items-end p-5">

    {#if show_chip} 
        <Chip color=red rounded=none onDelete={removeChip} tr_duration={500}>   
            Hello! 
        </Chip>
    {/if}

</div>

Add avatar or custom icon

To add an avatar we can use @fouita/avatar , see more on how to use fouita avatar

<script>
    import Avatar from '@fouita/avatar'
    import Chip from '@fouita/chip'
    import {HeartIcon} from 'svelte-feather-icons'
</script>

<div class="flex flex-wrap p-6">
    <Chip outline size=sm rounded=lg color=purple>  
        <div slot=avatar>
            <Avatar size=6 rounded src="https://randomuser.me/api/portraits/women/68.jpg" class="ml-0 my-0 text-xs rounded-lg" />
        </div>
        Hello! 
    </Chip>

    <Chip color=red size=sm rounded=full>   
        <div slot=avatar>
            <HeartIcon class='w-4 h-4 mr-2' />
        </div>
        Hello! 
    </Chip>
</div>

Alerts examples

To use the chip as alerts, here is an example on how you can achieve that!

<script>
  import Chip from "@fouita/chip";
  import {
    AlertOctagonIcon,
    InfoIcon,
    CheckCircleIcon
  } from "svelte-feather-icons";

  let alerts = {
    error1: true,
    error2: true,
    info1: true,
    info2: true,
    success1: true,
    success2: true
  };

  function remove(key) {
    alerts[key] = false;
  }
</script>

<div>
  {#if alerts['error1']}
    <Chip
      outline
      rounded=md
      color=red
      size=xl
      onDelete={() => remove('error1')}
    >
      <div slot=avatar>
        <AlertOctagonIcon class="w-5 h-5 mx-2" />
      </div>
      There is an error in your code
    </Chip>
  {/if}

  {#if alerts['error2']}
    <Chip
      rounded=md
      color=red
      size=xl
      onDelete={() => remove('error2')}
    >
      <div slot=avatar>
        <AlertOctagonIcon class="w-5 h-5 mx-2" />
      </div>
      There is an error in your code
    </Chip>
  {/if}

  <div class="mt-4"></div>
  {#if alerts['info1']}
    <Chip
      outline
      rounded=md
      color=yellow
      size=xl
      onDelete={() => remove('info1')}
    >
      <div slot=avatar>
        <InfoIcon class="w-5 h-5 mx-2" />
      </div>
      <div class="py-2">
        This is an info message
        <div class="text-sm font-base">
          More information about the message can be found
          <a href="/#">here</a>
        </div>
      </div>
    </Chip>
  {/if}

  {#if alerts['info2']}
    <Chip
      rounded=md
      color=yellow
      size=xl
      onDelete={() => remove('info2')}
    >
      <div slot=avatar>
        <InfoIcon class="w-5 h-5 mx-2" />
      </div>
      This is an info message
    </Chip>
  {/if}

  <div class="mt-4"></div>
  {#if alerts['success1']}
    <Chip
      outline
      rounded=md
      color=green
      size=xl
      onDelete={() => remove('success1')}
    >
      <div slot=avatar>
        <CheckCircleIcon class="w-5 h-5 mx-2" />
      </div>
      This is a success messsage
    </Chip>
  {/if}

  {#if alerts['success2']}
    <Chip
      rounded=md
      color=green
      size=xl
      onDelete={() => remove('success2')}
    >
      <div slot=avatar>
        <CheckCircleIcon class="w-5 h-5 mx-2" />
      </div>
      <div class="py-2">
        This is a success messsage
        <div class="text-sm font-base">
          More information about the message can be found
          <a href="/#">here</a>
        </div>
      </div>
    </Chip>
  {/if}

</div>

Source Code

Fouita chip component

About

Fouita : UI framework for svelte + tailwind components

Svelte and Tailwindcss Slider

haynajjar — Tue, 15 Sep 2020 16:01:31 +0000

Svelte and Tailwind Slider component

Form range (slider) component built with svelte and tailwindcss

Installation

    $npm i -D @fouita/slider

Usage

Single value range

image slider-simple

<script>
    import Slider from '@fouita/slider'                 
    let value = 21
</script>

<div class="p-6 text-3xl text-center">
    {value} 
</div>
<Slider class="mt-5 mx-6" min={0} max={30} bind:value />

Multi value range

Multi values works with array of two values, like the following

<script>
    import Slider from '@fouita/slider'                 
    let value = [10,21]
</script>

<div class="p-6 text-3xl text-center">
    {value} 
</div>
<Slider class="mt-5 mx-6" min={0} max={30} bind:value />

With tooltip

By adding tooltip prop we can show the value when sliding

<Slider tooltip min={0} max={30} bind:value />

We can show the tooltip when hovering over the slider pointer by adding tooltip=hover

<Slider tooltip=hover min={0} max={30} bind:value />

Custom color

We can change the color by adding color prop

<Slider tooltip=hover color=pink min={0} max={30} bind:value />

Custom labels

To change the labels min/max we need to attribute minLabel & maxLabel. We can also remove them by using an empty string.

<Slider tooltip=hover minLabel='$0' maxLabel='Expensive' min={0} max={30} bind:value />

Custom indicators

To change the values on the tooltip we can add a value format by using valueLabel prop.
In case you need to use only one value (not a range) you can add a simple string valueLabel="$%d"

<Slider valueLabel={['%d €','%d €']} tooltip min={0} max={30} bind:value />

Custom scale

We can use custom array of values and show the desired label when we hit a specific number.
Assuming a scale of skills [basic, medium, advanced, expert]

0-5 : basic
5-15 : medium
15-25: advanced
25-30: expert

<script>
  import Slider from '@fouita/slider'

  let skill_level=['Basic','Medium','Advanced','Expert']
  let vlevel=10 // medium by default 

</script>

<Slider bind:value={vlevel} min={0} max={30} minLabel="Basic" maxLabel="Expert" valueLabel={skill_level[Math.round(vlevel/10)]} tooltip="hover" />

Source Code

Fouita slider

About

Fouita : UI framework for svelte + tailwind components

Svelte and tailwindcss tooltip!

haynajjar — Sun, 13 Sep 2020 13:06:01 +0000

Svelte and Tailwind tooltip component

Easy to use Tooltip component for your svelte and tailwindcss projects

Install

 $npm i @fouita/tooltip -D

Usage

Import the tooltip component and use it like the following

<script>
    import Tooltip from '@fouita/tooltip'
</script>

<div class="m-4 p-4 border rounded text-center relative">
    Element 1
    <Tooltip pointer=middle position=top text="Middle Top" show/>
</div>

Positions

top
left
right
bottom

Pointer

start
middle
end

Change Color

You can use color and text_color props to customize the color

<div class="m-4 p-4 border rounded text-center relative">
    Element 1
    <Tooltip pointer=start position=top text="Start Top" text_color=red-100 color=red-700 show />
</div>

Hover action

To show the tooltip when hovering on an element you can use on:mouseenter and on:mouseleave events and toggle a show flag, like the following.

<script>
    import Tooltip from '@fouita/tooltip'
    let show_elm = false
</script>

<div class="p-4 w-32 m-20 border rounded text-center relative" on:mouseenter={() => show_elm=true} on:mouseleave={() => show_elm=false}>
        Hover
        <Tooltip pointer=middle position=top text="Info to share!" w=48 show={show_elm}/>
</div>

We can also customize the width of the tooltip by adding w attribute and use the scale used in tailwindcss.

Custom content

To add custom content to a tooltip we can just add children tags and add some html

<script>
    import Tooltip from '@fouita/tooltip'
    let show_elm = false
</script>

<div class="m-20 mt-64 w-32 p-4 border text-center relative cursor-pointer" on:click={() => show_elm=!show_elm} >
        Click
        <Tooltip pointer=end position=right color="red-500" show={show_elm}>
            <div class="p-4 w-64 bg-red-500 text-red-100">
                <div class="text-2xl font-bold mb-2">Custom Content!</div>
                <p class="text-left mb-4">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quos dolores excepturi placeat, eos et iste magnam illo voluptates veritatis exercitationem laborum, doloremque eius omnis, enim corrupti inventore rem vero assumenda.</p>
                <button class="border-2 border-white py-2 px-4">
                    Great!
                </button>
            </div>
        </Tooltip>
</div>

Source code

Svelte and tailwindcss Tooltip

About

Fouita : UI framework for svelte + tailwind components

DataTable with Svelte and Tailwind

haynajjar — Sat, 12 Sep 2020 13:05:36 +0000

Responsive DataTable with svelte and tailwindcss

Responsive data-table built with svelte and tailwindcss

Installation

    $npm i @fouita/data-table -D

Simple usage

To fill out the table you can add a simple json data and a head attribute to specify what to display.

<script>
    import DataTable from '@fouita/data-table'

    const data = [
          {
            "first_name": "Wynn",
            "last_name": "Donovan",
            "company": "EMTRAK",
            "email": "wynn.donovan@emtrak.io",
            "phone": "+1 (809) 577-3968",
            "address": "555 Freeman Street, Winesburg, New Jersey, 8986"
          },
          {
            "first_name": "Arlene",
            "last_name": "Cooley",
            "company": "XUMONK",
            "email": "arlene.cooley@xumonk.us",
            "phone": "+1 (926) 459-2880",
            "address": "659 Dupont Street, Lynn, West Virginia, 7173"
          },
          {
            "first_name": "Jewell",
            "last_name": "Sellers",
            "company": "TECHADE",
            "email": "jewell.sellers@techade.info",
            "phone": "+1 (957) 456-2432",
            "address": "955 Beekman Place, Waikele, Northern Mariana Islands, 341"
          }
    ]

    const head= {
        first_name: 'First Name',
        last_name: 'Last Name',
        email: 'Email',
        phone: 'Phone',
        company: 'Company',
    }


</script>


<DataTable {head} rows={data} hover />

The above example does not show the attribute address because it's not included in the head. You can add a list of selection and update the head list dynamically if you want.

By adding hover we tell the table to change the background of the row when hovering.

Stripped

by adding a stripped prop the table becames like the following

<DataTable {head} rows={data} stripped />

Customizing Header

We can customize the alignement of text, the background/text color of all/some columns.

By adding _class attribute inside the head we can change the style easily

    const head= {
        first_name: 'First Name',
        last_name: 'Last Name',
        email: 'Email',
        phone: 'Phone',
        company: 'Company',
        _class: 'bg-red-200 text-red-700'
    }

To update the entire column we can attribute _class to the specific head property like the following

    const head= {
        first_name: 'First Name',
        last_name: 'Last Name',
        email: 'Email',
        phone: {value: 'Phone', _class: 'text-right bg-blue-200 text-blue-900'},
        company: {value: 'Company', _class: 'text-left'},
        _class: 'bg-red-200 text-red-700'
    }

This will override the global head class style.

Customizing rows/cells

We can customize rows and cells by also adding _class attribute inside the data

    const data = [
          // ... 
          {
            "first_name": "Arlene",
            "last_name": "Cooley",
            "company": "XUMONK",
            "email": "arlene.cooley@xumonk.us",
            "phone": "+1 (926) 459-2880",
            "address": "659 Dupont Street, Lynn, West Virginia, 7173",
            _class: 'bg-green-200 font-bold text-red-700 text-center'
          },
          // ...
    ]

It goes the same for specific cells like the follwing

    const data = [
          // ... 
           {
            "first_name": "Arlene",
            "last_name": "Cooley",
            "company": "XUMONK",
            "email": "arlene.cooley@xumonk.us",
            "phone": {
                    value: "+1 (926) 459-2880", 
                    _class: 'text-white bg-green-600 p-5 border-2 border-red-600 text-center'
                },
            "address": "659 Dupont Street, Lynn, West Virginia, 7173",
                _class: 'bg-green-200 font-bold text-red-700 text-center'
          },
          // ...
    ]

Sort, Search and Pagination

To keep things simple, the sorting and pagination functions are custom depending on how you are planning to use the DataTable (with preloaded data or you prefer doing server request).

this is an example on how to use them.

Data Sorting

<script>
    import DataTable from '@fouita/data-table'

    let rows = [
          {
            "first_name": "Wynn",
            "last_name": "Donovan",
            "company": "EMTRAK"
          },
          {
            "first_name": "Arlene",
            "last_name": "Cooley",
            "company": "XUMONK",
            _class: 'bg-green-200 font-bold text-red-700 text-center'
          },
          {
            "first_name": "Jewell",
            "last_name": "Sellers",
            "company": "TECHADE"
          }
    ]

    // define your sort function (call API if you like), it should return an object with 'asc' and 'desc' methods
    const sortFn = (label) => {
        return {
            asc: () => {
                rows = rows.sort((a,b) => a[label]>b[label] ? 1:-1)
            },
            desc: () => {
                rows = rows.sort((a,b) => a[label]<b[label] ? 1:-1)
            }
        }
    }

    // add sort attribute in the column head and call the sort function
    let head= {
        first_name: {
            value: 'First Name', 
            sort: sortFn('first_name')
        },
        last_name: {
            value: 'Last Name', 
            sort: sortFn('last_name')
        },
        company: 'Company',
    }



</script>


<DataTable {head} {rows} hover />

Data search

For the search we can add an input that filter the data rows and return a filtred list, no big deal!

We can create a Search.svelte component like the following

<script>
    export let search = ''
    import {SearchIcon} from 'svelte-feather-icons'
</script>


<div class="flex flex-row" >
    <div class="text-gray-600 border border-gray-400 flex flex-row rounded max-w-xs my-3 bg-white" >
        <input type="search" bind:value={search} placeholder="Search..." class="h-10 w-64 rounded text-sm focus:outline-none px-3">
        <button class="m-3 focus:outline-none" >
            <SearchIcon class="w-4 h-4" />
        </button>
    </div>
</div>

And then use it with the search function, we can use Fuse for simple search

<script>
    import DataTable from '@fouita/data-table'
    import Fuse from 'fuse.js/dist/fuse.min.js';
    import Search from './Search.svelte'

    const users = [
          {
            "first_name": "Wynn",
            "last_name": "Donovan",
            "company": "EMTRAK"
          },
          {
            "first_name": "Arlene",
            "last_name": "Cooley",
            "company": "XUMONK",
            _class: 'bg-green-200 font-bold text-red-700 text-center'
          },
          {
            "first_name": "Jewell",
            "last_name": "Sellers",
            "company": "TECHADE"
          }
    ]

    const head= {
        first_name: 'First Name',
        last_name: 'Last Name',
        company: 'Company'
    }

    let rows = users
    let keywords = ''
    const options = {
      keys: ['first_name', 'last_name', 'company']
    }
    const fuse = new Fuse(rows, options)

    let keywords=''

    $: if(keywords){
        // Call server here if you need server request
        let result = fuse.search(keywords)
        rows = result.map(r => r.item)
    }

    $: if(keywords==''){
        rows = users
    }
</script>

<Search />
<DataTable {head} {rows} />

Pagination

for the pagination you can checkout Fouita Pagination and update the data each time you navigate (it's very simple!)

Source code

Svelte and tailwindcss DataTable

Responsive Svelte + Tailwind Pagination component

haynajjar — Fri, 11 Sep 2020 12:49:55 +0000

Simple pagination component built with svelte and tailwindcss

Installation

    $npm i @fouita/pagination -D

Simple usage

<script>
    import Pagination from '@fouita/pagination'
    let current =1
    let num_items=30
    let per_page=3
</script>

<Pagination bind:current={current} {num_items} {per_page} />

Style rounded

<Pagination rounded bind:current={current} {num_items} {per_page} />

Change Size to small

<Pagination small rounded bind:current={current} {num_items} {per_page} />

Change Color

You can use a color from tailwindcss list (gray, red, blue, indigo, pink, purple, teal, orange, yellow)

<Pagination small rounded color="pink" bind:current={current} {num_items} {per_page} />

Per page selection

You can add

<script>
    import Pagination from '@fouita/pagination'

    let current =1
    let num_items=30
    let per_page=3  
</script>

<div class="flex justify-between items-center">
    <div class="flex items-center">
        Per page:
        <select class="border px-2 rounded ml-2" bind:value={per_page}>
            <option>3</option>
            <option>5</option>
            <option>10</option>
        </select>
    </div>
    <Pagination small  bind:current={current} {num_items} per_page={per_page} />
</div>

Navigate Action

if you like to perform some actions or API requests when navigating through pages, you can do so by calling on:navigate event.

<script>
    import Pagination from '@fouita/pagination'

    let current =1
    let num_items=30
    let per_page=3  

    // let list_fetch = ... your init data
    async function changePage(evt){
        current = evt.detail
        // list_fetched = ... FETCH DATA HERE
    }
</script>

<Pagination small {current} {num_items} per_page={per_page} on:navigate={changePage} />

Source code

You can find the source code at fouita pagination

Svelte + Tailwindcss Avatar Component

haynajjar — Thu, 10 Sep 2020 12:01:40 +0000

install

    $npm i @fouita/avatar -D

Simple usage

<script>
    import Avatar from '@fouita/avatar'
</script>

<div class="flex justify-center">

    <Avatar src="https://randomuser.me/api/portraits/men/62.jpg" size=12 />
    <Avatar src="https://randomuser.me/api/portraits/women/68.jpg" size=12 />
    <Avatar size=12 />
    <Avatar size=12 bg="red-600" >BA</Avatar>

</div>

Avatar Group

Use the avatar in a group like the following

<script>
    import Avatar from '@fouita/avatar'

    const base_url = "https://randomuser.me/api/portraits/"

    let imgs = [
        {src: 'women/13.jpg', name: 'w_13'},
        {src: 'women/25.jpg', name: 'w_25'},
        {src: 'men/34.jpg', name: 'men_34'},
        {src: 'women/35.jpg', name: 'w_35'},
        {src: 'men/48.jpg', name: 'men_48'}
    ]

    let klass = '-ml-4 rounded-full border-r-2 border-white'
</script>

<div class="flex flex-row-reverse justify-center">

    <Avatar class="{klass} text-base text-white" size="10" bg="gray-500" >
        +5
    </Avatar>
    {#each imgs as img}
        <Avatar class="{klass}" size="10" src={base_url+img.src} alt={img.name} bg="white" />       
    {/each}

</div>

Avatar badge

Add custom color badges to the avatar


<script>
    import Avatar from '@fouita/avatar'                 
    let badge_class = 'rounded-full w-3 h-3 absolute bottom-0 right-0'

</script>

<div class="flex justify-center">

    <Avatar src="https://randomuser.me/api/portraits/men/62.jpg" size=12>
        <div slot="badge" class="bg-green-500 {badge_class}" key="k2">
        </div>
    </Avatar>   

    <Avatar src="https://randomuser.me/api/portraits/women/68.jpg" size=12>
        <div slot="badge" class="bg-red-500 {badge_class}" key="k3">
        </div>
    </Avatar>   

    <Avatar src="https://randomuser.me/api/portraits/women/75.jpg" size=12>
        <div slot="badge" class="bg-orange-500 {badge_class}" key="k4">
        </div>
    </Avatar>   

</div>

Avatar round

Avatar custom round example

<script>
    import Avatar from '@fouita/avatar'
</script>

<div class="flex justify-center">

    <Avatar class="rounded-none text-white text-xl"  />
    <Avatar class="rounded-sm text-white text-xl"  />
    <Avatar class="rounded text-white text-xl"  />
    <Avatar class="rounded-lg text-white text-xl"  />
    <Avatar class="rounded-full text-white text-xl"  />

</div>

Avatar size

Custom size for your avatar based on tailwind size scale

<script>
    import Avatar from '@fouita/avatar'
    let src = 'https://randomuser.me/api/portraits/women/68.jpg'
</script>

<div class="flex justify-center" key="k1">
    <Avatar size="8" {src} />
    <Avatar size="10" {src} />
    <Avatar size="12" {src} />
    <Avatar size="16" {src} />
    <Avatar size="20" {src} />
</div>

Custom text, icon

Custom text/icon you can use

<script>
    import Avatar from '@fouita/avatar'
    import {MailIcon} from 'svelte-feather-icons'
</script>

<div class="flex justify-center">

    <Avatar alt="User Name"  size=12/>
    <Avatar alt="First Last" bg="green-500" size=12 />
    <Avatar bg="purple-500" size=12>
        XY
    </Avatar>
    <Avatar bg="pink-500" size=12>
        <MailIcon class="w-8" />
    </Avatar>

</div>

Source code

You can find the source code at fouita avatar

How to get your product the attention it deserves

haynajjar — Mon, 11 May 2020 23:27:13 +0000

We all have great ideas and maybe awesome products with unique and valuable features. But we feel struggle to sell it, even after a great validation process.
I am not an expert in the subject, but as they said, the best relationship advice comes from single people 😎

Since I’m reading about copyrighting ( after listening to the podcast with sam parr ) i started to get some insights about the power of words we choose to communicate our value proposition. In this post, i will share my takeaway after reading the book ADWEEK COPYRIGHTING HANDBOOK by Joseph Sugarman.

1. Start with printed version (or a document)

By starting with a document having a headline, subheadline, and section of texts you can easily get ideas for pictures, videos, and maybe interactive interface.
Use the "think tank" method, find 3 words unrelated to your problem, and get a new perspective.

2. Create a selling environment

Amazon shows a great example of this technique, each page is customized to put you in the mood of buying a specific product (look at amazon echo page). If your webpage, blogpost, mail does not put the user in the mood of buying, he most likely won’t.

3. People buy concepts not products

When they introduced a digital watch with just one additional feature of a sensor that detects the glance movement, they called it “Laser Beam Digital Watch” because they used a laser to seal the radioactive material. Then they went to tell the story. It was a huge success. Imagine they tried to explain the new feature without the concept.

4. Find your product nature

Some products take a few words to explain, others need a full descriptive page. You need to be aware of how much it takes to explain your product. Don’t try to squeeze your concept to fit a certain template, but rather find the best template that explains it.

5. The sole purpose of the headlines is getting the reader to read the first sentence

Don’t try to talk about new features or specifics in headlines, just get visitors to read the first sentence, then get them to read the second, and so on. The idea behind this is driving your visitor to the slippery slide.

6. Slippery Slide

If a user reads 25% of your content, he most likely will finish reading the hole page. You can go on then and explain your product (or concept) further.
You can use seeds of curiosity to keep the user engaged and finish with a call to action to make him subscribe, order...etc

7. Use words with emotions

People rely on emotions to make a decision, every word you write needs to be associated with emotion and drive a certain meaning to your audience. Try to look at each word separately and see what you feel when you read it.

8. Make it personal

By associating the problem/solution to the reader, we tend to establish a personal connection that goes beyond the product value, creating a safe space, and elaborating trust.

This was my conclusion after 3 days of reading about copyrighting, planning to start putting it to the test, i hope you find it somehow valuable as i did, but seriously, you should read the book.

Tell me what you think and if you recommend other books.