DEV Community: Ben ltaif

Agence Shopify en France : le guide complet pour bien choisir

Ben ltaif — Tue, 24 Mar 2026 08:12:39 +0000

Pourquoi faire appel à une agence Shopify ?
Shopify est aujourd'hui la plateforme e-commerce de référence pour les marques qui souhaitent vendre en ligne. Mais entre l'installation d'un thème gratuit et la mise en place d'une boutique performante, optimisée et custom, l'écart est considérable. C'est là qu'intervient une agence Shopify.

Une agence Shopify vous apporte trois choses qu'un développeur freelance seul ne peut pas toujours offrir : la spécialisation (maîtrise des particularités de Shopify Liquid, Storefront API, Hydrogen), la continuité (pas de dépendance à une seule personne) et la vision business (convertir, pas seulement coder).

Les critères essentiels pour choisir votre agence Shopify

Statut de Partenaire Shopify
La première vérification à faire : l'agence est-elle Partenaire Shopify certifié ? Ce statut garantit que l'équipe a été évaluée par Shopify, a accès aux ressources de développement avancées et reste informée des mises à jour de la plateforme. Exigez une preuve de ce statut avant toute discussion.
Portfolio et références sectorielles
Demandez des exemples concrets de boutiques Shopify réalisées, idéalement dans votre secteur (mode, beauté, B2B, alimentaire…). Vérifiez les performances : vitesse de chargement, Core Web Vitals, taux de conversion annoncés. Un bon portfolio vaut mieux qu'un long discours commercial.
Expertise technique réelle
Selon votre projet, vous aurez besoin de compétences spécifiques :

Liquid pour les thèmes custom classiques
Hydrogen + Remix pour les builds headless haute performance
Storefront API / Admin API pour les intégrations complexes
App Shopify pour des fonctionnalités sur mesure
Posez des questions techniques précises lors du premier appel. La qualité des réponses vous dira tout sur le niveau réel de l'équipe.

Process et transparence
Comment l'agence travaille-t-elle ? Utilise-t-elle des sprints ? Comment se font les revues ? Qui est votre interlocuteur principal ? Une agence Shopify sérieuse a un processus structuré et vous donne de la visibilité tout au long du projet — pas seulement au kick-off et à la livraison.
Engagement post-lancement
Le lancement n'est pas la fin du projet. Demandez si l'agence propose du support et de la maintenance après la mise en ligne. Les boutiques Shopify évoluent en permanence : nouvelles collections, promotions, mises à jour de la plateforme. Vous avez besoin d'un partenaire, pas d'un prestataire one-shot.

Combien coûte une agence Shopify en France ?
Les tarifs varient énormément selon la complexité du projet :

Thème Shopify personnalisé : 3 000 € – 8 000 €
Boutique Shopify sur mesure complète : 8 000 € – 20 000 €
Build headless Hydrogen : 20 000 € – 60 000 €+
Retainer mensuel (maintenance + évolutions) : 800 € – 3 000 €/mois
Méfiez-vous des offres trop basses : sous 3 000 €, vous aurez probablement un thème modifié, pas un développement sur mesure. Un budget réaliste pour une boutique professionnelle démarre à 8 000 €.

Les 5 questions à poser avant de signer
Êtes-vous Partenaire Shopify certifié ?
Pouvez-vous me montrer 3 boutiques réalisées avec vos métriques de performance ?
Qui sera mon interlocuteur principal et quelle est sa disponibilité ?
Quel est votre process si le projet prend du retard ?
Que proposez-vous après la mise en ligne ?
Conclusion
Choisir une agence Shopify en France, c'est choisir un partenaire de croissance. Prenez le temps de vérifier les certifications, d'étudier le portfolio et de sentir la culture de l'équipe. La relation que vous construisez avec votre agence Shopify est un investissement à long terme dans votre business e-commerce.

Chez Vortexia, nous sommes Partenaires Shopify et nous avons livré plus de 50 projets e-commerce. Contactez-nous pour un premier appel de découverte gratuit.``

Install Strapi v4 in Docker (without getting docked 🐳)

Ben ltaif — Sat, 03 May 2025 19:02:06 +0000

All I wanted was to launch a nice little Strapi inside a Docker container.
I type docker-compose up... and BAM → Strapi v3 😮.

“But… I asked for Strapi 4?!”

Spoiler: the official Docker image strapi/strapi → it's version 3 (and it's old 😅).

Don't panic. Let me show you how to properly install Strapi v4 in Docker, without losing your sanity.

Let’s go 👇

🎯 Why doesn’t it work out of the box?

The Docker Hub image strapi/strapi was never updated for Strapi v4.
→ It always gives you Strapi v3.6.8 (RIP 🪦).

So if you want Strapi v4 + Docker → you gotta cheat a bit.

No worries, we love cheating in dev 😏.

🏗️ The correct method → use Node.js as base + mount your Strapi project.

Instead of asking for a magic “strapi v4” image,
→ create your Strapi v4 project locally
→ and run it inside a Node.js container.

Easy.

✅ 1️⃣ Create your Strapi v4 project locally

npx create-strapi@latest app

(or yarn create strapi@latest app)

Boom, you’ve got a fresh ./app folder with Strapi.

✅ 2️⃣ Write this magical `docker-compose.yml`

version: '3'

services:
  strapi:
    image: node:18-alpine
    container_name: techlink-strapi
    working_dir: /srv/app
    command: sh -c "yarn install && yarn build && yarn start"
    environment:
      DATABASE_CLIENT: postgres
      DATABASE_NAME: strapi
      DATABASE_HOST: postgres
      DATABASE_PORT: 5432
      DATABASE_USERNAME: strapi
      DATABASE_PASSWORD: strapi123
      NODE_ENV: production
    ports:
      - '1337:1337'
    volumes:
      - ./app:/srv/app
    depends_on:
      - postgres

  postgres:
    image: postgres:15
    container_name: techlink-postgres
    restart: always
    environment:
      POSTGRES_USER: strapi
      POSTGRES_PASSWORD: strapi123
      POSTGRES_DB: strapi
    volumes:
      - pgdata:/var/lib/postgresql/data

volumes:
  pgdata:

⚠️ Important → the ./app folder must contain your pre-created Strapi v4 project (see step 1).

✅ 3️⃣ Launch Docker, captain

docker-compose up -d

🎉 Done!
Your Strapi is available at:

👉 http://localhost:1337/admin

(and this time, it’s Strapi v4, not v3 😉)

🕵️ Why does it work?

We use node:18-alpine as the engine
We mount your local Strapi project inside the container
The container installs, builds, starts everything

No ghost official image needed.
YOU are the official image now 😎

🔥 Bonus option → a Dockerfile if you want a real Docker build

Want a “closed” image? Add a Dockerfile:

FROM node:18-alpine

WORKDIR /srv/app

COPY . .

RUN yarn install
RUN yarn build

EXPOSE 1337

CMD ["yarn", "start"]

Then adapt your docker-compose.yml:

strapi:
  build: .
  ports:
    - '1337:1337'
  depends_on:
    - postgres
  environment:
    DATABASE_CLIENT: postgres
    DATABASE_NAME: strapi
    DATABASE_HOST: postgres
    DATABASE_PORT: 5432
    DATABASE_USERNAME: strapi
    DATABASE_PASSWORD: strapi123

→ Docker will build it all in one go.

📝 TL;DR

✅ strapi/strapi = Strapi v3 (DON’T use it)
✅ Create your Strapi v4 project locally
✅ Use node:18-alpine + mounted volume
✅ Or build a custom Dockerfile

There you go.

Now you can proudly say:

👉 “Yes, I have Strapi v4 running in Docker. Not v3. No cheating.”

💬 Need help with permissions, relations, API? Ping me 😉
Or share this article with your buddy struggling on Stack Overflow 🫠

TechLink powered. Peace ✌️

Testing Vue.js with Playwright: A Funny Journey to Flawless Web Appss

Ben ltaif — Mon, 02 Dec 2024 09:40:04 +0000

Playwright is a powerful end-to-end (E2E) testing framework that enables developers to write robust and reliable tests for modern web applications. When used with Vue.js, Playwright can help ensure that your application performs seamlessly across different browsers and devices. Here are some best practices for integrating Playwright with Vue.js effectively.

1. Set Up Playwright with Vue.js

Install Playwright

Before writing tests, install Playwright in your project:

npm install -D @playwright/test

You can also install specific browser dependencies with:

npx playwright install

Configure Playwright

Create a playwright.config.ts or .js file to customize settings like browser types, timeouts, and base URL:

import { defineConfig } from '@playwright/test';

export default defineConfig({
  testDir: './tests/e2e',
  use: {
    baseURL: 'http://localhost:3000',
    headless: true,
    screenshot: 'only-on-failure',
    trace: 'on-first-retry',
  },
});

Integrate with Vue CLI or Vite

Ensure your testing framework knows when your Vue app is ready by adding commands to start and stop the development server.

2. Organize Your Tests

Maintain a clear structure for your test files to improve readability and maintainability. A common structure is:

project/
├── src/
├── tests/
│   ├── e2e/
│   │   ├── example.spec.ts
│   │   ├── login.spec.ts
│   ├── fixtures/
│   ├── helpers/

e2e/: Contains Playwright tests.
fixtures/: Holds reusable test data.
helpers/: Contains utility functions to reduce repetitive code.

3. Use Component Testing Before E2E Testing

Leverage tools like Vue Test Utils or Cypress Component Testing to test components in isolation. This helps ensure that individual Vue components are functioning correctly before running more complex E2E tests with Playwright.

4. Mock APIs and Data

Avoid relying on real backend systems during E2E tests. Use Playwright's route API to intercept network requests and mock responses:

test('loads mock data', async ({ page }) => {
  await page.route('**/api/data', route =>
    route.fulfill({
      status: 200,
      body: JSON.stringify({ key: 'value' }),
    })
  );
  await page.goto('/');
  await expect(page.locator('#data-key')).toHaveText('value');
});

This ensures consistency in test results and speeds up execution.

5. Leverage Playwright's Selectors

Playwright supports robust selector strategies, including:

data-testid attributes: Add data-testid attributes to Vue components to make them easier to locate in tests.

  <button data-testid="submit-button">Submit</button>

Playwright's built-in locators: Use methods like locator() for precise element targeting.

  const button = page.locator('button[data-testid="submit-button"]');

6. Optimize for Performance and Stability

Use Proper Waits

Avoid relying on fixed timeouts like page.waitForTimeout(1000). Instead, use Playwright’s waitFor utilities to wait for specific conditions:

await page.waitForSelector('text="Welcome"');

Run Tests in Parallel

Playwright supports parallel test execution, which can drastically reduce test time:

npx playwright test --workers=4

7. Debugging and Troubleshooting

Screenshots and Traces: Enable screenshots and traces in Playwright's configuration for failed tests. This helps identify issues quickly.

  use: {
    screenshot: 'on',
    trace: 'on',
  },

Debug Mode: Run Playwright tests in non-headless mode and with verbose logging:

  npx playwright test --headed --debug

8. CI/CD Integration

Integrate Playwright with your CI/CD pipeline to catch issues early. Ensure the pipeline:

Installs dependencies.
Starts the Vue.js development server.
Runs Playwright tests in a clean environment.

For GitHub Actions, a sample configuration might look like:

name: Playwright Tests

on:
  push:
    branches:
      - main

jobs:
  e2e-tests:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v2
        with:
          node-version: 16
      - run: npm install
      - run: npm run build
      - run: npm run start &
      - run: npx playwright test

9. Handle Vue.js-Specific Features

Router Navigation

Ensure you wait for navigation to complete when interacting with Vue Router:

await Promise.all([
  page.waitForNavigation(),
  page.click('text="Go to Details"'),
]);

Reactive State

Verify changes in the DOM resulting from Vue's reactivity system:

await page.fill('input[name="name"]', 'John');
await expect(page.locator('.greeting')).toHaveText('Hello, John!');

10. Continuously Improve Tests

Regularly update tests to align with new features or changes in the app.
Monitor flaky tests and fix root causes rather than ignoring them.
Share Playwright best practices with your team to maintain consistency.

Exploring NestJS: A Powerful Node.js Framework for Modern Web Development

Ben ltaif — Tue, 07 Nov 2023 22:10:39 +0000

NestJS: An Introduction

NestJS is a Node.js development framework that leverages TypeScript, providing a structured and powerful solution for building robust and scalable server applications. It has gained popularity due to its ability to harmonize the design of backend applications using familiar concepts for developers, such as modules, controllers, and services.

History and Overview

NestJS was created by Kamil Myśliwiec and first appeared in 2017. Since then, it has seen significant growth in its community and user base. One of the main attractions of NestJS is its module-based architecture, which allows for clean code organization. It also draws inspiration from some concepts of Angular, making it familiar to developers already comfortable with that framework.

Advantages of NestJS

Organized Structure: NestJS's modular structure makes it easy to organize application code, enhancing maintainability and scalability.
TypeScript: The use of TypeScript enables static code checking, reducing potential errors.
Extensibility: NestJS offers numerous features and ready-to-use modules, facilitating rapid development.
WebSocket Support: It supports real-time communication through WebSockets, which is valuable for real-time applications.

Disadvantages of NestJS

Learning Curve: For novice developers, NestJS may have a steep learning curve due to its structure and concepts.
Community Size: While NestJS's community is growing, it may not be as extensive as that of older frameworks.

Example of Usage

To illustrate the use of NestJS, let's take a simple example: creating a REST API. You can start by defining a module, a controller, and a service to manage a specific resource, such as a task list.

// Example module
import { Module } from '@nestjs/common';
import { TasksController } from './tasks.controller';
import { TasksService } from './tasks.service';

@Module({
  controllers: [TasksController],
  providers: [TasksService],
})
export class TasksModule {}

// Example controller
import { Controller, Get } from '@nestjs/common';

@Controller('tasks')
export class TasksController {
  @Get()
  getAllTasks() {
    // Logic to retrieve all tasks
  }
}

// Example service
import { Injectable } from '@nestjs/common';

@Injectable()
export class TasksService {
  getAllTasks() {
    // Logic to retrieve all tasks from the database
  }
}

This example demonstrates how NestJS simplifies the creation of a structured REST API. You define a module, a controller, and a service, and then implement the task management logic. Routes, validation, and other features are handled seamlessly by NestJS.

Continuing with this example, you can explore other NestJS features, such as dependency injection, authentication, data validation, and much more.

Project Architecture in NestJS

NestJS encourages a well-structured project architecture that follows a set of conventions, making it easier to maintain and scale applications. The typical project structure consists of the following elements:

Modules: Modules are at the core of NestJS's architecture. They encapsulate different parts of the application, such as controllers, services, and other related components. Modules help in organizing the code and separating concerns. A NestJS application can consist of multiple modules, and each module has its own set of components.
Controllers: Controllers are responsible for handling incoming requests, processing them, and returning responses to the client. They define the routes and HTTP methods (GET, POST, PUT, DELETE) that the application will respond to. Controllers delegate the actual business logic to services.
Services: Services contain the business logic of the application. They handle tasks like data retrieval, manipulation, and validation. Services are often used by controllers to keep the controller code clean and focused on request handling.
Providers: Providers are a common term for both services and controllers in NestJS. These are injectable components that can be injected into other components, promoting modularity and reusability.
Middleware: Middleware functions can be used for tasks like request logging, authentication, and exception handling. NestJS provides built-in middleware and allows you to create custom middleware.
Filters, Interceptors, and Guards: These are additional layers of functionality that can be applied globally or to specific routes. Filters are used for error handling, interceptors for request/response transformation, and guards for route protection.
Entities: If you are working with a database, you can define entities that represent the structure of your data. NestJS supports various databases, and entities help with data modeling.
DTOs (Data Transfer Objects): DTOs are used for defining the shape of data that is sent and received from the API. They help in validating and sanitizing data.
Configuration: You can manage application configuration using environment variables or configuration files, making it easy to adapt the application to different environments.

Project Lifecycle in NestJS

The project lifecycle in NestJS typically follows these steps:

Initialization: A NestJS project is initialized using the Nest CLI or manually by setting up the required folder structure, modules, and components.
Module Creation: Developers define modules that encapsulate specific functionality of the application.
Component Creation: Within each module, components like controllers, services, providers, middleware, filters, interceptors, and guards are created as needed.
Routing: Controllers define routes and route handlers. Routes are associated with specific HTTP methods and URL paths.
Business Logic: The core business logic is implemented in services. Controllers delegate requests to services for data processing.
Middleware, Filters, Interceptors, and Guards: These components can be created and attached to the application or specific routes to add functionality like request logging, error handling, and route protection.
Database Integration: If the application requires database access, entities and repositories can be set up to interact with the database.
Dependency Injection: NestJS leverages dependency injection to manage the relationships between different components, making it easy to inject services, providers, and other dependencies where needed.
Testing: NestJS provides tools for unit and integration testing to ensure that the application behaves as expected.
Deployment: The application is prepared for deployment to a production environment, and environment-specific configuration settings are applied.

Understanding the project architecture and following the project lifecycle in NestJS helps developers create well-organized and maintainable applications that can easily adapt to changing requirements.

JavaScript, Craftsmanship, and Me: A Journey of Code and Creativity

Ben ltaif — Sat, 21 Oct 2023 21:27:09 +0000

Hello to all my coders, the curious, and keyboard friends! 🚀

Today, I want to chat about a trend (a tad hipster, I admit) in the world of programming: craftsmanship. And no, I'm not talking about those craftspeople who make boho-chic jewelry or trendy ceramics for your apartment. I'm talking about us, the coders, who turn every line of code into a piece of art. Yes, my friends, we are the craftsmen and craftswomen of JavaScript. 🎨

You might be wondering: "What does this have to do with JavaScript?". Well, let me break it down. Picture a time when every programmer, armed with their trusty mug of coffee (or tea, let's be inclusive), sees every function, every variable, and every loop not just as a mere task, but as a mission to create something beautiful, functional, and resilient. Imagine every line of code we type is made with love, passion, and an eye for detail. That's exactly what it means to be a craftsman in computing.

So, why JavaScript? Well, if you've ever tried to debug a callback inside a promise within another promise that was rejected due to another callback... you know it requires a certain art form to not lose your marbles! JavaScript, with all its flexibility, quirks, and surprises, is actually the perfect playground for a true craftsman. After all, it takes a real master to turn what's often seen as the wild west of coding into a harmonious symphony of functions.

JavaScript: Procedural, Functional, or Object-Oriented?

Ben ltaif ・ Oct 11

#javascript #programming #webdev #architecture

But hold on, why this focus on craftsmanship right now? Why this sudden nostalgia for a time when every product was handmade, with care and attention? Maybe it's a reaction to our fast-paced digital world where everything is instant. We're swamped with frameworks, libraries, and all-in-one solutions promising to make development swift and easy. But in speeding everything up, aren't we losing the very essence of our craft? As code craftsmen, we seek to reclaim that special connection to our work, that unique sensation of crafting something precious line by line. And what better than JavaScript, a language so ubiquitous and yet so often misunderstood, to guide us?

And then, let's admit it, there's a certain pride in being called a craftsman. In a world where everything's automated, where we talk about artificial intelligence and learning machines, isn't it comforting to know that behind every app, every website, there's still a human touch? Someone who took the time, pondered, and perhaps even chuckled at a particularly pesky bug.

Join me next week for the next chapter of our journey where we'll continue to celebrate this spirit of craftsmanship. Together, let's explore how JavaScript can be both our canvas and our brush, and how we, as craftsmen, can paint digital masterpieces.🚀🎨

JavaScript: Procedural, Functional, or Object-Oriented?

Ben ltaif — Wed, 11 Oct 2023 20:08:16 +0000

If you've ever come across JavaScript, you might have wondered about its true programming paradigm. Is it a procedural language? Functional? Object-oriented? The simple answer is: it's all of the above. Let's dive into these different aspects to demystify JavaScript's nature.

1. JavaScript as a Procedural Language

In the early days of JavaScript, its primary purpose was to add simple interactivity to web pages. In this context, it was often used procedurally. Here's what that looks like:

// Variable definition
let a = 5;
let b = 3;
let sum;

// Function to compute the sum
function add(x, y) {
    return x + y;
}

// Calling the function
sum = add(a, b);
console.log(`The sum of ${a} and ${b} is: ${sum}`);

In the procedural style, operations are performed through sequences of instructions. Data can be passed from one function to another, but they are typically not encapsulated within the functions themselves.

2. JavaScript and Functional Programming

As JavaScript evolved, frameworks and libraries like React, Redux, and Lodash encouraged a functional approach. This emphasizes "pure" functions, avoiding mutable states and side effects.

const numbers = [1, 2, 3, 4, 5, 6];

// Filter even numbers
const evenNumbers = numbers.filter(num => num % 2 === 0);

// Double the even numbers
const doubleEvenNumbers = evenNumbers.map(num => num * 2);

console.log(doubleEvenNumbers); // [4, 8, 12]

3. Object-Oriented Nature of JavaScript

JavaScript hasn't forgotten fans of object-oriented programming. It uses prototyping for inheritance, allowing each object to inherit properties and methods from another object.

// Define a "Dog" class
class Dog {
    constructor(name, breed) {
        this.name = name;
        this.breed = breed;
    }

    bark() {
        return `${this.name} says: Woof!`;
    }
}

// Create an instance of the "Dog" class
const rex = new Dog('Rex', 'German Shepherd');
console.log(rex.bark()); // "Rex says: Woof!"

So, what is the true face of JavaScript? It's its ability to support these three paradigms that make it so powerful. As a developer, understanding these three facets of JavaScript will enable you to produce efficient, clean, and maintainable code, tailored to your project's specific requirements.

Supercharge Your Svelte: Top Tips for Clean Code

Ben ltaif — Mon, 09 Oct 2023 20:15:50 +0000

Svelte, although younger than some other frontend frameworks, has quickly gained traction due to its simplicity and innovative approach to building web applications. However, as with any language or framework, writing clean, maintainable code is paramount. Here are some best practices to ensure you're writing clean, effective Svelte code.

1. Segment Your Application into Reusable Components

Good Practice:
Break UI elements into clear, reusable components.

Example:

Instead of having a single component handling the display of user details and a user's list of posts, create separate components.

<!-- UserProfile.svelte -->
<script>
  export let user;
</script>

<h2>{user.name}</h2>
<p>{user.bio}</p>

<!-- UserPosts.svelte -->
<script>
  export let posts;
</script>

<ul>
  {#each posts as post}
    <li>{post.title}</li>
  {/each}
</ul>

Sure, let's delve deeper into the topic of maintaining an organized file structure in Svelte and provide an illustrative example.

2. Maintain an Organized File Structure

In Svelte, just like in any other framework or language, an organized directory structure is paramount for scalability and maintainability. A logical and clear structure not only makes it easier for developers to find what they're looking for, but it also provides a blueprint for where new files should be placed.

Advantages:

Faster Onboarding: New team members can understand the project quicker.
Scalability: It's easier to expand the project without making it messy.
Reduced Merge Conflicts: With a clear directory structure, developers are less likely to work on the same files simultaneously.

Recommended Directory Structure:

/src
|-- /components
|   |-- Button.svelte
|   |-- Modal.svelte
|   |-- ...
|-- /stores
|   |-- userStore.js
|   |-- themeStore.js
|-- /services
|   |-- apiService.js
|   |-- utilityService.js
|-- /layouts
|   |-- MainLayout.svelte
|-- /routes
|   |-- Home.svelte
|   |-- Profile.svelte
|-- App.svelte
|-- main.js

Explanation:

/components: This directory houses the reusable UI components. Each component should ideally have a single responsibility.
/stores: Here, you would place your Svelte stores. Each store should be responsible for a specific type of global state.
/services: This is where you can place any service-related logic, like API calls or utility functions.
/layouts: For larger applications, you might have different layouts (e.g., one for guest users, another for authenticated users). This directory will contain those layout components.
/routes: This directory will contain the components specific to routes or pages of your application.

By adhering to such a structure, you'll find that managing even complex Svelte applications becomes much more straightforward.

3. Use Descriptive Variable and Function Names

Good Practice:
Choose names that reflect the functionality or data they represent.

Example:

Instead of:

<script>
  let a = "John Doe";
  function f() {
    console.log(a);
  }
</script>

Use:

<script>
  let username = "John Doe";
  function displayUsername() {
    console.log(username);
  }
</script>

4. Limit Complex Logic Inside Components

Good Practice:
Shift complex logic out of the component's main script.

Example:

Instead of:

<script>
  export let userData;

  let fullName = userData.firstName + " " + userData.lastName;
  // ... other complex computations
</script>

Use a utility function:

// utils/user.js
export function getFullName(user) {
  return `${user.firstName} ${user.lastName}`;
}

// In your component
<script>
  import { getFullName } from '../utils/user';

  export let userData;
  let fullName = getFullName(userData);
</script>

5. Avoid Overloading the Store

In Svelte, the store is a powerful feature that allows global state management. However, the misuse of stores, especially by overloading them with information, can lead to performance issues and maintenance nightmares.

Why Overloading is a Problem:

Performance Impact: With excessive reactive bindings, any change can lead to unnecessary recalculations and re-renders, affecting the app's responsiveness.
Decreased Readability: An overloaded store can make it difficult to understand which parts of the state affect specific components.
Maintenance Issues: As your app grows, making changes to a bloated store increases the risk of unintended side-effects.

Bad Practice:
Using a single store for all your application's state.

import { writable } from 'svelte/store';

export const globalStore = writable({
  user: null,
  theme: 'light',
  notifications: [],
  cartItems: [],
  // ... possibly more state data
});

In this scenario, a change in cartItems would technically trigger any reactive statements that depend on any part of globalStore, even if those parts are unrelated to cartItems.

Best Practice:
Segment your state into multiple focused stores.

import { writable } from 'svelte/store';

export const userStore = writable(null);
export const themeStore = writable('light');
export const notificationStore = writable([]);
export const cartStore = writable([]);

By splitting state into focused stores:

You can better identify which parts of your app are affected by changes in a specific store.
Reduce unnecessary reactivity overhead.

Tips:

Single Responsibility: Ensure each store handles a single type of data or functionality.
Consider Context: For data that is used only within a specific component or its children, consider using Svelte's setContext and getContext instead of a store.
Use Custom Stores: Svelte allows the creation of custom stores with custom methods attached, enabling more control over how data is set or modified.

In conclusion, while Svelte stores offer a convenient way to manage global state, care should be taken to keep them organized and purpose-driven. By ensuring each store has a single responsibility and is used in the appropriate context, you can maintain a clean, efficient, and scalable Svelte application.

7. Optimize Reactivity

Good Practice:
Use reactive statements wisely.

Example:

Instead of making everything reactive:

<script>
  let count = 0;
  let double = count * 2;
</script>

Only react when necessary:

<script>
  let count = 0;
  $: double = count * 2;
</script>

8. Stay Updated with Svelte's Updates

Svelte, like many modern libraries and frameworks, is under active development. This means new features, optimizations, and bug fixes are being added regularly. Ensuring you're on top of these changes can be crucial for several reasons:

Benefits of Staying Updated:

Performance Improvements: Newer versions often come with optimizations that can make your application run faster and smoother.
New Features: Each update can introduce new functionalities that can help simplify your code or offer new capabilities.
Security Fixes: Outdated libraries can expose vulnerabilities. Staying updated ensures you're protected against known security threats.
Bug Fixes: Encountered a weird issue that you couldn't resolve? It's possible a newer release of Svelte addresses that very issue.
Deprecation Warnings: New versions sometimes deprecate older features or practices. Updating regularly allows you to adapt to these changes gradually rather than facing a massive overhaul when you're several versions behind.

How to Stay Updated:

Official Documentation and Release Notes: The Svelte team does a fantastic job documenting changes in each release. Regularly check their GitHub repository or official website.
Community Engagement: Join Svelte communities on platforms like Discord, Reddit, or specialized forums. These platforms often have discussions on new releases and their implications.
Newsletters and Blogs: Subscribe to Svelte-specific newsletters or blogs. They often summarize the latest changes and provide insights on how to apply them.
Automated Dependency Updates: Tools like Dependabot can help by automatically creating pull requests when new versions of your dependencies, including Svelte, are available.

Example:

Suppose you've been using an old version of Svelte. In the release notes for a newer version, you might find that a certain syntax or method has been optimized or replaced. By updating your code to match the latest version, you not only benefit from the performance improvements or newer features but also ensure your code doesn't break in future updates.

Conclusion:

Staying abreast of Svelte's evolution is akin to regularly servicing your car. It ensures optimal performance, longevity, and the peace of mind that you're using the tool to its fullest potential. Regular updates, combined with an understanding of the changes, ensures that your Svelte applications remain modern, efficient, and secure.

9. Test Your Code

Good Practice:
Write unit tests for your components.

Example:

For a simple counter component:

<!-- Counter.svelte -->
<script>
  export let count = 0;
  function increment() {
    count += 1;
  }
</script>

<button on:click={increment}>{count}</button>

A test for this component might look like:

import { render, fireEvent } from '@testing-library/svelte';
import Counter from './Counter.svelte';

test('it increments the count', async () => {
  const { getByText } = render(Counter);

  const button = getByText('0');
  await fireEvent.click(button);

  expect(getByText('1')).toBeInTheDocument();
});

Embedding these examples in your codebase helps ensure you're adhering to the best practices of Svelte, leading to a more maintainable and robust application.

Certainly, let's continue by diving deeper into the other points.

10. Engage with the Community

Engaging with the community can often lead you to better and more efficient solutions to common problems.

Example:
While struggling with a Svelte transition, a community member might recommend a package like svelte/transition or provide a custom transition code that perfectly fits your needs.

Community Example:

<script>
  import { flip } from 'svelte/animate';
  import { linear } from 'svelte/easing';

  let items = [/* ... */];
</script>

<ul>
  {#each items as item (item.id)}
    <li in:flip={{ duration: 500, easing: linear }}>{item.name}</li>
  {/each}
</ul>

Conclusion

While Svelte aims to simplify and reduce the boilerplate in web development, following best practices remains crucial. As the framework evolves, keeping abreast of the changes, staying connected with the community, and consistently refining your code can ensure your applications remain efficient, maintainable, and scalable.

Get Your Svelte On: 5 UI Libraries That Will Make Your App Look Super Cool

Ben ltaif — Sat, 07 Oct 2023 18:30:42 +0000

Hey there, folks! Are you ready to discover the 5 best UI libraries for Svelte? You’re gonna love this!

So, Svelte is a pretty cool and not too old web development framework. If you’re an old-timer who still remembers the Windows 95 boot disk, you’ll be pleasantly surprised by Svelte.

But to create nice UIs with Svelte, you need UI libraries that offer reusable, ready-to-use components. And here are our top 5 favorites:

Svelte Material UI: This library is based on Google’s Material Design, so you know it’s gonna be cool. It offers cool buttons, forms, cards, and menus. If you want a custom style, no problem, you can do that too.

SvelteStrap: This library is based on Bootstrap, so it’s gonna be super easy to use. It offers cool buttons, forms, grid templates, modals, etc. And just like with Svelte Material UI, you can customize the style to fit your app.

Svelte Materialify: Once again, a library based on Material Design. This one offers a wide variety of cool components, such as buttons, forms, cards, menus, etc. You can also customize the style to fit your app.

Svelte-awesome: This library uses Font Awesome icons, so you can be sure it’s super cool. It offers a wide variety of icons that you can use in your app. You can also customize the style if you want.

SvelteFlat: This library is minimalistic and modern, so it’s super cool. It offers cool buttons, forms, cards, menus, etc. And like the other libraries, you can customize the style to fit your app.

Well, there you have it, folks. I hope you enjoyed discovering these UI libraries for Svelte. Now you can have fun creating super cool and super effective UIs for your Svelte apps.

The Top 5 Sites to Find Remote Work (from the Comfort of Your Pajamas)

Ben ltaif — Sun, 17 Sep 2023 17:48:02 +0000

Hey there, work-from-home warriors! 😎

Ever dreamt of attending a work meeting while lounging on your couch in a unicorn onesie? Well, it’s 2023, and anything’s possible! If you’re on the hunt for that perfect 100% remote job, look no further. Here's the ultimate (and slightly quirky) guide to the top platforms to land that dream remote job. 🌈💼

Remote.co:
- Think of it as the "VIP lounge" for remote work. Whether you’re a coding ninja, design diva, or a word wizard, Remote.co is your red carpet to the work-from-home elite. Sparkly shoes optional! ✨
We Work Remotely:
- Imagine a bustling online market but with jobs instead of veggies. It's the farmers' market of remote opportunities. Freshly picked roles in coding, design, sales, and beyond await!
FlexJobs:
- It's the guarded treasure chest of remote work. While you need a "magic key" (a.k.a subscription) to unlock the job listings, you're guaranteed no dragons – meaning, no scammy jobs. All treasures, no traps! 🐉🔑
Remote OK:
- The hipster coffee shop of remote work platforms. It's buzzing with digital nomads and has a menu (read: job listings) that caters to everyone – from app developers to marketing maestros.
Working Nomads:
- Not just a job board but a calling for the wanderlust-infused worker bees. If your spirit animal is a combination of a techie and a wandering albatross, then this is your stop.

Bonus Pro-tip: Traditional job hubs like LinkedIn, Indeed, and Glassdoor are getting with the times and now offer filters for remote positions. It’s like your grandma finally understanding emojis. 🙌

So, there you have it! Grab your favorite mug, put on those fuzzy socks, and dive into the world of remote job hunting. May the Wi-Fi be ever in your favor! 🚀🏠

Remember: Whether you're in pajamas or in that 'special' T-shirt from 3 summers ago, the remote world welcomes all. Happy hunting! 🌐🎉

How to Build and Test a Blog with Svelte and SvelteKit

Ben ltaif — Sat, 11 Mar 2023 21:41:20 +0000

If you're looking for a modern way to build a blog, Svelte and SvelteKit are great options. Svelte is a lightweight, reactive framework that compiles your code to highly optimized vanilla JavaScript. SvelteKit is a framework for building web applications that builds on top of Svelte, providing server-side rendering, routing, and other features.

In this tutorial, we'll show you how to build a simple blog with SvelteKit, and how to write unit tests for it using jest and svelte-jester. By the end of the tutorial, you'll have a fully functional blog that's ready to deploy, and you'll have the tools to test it and ensure its quality.

Building the Blog

Creating a new SvelteKit project
To get started, you'll need to create a new SvelteKit project. The easiest way to do this is to use degit, a tool for cloning repositories.

Open a terminal and run the following command:

npx degit sveltejs/sveltekit my-blog

This will create a new directory called my-blog and clone the SvelteKit starter template into it.

Creating the basic pages and routes
Next, we'll create the basic pages and routes for the blog. In SvelteKit, pages are created as .svelte files in the src/routes directory.

Let's start by creating the home page. Create a new file called index.svelte in the src/routes directory, and add the following code:


<script>
  export let posts = [];
</script>

<h1>Welcome to my blog!</h1>

{#if posts.length}
  <ul>
    {#each posts as post}
      <li>
        <a href={`blog/${post.id}`}>
          {post.title}
        </a>
      </li>
    {/each}
  </ul>
{:else}
  <p>No posts yet.</p>
{/if}

This code defines a Svelte component that displays a list of blog posts. The export let posts line defines a property that can be passed to the component from a parent component or from the route definition.

Next, let's create a route definition for the home page. Create a new file called index.json.js in the src/routes directory, and add the following code:

import posts from './_posts.js';

export async function get() {
  return {
    body: {
      posts
    }
  };
}

This code defines a route that returns a JSON object containing the list of blog posts. The posts array is imported from a file called _posts.js, which we'll create next.

Let's create the _posts.js file now. Create a new file called _posts.js in the src/routes directory, and add the following code:


export default [
  {
    id: '1',
    title: 'My First Blog Post',
    content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
  },
  {
    id: '2',
    title: 'My Second Blog Post',
    content: 'Vivamus euismod metus sit amet arcu consectetur, vel ultricies dolor fringilla.'
  }
];

This code defines an array of two blog post objects. Each object has an id, a title, and a content property.

Now we have a basic home page that displays a list of blog posts. Let's create some more pages for the blog

Creating individual blog post pages

Next, we'll create individual pages for each blog post. Create a new file called [_id].svelte in the src/routes directory, and add the following code:

<script>
  export let post = {};
</script>

<h1>{post.title}</h1>

<p>{post.content}</p>

This code defines a Svelte component that displays a single blog post. The export let post line defines a property that can be passed to the component from a parent component or from the route definition.

Next, let's create a route definition for the individual blog post pages. Create a new file called [_id].json.js in the src/routes directory, and add the following code:

import posts from './_posts.js';

export async function get({ params }) {
  const post = posts.find(p => p.id === params.id);
  if (post) {
    return {
      body: {
        post
      }
    };
  } else {
    return {
      status: 404
    };
  }
}

This code defines a dynamic route that takes an id parameter from the URL. It then searches for a blog post object with that id in the posts array, and returns it as a JSON object. If the id doesn't match any blog post, it returns a 404 status.

Styling the blog
Now that we have the basic pages and routes set up, let's add some styles to the blog. SvelteKit comes with support for CSS modules out of the box, so we'll use that to style our components.

Create a new file called global.css in the src directory, and add the following code:


h1 {
  font-size: 2.5rem;
  margin: 2rem 0;
}

ul {
  list-style: none;
  padding: 0;
}

li {
  margin: 1rem 0;
}

a {
  color: #000;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

This code defines some basic styles for the blog, such as font sizes, margins, and text decoration.

Next, we'll import this CSS file into our Svelte components. In each .svelte file, add the following line at the top:

<style global>
  @import './global.css';
</style>

This code imports the global.css file into the component's styles.

Building and testing the blog

Now that we have our blog built, let's build and test it. To build the blog, run the following command in the terminal:

npm run build

This will compile the Svelte code and create a production-ready build in the build directory.

To test the blog, we'll use jest and svelte-jester. jest is a popular JavaScript testing framework, and svelte-jester is a plugin that allows us to write unit tests for Svelte components.

First, let's install the dependencies. Run the following command in the terminal:

npm install --save-dev jest svelte-jester

Next, create a new file called example.test.js in the src directory, and add the following code:

import { render } from '@testing-library/svelte';
import Example from './Example.svelte';

test('renders the text "Hello, world!"', () => {
  const { getByText } = render(Example);
  expect(getByText('Hello, world!')).toBeInTheDocument();
});

This code defines a unit test for a Svelte component called Example. It uses the render function from @testing-library/svelte to render the component, and the getByText function to find an element with the text "Hello, world!". The expect function checks that the element is in the document.

You can run the tests by running the following command in the terminal:

npm run test

This will run all the tests in the src directory.

In this tutorial, we've seen how to build a blog using Svelte and SvelteKit. We've created a home page that displays a list of blog posts, individual pages for each blog post, and added some basic styles to the blog. We've also learned how to test our Svelte components using jest and svelte-jester.

Svelte and SvelteKit offer a powerful and simple way to build web applications, and their small size and performance make them ideal for modern web development.

Get Your Svelte On: 5 UI Libraries That Will Make Your App Look Super Cool

Ben ltaif ・ Oct 7 '23

#svelte #javascript #ui #ux

Supercharge Your Svelte: Top Tips for Clean Code

Ben ltaif ・ Oct 9 '23

#javascript #svelte #sveltekit #programming

Practical Tips for Freelance Developers: How to Find Clients and Grow Your Business

Ben ltaif — Fri, 24 Feb 2023 23:11:27 +0000

As a freelance developer, finding clients is an essential part of your job. However, it can be difficult to know where to start. In this article, we will give you practical tips for finding clients and growing your business as a freelance developer.

Use social media

Social media platforms such as LinkedIn, Twitter, and Facebook are excellent ways to get yourself known as a freelance developer. Use these platforms to share your projects, accomplishments, and expertise. Engage with other industry professionals and look for collaboration opportunities.

Create an online portfolio

Having an online portfolio is essential for any freelance developer. It allows you to showcase your work and demonstrate your expertise to potential clients. Make sure your portfolio is well-organized, easy to navigate, and highlights your most successful projects.

Use freelance sites

There are many freelance sites such as Upwork, Freelancer.com, and Fiverr that allow developers to offer their services to clients worldwide. Sign up for these platforms and create a complete profile. Make sure your profile is clear and precise about your skills and experience.

References and word of mouth

Word-of-mouth is an effective way to find clients. Ask your current and past clients to recommend you to their friends and colleagues. Make sure you have their permission to use their name when looking for new clients.

Join developer groups

Join online and offline developer groups. There are often events organized for developers where you can meet potential clients. These groups can also provide tips and tricks for improving your business as a freelance developer.

Be proactive

Don't be shy, reach out directly to potential clients. Send them a personalized email explaining how you can help them achieve their goals. Be creative and innovative to stand out from the competition.

In conclusion, finding clients as a freelance developer may seem difficult, but with a solid strategy and proactive attitude, you can succeed in growing your business. Use social media, create an online portfolio, use freelance sites, use references and word-of-mouth, join developer groups, and be proactive in your client search. Over time, you can build a regular client base and evolve your business.

Do you have any comments or feedback to share on the tips presented in this article for finding clients as a freelance developer?

How can functional programming improve the reliability and maintainability of your programs?

Ben ltaif — Sun, 15 Jan 2023 20:43:35 +0000

Functional programming is a programming paradigm that emphasises the use of pure mathematical functions to write computer programs. Programs written in functional programming are often described as “data transformations”, rather than “scheduler instructions”.

The main features of functional programming include the use of pure immutable functions, non-modification of the global state, and the use of programming patterns such as recursion and lambda expressions.

Using these concepts, functional programming makes it easier to understand and maintain code by using immutable, pure and composable functions to transform data. Thus, it allows to write programs that are more reliable, easier to understand and maintain.

Taking JavaScript as an example, you can use functions such as map, filter and reduce to transform arrays of data in a declarative way.

const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map(x => x * 2);
console.log(doubledNumbers); // [2, 4, 6, 8, 10]

You can also use lambda expressions to create anonymous functions:

const add = (a, b) => a + b;
const multiply = (a, b) => a * b;

const compose = (f, g) => (...args) => f(g(...args));
const addAndMultiply = compose(add, multiply);
console.log(addAndMultiply(2, 3, 4)); // 14

Using the concepts of currying and function composition, you can create reusable functions that can be combined to create new functions:

function add(a) {
    return function(b) {
        return a + b;
    }
}

const add10 = add(10);
console.log(add10(5)); // 15

Functional programming is often used in conjunction with other programming paradigms, such as object-oriented programming or declarative programming, to create robust and scalable programs. It is also particularly suited to processing data, using predefined functions to process data, combining functions to create new functionality, and using immutable and pure functions to write more reliable and scalable programs.

DEV Community: Ben ltaif

Agence Shopify en France : le guide complet pour bien choisir

Install Strapi v4 in Docker (without getting docked 🐳)

🎯 Why doesn’t it work out of the box?

🏗️ The correct method → use Node.js as base + mount your Strapi project.

✅ 1️⃣ Create your Strapi v4 project locally

✅ 2️⃣ Write this magical docker-compose.yml

✅ 3️⃣ Launch Docker, captain

🕵️ Why does it work?

🔥 Bonus option → a Dockerfile if you want a real Docker build

📝 TL;DR

Testing Vue.js with Playwright: A Funny Journey to Flawless Web Appss

1. Set Up Playwright with Vue.js

Configure Playwright

Integrate with Vue CLI or Vite

2. Organize Your Tests

3. Use Component Testing Before E2E Testing

4. Mock APIs and Data

5. Leverage Playwright's Selectors

6. Optimize for Performance and Stability

Use Proper Waits

Run Tests in Parallel

7. Debugging and Troubleshooting

8. CI/CD Integration

9. Handle Vue.js-Specific Features

Router Navigation

Reactive State

10. Continuously Improve Tests

Exploring NestJS: A Powerful Node.js Framework for Modern Web Development

JavaScript, Craftsmanship, and Me: A Journey of Code and Creativity

JavaScript: Procedural, Functional, or Object-Oriented?

Ben ltaif ・ Oct 11

JavaScript: Procedural, Functional, or Object-Oriented?

1. JavaScript as a Procedural Language

2. JavaScript and Functional Programming

3. Object-Oriented Nature of JavaScript

Supercharge Your Svelte: Top Tips for Clean Code

1. Segment Your Application into Reusable Components

2. Maintain an Organized File Structure

3. Use Descriptive Variable and Function Names

4. Limit Complex Logic Inside Components

5. Avoid Overloading the Store

7. Optimize Reactivity

8. Stay Updated with Svelte's Updates

9. Test Your Code

10. Engage with the Community

Conclusion

Get Your Svelte On: 5 UI Libraries That Will Make Your App Look Super Cool

The Top 5 Sites to Find Remote Work (from the Comfort of Your Pajamas)

How to Build and Test a Blog with Svelte and SvelteKit

Building the Blog

Creating individual blog post pages

Building and testing the blog

Get Your Svelte On: 5 UI Libraries That Will Make Your App Look Super Cool

Ben ltaif ・ Oct 7 '23

Supercharge Your Svelte: Top Tips for Clean Code

Ben ltaif ・ Oct 9 '23

Practical Tips for Freelance Developers: How to Find Clients and Grow Your Business

Use social media

Create an online portfolio

Use freelance sites

References and word of mouth

Join developer groups

Be proactive

How can functional programming improve the reliability and maintainability of your programs?

✅ 2️⃣ Write this magical `docker-compose.yml`