Know this thing in Cypress

Why Cypress! We are working on a project that uses the Next.js framework. And in order to do unit tests for the project. We use Jest. Jest is so great! But when we want to test the unit page of Next.js, Jest feels a little bit harder to implement. Instead of using Jest, Cypress is an amazing selection for our goal. In this article, we’re going to figure some core concepts of Cypress....

November 13, 2021 · 5 min · Phan Công Thắng

Build this pagination in your React

I have data that is fetched from the API, and I would like to paginate this data. In this post, I’m going to implement pagination using React. Requirement Suppose that the API returns for me the total page value, and I need to use this value to make pagination. And I also need to have the current page in case the user moves on other pages. This is the requirement:...

November 7, 2021 · 6 min · Phan Công Thắng

Know this easily test React app

Jest and Testing Library were the most powerful tool for testing React App. In this post, we are going to discover the important concept of them. Let’s dig in! This is the simplest test that we can write in the first time using Jest. test('1 plus 2 equal 3', () => { expect(1 + 2).toBe(3) }) Test Asynchronous Suppose that I have a fake API that returns the user response with id: 1, in the test case, I intentionally set change id: 3 to check whether the test works properly or not, and I end up with a passed message....

October 31, 2021 · 9 min · Phan Công Thắng

Step by step: grid layout CSS

Grid helps us lay the content out in an effective way. The element is laid out in rows and columns. When we need to customize the complex layout, grid is so powerful. In order to consider grid, we’re going to learn some basic CSS that we can do in grid, and make a demo using it together. Let’s dig in! Make it grid This is the code in order to demo the CSS property in Grid:...

October 24, 2021 · 3 min · Phan Công Thắng

Push that to AWS S3 for me

Hi friend! Today, I’m going to introduce to you how I upload the image to AWS S3 using Javascript. Let’s dig in! Core Concept Grap a drink and take a glance with about the core concept of AWS S3. I’m try to keep it simple as much as possible. Here we go: Bucket Bucket is where contains the objects we would like to upload, and it is unique global. Object The object might be an image, a font file, or whatever file we want to upload to Bucket....

October 16, 2021 · 4 min · Phan Công Thắng

Make the flexbox CSS stick

Hi friend! Today, we are going to review about the flexbox in CSS. Let’s dig in! Flexbox The reason flexbox exists is that it helps us easy to customize the layout of content. We can take some advantages below using flexbox: Being able to make the flex item in flex container have the same sizes(with, height), and don’t need to care about their intrinsic size. Customize the position of the flex items in the simplest way....

October 9, 2021 · 3 min · Phan Công Thắng

Have one strange float in CSS

When we talk about float in CSS, we usually only think about two values left, right, and wrap it up. But is it all of float? In this article, we’re going to discover some cases of float property in CSS. Float The floated element breaks the normal flow, and it will be wrapped by the inline element or text. I think we are familiar with this concept. Here’s what I want to say:...

October 1, 2021 · 2 min · Phan Công Thắng

Make It Stick

Hi friend! Today, I’m going to tell you about a method of learning so so great that I thought everyone must know! It works like magic! I can’t find a word to send to the author. Thank you so much! Grab a drink, and let’s discover that method with me! Fluency and Mastery We hear tons of times the word like fluency, mastery. But what exactly are they? Fluency: Being familiar with the content....

September 29, 2021 · 6 min · Phan Công Thắng

Debug Your Css With This Tool

There are tons of CSS properties that we can’t remember, and sometime we write some CSS and didn’t know why it doesn’t work as we expect? It turns out we used the wrong CSS property. How to know what exactly point we are wrong? Let’s move on next step to discover that tool. Prepare First of all, I need to create a file HTML and a file CSS for this demo....

September 24, 2021 · 2 min · Phan Công Thắng

Step by Step: Block and Inline CSS (2021)

I usually use display: block, display: inline to CSS the HTML elements. But I only stop at the basic level of understanding these. In this post, I’m going to discover some properties that I thought it is interesting about block, inline. Review Before I go forward, let’s take a slight review of what I know so far. Block When I set: display: block; The HTML element can have some benefits like:...

September 23, 2021 · 5 min · Phan Công Thắng