# FreshJuice Starter > A modern 11ty starter theme with CloudCannon CMS integration, TailwindCSS, and Alpine.js --- ## Pages ### About URL: https://snappy-lemon-starter.freshjuice.dev/about/ About Us We are passionate about building beautiful, fast, and accessible websites that help businesses grow. Our Mission Our mission is to make web development accessible to everyone. We believe that every business deserves a beautiful, functional website that helps them connect with their audience and achieve their goals. What We Do We specialize in building modern websites using the latest technologies. Our tech stack includes Eleventy for static site generation, TailwindCSS for styling, and CloudCannon for content management. This combination allows us to create websites that are: Blazing fast with optimal Core Web Vitals scores Easy to maintain and update Secure and accessible by default Cost-effective to host and scale Our Values We believe in quality over quantity, simplicity over complexity, and user experience over flashy features. Every project we take on is built with care and attention to detail. Watch & Learn Contact Us View Our Blog --- ### Blog URL: https://snappy-lemon-starter.freshjuice.dev/blog/ Blog Insights, tutorials, and updates from our team. Jan 20, 2025 · John Doe Building with TailwindCSS A comprehensive guide to using TailwindCSS for rapid UI development with utility-first CSS. Read more Jan 18, 2025 · Jane Smith Designing for the Modern Web Explore best practices for creating beautiful, accessible, and performant web designs. Read more Jan 16, 2025 · John Doe Getting Started with Eleventy Learn how to set up your first Eleventy project and understand the basics of static site generation. Read more Previous 1 2 Next --- ### Case Studies URL: https://snappy-lemon-starter.freshjuice.dev/cases/ Case Studies Technical deep-dives into our projects, methodologies, and results. Platform Development Building a Real-Time Analytics Platform for Citrus Systems How we architected a scalable analytics solution processing 10M+ events daily with sub-second query response times. Citrus Systems Inc. 4 months Eleventy TailwindCSS Alpine.js +4 10M+ Daily Events <100ms Query Response E-commerce E-commerce Redesign: Tripling Conversions for Cherry Picked A complete UX overhaul that transformed a struggling online store into a conversion machine through data-driven design. Cherry Picked Goods 6 weeks Eleventy TailwindCSS Alpine.js +2 312% Conversion Lift 2.1s Load Time Migration Legacy Migration: Heritage Trails Foundation Goes JAMstack Migrating a 15-year-old WordPress site to a modern static architecture while preserving 50,000+ pages of historical content. Heritage Trails Foundation 3 months Eleventy TailwindCSS CloudCannon CMS +3 50K+ Pages Migrated 95% Cost Reduction --- ### Contact URL: https://snappy-lemon-starter.freshjuice.dev/contact/ Contact Us Have a question or want to work together? We would love to hear from you. Send us a message Name Email Subject Message Send Message Get in touch We are here to help and answer any questions you might have. We look forward to hearing from you. Email hello@example.com Phone +1 (234) 567-890 Location 123 Main Street City, State 12345 --- ### Documentation URL: https://snappy-lemon-starter.freshjuice.dev/docs/ Documentation Everything you need to get started and build amazing sites. Getting Started Learn how to set up and run the FreshJuice 11ty starter. Getting Started Customization Learn how to customize colors, fonts, and styles. Getting Started Components Learn how to use the built-in Nunjucks components. Reference Shortcodes & Filters Available shortcodes and filters for your templates. Reference CloudCannon CMS Configure and use CloudCannon for content management. CMS Deployment Deploy your site to Netlify, Vercel, or Cloudflare Pages. Deployment --- ### Welcome URL: https://snappy-lemon-starter.freshjuice.dev/ --- ### Pricing URL: https://snappy-lemon-starter.freshjuice.dev/pricing/ Simple, Transparent Pricing Choose the perfect plan for your needs. All plans include a 14-day free trial. Monthly Yearly Save 20% Starter Perfect for individuals and small projects $24 /month Billed annually ($228/year) Billed monthly Up to 3 projects 5 GB storage Basic analytics Email support Custom domain Advanced integrations Start Free Trial Most Popular Professional For growing teams and businesses $59 /month Billed annually ($588/year) Billed monthly Unlimited projects 50 GB storage Advanced analytics Priority support Custom domain API access Start Free Trial Business For large teams with advanced needs $119 /month Billed annually ($1,188/year) Billed monthly Everything in Professional 500 GB storage Team management SSO authentication Audit logs 99.9% SLA Start Free Trial * All prices shown are for illustration purposes only. This is a demo template available free on GitHub. Enterprise Solutions Need a Custom Solution? For large organizations with specific requirements, we offer tailored enterprise solutions with dedicated support, custom integrations, and flexible deployment options. Enterprise Security SOC 2 compliance, custom security policies, and dedicated infrastructure Dedicated Support 24/7 priority support with a dedicated account manager Custom Integrations Tailored integrations with your existing tools and workflows Contact Sales Compare Plans See what's included in each plan and choose the right one for your needs. Features Starter Professional Business Projects 3 Unlimited Unlimited Storage 5 GB 50 GB 500 GB Team Members 1 5 Unlimited Custom Domain API Access Analytics Basic Advanced Advanced + Custom SSO / SAML Audit Logs SLA 99% 99.5% 99.9% Support Email Priority Dedicated * All prices shown are for illustration purposes only. We do not sell any products or services. This template is available free of charge on GitHub. Frequently Asked Questions Have questions? We have answers. Can I switch plans anytime? Yes, you can upgrade or downgrade your plan at any time. When upgrading, you'll be charged the prorated difference. When downgrading, the remaining credit will be applied to your next billing cycle. What payment methods do you accept? We accept all major credit cards (Visa, MasterCard, American Express), PayPal, and for annual enterprise plans, we also support wire transfers and invoicing. Is there a free trial? Yes! All plans come with a 14-day free trial. No credit card required to start. You'll only be charged after the trial period ends and you choose to continue. What happens if I exceed my storage limit? We'll notify you when you're approaching your storage limit. If you exceed it, you can either upgrade to a higher plan or purchase additional storage. We won't delete any of your data without notice. Do you offer refunds? Yes, we offer a 30-day money-back guarantee for all new subscriptions. If you're not satisfied with our service, contact our support team within 30 days for a full refund. How does enterprise pricing work? Enterprise pricing is customized based on your organization's specific needs, including the number of users, required integrations, and support level. Contact our sales team for a personalized quote. Ready to Get Started? Start your 14-day free trial today. No credit card required. Start Free Trial Contact Sales --- ### Customer Stories URL: https://snappy-lemon-starter.freshjuice.dev/stories/ Customer Stories Discover how businesses like yours achieved remarkable results. SaaS How Acme Corp Increased Revenue by 150% in 6 Months Discover how Acme Corp transformed their digital presence and achieved remarkable growth with our solutions. Acme Corporation 150% Revenue Growth 3x Lead Generation E-commerce How Tropical Vibes Co. Scaled to 1M Users in Just 3 Months From a small beach-side startup to a global sensation, see how Tropical Vibes revolutionized their customer experience. Tropical Vibes Co. 1M+ Active Users 340% Conversion Rate Agriculture Berry Good Farms Grew Online Sales by 500% with a Fresh Approach How a family-owned berry farm transformed their direct-to-consumer business and became the sweetest success story in agriculture tech. Berry Good Farms 500% Sales Growth 12K Subscribers --- ## Blog Posts ### Building with TailwindCSS URL: https://snappy-lemon-starter.freshjuice.dev/blog/post-3/ Date: January 20, 2025 Author: john-doe TailwindCSS has revolutionized the way developers write CSS. Its utility-first approach allows for rapid prototyping and consistent designs. What is Utility-First CSS? Instead of writing custom CSS classes, utility-first CSS provides small, single-purpose classes that you compose to build your UI. <!-- Traditional CSS approach --> <div class="card"> <h2 class="card-title">Hello World</h2> </div> <!-- Utility-first approach --> <div class="bg-white rounded-lg shadow-md p-6"> <h2 class="text-xl font-bold text-gray-900">Hello World</h2> </div>Getting Started Install TailwindCSS in your project: npm install tailwindcss npx tailwindcss initConfigure your template paths in tailwind.config.js: export default { content: ['./src/**/*.{html,js,njk}'], theme: { extend: {} }, plugins: [] };Core Concepts Responsive Design Tailwind makes responsive design intuitive with breakpoint prefixes: <div class="w-full md:w-1/2 lg:w-1/3"> Responsive width </div> Breakpoint Min Width CSS sm 640px @media (min-width: 640px) md 768px @media (min-width: 768px) lg 1024px @media (min-width: 1024px) xl 1280px @media (min-width: 1280px) 2xl 1536px @media (min-width: 1536px) State Variants Apply styles on hover, focus, and other states: <button class="bg-blue-500 hover:bg-blue-700 focus:ring-2"> Click me </button>Dark Mode Tailwind supports dark mode out of the box: <div class="bg-white dark:bg-gray-800"> <p class="text-gray-900 dark:text-white"> Adapts to color scheme </p> </div>Building Components Button Component Here is how to build a reusable button: <button class=" inline-flex items-center justify-center px-4 py-2 text-sm font-medium text-white bg-primary-600 rounded-lg hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 transition-colors duration-200 "> Button Text </button>Card Component A flexible card component: <article class=" bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden hover:shadow-lg transition-shadow "> <img src="image.jpg" class="w-full aspect-video object-cover"> <div class="p-6"> <h3 class="text-xl font-semibold mb-2">Card Title</h3> <p class="text-gray-600">Card description goes here.</p> </div> </article>Advanced Features Custom Configuration Extend the default theme with your own values: export default { theme: { extend: { colors: { primary: { 50: '#f0fdf4', 500: '#22c55e', 600: '#16a34a', 700: '#15803d' } }, fontFamily: { sans: ['Inter', 'sans-serif'] } } } };Using Plugins Add functionality with official plugins: export default { plugins: [ require('@tailwindcss/typography'), require('@tailwindcss/forms') ] };The typography plugin provides beautiful prose styling: Feature Class Prose container prose Large prose prose-lg Dark mode prose-invert Custom colors prose-primary Performance Optimization Tailwind automatically removes unused CSS in production: // In production, only used classes are included // Typical CSS size: 10-20KB gzippedBest Practices Use the JIT compiler for development Configure content paths correctly Avoid dynamic class names Use @apply sparingly Conclusion TailwindCSS provides a powerful, flexible approach to styling. Its utility-first methodology, combined with excellent documentation and tooling, makes it an excellent choice for modern web development. For more information, visit the official Tailwind documentation. --- ### Designing for the Modern Web URL: https://snappy-lemon-starter.freshjuice.dev/blog/post-2/ Date: January 18, 2025 Author: jane-smith Good design is as little design as possible. Less, but better, because it concentrates on the essential aspects, and the products are not burdened with non-essentials. Dieter Rams The web has evolved significantly over the years, and so have the expectations of users. Today, a well-designed website needs to be more than just visually appealing. The Principles of Modern Web Design Modern web design is built on several key principles that ensure a great user experience. Visual Hierarchy Visual hierarchy guides users through your content in order of importance. Use size, color, and spacing to create clear distinctions between elements. Typography plays a crucial role in establishing hierarchy. A well-chosen font pairing can make your content more readable and engaging. Accessibility First Designing for accessibility means creating experiences that work for everyone, regardless of their abilities or the devices they use. Fresh ingredients inspire fresh designs Key accessibility considerations include: Color contrast for readability Keyboard navigation support Screen reader compatibility Responsive layouts for all devices Color Theory in Practice Colors evoke emotions and create associations. Understanding color theory helps you make intentional design decisions. The Color Wheel The color wheel is a fundamental tool for designers. It shows relationships between: Primary colors: Red, blue, yellow Secondary colors: Orange, green, purple Tertiary colors: Combinations of primary and secondary Creating a Color Palette When building a color palette, consider: Start with your brand colors Add complementary accent colors Include neutral tones for balance Test for accessibility compliance Typography Best Practices Good typography improves readability and sets the tone for your content. Font Pairing Combine fonts that complement each other. A common approach is pairing a serif heading font with a sans-serif body font. Line Height and Spacing Proper spacing makes text easier to read. Aim for a line height of 1.5 to 1.75 for body text. Key metrics to consider: Line height: 150-175% of font size Paragraph spacing: 1.5em between paragraphs Letter spacing: Adjust for headings Performance Matters A beautiful design means nothing if your site is slow to load. Optimizing Images Images often account for the majority of page weight. Optimize them by: Using modern formats like WebP and AVIF Implementing responsive images Lazy loading below-the-fold content Optimized image with custom width. Photo by Sonny Vermeer. Core Web Vitals Google's Core Web Vitals measure real-world user experience: LCP: Largest Contentful Paint FID: First Input Delay CLS: Cumulative Layout Shift Conclusion Modern web design balances aesthetics with functionality. By focusing on accessibility, performance, and user experience, you create websites that truly serve your audience. Remember: The best design is one that users do not notice because everything just works. --- ### Getting Started with Eleventy URL: https://snappy-lemon-starter.freshjuice.dev/blog/post-1/ Date: January 16, 2025 Author: john-doe Introduction to Eleventy Eleventy (11ty) is a simpler static site generator that transforms templates into HTML. Unlike many other tools, it does not require a specific framework and gives you the flexibility to choose your templating language. Why Choose Eleventy? There are several reasons why Eleventy has become a popular choice among developers: Zero client-side JavaScript by default Flexible templating with support for multiple languages Fast build times even with large sites Simple configuration that just works Setting Up Your First Project Getting started with Eleventy is straightforward. First, you need to have Node.js installed on your machine. Installation Create a new directory for your project and initialize it: mkdir my-eleventy-site cd my-eleventy-site npm init -y npm install @11ty/eleventyProject Structure A typical Eleventy project might look like this: src/ - Source files src/_includes/ - Layouts and partials src/_data/ - Global data files _site/ - Generated output Understanding the Directories Each directory serves a specific purpose in the build process. The _includes folder holds reusable templates, while _data contains JSON or JavaScript files that provide global data to your templates. Running the Development Server To start the development server, run: npx eleventy --serveThis will start a local server with hot reloading enabled. Working with Templates Eleventy supports multiple templating languages out of the box: Nunjucks Liquid Markdown JavaScript Creating Your First Template Here is a simple example using Nunjucks: --- title: My Page --- <h1>Getting Started with Eleventy</h1> <p>Welcome to my site!</p>Next Steps Now that you have a basic understanding of Eleventy, you can: Explore the official documentation Try different templating languages Add plugins for additional functionality Deploy your site to a hosting platform Useful Resources Here are some resources to help you learn more: Official Eleventy documentation Community Discord server Starter projects on GitHub Happy building! --- ### Typography Test: A Complete Showcase URL: https://snappy-lemon-starter.freshjuice.dev/blog/post-4/ Date: December 20, 2024 Author: jane-smith This post serves as a comprehensive typography test, showcasing all the different text elements and styles available in our design system. Heading Level 1 The largest heading, typically used for main page titles. It should be bold and commanding, drawing the reader's attention immediately. Heading Level 2 Second-level headings are used for major sections within a page. They provide clear visual hierarchy while remaining subordinate to H1. Heading Level 3 Third-level headings break down sections into smaller, more digestible parts. They are commonly used for subsections. Heading Level 4 Fourth-level headings provide additional granularity. Use them sparingly to avoid overly complex hierarchies. Heading Level 5 Fifth-level headings are rarely needed but available for deeply nested content structures. Heading Level 6 The smallest heading level. If you need this, consider restructuring your content. Text Formatting Regular paragraph text forms the backbone of any content. It should be readable, with appropriate line height and comfortable letter spacing. Bold text is used for strong emphasis. It draws the eye and highlights important information. Italic text provides a softer emphasis, often used for titles of works, foreign words, or to add nuance. Bold and italic combined offers the strongest textual emphasis without resorting to other formatting. Strikethrough text indicates deleted or outdated information. This sentence contains inline code for technical terms or short code snippets. Here is some text with a hyperlink to an example embedded within it. Superscript and Subscript Mathematical expressions often require superscript: E = mc2 Chemical formulas use subscript: H2O, CO2, C6H12O6 Footnote references typically use superscript1 to indicate additional information. The 1st, 2nd, and 3rd place winners received medals. Lists Unordered Lists First item in the list Second item with more detail Nested item one Nested item two Deeply nested item Third item back at the root level Fourth item to show list rhythm Ordered Lists First step in the process Second step follows logically Sub-step A Sub-step B Third step continues the sequence Final step completes the process Mixed Lists Planning Phase Define requirements Create wireframes Review with stakeholders Development Phase Set up environment Write code Test thoroughly Deployment Phase Stage for review Deploy to production Task Lists [x] Completed task [x] Another finished item [ ] Pending task [ ] Future work item Blockquotes A single paragraph blockquote. This is commonly used for testimonials, citations, or to highlight important information from external sources. Multiple paragraph blockquotes are also supported. The second paragraph continues the quoted content, maintaining visual consistency. Source attribution often appears in italics Nested Blockquotes First level of quoting. Nested quote provides additional context or a response to the original quote. Back to the first level. Code Blocks JavaScript // Example JavaScript function function calculateTotal(items) { return items.reduce((sum, item) => { return sum + item.price * item.quantity; }, 0); } const cart = [ { name: 'Apple', price: 1.50, quantity: 4 }, { name: 'Banana', price: 0.75, quantity: 6 } ]; console.log(`Total: $${calculateTotal(cart).toFixed(2)}`);CSS /* Modern CSS with custom properties */ :root { --color-primary: #f97316; --spacing-unit: 1rem; } .card { padding: calc(var(--spacing-unit) * 2); border-radius: 0.5rem; background: linear-gradient(135deg, #fff 0%, #f5f5f5 100%); box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1); }HTML <article class="post"> <header> <h1>Article Title</h1> <time datetime="2024-12-20">December 20, 2024</time> </header> <div class="content"> <p>Article content goes here...</p> </div> </article>Bash # Install dependencies npm install # Run development server npm run dev # Build for production npm run build Tables Simple Table Feature Status Priority Dark Mode Complete High Search In Progress Medium Analytics Planned Low Detailed Table Technology Description Use Case Learning Curve Eleventy Static site generator Blogs, docs Easy TailwindCSS Utility-first CSS Rapid UI development Medium Alpine.js Lightweight JS framework Interactivity Easy CloudCannon Git-based CMS Content management Easy Alignment Table Left Aligned Center Aligned Right Aligned Text Text Text More text More text More text Even more Even more Even more Images and Figures Tropical vibes: Fresh pineapples by the water Horizontal Rules Content above the rule. Content below the rule. Another style of rule. And another variation. Abbreviations and Definitions The HTML specification is maintained by the W3C. Static Site Generation is the process of compiling templates and content into static HTML files at build time. Keyboard and Sample Output To save a file, press Ctrl + S (or Cmd + S on Mac). The command produced the following output: Build completed successfully in 2.3 seconds Small Text and Fine Print This is small text, often used for legal disclaimers, copyright notices, or other fine print that should be present but not prominent. Address Element Written by Jane Smith Contact: hello@example.com 123 Main Street, City, Country Summary This typography test demonstrates the full range of text formatting options available. Proper typography enhances readability, establishes visual hierarchy, and creates a professional appearance for any website or application. Remember: Good typography is invisible. When done well, readers focus on the content, not the styling. --- ### Web Performance Optimization URL: https://snappy-lemon-starter.freshjuice.dev/blog/post-5/ Date: December 15, 2024 Author: john-doe Website performance directly impacts user experience, SEO rankings, and conversion rates. A fast website keeps visitors engaged while a slow one drives them away. Why Performance Matters Studies show that: 53% of mobile users abandon sites that take over 3 seconds to load A 1-second delay in page load time can result in 7% fewer conversions Google uses page speed as a ranking factor for search results Core Web Vitals Google's Core Web Vitals measure real-world user experience: Largest Contentful Paint (LCP) LCP measures how long it takes for the largest content element to become visible. Aim for under 2.5 seconds. // Monitor LCP with the Performance API new PerformanceObserver((entryList) => { for (const entry of entryList.getEntries()) { console.log('LCP:', entry.startTime); } }).observe({ entryTypes: ['largest-contentful-paint'] });First Input Delay (FID) FID measures the time from when a user first interacts with your page to when the browser responds. Target under 100 milliseconds. Cumulative Layout Shift (CLS) CLS measures visual stability. Unexpected layout shifts frustrate users. Keep CLS under 0.1. Image Optimization Images often account for the majority of page weight. Modern Formats Use next-gen formats like WebP and AVIF: <picture> <source srcset="image.avif" type="image/avif"> <source srcset="image.webp" type="image/webp"> <img src="image.jpg" alt="Description" loading="lazy"> </picture>Responsive Images Serve appropriately sized images: <img src="image-800.jpg" srcset="image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w" sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px" alt="Description" >Lazy Loading Defer loading of off-screen images: <img src="image.jpg" alt="Description" loading="lazy">Code Optimization Minification Minify HTML, CSS, and JavaScript to reduce file sizes: File Type Original Minified Savings CSS 150 KB 95 KB 37% JavaScript 200 KB 120 KB 40% HTML 50 KB 40 KB 20% Code Splitting Load only the code needed for the current page: // Dynamic import for code splitting const module = await import('./heavy-module.js'); module.doSomething();Tree Shaking Remove unused code from your bundles by using ES modules and a modern bundler. Caching Strategies Browser Caching Set appropriate cache headers: Cache-Control: public, max-age=31536000, immutableService Workers Cache assets for offline access and faster repeat visits: self.addEventListener('fetch', (event) => { event.respondWith( caches.match(event.request).then((response) => { return response || fetch(event.request); }) ); });Resource Hints Help the browser prioritize resources: <!-- Preconnect to important origins --> <link rel="preconnect" href="https://fonts.googleapis.com"> <!-- Prefetch resources for the next page --> <link rel="prefetch" href="/next-page.html"> <!-- Preload critical resources --> <link rel="preload" href="/critical.css" as="style">Testing Tools Regularly test your performance with: Lighthouse - Built into Chrome DevTools WebPageTest - Detailed waterfall analysis PageSpeed Insights - Real-world performance data GTmetrix - Performance monitoring Conclusion Performance optimization is an ongoing process. Start with the biggest wins, measure your progress, and continuously iterate. Your users will thank you with higher engagement and better conversion rates. --- ### JavaScript Best Practices in 2025 URL: https://snappy-lemon-starter.freshjuice.dev/blog/post-6/ Date: December 10, 2024 Author: jane-smith JavaScript continues to evolve rapidly. Staying current with best practices helps you write better code and build more maintainable applications. Modern Variable Declarations Always prefer const by default, use let when reassignment is needed, and avoid var entirely. // Preferred const API_URL = 'https://api.example.com'; const users = []; // When reassignment is needed let count = 0; count += 1; // Avoid var oldStyle = 'deprecated';Destructuring Destructuring makes code more readable and concise: // Object destructuring const user = { name: 'John', age: 30, city: 'New York' }; const { name, age } = user; // Array destructuring const colors = ['red', 'green', 'blue']; const [primary, secondary] = colors; // Default values const { role = 'user' } = user; // Renaming const { name: userName } = user;Arrow Functions Use arrow functions for concise syntax and lexical this: // Simple transformation const doubled = numbers.map(n => n * 2); // Multiple parameters const add = (a, b) => a + b; // With function body const processUser = (user) => { const { name, email } = user; return { name, email: email.toLowerCase() }; };Template Literals Template literals improve string handling: const name = 'World'; const greeting = `Hello, ${name}!`; // Multi-line strings const html = ` <article> <h1>${title}</h1> <p>${content}</p> </article> `; // Tagged templates const sanitized = html`<p>${userInput}</p>`;Optional Chaining and Nullish Coalescing Safely access nested properties and provide defaults: // Optional chaining const city = user?.address?.city; const firstItem = arr?.[0]; const result = obj?.method?.(); // Nullish coalescing const value = input ?? 'default'; // Combined const userName = user?.name ?? 'Anonymous';Async/Await Prefer async/await over raw promises for cleaner code: // Clean async function async function fetchUserData(userId) { try { const response = await fetch(`/api/users/${userId}`); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const data = await response.json(); return data; } catch (error) { console.error('Failed to fetch user:', error); throw error; } } // Parallel requests const [users, posts] = await Promise.all([ fetchUsers(), fetchPosts() ]);Modern Array Methods Leverage functional array methods: const products = [ { name: 'Apple', price: 1.5, inStock: true }, { name: 'Banana', price: 0.75, inStock: true }, { name: 'Cherry', price: 3.0, inStock: false } ]; // Filter const available = products.filter(p => p.inStock); // Map const names = products.map(p => p.name); // Find const apple = products.find(p => p.name === 'Apple'); // Some/Every const hasExpensive = products.some(p => p.price > 2); const allInStock = products.every(p => p.inStock); // Reduce const total = products.reduce((sum, p) => sum + p.price, 0);Object Shorthand Use shorthand syntax for cleaner objects: const name = 'John'; const age = 30; // Shorthand properties const user = { name, age }; // Shorthand methods const calculator = { add(a, b) { return a + b; }, subtract(a, b) { return a - b; } }; // Computed property names const key = 'dynamic'; const obj = { [key]: 'value', [`${key}Method`]() { return this[key]; } };Spread Operator Use spread for immutable operations: // Array operations const arr1 = [1, 2, 3]; const arr2 = [...arr1, 4, 5]; const copy = [...arr1]; // Object operations const original = { a: 1, b: 2 }; const extended = { ...original, c: 3 }; const updated = { ...original, b: 10 }; // Function arguments const numbers = [1, 2, 3]; const max = Math.max(...numbers);Modules Organize code with ES modules: // utils.js export const formatDate = (date) => { return new Intl.DateTimeFormat('en-US').format(date); }; export const formatCurrency = (amount) => { return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(amount); }; // main.js import { formatDate, formatCurrency } from './utils.js';Error Handling Implement proper error handling: class ValidationError extends Error { constructor(message, field) { super(message); this.name = 'ValidationError'; this.field = field; } } function validateUser(user) { if (!user.email) { throw new ValidationError('Email is required', 'email'); } if (!user.email.includes('@')) { throw new ValidationError('Invalid email format', 'email'); } return true; } try { validateUser({ name: 'John' }); } catch (error) { if (error instanceof ValidationError) { console.error(`Validation failed for ${error.field}: ${error.message}`); } else { throw error; } }Conclusion Modern JavaScript offers powerful features that make code cleaner and more maintainable. Embrace these patterns, but always prioritize readability and team consistency. The best code is code that others can easily understand and maintain. --- ## Authors ### Jane Smith URL: https://snappy-lemon-starter.freshjuice.dev/authors/jane-smith/ Jane is a UX designer and frontend developer who believes in creating inclusive, accessible digital experiences. She has worked with startups and Fortune 500 companies alike, bringing user-centered design to every project. --- ### John Doe URL: https://snappy-lemon-starter.freshjuice.dev/authors/john-doe/ John is a full-stack developer with over 10 years of experience building web applications. He specializes in JavaScript, Node.js, and modern frontend frameworks. When not coding, he enjoys hiking and photography. ---