DEV Community: yanir manor

Endpoint Confidence — Get It Fast With HURL

yanir manor — Sun, 23 Jul 2023 13:46:06 +0000

When making changes or refactoring code, it’s important to have confidence in the changes we make. One way to gain protection and confidence is through API testing.

Although testing is essential, many developers do not enjoy writing tests due to the complexity and slowness of testing tools in the past. But what if there was a tool that made testing quicker and easier? That’s where Hurl comes in.

Hurl is a command line tool that can run HTTP requests defined in a simple plain text format. It’s versatile and can be used for both fetching data and testing HTTP sessions.
With Hurl, you can chain requests, capture values, and evaluate queries on headers and response bodies.
Hurl makes it easy to work with HTML content, REST/SOAP/GraphQL APIs, or any other XML/JSON-based APIs.
Hurl is an open source of Orange corporate.

It’s a single binary that’s easy to install. Plus, it’s written in Rust, making it a lightweight and very fast.

To use Hurl, simply create a text file with your requests and run it via terminal. You can see in the screenshot below how easy it is and what you’ll see on the terminal when you run it.

So why not give Hurl a try and see how it can help you gain confidence in your code and speed up your testing process? With its simple format, versatility, and ease of use, it just might become your go-to testing tool 🤝.

Framer-Motion Notification Challenge

yanir manor — Tue, 25 Jan 2022 06:48:23 +0000

I was inspired by Oleg Frolov's notification design and challenged myself to build it.

Oleg design -
Notification design by Oleg Frolov's

For the CSS design, I chose to take tailwind CSS.
First, we need to create a box with SVG of message notification icon.

now let's start adding some animation.
let us build the 3 dots animation.
for that, we will need a container with 3 spans for each dot.
for animation state, we will use variants.
for example, the container animation has 2 states "begin"
and "end".
each one will have its own animation attributes.
for the dots, the animation change will be from y 0 percent to 100 percent.
after defining the variation we can use it in initial and animate.
also, you can define what the transition is going to look like.

for the message text animation, we need an interval.
how can we control to start the animation on each tick?
for that, we need to import for framer useAnimation.
then we can define the animation that we want to acquire
and we just pass it into the useAnimation reference.

you can see the full code in codesandbox.

Counter - Framer Motion

yanir manor — Mon, 17 Jan 2022 11:15:45 +0000

I have been enjoying Framer Motion's animation library.
Framer Motion is beautiful and easy to use out of the box.
I was inspired by Ehsan Rahimi's counter design as I took on the challenge of developing it with framer motion.

Dribbble:
Tally Counter Micro-Interaction by Ehsan Rahimi on Dribbble

I used tailwind css for styling, react icons for icons, and animation framer for animation.
For state, interaction will manage using a simple use state.
We will have a number for the count and a boolean for showing the clear icon action.
Let's dive into the drag gesture.
The drag gesture follows the rules of the pan gesture but applies pointer movement to the x and/or y axis of the component.
dragConstraints - constraints on drag area.
drag and on drag end events listener.
Look at the code for the full vision.

Link for framer documentation:
Gestures | Framer for Developers

Framer motion - simple menu animation

yanir manor — Fri, 14 Jan 2022 09:32:27 +0000

Let's see how to create a simple menu animation.
For the style, we will use tailwindcss.

we will have a container that contains the flex layout and background color.
For animate layout change across multi-component, we will need to use AnimateSharedLayout.
inside we have a wrapper that will control the on-click selection and have a nice animation opacity effect.
inside will contain text and a condition on when an item is selected then framer motion layout animation will give is power for a nice underline animation,

full code & example -

Switch Button Magic By Framer Motion

yanir manor — Wed, 12 Jan 2022 12:48:28 +0000

How to create an animated switch button in React?
First, we install tailwindcss for this job
There will be two elements in the switch button: a container and a bull.

container
cursor-pointer w-16 h-10 flex items-center bg-gray-300 rounded-full p-1
bull
bg-white w-8 h-8 rounded-full shadow-md

It's that easy to have a static switch button.
now we need to add click behavior.
lets create a simple use state hook to toggle active state.
const [isSelected, setSelected] = useState(false)
on container we will add click handler
onClick={() => setSelected(!isSelected)}
and interactive css

${isSelected ? 'bg-red-500 justify-end' : 'justify-start'}

Take it for a test.
its working but something is missing.
Yes, animation, are you ready for the magic 🪄?
Change the bull div to be motion div.
Add the magic layout property.
ta dam 🎉🎉🎉 you have a nice switch button.

you can see and play with the code - run in terminal - npm run build && npm run preview.

vitest + mocks = 💪 superpower

yanir manor — Tue, 04 Jan 2022 12:45:10 +0000

Previously, we discovered how powerful vitest can be when used with vite.
Using mocks gives us the flexibility to simulate, develop, test, and refine use cases quickly and easily.
For mocking behavior in development and API integration I will use MSW.
For simple function business logic, I will demonstrate vitest mocking function.

Full code - https://github.com/yanirmanor/vite-test-vitest

For a simple function mock you will use

vi.fn()

then you have all kinds of functions that you can use and control the mock. The most popular I think is mockReturnValue for mocking the return value or mockImplementation for mocking the function implementation.

examples:

  vi.fn().mockReturnValue(23)
  expect(mockFnOverrideValue()).toBe(23)

const mockFnGetSum = 
  vi.fn().mockImplementation(sum => sum * 3.14)
  const total = mockFnGetSum(100)
  expect(total).toBe(314)

Nice. now I will show how you can use MSW for development and testing.
First install msw -

pnpm install msw --save-dev

then run

pnpx msw init public/ --save

In development - I created a vite .env variables VITE_MOCKING and set it to be true.
in the app.jsx I added an if statement, then you need to create and handlers a set of request mock.
you need to set the handlers array inside setupWorker and make it start.
you can open the network tab inside the chrome devtools
and look for the service worker in the response header.
also, you will see in devtools console - [MSW] Mocking enabled

if (import.meta.env.VITE_MOCKING === true) {
  const handlers = [
    rest.get('https://randomuser.me/api/', (req, res, ctx) => {
      return res(
        ctx.delay(1000),
        ctx.status(202, 'Mocked status'),
        ctx.json({
          results: [
            {
              name: {
                first: 'John',
                last: 'Doe'
              }
            }
          ]
        })
      )
    })
  ]

  const worker = setupWorker(...handlers)
  worker.start()
}

We have almost done.
this technique is similar for testing.
instead of using serviceWorker we will replace it with setupServer
and start this node server to run by listen() before all tests
, after all, we call close and finally on after each test we will reset

const server = setupServer(...restHandlers)

// Start server before all tests
beforeAll(() => server.listen({ onUnhandledRequest: 'error' }))

//  Close server after all tests
afterAll(() => server.close())

// Reset handlers after each test `important for test isolation`
afterEach(() => server.resetHandlers())

With this approach, your tests will be cleaner and more readable, and your software will be developed more quickly.
Enjoy 😎

Vite - found the missing part

yanir manor — Tue, 21 Dec 2021 07:26:53 +0000

Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects.
The meaning of vite comes to the French word for "quick" 🇫🇷.
I love 😍 vite but something was missing 😕. how to run tests?
Yesterday vitest was open source 🍾.
Vitest is a blazing fast new unit test framework powered by Vite.
Given Jest's massive adoption, Vitest provides a compatible API that allows you to replace Jest in most projects.
Vitest includes the most common features required when setting up your unit tests (mocking, snapshots, coverage).
Vitest cares a lot about performance and uses Worker threads to run as much as possible in parallel.

Lets take vitest for a ride 🏎.

First we create new vite project

pnpm create vite

lets add vitest

pnpm i -D vitest

in src directory we will add a test file App.test.js
we will add a simple test to check its works

it('basic', () => {
    expect('JOHN'.toLowerCase()).to.equal('john')
  })

in package json we will add 2 scripts

"test": "vitest",
"coverage": "vitest --coverage"

lets run

npm run test

and we check step one.

How can we test react component?
We can use react-test-renderer or testing-library/react.
I prefer testing-library.
For that please install

pnpm i -D @testing-library/react

and happy-dom or jsdom.
We need to rename the test file from js to jsx.
We need to edit vite.config.js and add

test: {
    environment: "happy-dom", // or 'jsdom', 'node'
  },

now let's create simple react component

function SimpleText () {
  return <h1>Hello World</h1>
}

it('basic react with testing library', () => {
    const { getByText } = render(<SimpleText />)
    expect(getByText('Hello World')).toBeTruthy()
  })

That all. it's working.

In conclusion, I'm very happy about vetest.
It feels like the missing piece was found.
For more information
Home | Vite
Home | Vitest
Example | vite test via vitest
Enjoy 🥃.

Monorepo with Turborepo

yanir manor — Mon, 20 Dec 2021 12:38:53 +0000

I will show you how you can use monorepo Turborepo with pnpm for a high-performance build system in your local and continuous integration builds.

First, we need to create the root directory.
then we will generate npm package json by -

pnpm init -y

now we need to create pnpm-workspace.yaml file.
pnpm-workspace.yaml defines the root of the workspace and enables you to include / exclude directories from the workspace.
In our example, we will have 2 projects first is a remix application and the other lib via vite.

packages:
  - application
  - lib

now we can add Turborepo

pnpm i -Dw turbo

The -w flag is for workspace (or --workspace-root)
Also, we need to install pnpm in the root.
we need to add turbo section in the root package json file.
This is the definition of the pipeline.
you can set caching and how tasks are related according to npm package scripts like build lint test.

"turbo": {
    "pipeline": {
      "dev": {
        "cache": false
      },
      "build": {
        "dependsOn": [
          "^build"
        ],
        "outputs": [
          "build/**",
          "dist/**"
        ]
      }
    }
  }

Also, we can add the npm script for monorepo.

"scripts": {
    "dev": "turbo run dev",
    "build": "turbo run build"
  }

After this setup, we will create two folders.
application and lib.
run

pnpx init vite@latest

set folder to be lib.
run

pnpx create-remix@latest

set folder to be application.
then go to the root folder and run

pnpm i -r

will install node_modules for both projects.

we can use vite to create a library that we can use inside the remix application.
inside

vite.config.js

we will add this section.
For more information please read Building for Production Library mode | Vite (vitejs.dev)

build: {
    lib: {
      entry: "./src/index.js",
      formats: ["cjs", "es"],
      fileName: (format) => `index.${format}.js`,
    },
    rollupOptions: {
      external: ["react", "react-dom"],
    },
  },
}

We can create a simple component.

Then create an index.js file in the src folder.

export { default as Card } from "./components/Card"

inside the package json of the vite lib, we need to add

  "main": "./dist/index.cjs.js",
  "module": "./dist/index.esm.js",

Finally we need to build it by running

pnpm run build

For using this component inside the Remix app.
go to package json of remix and add this line inside the dependencies property

"lib": "workspace:*"

.
Then go to the root of the monorepo and

pnpm i

For running all the applications in the monorepo side by side

pnpm run dev

It all works with caching and monorepo.
You will be able to publish your application quickly and smartly with high speed.
Link to github:
https://github.com/yanirmanor/mono-turbo-example

PNPM install smart

yanir manor — Tue, 14 Dec 2021 18:19:59 +0000

Let's think about installing and node module.
Installation takes some time, and you will find some shared packages on a local computer in many projects.
Consider the cost of storage and processing for the CI docker virtual machine.
So how can we get some speed and efficiency?

pnpm for the rescue. pnpm is a fast, disk space-efficient package manager.
pnpm will be stored in a content-addressable store.

In the video below you can see the comparison between npm and pnpm

What pnpm gives:

If you depend on different versions of the dependency, only the files that differ are added to the store. For instance, if it has 100 files, and a new version has a change in only one of those files, pnpm update will only add 1 new file to the store, instead of cloning the entire dependency just for the singular change.
All the files are saved in a single place on the disk. When packages are installed, their files are hard-linked from that single place, consuming no additional disk space. This allows you to share dependencies of the same version across projects.

As a result, you save a lot of space on your disk proportional to the number of projects and dependencies, and you have a lot faster installations!

Also, pnpm has some features. You can create a workspace to unite multiple projects inside a single repository.

Next, I will write with the combination using pnpm with turborepo.

Control CSS using x-state state machines

yanir manor — Sun, 21 Nov 2021 07:02:40 +0000

Introduction

Do you ever think about adding a CSS condition to control a CSS behavior?
It will be hard and will include a lot of if statements most of the time.
Here is how you can control your styling through an x-state state machine.

Coding

First installing

npm install xstate @xstate/react

Let's build the machine. We'll design three possible states: idle, loading, and success.
To simulate, I added an automatic transition (this is the after with time in JSON).
Now that we have finished the machine, let's integrate it with the react code.
We will create a new data attribute called data-state.
This data attribute will contain the current state.
We are almost done, let's add CSS behavior.
you need to create CSS selector like this

.btn[data-state='loading']

Congratulations we done.
The full code -
https://stackblitz.com/edit/vitejs-vite-wjcxwo?file=src/App.jsx
please run this line in terminal

npm run dev

Conclusion

I like this approach.
I can design the state's behavior using x-state, then control it via CSS selector and assign the relevant attributes.
I think it gives a lot of power and simplicity to your styling ecosystem.

Control Locales In NextJS

yanir manor — Mon, 15 Nov 2021 08:59:14 +0000

In today's world supporting translation for multi-languages is very important.
So how can we do it with Nextjs?
Nextjs is built by page, which means controlling different locales through routing.
First, you need to install the package

npm install next-translate

Then create a file i18n.json in the file you can control what languages you have, what is the default language, what file will load in a specific page or it will be global, and many more options.

{
  "locales": ["en", "fr"],
  "defaultLocale": "en",
  "pages": {
    "*": ["global"],
    "/info": ["info"]
  }
}

When you are done go to next.config and add it to the module

const nextTranslate = require("next-translate");

module.exports = {
  reactStrictMode: true,
  ...nextTranslate(),
};

Great, we have completed the configuration 🤙.

Now create a locales folder in it, and add language and related files to each folder (you can see in the github project).
In each file, create an object with a key value.
Finally, go to the next page and use a translation like this to control it:

import useTranslation from "next-translate/useTranslation";

export default function Info() {
  let { t } = useTranslation();
  return (
      <h1>{t("info:love")}</h1>
  );
}

in the URL you can see the change by adding/fr/ for French otherwise it will be English.

Conclusion

Surprisingly I find localization very simple to use with this package.
Link: https://github.com/yanirmanor/next-locales

NEXTJS 12 - Server component

yanir manor — Mon, 08 Nov 2021 10:15:19 +0000

Next 12 was released last October.
The first thing that catches my eyes and gets me curious is SWC the new rust compiler that will give faster refresh and build.
Compilation using Rust needs to be 17x faster than Babel.
Also, the server component looks promising.
Let's take the new version for a ride 🚴🏼‍♂️.
Link: https://github.com/yanirmanor/next12-server-components

Lets create new next js 12 application

npx create-next-app@latest

Then change to configuration

// next.config.js
module.exports = {
  swcMinify: true
}

That it. Now you can enjoy the power of SWC.

Let's add Tailwindcss for nice and fast CSS power.
We will use Tailwindcss with JIT mode.

Here are the advantages that JIT offers:

Lightning-fast build times
Every variant is enabled out of the box
Generate arbitrary styles without writing custom CSS (top[-10px])
Identical CSS in development and production
Better browser performance in development

First, we will need to install and init.

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest @tailwindcss/jit
npx tailwindcss init -p

Then we need to add mode JIT.

// tailwind.config.js
module.exports = {
 mode: "jit",
 purge: ["./src/**/*.{js,jsx,ts,tsx}"],
 darkMode: false, // or 'media' or 'class'
 theme: {
  extend: {},
 },
 variants: {
  extend: {},
 },
 plugins: [],
};

And import to the global css file.

//global.css
@tailwind base;
@tailwind components;
@tailwind utilities;

And for hot refreshing add this to .env file

TAILWIND_MODE=watch

That's it and you are ready to use Tailwind
For more information and examples you can check in
https://tailwindcss.com/

Finally, we will take a look at react server component.
First, we need to upgrade for the alpha version of react 18.

npm install react@alpha react-dom@alpha

We need to add this 2 flag in the config file.

// next.config.js
module.exports = {
  experimental: {
    concurrentFeatures: true,
    serverComponents: true
  }
}

if you already have customized pages/_document component, you need to remove the getInitialProps static method and the getServerSideProps export if there’s any, otherwise, it won't work with server components.

To run a component on the server, append .server.js to the end of the filename. For example ./pages/demo.server.js is a Server Component.
For client components, add .client.js. For example, ./components/info.client.js.
You can then import other server or client components from any server component.

The server components will always be server-side rendered and streamed to the client, and will not be included by the client runtime.
You will need to wrap the server component with Suspense.

Conclusion

I love the new compiler, this is a good staff for nextjs for the development user experience.
for the server component, I don't feel it's ready its have some bugs.
I found some issues with using the fetch from the new react-fetch npm module.
It's also is very hard to find information and examples.
What I love and why I think it will rock -
Direct option running SQL from the server component
No client-server waterfall of API calls
more secure.
I love the flexibility that it gives, but I think a developer will need to think about when and what will be on the server and what is good to stay on the client. still, it was fun.