DEV Community: Maxime Kubik

Cypress 💚 Iframes

Maxime Kubik — Mon, 28 Feb 2022 14:29:44 +0000

Hello,

If you've ever used Cypress, you probably know that testing Iframes isn't always easy. Especially when you want to test a child iframe contained in a parent iframe.

That's why I created an example on one of the ways it could be used in this context 🌌

⚙️ An example of how to use Cypress to target nested elements within iframes.

With limited iframe support from Cypress [Issue #136], the following workaround in this repo allowed to target elements and interact with iframes during tests.

Explanation

The solution is to create an iframe command that returns a promise upon iframe loading completion. These commands, aliased as iframe(), can be chained together to deal with nested iframes.

Javascript:

// support/commands.js

Cypress.Commands.add('iframe', { prevSubject: 'element' }, $iframe => {
  return new Cypress.Promise(resolve => {
      $iframe.ready(function() {
        resolve($iframe.contents().find('body'));
      });
  });
});

Here is an example of usage:

// One iframe
cy.get("#iframe").iframe().find("#target").type("HELLO WORLD");

// Nested iframes
cy.get("#firstFrame").iframe().find("#secondFrame").iframe().find('#target').type('HELLO WORLD');

Typescript:

// support/commands.ts

declare namespace Cypress {
  interface Chainable {
    iframe(): Chainable<Element>;
  }
}

Cypress.Commands.add('iframe', { prevSubject: 'element' }, ($iframe: JQuery<Element>) => {
  return new Cypress.Promise<Element>(resolve => {
    $iframe.ready(() => {
      resolve($iframe.contents().find('body'));
    });
  });
});

Here is an example of usage (same as javascript):

// One iframe
cy.get("#iframe").iframe().find("#target").type("HELLO WORLD");

// Nested iframes
cy.get("#firstFrame").iframe().find("#secondFrame").iframe().find('#target').type('HELLO WORLD');

Links

The Github repository
Cypress.io

How To Install NVM on macOS with Homebrew

Maxime Kubik — Fri, 30 Apr 2021 09:23:39 +0000

The NVM (Node Version Manager) is a shell script used for installing and managing Node.js on a Linux based system. The macOS users can install NVM using the homebrew.

This tutorial help you to install NVM on your macOS system and manage Node.js versions.

Prerequisites

You must have macOS desktop access with administrator privileges.



ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Step 1 – Remove existing Node Versions

If your system already have node installed, uninstall it first. My system already have installed node via Homebrew. So uninstalling it first. Skip if not already installed.



brew uninstall --ignore-dependencies node 
brew uninstall --force node

Step 2 – Install NVM on macOS

Now, you system is ready for the installation. Update the Homebrew package list and install NVM.



brew update 
brew install nvm

Next, create a directory for NVM in home.



mkdir ~/.nvm

Now, configure the required environment variables. Edit the following configuration file in your home directory



vim ~/.bash_profile

and, add below lines to ~/.bash_profile ( or ~/.zshrc for macOS Catalina or later)



export NVM_DIR=~/.nvm
source $(brew --prefix nvm)/nvm.sh

Press ESC + :wq to save and close your file.

Next, load the variable to the current shell environment. From the next login, it will automatically loaded.



source ~/.bash_profile

That’s it. The NVM has been installed on your macOS system. Go to next step to install Node.js versions with the help of nvm.

Step 3 – Install Node.js with NVM

First of all, see what Node versions are available to install. To see available versions, type:



nvm ls-remote

Now, you can install any version listed in above output. You can also use aliases names like node for latest version, lts for latest LTS version, etc.



nvm install node     ## Installing Latest version 
nvm install 14       ## Installing Node.js 14.X version

After installing you can verify what is installed with:



nvm ls

If you have installed multiple versions on your system, you can set any version as the default version any time. To set the node 14.X as default version, simply use:



nvm use 14

Similarly, you can install other versions like Node 12.X or Node 15 and switch between them.

Conclusion

This tutorial explained you to how to install NVM and node.js on macOS system.

VS Code: different color themes for different projects 🌈

Maxime Kubik — Mon, 07 Dec 2020 15:54:17 +0000

Hi, have you ever worked with multiple VSCode instances? 🔥

It's sometimes difficult to navigate between the different projects when using the same colorTheme ...

The solution:

Maybe you already know it, but you can have a different theme per workspace/folder by adjusting the workbench.colorTheme in the workspace settings.

Open a new VSCode window.
Open the project folder where you would like to have a different color theme.
Navigate to File > Preferences > Settings
Select the Workspace Settings tab at the top of the settings screen. Anything you edit in here will now be specific to this workspace.
Search for colorTheme and select the color theme you would like for this specific workspace.

Alternatively...

You can use a VSCode extension called Peacock wich subtly change the color of your Visual Studio Code workspace. Ideal when you have multiple VS Code instances, use VS Live Share, or use VS Code's Remote features, and you want to quickly identify your editor.

In the end...

I hope you’ll find these useful for yourself ! It's a game changer for me to boost my productivity 🎉🦥

And you ? What's your favorite hack to boost your productivity ? ❤

5 Useful VSCode Extension

Maxime Kubik — Tue, 27 Oct 2020 16:15:15 +0000

Hi,
Here is the list of my 5 useful extensions you need to know about.

5. Todo Tree

Todo Tree is a simple extension that searches a workspace for comment tags like TODO and FIXME, and displays them in a tree view in the explorer pane.

4. Placeholder Images

This extension generates and inserts placeholder images into HTML.

Useful on the prototype phase.

You can use Unsplash, placehold.it, and LoremFlickr with it.

3. Better Comments

The Better Comments extension creates human-friendly comments in your code.

This extension categorizes your annotations into :

Alerts
Queries
TODOs
Highlights

2. Faker

A simple extension to generate fake data.

Very useful on early-stage development.

You can generate :

address
commerce
company
database
date
and many many more...

1. Code Time

It’s an open-source plugin for automatic programming metrics and time tracking.

You can :

Track your progress during the day
Check out the coding activity
Generate code time summary
Generate data visualizations

In the end...

I hope you’ll find these extensions useful for yourself ! 🎉🦥

And you ? What's your favorite VSCode extension ? ❤

How to fast build Web Application with Strapi + Angular

Maxime Kubik — Wed, 21 Oct 2020 09:44:57 +0000

For us, developers, starting a new web project can be a tedious job. It raises questions like:

What technology should I use for the front-end?
What technology should I use for the back-end?
What database is the best?

Because nowadays all Javascript technologies like React, Angular and Vue are very popular for building Web applications, so we can get an answer for the first question very fast. But what about the back-end? Should I use NodeJS or .NET Core? Is it better to use a relational or non-relational database? Well, Strapi has the answer to all these questions.

What is Strapi ?

Strapi is an open-source Headless CMS that gives developers the freedom to choose their favorite tools and frameworks. With all the plugins and features Strapi gives the developers the ability for customization and extensibility. Strapi is also very Developer-Friendly by providing an API that can be easily accessed either via REST or GraphQL endpoint.

In this article, we are going to build a simple web application using Strapi and Angular.

First, we are going to set up and build our API.

Install Strapi

npx create-strapi-app blog_api --quickstart

Once the setup from the command above is finished Strapi will automatically run (NOTE: when manually start the project run the command strapi develop) and we can navigate to our admin panel on the following link: http://localhost:1337/admin. When you navigate you will able to see the registration form.

When we finish with registering our first user, we can start building our API.

First, what we need to do for our Blog Application is to define the models that we will have. We will define three models: Page, Post, and Content.

To create a new Model navigate to Content Type Builder.

Our model Content will have:

Title - type Text
Value - type RichText
IsPublished - type Boolean
CoverImage - type Media
Relation to Post (Content belong to many Posts)
Relation to Page (Content belong to many Pages)

Page model will have:

Name - type Text
Relation to Content (Page has many Contents)
Relation to Post (Page has many and belongs to many Posts)

and Post model will have:

IsDeleted - type Boolean
Relation to Page (Post has many and belongs to many Pages)
Relation to Contents (Post has many Contents)

As soon as we define our models we are ready to create some pages, contents, and posts. We can simply do that by navigating to each model and click Add new [name-of-the-model]

Now, when we have models and data into our database we need to give access to our visitors of blog application. To do that we need to navigate to Roles and Permissions tab in the menu. We can see there are by default two types of roles: Public and Authorized. We navigate to Public role and select:

And that's it. Our API is ready. Now we only need to make our web application.

Angular Application

Install the Angular CLI with the following command:

npm install -g @angular/cli

Run the following commands at the root of your strapi server to create and run a new angular app:

ng new blog-web 
cd blog-web 
ng serve

If you navigate to http://localhost:4200/ you will able to see the new app.

Now, we can start with styling our application and access data from our API. First, we will create services and API calls to get our data from Strapi. Navigate to src folder and run the following commands:

mkdir services
cd services
ng g s page
ng g s post
ng g s content

Angular CLI will create these services so we are ready for coding. In environment.ts we will put our API URL.

Navigate to page service and insert the following code:

page-service.ts

We created two methods: one for getting all pages and one for getting page by id. We will make the same for post and content services.

NOTE: Before using HttpClient we need to register into app-module.ts

Go to app-module.ts
Import the HttpClientModule from @angular/common/http,

import { HttpClientModule } from '@angular/common/http';

Add it to the @NgModule.imports array :

imports:[HttpClientModule,  ...]

post-service.ts
content-service.ts

Next, we will create post-component that will contain style and functionality for posts and we will use app-component for displaying our landing page. Navigate to app folder and create a new folder called components. Here, we will store all components that we use in our blog application. With the following command we can generate a new component:

ng g c post

Insert the following code into the post component :

post.component.html
post.component.css
post.component.ts

Because we are using bootstrap classes we need to include bootstrap into our project as well. We can do that by adding the following into index.html :

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootswatch/4.3.1/cosmo/bootstrap.min.css">

And we are almost done. The only thing that left is to modify app-component and our blog is ready for use.

app.component.html
app.component.scss
app.component.ts

Congratulations, we successfully built a Blog application.

Conclusion

Feel free to continue working on your blog. You can try various scenarios navigation, styling e.t.c. Play with models into Strapi and API calls from your Angular application.

🐳 mongodump and mongorestore with Docker

Maxime Kubik — Tue, 13 Oct 2020 13:41:16 +0000

Hi! TIL how to restore and dump a MongoDB container. The trick is to disable pseudo-tty allocation. Otherwise extra characters are added to the backup file. They prevent mongorestore from working properly.

With Docker

With docker, pseudo-tty allocation is deactivated by default, but the -i (interactive) option is required with the restore command.

mongodump

No Auth : docker exec <mongodb container> sh -c 'mongodump --archive' > db.dump
Authenticated : docker exec <mongodb container> sh -c 'mongodump --authenticationDatabase admin -u <user> -p <password> --db <database> --archive' > db.dump

mongorestore

No Auth : docker exec -i <mongodb container> sh -c 'mongorestore --archive' < db.dump
Authenticated : docker exec -i <mongodb container> sh -c 'mongorestore --authenticationDatabase admin -u <user> -p <password> --db <database> --archive' < db.dump

With Docker Compose

With docker-compose, pseudo-tty allocation needs to be deactivated explicitly each time with -T :

mongodump

docker-compose exec -T <mongodb service> sh -c 'mongodump --archive' > db.dump

mongorestore

docker-compose exec -T <mongodb service> sh -c 'mongorestore --archive' < db.dump

That's all ! ✨🎉
Now, feel free to write a script and add it to your pipeline.