What is a Framework?

In terms of software development, a framework is a structured set of tools, libraries, and conventions that provides a foundation for building applications more efficiently by handling common functionalities so developers can focus on unique features.

A modern web application can combine multiple frameworks to handle different aspects of development efficiently:

• React with Tailwind CSS manages the user interface and styling.

• FastAPI or Django with LangChain handle backend operations and AI functionality, while MongoDB acts as a memory store.

These frameworks communicate through APIs and defined interfaces to work together—for example, a user interaction in the React front end can trigger an AI process through LangChain in the Python back end, which uses MongoDB Atlas Vector Search to retrieve relevant data and then display it back to the user with Tailwind CSS styles.

Table of Contents:

• The framework landscape in 2024

• Application frameworks

• AI frameworks

• Web frameworks

• CSS/UI frameworks

• Testing & infrastructure

• Making the right choice

• The bottom line

• Additional resources

• Frequently asked questions (FAQ)

The Framework Landscape in 2024

Think of frameworks as tools in a technical toolbox. Understanding what each tool is designed to do—and what it isn't—ensures you use the right solution for the task at hand.

The Evolution of Development Frameworks

The framework landscape has transformed dramatically over the past decade. What started as simple libraries for rendering web pages has evolved into sophisticated ecosystems that can:

• Handle complex state management.

• Process real-time data streams.

• Integrate AI capabilities.

• Scale automatically based on demand.

• Deploy across multiple platforms from a single codebase.

Why Framework Choice Matters

Frameworks are puzzle pieces: each has a unique shape and function. When chosen wisely, they fit together seamlessly to create a cohesive application. But forcing incompatible pieces together can lead to inefficiencies and broken functionality.

Here's why your choice matters:

Technical impact

• Performance: Different frameworks have different performance characteristics. Instagram chose React for its virtual DOM, which handles frequent updates efficiently.

• Scalability: Uber's back end uses Node.js because it excels at handling numerous concurrent connections.

• Maintenance: Shopify standardized on React Native to maintain a single codebase for mobile applications.

Business impact

• Development speed: The right framework can accelerate development by 2-3x.

• Team productivity: Familiar frameworks reduce onboarding time from months to weeks.

• Cost efficiency: Proper framework selection can significantly reduce hosting and maintenance costs.

Common pitfalls

• Over-engineering: Using Next.js when a simple HTML page would suffice

• Under-engineering: Using vanilla JavaScript for a complex, state-heavy application

• Misaligned tools: Using Electron (a desktop app framework) to build a simple website

• Trend-chasing: Adopting the newest framework without considering maintenance implications

Let’s dive deeper into the various categories of development frameworks and how they can help you build better applications.

Note: I give framework examples throughout this article, but these are not exhaustive lists and new frameworks are created daily|weekly|monthly.

Application Frameworks

These are your Swiss Army knives of development—comprehensive toolkits that handle the entire application lifecycle. While each framework has its specialties, they typically provide:

• Database integration and ORM support.

• Authentication and authorization.

• API routing and middleware.

• Template engines or component systems.

• Asset management.

• Security features.

• Development tools and debugging support.

What is an application? An application is the combination of individual components working together, including a user interface and backend services, to perform specific functions or a set of functions for users. It’s designed to be fully deployable and operate in production environments.

You'll encounter them in three main flavors:

Full-Stack Web Application Frameworks

• Django and Rails: Perfect for data-heavy applications with complex business logic. They follow the "batteries included" philosophy, providing everything you need out of the box.

• Next.js and Nuxt.js: Modern full-stack frameworks optimized for React and Vue.js, respectively. They excel at building performant applications with capabilities like server-side rendering, static site generation, and API integration.

• Spring Boot: Enterprise-grade framework favored for large-scale Java applications, particularly in financial and banking sectors.

Mobile Application Frameworks

• Flutter: Google's toolkit for building natively compiled apps for mobile, web, and desktop from a single codebase. Known for smooth animations and native performance.

• React Native: Ideal when you want to leverage your team's React knowledge for mobile development. Great for apps that need to feel native while maintaining code sharing between platforms.

• SwiftUI and Jetpack Compose: Native frameworks for iOS and Android, respectively. Ideal when platform-specific features and optimal performance are crucial.

Desktop Application Frameworks

• Electron: Powers apps like VS Code and Slack. Ideal for leveraging existing web development knowledge without having to learn OS-specific languages to build cross-platform desktop applications.

• Tauri: A modern alternative to Electron with smaller bundle sizes and better performance. Uses native system webviews to run apps more efficiently, with less memory and faster startup times. Developers can use their existing web development skills without learning new programming languages for each OS.

• PyQt: A good option for building GUI applications in Python, especially for data science projects. It has a rich set of libraries and widgets, suitable for both small tools and complex apps.

Gaming Frameworks

• Unity: A popular framework used for creating 2D and 3D games. It supports multiple platforms, making it a versatile choice for game developers. Unity is known for its user-friendly interface and extensive asset store.

• Unreal Engine: Known for its high-quality graphics, Unreal Engine is a powerful framework used for both AAA games and indie projects. It provides advanced visual tools and real-time rendering capabilities.

• Godot: An open-source game engine that's lightweight and flexible. Godot is often used for smaller or indie game projects and features an intuitive scene system that makes development straightforward.

AI Frameworks

Here's a crucial point many miss: AI frameworks like TensorFlow or LangChain are powerful, but they're not standalone solutions. These frameworks require integration with other tools and frameworks for data handling, user interface, and deployment to create a complete, production-ready application. These are just another piece of the puzzle.

The exception? Data scientists can use these tools directly in Jupyter notebooks for research and prototyping. But for production applications, you'll need more.

Let's look at the major players and their sweet spots:

AI Model Development Frameworks

• TensorFlow: Google's powerhouse for deep learning, TensorFlow is perfect for applications involving computer vision, neural networks, and production-grade ML. Pinterest uses it for image recognition and recommendations, highlighting its strength in processing large amounts of image data efficiently.

• PyTorch: Developed by Facebook, PyTorch is a flexible framework ideal for research, natural language processing, and quick prototyping. Tesla has utilized PyTorch for various machine learning tasks, including research related to autonomous driving vision systems, demonstrating its versatility in cutting-edge applications.

• JAX: A high-performance numerical computing framework by Google, JAX is well-suited for scientific computing and large-scale transformers. DeepMind has used JAX for advanced AI research, including projects like AlphaFold for protein structure prediction, showcasing its effectiveness in large-scale computational problems.

AI Model Deployment and Serving Frameworks

• TensorFlow Serving: A deployment tool for TensorFlow models, perfect for serving high-performance ML models in production environments. For example, it has been used to serve image classification models for e-commerce platforms, ensuring rapid and scalable response times.

• TorchServe: A robust tool for deploying PyTorch models, perfect for scalable PyTorch model serving. It has been used for deploying chatbot models for real-time customer support, providing flexibility and efficiency in managing conversational AI.

• NVIDIA Triton Inference Server: A multi-framework model serving tool, NVIDIA Triton Inference Server is capable of handling models from TensorFlow, PyTorch, ONNX, and more. It is ideal for managing inference requests for multi-modal AI applications, making it highly suitable for complex AI deployments.

LLM Integration Frameworks

• LangChain: The Swiss Army knife for LLM applications. Ideal for building chatbots and document Q&A systems. It has been employed to create customer service bots capable of accessing company knowledge bases, demonstrating its usefulness in enhancing customer interactions.

• LlamaIndex: Specializing in data connection, LlamaIndex is perfect for building search engines over private data. It has been used to create semantic search systems for internal documents, facilitating more effective data retrieval and organizational knowledge management.

• Hugging Face Transformers: A pre-trained model hub, Hugging Face Transformers allows for the quick deployment of state-of-the-art models. It has been used to add sentiment analysis to customer feedback systems, highlighting its capability in natural language understanding.

AI Data Processing Frameworks

• Apache Spark (MLlib): Ideal for large-scale data transformation and ML, used for processing millions of user interactions in recommendation systems. Its scalability and efficiency make it a popular choice for big data ML tasks.

• Pandas: A widely-used data manipulation and analysis tool that is perfect for data cleaning, analysis, and feature engineering. It is often employed in preparing customer data for churn prediction models, owing to its intuitive data handling capabilities.

• Polars: A high-performance data manipulation framework, used when Pandas is not fast enough for processing requirements. It has been applied in real-time financial data analysis, delivering faster data processing and efficiency.

AI Automation and Orchestration Frameworks

• CrewAI: Used to orchestrate multiple AI agents, making it perfect for complex workflows requiring multiple AI models. It has been used to create a content creation pipeline that plans, writes, and edits, showcasing its ability to automate creative processes.

• Auto-GPT: Develops autonomous AI agents, ideal for self-directed task completion. It has been utilized for automated research and data gathering, highlighting its potential for automating repetitive knowledge tasks.

• Microsoft Semantic Kernel: An AI orchestration tool perfect for integrating AI into .NET applications. It has been used to add AI capabilities to existing enterprise applications, providing a seamless integration of AI functions into established workflows.

AI Data Ingestion and Document Processing Frameworks

• Apache NiFi: A powerful tool for data flow automation, well-suited for real-time data ingestion and processing. It has been used to extract and transform log data before analysis, ensuring efficient data flow for various use cases.

• Haystack: Specialized in document processing for search and QA systems. It has been utilized to create pipelines for indexing documents and answering questions, making it ideal for building internal knowledge base searches.

• Unstructured: Designed for extracting data from a variety of formats, including PDFs, HTML, and images. It’s perfect for handling unstructured content in document processing workflows and has been used to extract relevant information from scanned documents for data analysis.

• Airbyte: An open-source data integration tool that is ideal for connecting and syncing data across multiple sources. It has been used to ingest data from third-party APIs into analytics systems, enabling effective data consolidation.

Interactive AI Web Frameworks

• Gradio: Simplifies the process of building web UIs for machine learning models, making it perfect for creating quick demos for ML models. It has been used to create interactive image classifiers for end users, providing an accessible interface for testing ML capabilities.

• Streamlit: A Python-based web app framework for ML and data science, ideal for turning data scripts into shareable web apps. It has been used to build user-friendly dashboards for exploring model predictions, enhancing the accessibility of ML models.

MLOps and AI Monitoring Frameworks

• MLflow: Used for experiment tracking and model lifecycle management, perfect for keeping track of experiments and model versions. It has been applied to manage multiple iterations of predictive models, supporting organized development workflows.

• Kubeflow: A Kubernetes-native platform for MLOps, ideal for deploying, scaling, and managing machine learning models on Kubernetes. It has been used to run end-to-end ML workflows in production environments, ensuring scalability and consistency.

• Prometheus & Grafana: Monitoring and alerting tools for ML infrastructure, perfect for tracking model inference performance and system metrics. They have been used to monitor latency and resource usage of deployed ML services, ensuring optimal operational performance.

Web frameworks

Web development has evolved into two distinct camps—think of them as the front-of-house and kitchen staff in a restaurant. Both essential, both specialized, but with very different responsibilities.

Note: We already discussed full-stack web application frameworks above, which marry these two together.

Frontend Frameworks

Frontend frameworks handle what users see and interact with, managing everything from data display to user interactions, user input, and how the overall user experience is structured. These frameworks ensure that the interface is visually appealing, intuitive, and responsive to user actions.

They play a critical role in how smoothly data is presented, processed, and updated in real time, providing dynamic elements like animations, form validation, and client-side routing to enhance usability.

By using frontend frameworks, developers can create highly interactive and cohesive user experiences that feel natural and engaging.

• React: Ideal for large-scale applications with complex state management. It features a virtual DOM for optimal performance, making it suitable for highly interactive user interfaces.

• Vue.js: Perfect for both small projects and enterprise applications. It has a gentle learning curve combined with powerful scalability, making it an approachable yet robust frontend solution.

• Svelte: Ideal for when you have performance-critical applications and want smaller bundles. It compiles away framework code for lighter applications, providing better performance and a smaller footprint.

Backend Frameworks

Backend frameworks manage server-side logic, data processing, and system integration, handling everything from receiving and processing client requests to interacting with databases and external APIs. These frameworks ensure that the server processes are efficient, scalable, and secure, supporting high concurrency and maintaining consistent data flows.

They provide the essential tools for developers to build, maintain, and optimize the server-side of applications, including tasks such as handling authentication, managing business logic, and ensuring data consistency.

A well-chosen backend framework allows developers to focus more on creating features rather than dealing with low-level server management.

• Express.js: Perfect for APIs and microservices, offering minimal structure with maximum flexibility. It is highly popular in Node.js environments for building efficient server-side logic.

• FastAPI: Designed for high-performance APIs, with automatic API documentation and type checking. It is commonly used for fast and secure backend implementations in Python.

• NestJS: For large-scale Node.js applications, featuring an Angular-inspired architecture that enhances scalability. It provides a well-structured framework for enterprise-level backends.

CSS/UI Frameworks

Modern CSS frameworks have evolved beyond simple styling to become complete design systems. Gone are the days when CSS frameworks just provided basic grid systems and button styles.

Today's frameworks are sophisticated tools that enable consistent design at scale. They offer features such as responsive layouts, dark mode support, accessibility enhancements, and interactive components.

They've become essential for maintaining design consistency across large applications and teams, while significantly reducing development time and technical debt. Some frameworks even include built-in performance optimization, design tokens for brand customization, and tools for managing design systems across multiple platforms.

They fall into two main categories:

Utility-first Frameworks

• Tailwind CSS: Custom designs with consistent systems. It features rapid prototyping capabilities, highly customizable design tokens, and small production bundles through PurgeCSS.

• UnoCSS: A customizable, efficient, utility-first CSS solution. It provides on-demand CSS for optimal performance and minimal bundle size, making it a modern tool for design system management.

Component-based Frameworks

• Bootstrap: Rapid prototyping and traditional web applications. It offers an extensive library of pre-built components, a responsive grid system, and a rich ecosystem of themes and plugins.

• Material UI: For applications following Material Design guidelines. It includes a comprehensive component library, a theming system, and accessibility compliance features.

Testing and Infrastructure

These frameworks form the backbone of reliable, scalable applications. While they might not get as much attention as flashy frontend frameworks or AI tools, they're the critical infrastructure that keeps modern applications running smoothly at scale.

Testing frameworks ensure code quality and prevent regressions, while containerization and orchestration frameworks handle the increasingly complex world of cloud deployment and scaling.

In an era where a single code change can affect millions of users instantly, or where an application might need to scale from hundreds to millions of requests in minutes, these frameworks aren't just nice-to-have—they're essential for survival. Major tech companies like Netflix, Amazon, and Google rely on these tools to maintain their rapid development pace while ensuring reliability and performance at massive scale.

Testing Frameworks

• Jest: Features snapshot testing, code coverage, and mocking capabilities, making it a popular choice for ensuring the quality of JavaScript codebases.

• Cypress: Provides real browser testing and time-travel debugging, ideal for end-to-end testing of web applications.

• PyTest: Known for its simple syntax, powerful extensions, and easy fixture management, making it a go-to framework for testing Python applications.

Containerization and Orchestration

• Docker: Used for application containerization, providing consistent development and deployment environments with isolated dependencies and efficient resource usage.

• Kubernetes: Orchestration of large-scale distributed applications. It provides automated scaling, self-healing deployments, and rolling updates, ensuring that containerized applications can grow as needed.

Making the Right Choice

Selecting the right framework can determine the success of your entire project. Consider these critical points to guide your decision-making process:

1. Application Type and Scale

• Small site? Consider React or Vue.js.

• Large application? Next.js or Django might be better.

• Need SEO? Look for SSR capabilities.

2. Team Capabilities

• Strong JavaScript? Consider Node.js ecosystem.

• Python experts? Django or FastAPI might be better.

• Need quick ramp-up? Combine key frameworks like Vue.js and Bootstrap.

3. Technical Requirements

• High-performance computing? Consider Rust frameworks.

• Real-time updates? Look at WebSocket support.

• AI requirements? Integration with platforms like Hugging Face and frameworks like LangChain might be essential.

4. Scaling Strategy

• Vertical scaling? Simpler frameworks might suffice.

• Horizontal scaling? You need frameworks with microservices support.

• Global distribution? Consider edge computing capabilities.

5. Long-term Maintenance

• Community size and activity

• Available talent pool

• Corporate backing and stability

• Documentation quality

• Upgrade path complexity

The Bottom Line

Framework selection isn't just a technical decision—it's a strategic one that affects your project's success, team productivity, and maintenance costs. So take the time to understand your options.

Now you should have all of the puzzle pieces, but it's up to you to put them together thoughtfully to create the perfect technology stack that meets both your current and future needs.

Additional Resources

If you'd like to learn how MongoDB integrates seamlessly with many of the frameworks mentioned in this guide, check out the resources below. You'll find that it offers a flexible and scalable database solution that adapts to different use cases.

• How to Integrate MongoDB Into Your Next.js App

• Introducing FARM Stack - FastAPI, React, and MongoDB

• How to Use MERN Stack: A Complete Guide

• Build a JavaScript AI Agent With LangGraph.js and MongoDB

• RAG with Atlas Vector Search, LangChain, and OpenAI

Frequently Asked Questions (FAQ)

What is a development framework?

A development framework is a set of tools, libraries, and conventions that provide a foundation for building applications efficiently. Frameworks handle common tasks so developers can focus on building unique features.

How do AI and development frameworks work together?

AI frameworks can be combined with traditional development frameworks to create intelligent, data-driven applications. For instance, a backend framework like FastAPI can handle incoming requests, while an AI framework like LangChain processes natural language data, providing users with enhanced functionality like chatbots or recommendation systems.

Why is choosing the right framework important?

Choosing the right framework can impact your project's performance, scalability, and maintenance. It ensures that your application meets user expectations, is easy to manage, and can grow as needed.

How do I decide which framework to use for my project?

Consider factors like application type, team expertise, performance needs, scalability, and long-term maintenance. Each of these can guide you in selecting a framework that matches your specific requirements.

Can I use multiple frameworks in one project?

Yes, combining multiple frameworks can be very effective. You might use one framework for the front end, another for backend services, and a third for AI integrations, ensuring that each part of your application is handled by the best-suited tool.

How does MongoDB fit into development frameworks?

MongoDB integrates with many frameworks, acting as the data layer for your applications. It provides a flexible, scalable solution that supports full-stack, backend, and AI frameworks to store and retrieve data efficiently.

Fortunately for us, the Temporal proposal aims to address these issues by providing a modern, more intuitive API for date and time manipulation.

In this article, we’ll go over some of the challenges of working with date, what the Temporal API is and how it will work, and what you can use in the meantime until Temporal is ready for production use.

Current Issues with Date in JavaScript

1. Mutable API

The Date object is mutable, which can lead to bugs and unexpected behavior:

// Current Date behavior is mutable
const date = new Date('January 1, 2024');
date.setMonth(1); // Modifies the original date object
console.log(date); // February 1, 2024

// This mutability can lead to bugs when passing dates between functions
function processDate(date) {
  date.setDate(date.getDate() + 1); // Modifies the original date!
  return date;
}

2. Confusing month numbering

Months in Date are zero-based (0-11), while days are one-based (1-31):

// Confusing month numbering
const date = new Date(2024, 0, 1); // January 1, 2024
console.log(date.getMonth()); // 0 (January)

3. Limited time zone support

The Date object has limited support for time zones and relies heavily on the system's local time zone:

// Time zone handling is system-dependent
const date = new Date('2024-01-01T00:00:00Z');
console.log(date.toString()); // Will show different results based on system timezone

What is the Temporal API?

Temporal is a proposed new JavaScript API that provides a modern solution for working with dates, times, and timestamps. It's currently a Stage 3 proposal, which means it's in the final stages of development but not yet ready for production use.

Key concepts of Temporal:

1. Immutable by default: All Temporal objects are immutable

2. Clear separation of concerns: Different objects for different use cases

3. Explicit time zone handling: Better support for working with time zones

4. Consistent indexing: All units use 1-based numbering

Key Features of Temporal

1. Different types for different needs

// PlainDate for working with calendar dates
const date = Temporal.PlainDate.from('2024-01-01');

// PlainTime for working with wall-clock time
const time = Temporal.PlainTime.from('09:00:00');

// ZonedDateTime for working with specific time zones
const zonedDateTime = Temporal.ZonedDateTime.from('2024-01-01T09:00:00[America/New_York]');

In this example, Temporal provides different object types for different use cases:

• PlainDate is used when you only care about calendar dates without time or timezone information. Perfect for birthdays, holidays, and so on.

• PlainTime handles time independent of any date or timezone. Useful for recurring events like "9 AM daily standup".

• ZonedDateTime combines date, time, and timezone information for complete timestamp handling. Great for scheduling meetings across timezones.

Each type is purpose-built and immutable, preventing accidental modifications. This clear separation helps developers choose the right tool for their specific needs, unlike the one-size-fits-all Date object that tries to handle everything and often leads to confusion.

2. Immutable operations

// All operations return new objects instead of modifying the original
const date = Temporal.PlainDate.from('2024-01-01');
const nextMonth = date.add({ months: 1 }); 
console.log(date.toString()); // '2024-01-01' - original unchanged
console.log(nextMonth.toString()); // '2024-02-01' - new object

This example demonstrates how Temporal's immutable design prevents accidental mutations and makes date arithmetic more predictable.

With the current Date API, methods like setMonth() modify the original object, which can lead to bugs when that object is used in multiple places. In contrast, Temporal's methods always return new objects, leaving the original untouched.

3. Better time zone support

// Explicit time zone handling
const nyDateTime = Temporal.ZonedDateTime.from({
  timeZone: 'America/New_York',
  year: 2024,
  month: 1,
  day: 1,
  hour: 9
});

const tokyoDateTime = nyDateTime.withTimeZone('Asia/Tokyo');
console.log(tokyoDateTime.toString()); // '2024-01-01T23:00:00+09:00[Asia/Tokyo]'

Unlike the current Date API, which often leads to confusion with implicit time zone conversions, Temporal makes time zone operations explicit and straightforward:

1. We create a ZonedDateTime object specifically for New York time zone, with all components (year, month, day, hour) clearly specified. This explicit creation prevents any ambiguity about which time zone we're working with.

2. Using withTimeZone(), we can easily convert times between zones without complex calculations. The conversion from New York to Tokyo time is handled automatically.

3. The resulting string output includes the full time zone offset (+09:00) and the time zone name ([Asia/Tokyo]), providing complete clarity about the time being represented.

This approach solves many common time zone-related issues developers face today, such as daylight saving time transitions, time zone offset calculations, and the ambiguity of local vs. UTC times. It's particularly valuable for applications that need to handle global scheduling, event coordination across time zones, or any scenario where precise time zone handling is crucial.

Comparing Date, Intl, and Temporal

Current approach with Date and Intl:

// Current approach using Date and Intl
const date = new Date('2024-01-01T09:00:00Z');
const formatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/New_York',
  dateStyle: 'full',
  timeStyle: 'long'
});

console.log(formatter.format(date)); // 'Monday, January 1, 2024 at 4:00:00 AM EST'

With the current approach, we create a UTC timestamp using Date, need a separate Intl.DateTimeFormat object for formatting, handle time zone conversion implicitly during formatting, and have less control over the exact output format. The resulting output shows 4:00 AM EST because we created the date as 09:00 UTC and when formatted in New York time zone. This implicit conversion can be confusing and error-prone.

Future approach with Temporal:

// Future approach using Temporal
const datetime = Temporal.ZonedDateTime.from('2024-01-01T09:00:00[America/New_York]');
console.log(datetime.toLocaleString('en-US', {
  weekday: 'long',
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  hour: 'numeric',
  minute: '2-digit',
  second: '2-digit',
  timeZoneName: 'short'
})); // 'Monday, January 1, 2024 at 9:00:00 AM EST'

With Temporal, we create a ZonedDateTime with an explicit time zone, and the formatting options are directly integrated into the API. The time (9:00 AM) is exactly what we specified for New York, with no implicit conversions. This makes the code's behavior more predictable and easier to understand.

Arithmetic also becomes more intuitive with this approach.

const nextWeek = datetime.add({ weeks: 1 });
const duration = datetime.until(nextWeek);
console.log(nextWeek.toPlainDate().toString()); // '2024-01-08'
console.log(duration.toString()); // 'PT168H'

In this example, we can see several key advantages of Temporal's approach:

1. Explicit Time Zone Handling: By creating a ZonedDateTime with [America/New_York], we explicitly state which time zone we're working with. There's no ambiguity about whether the time is UTC, local, or in another time zone.

2. Integrated Formatting: The toLocaleString() method provides a clean, unified way to format dates without needing a separate formatter object. All the formatting options are similar to what you'd use with Intl.DateTimeFormat, maintaining familiarity while simplifying the API.

3. Intuitive Arithmetic: The add() and until() methods demonstrate how Temporal makes date/time calculations more straightforward:

   • add({ weeks: 1 }) clearly shows we're adding one week

   • until() returns a proper duration object that can be easily understood and manipulated

   • The resulting duration of 'PT168H' represents a period of time (P) with 168 hours (T168H), following the ISO 8601 duration format

4. Type Safety: By having distinct types like ZonedDateTime and PlainDate, Temporal helps prevent common mistakes. The toPlainDate() method explicitly converts to a date-only representation when we don't need time information.

This approach eliminates many of the gotchas and implicit behaviors that make the current Date API problematic, while providing a more powerful and flexible way to work with dates and times.

Current Status and Alternatives

Current status

• Temporal is currently at Stage 3 of the TC39 process

• It's not yet ready for production use

• Browser support is not yet available natively

Recommended alternatives

Until Temporal becomes widely available, consider using established libraries:

1. Day.js

   • Lightweight

   • Good browser support

   • Good TypeScript support

   • Extensible with plugins

   • Has a large community and active development

// Using Day.js as an alternative
import dayjs from 'dayjs';
import utc from 'dayjs/plugin/utc';
import timezone from 'dayjs/plugin/timezone';

dayjs.extend(utc);
dayjs.extend(timezone);

const date = dayjs('2024-01-01').tz('America/New_York');
const nextWeek = date.add(1, 'week');

For a deeper dive into Day.js, check out this article: JavaScript Dates – How to Use the DayJS Library to work with Date and Time in JS

2. date-fns

   • Functional programming approach

   • Tree-shakeable

   • Good TypeScript support

3. Luxon

   • Similar features to Temporal

   • Immutable by default

   • Native time zone and Intl support

Why wait for Temporal?

While these libraries are good alternatives, Temporal will offer several advantages:

1. Native browser support (no additional bundle size)

2. Standardized API across all JavaScript environments

3. Better performance as a native implementation

4. Consistent behavior across all platforms

Until Temporal reaches Stage 4 and has widespread browser support, I would recommend either using the built-in Date and Intl objects or one of the established libraries mentioned above for production applications. But prepare yourself and be ready for Temporal when it’s ready!

Thanks for reading!

Check out my other content and let me know how I can help you on your journey to becoming a web developer.

• Subscribe To My YouTube Channel

• Socials: Twitter | LinkedIn | Instagram

• Sign Up For My Newsletter

Think of Emmet as shorthand. With it, you can easily write a lot of code quickly. It dramatically speeds up your HTML & CSS workflow.

Understanding how to use Emmet is literally a superpower. Some have even called it a coding cheat-code. ?

And it's just one of many amazing built-in features of VS Code.

Recently, I launched a comprehensive and detailed course called Become A VS Code SuperHero.**** It covers all aspects of VS Code in great depth.

This article is based on one of the 11 sections of the course: Writing & Formatting Code.

HTML

With Emmet you can quickly create an HTML boilerplate in the blink of an eye. In an HTML file, simply type ! and you’ll see that Emmet has popped up as a suggestion. Now hit Enter. There you have it, a basic, blank HTML web page ready to go.

If you’ve never seen HTML before and have no clue what all of this is, don’t worry. I’m just demonstrating the capabilities of VS Code and Emmet. You don’t have to know what any of this means right now.

Basic Tags

To create basic HTML tags, just type the tag's name and hit Enter. Notice how Emmet puts your cursor inside the tag. You are now set up to continue typing inside the tag.

• Try typing: div then Enter, or h1 Enter, or p Enter.

• These work as well: bq for a <blockquote>, hdr for a <header>, ftr for a <footer>, btn for a <button>, and sect for a section.

Classes

If you are familiar with CSS, Emmet uses the same way to refer to classes using a .. To define a class along with the tag simply add it like this:

• div.wrapper —> <div class="wrapper"></div>

• h1.header.center —> <h1 class="header center"></h1>

ID’s

Id's work very much the same:

• div#hero —> <div id="hero"></div>

Combining

You can string these together:

• div#hero.wrapper —> <div id="hero" class="wrapper"></div>

Attributes

We can also specify attributes for tags:

• img[src="cat.jpg"][alt="Cute cat pic"] —> <img src="cat.jpg" alt="Cute cat pic" />

Content

To include content within the tag, we simply wrap the content in curly braces, { }.

• p{This is a paragraph} —> <p>This is a paragraph</p>

Siblings & Children

It just keeps getting better. We can also specify siblings and children using the + and > characters.

• section+section —> <section></section><section></section>

• ul>li —> <ul><li></li></ul>

Climbing Up

You have to try to picture what you are building in your head as you type the Emmet shorthand. In this example we'll "climb up" the tree by using ^.

div+div>p>span+em^bq

Result:

<div></div>
<div>
    <p><span></span><em></em></p>
    <blockquote></blockquote>
</div>

Here, we wanted the blockquote to be on the same level as the paragraph. Because of that, we needed to "climb up". Otherwise, it would be inside of the paragraph.

Grouping

If your structure is very complex, you may want to group tags instead of traversing by climbing.

In this example, we'll create a header and footer without climbing using parenthesis ( ).

div>(header>ul>li>a)+footer>p

Result:

<div>
    <header>
        <ul>
            <li><a href=""></a></li>
        </ul>
    </header>
    <footer>
        <p></p>
    </footer>
</div>

Multiplication and $

We can generate multiple tags by multiplying (*) and number items in sequence using a dollar sign ($).

• ul>li*5 —> <ul><li></li><li></li><li></li><li></li><li></li></ul>

• ul>li{Item $}*3 —> <ul><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul>

You can even customize the numbering sequence by padding with zeros, starting with a specific number, and even reverse direction.

Pad with zeros: ul>li.item$$$*5

Result:

<ul>
    <li class="item001"></li>
    <li class="item002"></li>
    <li class="item003"></li>
    <li class="item004"></li>
    <li class="item005"></li>
</ul>

Start with a specific number: ul>li.item$@3*5

Result:

<ul>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
    <li class="item6"></li>
    <li class="item7"></li>
</ul>

Reverse direction: ul>li.item$@-*5

Result:

<ul>
    <li class="item5"></li>
    <li class="item4"></li>
    <li class="item3"></li>
    <li class="item2"></li>
    <li class="item1"></li>
</ul>

Reverse direction from a specific number: ul>li.item$@-3*5

Result:

<ul>
    <li class="item7"></li>
    <li class="item6"></li>
    <li class="item5"></li>
    <li class="item4"></li>
    <li class="item3"></li>
</ul>

Implicit Tag Names

There are certain tags that do not need to be typed and can be implied.

• A class defined initially with no tag will be implied as a <div>.
  .wrapper —> <div class="wrapper"></div>

• A class defined within an emphasis tag will be implied as a <span>.
  em>.emphasis —> <em><span class="emphasis"></span></em>

• A class defined within a list will be implied as a list item.
  ul>.item —> <ul><li class="item"></li></ul>

• A class defined within a table will be implied as a <tr> and within a row would be a <td>.
  table>.row>.col —> <table><tr class="row"><td class="col"></td></tr></table>

Wrap with Tags

There will be times when you have existing code that you want to wrap with a tag. We can do with easily with Emmet.

Just highlight the code that you want to wrap and open the command pallet (F1). Then search for Emmet: Wrap with Abbreviation. You'll then be presented with a dialog box where you can type in the element.

test —> <div>test</div>

You can also use standard Emmet syntax in this dialog. Try wrapping some text with span.wrapper.

By default, this functionality is not assigned to a keyboard shortcut. So if you find yourself using it often, you may want to add a custom shortcut for it.

Lorem Ipsum

"Lorem Ipsum" is dummy text used by developers to represent data on a page. Just type lorem and hit Enter. Emmet will generate 30 words of fake text that you can use as a filler in your project.

The amount of words generated can be defined as well.

• lorem10 will give you 10 words of random text.

Putting It All Together

Let's use several things that we've learned so far. Give this a try:

ul.my-list>lorem10.item-$*5

Result:

<ul class="my-list">
  <li class="item-1">Lorem ipsum dolor sit amet.</li>
  <li class="item-2">Numquam repudiandae fuga porro consequatur?</li>
  <li class="item-3">Culpa, est. Tenetur, deleniti nihil?</li>
  <li class="item-4">Numquam architecto corrupti quam repudiandae.</li>
</ul>

CSS

In CSS, Emmet has an abbreviation for every property. I'm not going to list all of them, but I will point out my most used ones. To see the full list, refer to the Emmet cheat-sheet.

Position

• pos —> position:relative; (defaults to relative)

• pos:s —> position:static;

• pos:a —> position:absolute;

• pos:r —> position:relative;

• pos:f —> position:fixed;

Display

• d —> display:block; (defaults to block)

• d:n —> display:none;

• d:b —> display:block;

• d:f —> display:flex;

• d:if —> display:inline-flex;

• d:i —> display:inline;

• d:ib —> display:inline-block;

Cursor

• cur —> cursor:pointer;

Color

• c —> color:#000;

• c:r —> color:rgb(0, 0, 0);

• c:ra —> color:rgba(0, 0, 0, .5);

• op —> opacity: ;

Margin & Padding

• m —> margin: ;

• m:a —> margin:auto;

• mt —> margin-top: ;

• mr —> margin-right: ;

• mb —> margin-bottom: ;

• ml —> margin-left: ;

• p —> padding: ;

• pt —> padding-top: ;

• pr —> padding-right: ;

• pb —> padding-bottom: ;

• pl —> padding-left: ;

Box Sizing

• bxz —> box-sizing:border-box;

Width

• w —> width: ;

• h —> height: ;

• maw —> max-width: ;

• mah —> max-height: ;

• miw —> min-width: ;

• mih —> min-height: ;

Border

• bd —> border: ;

• bd+ —> border:1px solid #000;

• bd:n —> border:none;

Emmet Is Awesome!

With Emmet, you can create a really complex HTML structure with one line. It’s really awesome. And, it also works with CSS.

You can see how Emmet can drastically increase your efficiency and speed when writing HTML and CSS.

If you want to further increase your efficiency and speed while using VS Code, check out my course Become A VS Code SuperHero.

The course dives much deeper into these concepts and helps you to become a fast, efficient superhero developer :)

I'm Jesse from Texas. Check out my other content and let me know how I can help you on your journey to becoming a web developer.

• Subscribe To My YouTube

• Say Hello! Instagram | Twitter

• Sign Up For My Newsletter

But, did you know that there is more to console than just log? In this article, I'll show you how to print to the console in JS, as well as all of the things you didn't know console could do.

Firefox Multi-line Editor Console

If you've never used the multi-line editor mode in Firefox, you should give it a try right now!

Just open the console, Ctrl+Shift+K or F12, and in the top right you will see a button that says "Switch to multi-line editor mode". Alternatively, you can press Ctrl+B.

This gives you a multi-line code editor right inside Firefox.

console.log

Let's start with a very basic log example.

let x = 1
console.log(x)

Type that into the Firefox console and run the code. You can click the "Run" button or press Ctrl+Enter.

In this example, we should see "1" in the console. Pretty straightforward, right?

Multiple Values

Did you know that you can include multiple values? Add a string to the beginning to easily identify what it is you are logging.

let x = 1
console.log("x:", x)

But what if we have multiple values that we want to log?

let x = 1
let y = 2
let z = 3

Instead of typing console.log() three times we can include them all. And we can add a string before each of them if we wanted, too.

let x = 1
let y = 2
let z = 3
console.log("x:", x, "y:", y, "z:", z)

But that's too much work. Just wrap them with curly braces! Now you get an object with the named values.

let x = 1
let y = 2
let z = 3
console.log( {x, y, z} )

Console Output

You can do the same thing with an object.

let user = {
  name: 'Jesse',
  contact: {
    email: 'codestackr@gmail.com'
  }
}
console.log(user)
console.log({user})

The first log will print the properties within the user object. The second will identify the object as "user" and print the properties within it.

If you are logging many things to the console, this can help you to identify each log.

Variables within the log

Did you know that you can use portions of your log as variables?

console.log("%s is %d years old.", "John", 29)

In this example, %s refers to a string option included after the initial value. This would refer to "John".

The %d refers to a digit option included after the initial value. This would refer to 29.

The output of this statement would be: "John is 29 years old.".

Variations of logs

There are a few variations of logs. There is the most widely used console.log(). But there is also:

console.log('Console Log')
console.info('Console Info')
console.debug('Console Debug')
console.warn('Console Warn')
console.error('Console Error')

These variations add styling to our logs in the console. For instance, the warn will be colored yellow, and the error will be colored red.

Note: The styles vary from browser to browser.

Optional Logs

We can print messages to the console conditionally with console.assert().

let isItWorking = false
console.assert(isItWorking, "this is the reason why")

If the first argument is false, then the message will be logged.

If we were to change isItWorking to true, then the message will not be logged.

Counting

Did you know that you can count with console?

for(i=0; i<10; i++){
  console.count()
}

Each iteration of this loop will print a count to the console. You will see "default: 1, default: 2", and so on until it reaches 10.

If you run this same loop again you will see that the count picks up where it left off; 11 - 20.

To reset the counter we can use console.countReset().

And, if you want to name the counter to something other than "default", you can!

for(i=0; i<10; i++){
  console.count('Counter 1')
}
console.countReset('Counter 1')

Now that we have added a label, you will see "Counter 1, Counter 2", and so on.

And to reset this counter, we have to pass the name into countReset. This way you can have several counters running at the same time and only reset specific ones.

Track Time

Besides counting, you can also time something like a stopwatch.

To start a timer we can use console.time(). This will not do anything by itself. So, in this example, we will use setTimeout() to emulate code running. Then, within the timeout, we will stop our timer using console.timeEnd().

console.time()
setTimeout(() => {
  console.timeEnd()
}, 5000)

As you would expect, after 5 seconds, we will have a timer end log of 5 seconds.

We can also log the current time of our timer while it's running, without stopping it. We do this by using console.timeLog().

console.time()

setTimeout(() => {
  console.timeEnd()
}, 5000)

setTimeout(() => {
  console.timeLog()
}, 2000)

In this example, we will get our 2 second timeLog first, then our 5 second timeEnd.

Just the same as the counter, we can label timers and have multiple running at the same time.

Groups

Another thing that you can do with log is group them. ?

We start a group by using console.group(). And we end a group with console.groupEnd().

console.log('I am not in a group')

console.group()
console.log('I am in a group')
console.log('I am also in a group')
console.groupEnd()

console.log('I am not in a group')

This group of logs will be collapsible. This makes it easy to identify sets of logs.

By default, the group is not collapsed. You can set it to collapsed by using console.groupCollapsed() in place of console.group().

Labels can also be passed into the group() to better identify them.

Stack Trace

You can also do a stack trace with console. Just add it into a function.

function one() {
  two()
}
function two() {
  three()
}
function three() {
  console.trace()
}
one()

In this example, we have very simple functions that just call each other. Then, in the last function, we call console.trace().

Console Output

Tables

Here's one of the most mind-blowing uses for console: console.table().

So let's set up some data to log:

let devices = [
  {
    name: 'iPhone',
    brand: 'Apple'
  },
  {
    name: 'Galaxy',
    brand: 'Samsung'
  }
]

Now we'll log this data using console.table(devices).

Console Output

But wait – it gets better!

If we only want the brands, just console.table(devices, ['brand'])!

Console Output

How about a more complex example? In this example, we'll use jsonplaceholder.

async function getUsers() {
  let response = await fetch('https://jsonplaceholder.typicode.com/users')
  let data = await response.json()

  console.table(data, ['name', 'email'])
}

getUsers()

Here we are just printing the "name" and "email". If you console.log all of the data, you will see that there are many more properties for each user.

Style ?

Did you know that you can use CSS properties to style your logs?

To do this, we use %c to specify that we have styles to add. The styles get passed into the second argument of the log.

console.log("%c This is yellow text on a blue background.", "color:yellow; background-color:blue")

You can use this to make your logs stand out.

Clear

If you are trying to troubleshoot an issue using logs, you may be refreshing a lot and your console may get cluttered.

Just add console.clear() to the top of your code and you'll have a fresh console every time you refresh. ?

Just don't add it to the bottom of your code, lol.

Thanks for Reading!

If you want to revisit the concepts in this article via video, you can check out this video-version I made here.

I'm Jesse from Texas. Check out my other content and let me know how I can help you on your journey to becoming a web developer.

• Subscribe To My YouTube

• Say Hello! Instagram | Twitter

• Sign Up For My Newsletter

In this article, I want to be open and transparent about everything that has gotten me to where I am now, the good decisions as well as bad. And I hope that you can take this information and apply it to your circumstances.

I believe that no matter what category or niche you may be in, this information can help you to grow your channel as well.

This post is not meant to brag. Rather, it’s meant to provide insight into how I quickly grew my YouTube channel.

I hope that this post will help you in some way, but what worked for me is not guaranteed to work for you. So adapt my methods to meet your needs.

All of these strategies and tricks can also apply to blogs and any other social media platforms.

Let me get started by giving you a little background on myself and why I started a YouTube channel.

How It All Started

There are many reasons that people start a YouTube channel. It could be for fame and notoriety, to make money, to help people, or maybe just as a hobby. Well, I started my channel to prove a point.

You see, I have 2 teenagers, and they are typical teenagers. I wanted to challenge them to come up with a business idea. You know, instead of playing video games, watching Netflix, or chatting with their friends all day.

As you can expect, there were not many ideas being passed around. So I thought, maybe they could start YouTube channels and make content about things they enjoy doing. My son could start a gaming channel and my daughter could start a hair-styling channel.

They seemed to think it was an okay idea. My son downloaded a screen recorder and was going to create some videos. I helped my daughter set up a tripod and camera so she could record some fancy hair braids.

And that's about as far as they got. No videos ever got posted.

That's when I came up with the idea to start my own channel. I wanted to prove a point: you can make something successful if you put in the effort.

I decided that I was not going to tell anyone, not even my wife, that I started the channel until I had proof that it was successful. I thought, "if I can get 300 subscribers I'll tell them".

Choosing a topic for your channel is, in my mind, the most important decision. You want to pick something that is not too broad, but also not too narrow. You want to appeal to a specific, targeted audience.

The topic of my channel was a no-brainer. I've been coding since I was 12 and it's a topic that I'm passionate about. So talking about web development made sense.

I had been watching other channels like Brad Traversy, Academind, and The Net Ninja for years. So I started with a tutorial on VS Code.

We'll get to more about my channel and videos later. For now, let's talk about motivation and expectations for starting a channel.

Motivation & Expectations

When starting a YouTube channel, a blog, or any social media account, you need to understand what your motivation is and what you expect to get out of it.

For me, I wanted to prove something to my kids. Are you trying to become famous? Do you want to make money? Do you want to help people in some way?

Whatever your answer is, you need to understand that you will not see results overnight. It could take months, even years to even see any results.

This is where expectations come into play. If you can manage your expectations, then you will be able to withstand the ups and downs that are sure to come.

When choosing the topic of your channel, make sure that it is something that you are passionate about. If not, you'll be setting yourself up for failure. It will only be a matter of time before you get bored and give up.

Getting Started

The first thing that I did was pick a channel name. Honestly, I don't remember why or how I landed on codeSTACKr.

I went to namecheap.com and was looking for domains. I was looking for combinations of "code", "full", "developer", "stack", etc. I remember that codestack was taken, so I added an "r" to the end ?.

The next step was to record the video. I decided that I was not going to spend a dime on this channel to start with. If I made any money from it, then I would invest that money back into the channel.

Since I would be sharing my screen, I didn't need a camera. I could just use a screen recorder. I used OBS for that, and I still do.

If you will be starting a channel that requires a camera, start with the webcam on your laptop or your phone. Most phones have great cameras.

If you are going to spend any money, the first area I would recommend would be on audio. Audio is by far the most important asset to any video. It will make or break your channel in my opinion.

When I watch a video and the audio quality is not there, I will most likely move on to another video.

For my first several videos, I just used a headset mic. Like one that you would use for gaming or even earbuds from your phone.

Once I got everything recorded, then I needed to edit the video. There are a few options for this. If you have a Mac, then iMovie is a great option. I have a Windows computer, so I use Davinci Resolve. It is free and is very robust. It is also available on Mac and Linux.

Now it's time to post the video. This is where some get hung up.

I know it's nerve-wracking to upload the first video, and you want it to be perfect. But don't obsess over this. It will never be perfect, no matter how much time you spend on it. Just upload it!

That is exactly what I did and it was not perfect. I had a blaring misspelling in my video that I still get comments on to this day. ?

Results From The First Video

Before I posted my video I did some research. I wanted to find places to promote the video. I had zero following on any other social platform. So, I started looking at Reddit and found a subreddit where I could post the link to my video.

I know that self-promotion on Reddit is frowned upon. So be very careful there. I found a subreddit that allowed this type of posting, and I made sure that I was not breaking any rules.

I also researched SEO for the video. I made sure that the title, description, and tags were optimal for the video. That in itself is an entire article.

Now it was time to post. I nervously clicked the button. Then hit refresh frantically for several minutes to see if there would be any views. Nope, no views. So I posted the video link on the subreddit. That worked! I started to get a few views.

The day after I posted the video, we left for vacation. I took every chance I could get to inconspicuously check my YouTube analytics while we were gone. It's hard not to get caught up on the numbers, but try not to. And we'll talk more about that in a bit.

The first week's analytics of my first video.

On the first day, I got 111 views and 8 subscribers. The next day was 231 views and 14 subscribers. Then the views dropped down to 23 and 2 subscribers. These mostly came from the Reddit post. On that first Reddit post, I got 88 up-votes. That's pretty good for Reddit.

You'll find that this is a typical graph for most videos. You will get a spike in initial views, then they level off. At some point, you hope that the YouTube algorithm will pick it up. We'll talk about that in a bit.

So how did I go from getting a few views per day to thousands per day? That's coming up next.

Consistency

The number one thing that will help you grow your channel, which I'm sure you've heard before, is posting consistently.

Come up with a plan that works for you. If you can post once a week, once every two weeks, or once a month, stick to it! You will not get subscribers if you are not consistent.

For me, I have a full-time day job. So after we got back from vacation, I decided that I could find the time to post once a week. So I stuck to that. I posted consistently, at least once per week. Every post bumped up my average views.

June 2019 Subscribers Gained.

You can see from this graph that in June, 2019 I posted three videos. You can also see the gap where I was on vacation. Each post gave me a bump in views and subscribers, not only for the video being released, but also for the previous videos.

You'll find that some videos get more views than others. You will have videos that do great and others that flop. Use these insights to hone in on what your viewers want to see. If a video does well, then make another video on the same or similar topic.

Consistency is what got me to my 300 subscriber goal after about 10 videos and 2 months.

Revealing My Secret ?

So I sat my family down to tell them the good news. Imagine, a 39-year-old father and husband sitting his wife and 2 teenagers down to tell them that he has created a YouTube channel and has 300 subscribers. ?

After the chuckles were over I proceeded to inform them of my plans to continue growing the channel and see where it could go.

Avoid Burnout

Understanding that consistency is a marathon and not a sprint is very important. During January 2020 I decided that I was going to post a short video every day. I wanted to create short videos that explained small parts of JavaScript. I called it #JavaScriptJanuary.

These were about 90 second videos. You might think that short videos would be easier to make. And in theory, they should be.

But I tend to overdo things. I made sure that these videos were packed full of info. They had animations and were very engaging. On average, they each took 3 hours to make. ?

That was a bad decision. Don't get me wrong, I am proud of the videos that I created. I have gotten many compliments on them and thankful viewers who love them and want more.

But it was very hard to keep up with the schedule. I did manage to get a video out every day, but I will never do that again.

What did I learn from my mistake? Even though I posted a video every day, I did not see a significant increase in views or subscribers. In fact, I lost some subscribers because they did not like me flooding their home page with new videos every day.

When you first start your channel you will be very excited to get going and want to work all of the time. Be very careful, pace yourself, and don't sign yourself up for more than you can handle, or more than your audience can handle.

Be Active In The Community

To engage with my viewers, I responded to every comment on every video. Your viewers want to know that they are being heard.

This has been one of my keys to success. By engaging with the viewers I have been able to adjust my content strategy to include topics that they are interested in watching.

You may think that you know what your audience wants, but you really don't until you ask them what they want.

Market and community research is critical to growing your brand. You need to understand who the big players are and try to interact with them as well, as much as possible.

Now, if you are just starting, you wouldn't want to bug a large channel asking for things. You want to engage with the community and bring value.

One of the first real engagements that I had was with freeCodeCamp.org. I was able to create a 2 hour long tutorial on Sass for them to post on their YouTube channel. At the time, their channel had around 1 MILLION subscribers!

My subscriber bump from the freeCodeCamp video.

In this graph, you can see the spike in subscribers that I got from posting my video on the freeCodeCamp.org's YouTube channel.

By this time I had acquired around 500 subscribers. Then I got over 300 in one day! I was shocked and amazed. Of course, it leveled back off eventually. But notice that with every bump, the average increases. Each one takes you to the next level.

Another thing that has helped me is getting to know others in my community. You would think that other YouTubers that post videos on the same topic would be competition. But that is not true at all.

I was able to collaborate and share insights with many in my community that post about the same things as I do. Even though we may post about the same subject, we all have different methods of teaching and different viewpoints. So it's not a big deal.

Bottom line: you need to network and get to know others that are in the same niche as you.

The Elusive Algorithm

The YouTube algorithm is an enigma. Don't try to understand it. Just know that when it finds you, you will know it!

Social Blade graph of my weekly views and subscribers gained over the past year.

Notice in the graph the large spike around December, 2019. That is when the mighty algorithm decided to push one of my videos to tens of thousands of viewers.

I was averaging 1,000 views a day at that time. Then, all of a sudden, I was getting 12,000 views in one day. That then took me to the next level. I didn't do anything different. I was consistently posting one video per week.

You can see in the next graph the trajectory change around December, 2019.

Social Blade graph of my monthly views and subscribers gained over the past year.

Since then, the algorithm has picked up several of my videos. By staying consistent, listening to my audience, and interacting with my community, I was able to gain 70,000 subscribers and almost 2 million views in a year. Craziness!

Don't Get Stuck On The Numbers

I initially set the goal of getting 300 subscribers. For me, at the time, that was the number that would mean I was successful and that my strategies were working.

That was another mistake. Try your hardest not to focus on numbers. Your number of subscribers or followers does not define your success. The quality and value of your content is what defines your success. If you have quality and valuable content, they will come.

And... Do not compare yourself with others. Every journey is different. Focus on your circumstances, remain consistent, and produce quality content.

Highs & Lows

Looking back at some of the graphs you will see peaks and valleys. That is totally normal. Don't get scared when your views start to drop. It's the natural cycle of YouTube. They will pick back up as long as you stay consistent.

Monetization

On YouTube, you are required to have 1,000 subscribers and 4,000 watch hours to be monetized. That's 240,000 minutes of watch time!

I hit 1,000 subscribers after 3 months, in September of 2019. But I didn't hit 4,000 watch hours until November of 2019. That's 5 months after starting my channel.

Monthly ad revenue

In November I made $197. ? I could not believe that I was making money uploading videos to YouTube! In December I made $545. Then in January, which was right after the algorithm picked up one of my videos, I made $830!

After that, the revenue drops off but has leveled off and has recently begun to increase. After 8 months of monetization, I made just over $5,000.

That's not enough for me to quit my day job, but I am still amazed that I have been able to create side-income so quickly.

Weekly ad revenue graph with CPM

In this graph, you will see the weekly ad revenue breakdown. The other two stats are part of what the revenue is based on.

CPM is "Cost per Mille", or simply the price that an advertiser pays per 1,000 views of a video. My average CPM here is $10.20. So advertisers paid $10.20 per every 1,000 monetized views of my videos.

RPM is "Revenue per Mille", or simply the revenue that you earn per 1,000 views of a video.

Since YouTube is facilitating these views, they take a cut, and I'm OK with that. They own the platform, they maintain it, they send viewers to my channel, they do most of the heavy lifting. Plus they provide many great tools for content creators and are constantly adding and improving on these. So, $3.03 is what I made per 1,000 monetized video views.

Now, not all views count. Notice that I said "monetized" views. Which means that the ad was seen. If the viewer is using an ad-blocker or they skip the ad, it will not count as a monetized view.

Other Sources of Revenue

Besides the ad revenue, I also made approximately $8,000 from sponsors in the past year. This is not something that comes right away. You have to build your brand and become known in the community.

I have not gotten a single sponsorship by reaching out and asking for sponsors. All of my sponsors have reached out to me first. So, again, it's a marathon. Don't expect things to happen overnight. Stay laser-focused and good things will come.

In any business, you want to diversify your income. YouTube ad revenue should never be your main source of income. What if YouTube accidentally deletes your account, or for some reason stops monetization? You have to diversify!

Besides YouTube ads revenue and sponsors, my goal was to create my own digital products.

This is an example of another mistake that I made. The mistake was not the decision to make my own products, but my delay in making them. In fact, to this day, I still have not released any products.

I planned to release 3 premium courses in 2020. We are over halfway through the year and I have not released 1.

I got caught up in other side projects and did not focus on my own projects. These other side projects brought in subscribers and money for me but they should not have been my main focus.

Your main revenue stream should be your personal products. That is what you control. Everything else could one day disappear. Stay focused!

Tips For Success

The biggest tip for success that I could give you is to focus. It is so easy to get distracted by all of the things that you "could" do to increase your reach.

Focus on making quality videos. Try to stay organized. Create a list of content that you want to create. Every time you think of a new idea, add it to the list.

But, focus on one topic at a time. Create the content for that video, then move on to the next topic.

Earlier I said that when I started my channel that I did not have a presence on any other social platforms.

If you already have a following somewhere else, then you should use that to your advantage to bring viewers to your channel. But if you don't have a following elsewhere, don't try to grow multiple platforms at the same time. Stay focused on whatever platform is working for you.

After I got my YouTube routine down, which was after about 6 months, I started an Instagram, Facebook, LinkedIn, and Twitter account. I have slowly grown on these platforms as well, some better than others. (I have no idea how Facebook works ?.)

After several months on these platforms, they have had a very minimal impact on my YouTube growth. I think that, for my niche, Twitter and Instagram have been the most effective. Twitter especially for networking. But the impact from these on my channel has not been significant.

Depending on your niche, you may find that your audience may be more receptive on specific platforms. Use these for brand building once your channel gets a bit of traction.

If you want to revisit the concepts in this article via video, you can check out this video-version I made here.

Conclusion

In conclusion, I just want to say that anyone can do anything. If you have (1) the proper motivation, (2) realistic expectations, and (3) you don't overwork yourself, you can be successful.

I'm Jesse from Texas. Check out my other content and let me know how I can help you on your journey to becoming a web developer.

• Subscribe To My YouTube

• Say Hello! Instagram | Twitter

• Sign Up For My Newsletter

Prerequisite

Since the majority of the use cases for the content property involve pseudo-elements, I would suggest that you be familiar with how the ::before and ::after pseudo-elements work. Here is a great article to get you up to speed:

• CSS Pseudo-Elements - Before and After Selectors Explained

Accepted Values

First, let's take a look at all of the accepted values of the content property.

• normal: This is the default value. Computes to none when used with pseudo-elements.

• none: A pseudo-element will not be generated.

• <string>: Sets the content to the string specified. This string can contain Unicode escape sequences. For example, the copyright symbol: \\000A9.

• <image>: Sets the content to an image or gradient using url() or linear-gradient().

• open-quote | close-quote: Sets the content to the appropriate quote character referenced from the quotes property.

• no-open-quote | no-close-quote: Removes a quote from the selected element, but still increments or decrements the nesting level referenced from the quotes property.

• attr(*attribute*): Sets the content as the string value of the selected elements selected attribute.

• counter(): Sets the content as the value of a counter, usually a number.

String

One of the most basic examples would be the use of adding string content before or after an element. In this example, we'll add a link symbol before a link and add the URL for the link after it.

a::before {
    content: "\\1F517 ";
}
a::after {
    content: " (" attr(href) ")";
}

Notice the space after the Unicode character in the ::before pseudo-element and the before the first parenthesis in the ::after pseudo-element. This will create space between these and the parent element.

Alternatively, you could add padding or margin to the pseudo-elements to add separation.

Basic Quotes

With the content property, you can add quotes before and/or after elements. Now, in HTML we do have the <q> tag. This will also add quotes around its content. However, with the content property, we can have more control over the implementation.

Here is the most basic example of adding quotes:

You can accomplish this as well by using the HTML tag <q>. But maybe we want to style the quote differently. So let's only add the opening quote and not the ending quote. And let's also style the opening quote.

p {
  position: relative;
  font-size: 3rem;
  margin: 4rem;
}
p::before {
  content: open-quote;
  position: absolute;
  left: -3.5rem;
  top: -2rem;
  font-size: 8rem;
  color: rgba(0, 0, 0, 0.5)
}

The result:

Advanced Quotes

We can also specify where we do not want quotes. For example, you may be quoting someone who is quoting another person. So you would have quotes within quotes, which can get confusing to the reader.

In the CodePen below, we are using HTML <q> tags, then specifying which tags should not display the quotes.

At first glance, you might think that we should just remove the <q> tag where needed. But by specifying where a quote should not be still increments or decrements the nesting level referenced from the quotes property.

To explain this, we need to understand the quotes property. This is simply an "array" of characters that should be used when quoting. Here is an example:

q {
  quotes: '“' '”' '‘' '’' '“' '”';
}

These are sets of quotes. The first set will be used for the top level of quotes. The second set will be used for the first nested quote. And the third set will be used for the second nested quote. And so on, if there were more sets included.

Now that we understand the quotes property, I can explain how the no-open-quote and no-close-quote properties work.

For each level of quotes, we can assign different sets of characters to use for the quotes. By specifying where a quote should not be still increments or decrements the nesting level referenced from the quotes property.

Take a look at the example below. You will see that the second level of quotes is skipped.

Attributes

Attributes can be used to pass content from HTML into the CSS content property. We actually used this already in the link example where we used the href attribute to include the URL string as part of our content.

A perfect use case for this is a tooltip. You can add a title attribute to an element in HTML to have a simple, built-in tooltip on hover. But to customize this, we can use a data attribute on our HTML tag and then use the content property to add a tooltip.

In this example, we use the attribute data-tooltip from our HTML element to pass the value into our tooltip. For the pointer of the tooltip, we set the content to "", as content is required to render a ::before or ::after pseudo-element.

Counters

The counter() CSS function returns a string representing the current value of the named counter. In the following example we have an ordered list that we will add content using a counter.

<ol>
  <li></li>
  <li></li>
  <li></li>
</ol>

ol {
  counter-reset: exampleCounter;
}
li {
  counter-increment: exampleCounter;
}
li::after {
  content: "[" counter(exampleCounter) "] == ["
               counter(exampleCounter, upper-roman) "]";
}

Without getting too in-depth on the counter function, we have to first initiate the counter on the ol element. We can name this whatever we would like. Then we tell the counter to increment on each li element. And lastly, we set the content of the li::after.

Here's the result:

You could use this to customize content within each list item that needs a corresponding number. Or you could use this to customize the list item itself. For instance, you could remove the default numbering and implement a custom-styled numbering system.

Images

Images and gradients can be used with the content property. This is fairly straight-forward. Here is an example that uses both:

For accessibility, there is also an option to add alternate text for the image. This feature is not fully supported though.

content: url(//unsplash.it/200/200) / "Alternative Text Here";

Note: This is unsupported in Firefox, IE, and Safari. Also, the gradient does not work in Firefox.

Outside of Pseudo Elements

That's right! You can use the content property outside of the pseudo-elements ::before and ::after. Although, its use is limited and not fully compatible in all browsers.

The most compatible use case would be replacement of an element.

<div id='replace'>
  codeSTACKr
</div>

#replace {
  content: url("<https://www.codestackr.com/logo_twoline_light.svg>");
  width: 100%;
}

Note: Replacement is not supported in IE.

Conclusion

Most times you will see content: "" found in the ::before and ::after pseudo-elements. But the content property has many useful applications.

The best use in my opinion is to use it for updating bulk elements. If you want to add an icon before every link on your site, it would be much easier to add it through the content property than to add it to every element in the HTML document.

Thanks for reading!

Thank you for reading this article. Hopefully, it has helped you to better understand how the content property works in CSS.

I'm Jesse from Texas. Check out my other content and let me know how I can help you on your journey to becoming a web developer.

• Subscribe To My YouTube

• Say Hello! Instagram | Twitter

• Sign Up For My Newsletter