Latest by topics

Trending Articles

Development

A Guide to CSS Flexbox

When you add HTML content to your web page, it stacks on top of itself, leaving a lot of space on the edges or making your content look odd. The float CSS property, along with position , was then used to define layouts and position elements, but it was complicated to use, especially when dealing with responsiveness. You no longer need to use the float and position properties to organize your page’s layout and style containers or content side by side. With the advancement of the web and technology, you now have two CSS layout systems: flexbox and CSS grid. This guide focuses on CSS flexbox, but you can bookmark our detailed guide on CSS grid .

Development

Testing in Python: Types of Tests and How to Write Them

You’ve finally gotten your API set up. Now other applications can talk to your fully functioning REST API. Now what? What’s the next step? Making sure it works! How do you know if your REST API is functioning correctly ? Well, naturally, you test it. Why is testing important? When you hear a developer refer to testing, we’re typically talking about automated testing. You may have done testing by manually making calls to your API using a tool such as Postman, Insomnia, or cURL. This works, but every time you go to change something then you have to go back and test that nothing else broke from your change.

Development

A Guide To Database Unit Testing with Pytest and SQLAlchemy

Testing is a decisive phase in your systems development lifecycle . This is an important step to make your software reliable and maintainable in the future. In this tutorial, you will have a practical guide to unit testing , one type of software testing by which individual units of your code are tested to determine if they are fit for use. We will discuss how to do unit testing using pytest , which is a Python testing tool. This tool has useful features to help write better programs. We will test a database created by SQLAlchemy ORM.

Development

How to Build a URL Shortener in React with Shrtcode

URLs tends to get lengthy, especially when parameters and query strings are attached. This can get annoying when you want to share a link. For example, long URLs can eat into your character limit on social media platforms. Because of this, websites offering URL-shortening services like Bitly , TinyURL , and Short.io have cropped up. A URL shorterner is a tool that reduces the length of website addresses, creating a short, unique link that redirects to the desired web page when clicked. This makes the URL easier to share, remember, and track. The new unique URL generated usually includes the shortener site’s address and a combination of random letters.

Development

How To Build A Draggable Slider With JavaScript

Multitouch gestures like pinching, swiping, and expanding are essentially native to mobile devices like our pads and phones, whereas on desktop, the swipe gesture is most likely to be carried out with mouse events, especially on sites that are specialized in entertainment, education, and we have most recently found them in web projects like e-commerce. This is because the rise of draggable interactions in our mobile browsers gave rise to recent innovations in navigation design.

Development

An Introduction to Linked List Data Structures

Linked lists are one of the fundamental linear data structures alongside stacks, queues, arrays, and lists. A linked list is a continuous list of nodes where a node is a block structure housing the node value and a pointer (or memory) address to the next node. Each node from the head node has a next pointer that keeps the address of the next node till it gets to the last node, which points to nothing. Linked lists are used in web browsers to keep track of web pages visited and moves in multi-player board games. Linked lists also find usage in implementing other linear data structures and graphs, dynamic memory allocation, and performing arithmetic operations on long integers.

Development

What Front-End Developers Need to Know about CSS Variables

CSS variables (also known as custom properties) enable you to declare reusable and dynamic CSS values. For a long time, a common challenge most web developers faced when working with CSS was the tendency to declare the same styles over and over again throughout the stylesheet. For example, on a website with a red color scheme, you might repeatedly declare the style color: red; throughout your stylesheets. This can lead to issues in the maintainability of your CSS styles, such as having to edit all instances of the declaration color: red; in your stylesheets when the color scheme is to be changed to purple. Enter CSS variables.

Development

Understanding Transactions in SQLAlchemy

Database transaction in SQLAlchemy follows the rule of ACID in relational databases. This tutorial shows how to understand transactions in a practical application. You’re going to learn why SQLAlchemy transactions matter in building applications like getting orders from an inventory. You can use your own IDE and dependencies to try things out, and as always, this tutorial will use the already prepared environment, CoderPad sandbox , which has all that you need from the dependencies in this application.

Development

How to Animate A React Application With Framer Motion

Animations on web pages involve moving elements on the screen to improve the visual experience of users. These animations are visually appealing and tend to draw users’ attention to buttons, images, and other important information. Overall, it contributes to establishing a solid connection between users and the content on the screen. In the past, web pages were very plain and lacked interactivity because they were only intended to display information, and there was no capability to create appealing visual experiences. Things have changed dramatically in recent years, thanks to the availability of libraries and packages that make it easier to animate and add visual experiences to your web pages.

Hire with confidence.

See why engineering teams trust CoderPad to evaluate developers with realistic, AI-ready hiring workflows.

Request a demo