Design

Development

People & Culture

Project Management

What is Google reCAPTCHA? It is a free service provided by Google to prevent bots from abusing websites. If you have a form on your website and the user needs to fill in data, it is always a good idea to implement some kind of detection between bots and real users.

hero-logo-big-gray

How to get Google reCAPTCHA keys

Google reCaptcha helps you with that and getting Google reCAPTCHA key is really simple by following this text. All you need is to login to Google reCaptcha Admin and create keys for your domain.<h3 style="text-align: center;"> <img src="https://cdn.simple-code.agency/articles/image8-recaptcha.png"></h3><h3>What does it look like?</h3>Google reCAPTCHA has evolved through several versions to enhance website security while minimizing user inconvenience. Here is a summary of its different versions:<ul><li>reCAPTCHA v1: The initial version, launched in 2007, required users to decipher distorted text or solve simple image-based puzzles to prove they were human. This version is now deprecated and no longer in use.</li></ul><img src="https://cdn.simple-code.agency/articles/image1-recaptcha.png"><ul><li>reCAPTCHA v2: Introduced a simple &quot;I am not a robot&quot; checkbox, which most users just need to click. For those flagged as suspicious, additional image-based challenges (e.g., selecting pictures of traffic lights) are presented. This version balances security with user experience and remains widely used​.</li></ul><img src="https://cdn.simple-code.agency/articles/image3-recaptcha.png"><ul><li>Invisible reCAPTCHA v2: This variant of v2 removes the need for the checkbox. The CAPTCHA challenge is executed automatically based on user behavior on the page. If the behavior is deemed suspicious, a challenge appears, reducing friction for most users​​</li></ul><img src="https://cdn.simple-code.agency/articles/image13-recaptcha.png"><ul><li>reCAPTCHA v3: The latest version, which operates entirely in the background, assigns a risk score to each user interaction. This score helps determine whether the user is likely a human or a bot. Site administrators can set thresholds to decide when to take action, such as requiring additional verification steps. This version aims to provide seamless user experience with enhanced security.</li></ul><h3>When and Why did it start?</h3>Google reCAPTCHA was introduced in 2007 as a tool to protect websites from malicious bots and automated attacks. It was initially developed by a team at Carnegie Mellon University and later acquired by Google in 2009.The reason for introducing reCAPTCHA was to combat the problem of automated programs abusing web forms, such as registering fake accounts, sending spam messages, or attempting to crack passwords. reCAPTCHA was designed to distinguish real users from bots by using simple tasks that humans can easily solve but are difficult for bots.Over time, reCAPTCHA has evolved and become more sophisticated. From simple text tests to more complex methods like analyzing user behavior on the page, all aimed at improving security and reducing inconvenience for real users. Today, reCAPTCHA uses advanced algorithms and machine learning to effectively protect websites with minimal disruption to the user experience.<h3>Why use it?</h3>Websites should use Google reCAPTCHA for several important reasons:<ul><li>Security: reCAPTCHA helps protect websites from malicious activities, such as automated bots trying to spam, hack, or scrape data.</li><li>Preventing Spam: By filtering out automated submissions, reCAPTCHA helps reduce the amount of spam sent through contact forms, comment sections, and registration pages.</li><li>Protecting User Accounts: It adds an extra layer of security to login pages, preventing bots from attempting brute-force attacks to crack passwords.</li><li>Improving Data Quality: Ensuring that form submissions are from real users helps maintain the quality and integrity of the data collected from visitors.</li><li>User-Friendly Security: Modern versions of reCAPTCHA, like reCAPTCHA v3, provide security with minimal disruption to genuine users by analyzing user behavior in the background.</li><li>Using reCAPTCHA enhances the overall security and reliability of a website, making it a crucial tool for any online service that wants to protect itself and its users from malicious activity.</li></ul><h3>How to get Google reCAPTCHA keys?</h3>What do I need to know before I start creating keys?Before even starting you need to have a domain and know which version(type) of reCAPTCHA will be implemented on your website.What should the domain look like?As you can check in the screenshot below, the domain will be used without any protocol, path,port, query or fragment. Valid example: “example.com”.<img src="https://cdn.simple-code.agency/articles/image12-recaptcha.png">There are 3 different reCaptcha versions?Make sure you know exactly which version(type) you will use, because keys created are paired to only one version.<img src="https://cdn.simple-code.agency/articles/image11-recaptcha.png">You can create keys for one of the following version(types):V2 I’m not a robot<img src="https://cdn.simple-code.agency/articles/image9-recaptcha.png">V2 Invisible<img src="https://cdn.simple-code.agency/articles/image5-recaptcha.png">V3 “reCAPTCHA v3 allows you to verify if an interaction is legitimate without any user interaction.” more information <a href="https://developers.google.com/recaptcha/docs/versions">here</a><h3>How to create?</h3>Login to <a href="https://www.google.com/recaptcha/admin/">Google reCaptcha Admin</a> with your Google account.Click on “+”(plus) sign in the right top corner<img src="https://cdn.simple-code.agency/articles/image6-recaptcha.png">Fill in the data and click on the submit button after that.<img src="https://cdn.simple-code.agency/articles/image8-recaptcha.png">Copy “Site Key” and “Secret Key” and use it as you need.<h3> How to access it any time?</h3>Do not worry about storing keys to some document, you can always access them:In the top left corner select your set of keys by “Label” you have entered.<img src="https://cdn.simple-code.agency/articles/image7-recaptcha.png">Then click on the “settings” icon in the top right corner.<img src="https://cdn.simple-code.agency/articles/image2-recaptcha.png">All information will be visible<img src="https://cdn.simple-code.agency/articles/image15-recaptcha.png">At the end, click on “reCAPTCHA keys” to expand that section<img src="https://cdn.simple-code.agency/articles/image4-recaptcha.png">And your keys are visible<img src="https://cdn.simple-code.agency/articles/image10-recaptcha.png">

<h2>Conclusion</h2>Using Google reCAPTCHA is beneficial because it significantly enhances website security by preventing malicious bots and automated attacks while ensuring a smooth user experience. It helps maintain data integrity, reduces spam, and protects user accounts with minimal disruption to genuine users.

Articles You Might Like

cta-background-client

Something went wrong

Success

A new project on the way? We’ve got you covered.

recaptcha-feature-2

Google reCAPTCHA is a free service provided by Google to prevent bots from abusing websites.

How to get Google reCAPTCHA keys

Google reCAPTCHA is a free service provided by Google to prevent bots from abusing websites. If you have a form on your website and the user needs to fill in data, it is always a good idea to implement some kind of detection between bots and real users.

recaptcha-feature

At Simple Code, we take quality assurance seriously. We understand that delivering high-quality software solutions to our clients requires a combination of manual and automated testing methods and tools.

Our Approach to QA

Our manual testing includes functional testing, usability testing, and exploratory testing, while our automated testing includes clickables testing, regression testing, and performance testing. By using a combination of manual and automated testing, we can ensure that our products work as intended and provide an excellent user experience.<h3>Manual Testing</h3>When conducting manual quality assurance (QA) testing in web development, several approaches and techniques can be utilized to ensure thorough and effective testing. Here are some common approaches used in manual QA testing for web development:<ul><li>Functional Testing: Functional testing focuses on validating the functionality of the website or web application. Testers verify that all features, buttons, forms, links, and interactions work as intended. They assess whether the system meets the specified requirements and performs the expected tasks accurately. Test cases are designed to cover different scenarios, user inputs, and edge cases to ensure comprehensive functional testing.</li><li>Usability Testing: Usability testing aims to evaluate the user-friendliness and intuitiveness of the web interface. Testers simulate real-world user interactions, and assess the website&#039;s navigation, information architecture, and visual design. They identify areas where improvements can be made to enhance the user experience. Usability testing often involves collecting feedback from end-users to gain insights into their perspectives and pain points.</li><li>Cross-Browser and Cross-Device Testing: Since websites are accessed on various browsers and devices, it is crucial to test compatibility across different platforms. Testers verify that the website functions correctly and appears consistent across major web browsers such as Chrome, Firefox, Safari, and Internet Explorer. They also test responsiveness and adaptability on different devices, including desktops, laptops, tablets, and mobile phones.</li><li>Performance Testing: Performance testing involves evaluating the speed, responsiveness, and scalability of the website or web application. Testers measure and analyze key performance metrics such as page load time, response time, server resource utilization, and throughput. They conduct stress testing by simulating heavy user loads to determine the system&#039;s stability and identify performance bottlenecks or limitations.</li></ul><ul><li>Accessibility Testing: Accessibility testing ensures that the website adheres to web accessibility standards, making it usable for individuals with disabilities. Testers assess the website&#039;s compliance with guidelines such as the Web Content Accessibility Guidelines (WCAG). They verify the presence of alternative text for images, proper labeling of form elements, keyboard accessibility, and the ability to navigate using assistive technologies like screen readers.</li><li>Exploratory Testing: Exploratory testing is an unscripted approach where testers explore the website or application without predefined test cases. They intuitively interact with the system, looking for unexpected behavior, usability issues, and edge cases that automated tests may not cover. Exploratory testing encourages creativity and critical thinking, allowing testers to uncover hidden defects and provide valuable feedback.</li></ul>

john-schnobrich-flpc9_vocj4-unsplash-(1)-1689770524

It&#039;s important to note that the selection and combination of these approaches may vary based on project requirements, timeline, and available resources. The goal is to ensure a comprehensive and balanced approach to manual QA testing that covers functional aspects, user experience, compatibility, performance, security, and accessibility, ultimately delivering a high-quality web solution to end-users.<h3>Automated Testing with Cypress</h3>While manual testing is crucial, it can be time-consuming and prone to human error. Therefore, we also use automated testing to complement our manual testing efforts. We use Cypress, an open-source testing framework that helps us cut down on testing time and improve accuracy. Cypress is a popular JavaScript-based end-to-end testing framework and automation tool specifically designed for web applications. It provides a comprehensive solution for automating tests, from interacting with the user interface to making assertions about the application&#039;s behavior.

annie-spratt-qckxruozjrg-unsplash-(1)-1689770564

Cypress follows a unique architecture compared to other testing frameworks. It runs directly in the browser and operates alongside the application being tested. This architecture offers numerous advantages, such as real-time test execution, interactive debugging, and full access to the application&#039;s state. It eliminates the need for external dependencies or plugins and provides a seamless and intuitive testing experience.Our automated testing includes three types of tests:<ol><li>Clickables Test - Automated tests for clickables typically involve interacting with elements on a web page that can be clicked, such as buttons, links, or dropdowns. The purpose of these tests is to ensure that click actions trigger the expected behavior or navigation within the application. This test clicks through the product (web/mobile app or website) in random order and random places. It monitors the browser console for any errors that may arise during the process. These tests ensure that click actions trigger the expected behavior, verify navigation, and help identify potential issues or regressions as the application evolves.</li><li>Regression Testing - Cypress can also be used for visual regression testing, which involves comparing visual representations of the application before and after changes to identify any unintentional visual discrepancies. Visual regression testing helps ensure that the visual appearance of the application remains consistent across different versions or updates. This test compares the staging environment with the live environment and reports any visual differences. This test is particularly handy when we update dependencies and plugins, as it allows us to identify any issues that may arise after the update. It helps us ensure that the product looks and behaves the same way in both environments. By incorporating visual regression testing into your Cypress test suite, you can verify that the visual output of your application remains consistent and detect any unintended visual regressions caused by code changes or updates. This helps maintain a high standard of visual quality and consistency across different versions of your application.</li><li>Performance Testing - This test runs Google Lighthouse and similar tests to ensure that the product is performing well. It raises a red flag if the product is not performing well, allowing us to identify and fix performance issues before they impact the user experience. Cypress integrates with Google Lighthouse, an open-source tool for auditing and measuring the performance, accessibility, best practices, and SEO aspects of web applications. By leveraging Cypress and Google Lighthouse together, you can automate the process of running Lighthouse tests and collecting performance metrics for your application. You can analyze the Lighthouse reports to identify areas for improvement, potential performance bottlenecks, accessibility issues, or SEO optimization opportunities. The reports provide insights and recommendations for optimizing your application based on industry best practices. By combining Cypress and Google Lighthouse, you can automate the process of running Lighthouse audits and ensure that your application meets performance, accessibility, and best practice standards. This integration allows you to incorporate continuous testing and monitoring into your development workflow, enabling you to catch any regressions or issues early and maintain a high-quality web application.</li></ol>

regression-testing-(1)-1689770577

Cypress is a powerful and user-friendly testing framework that simplifies the process of automating tests for web applications. With its unique architecture, interactive test runner, expressive syntax, and powerful debugging capabilities, Cypress offers a seamless testing experience. By enabling developers to write reliable and efficient end-to-end tests, Cypress contributes to the overall quality and reliability of web applications, allowing teams to deliver robust software to end users.<h3>Customization and Communication</h3>We understand that no two projects are the same, and therefore, we customize our testing approach to meet the unique requirements of each project. We work closely with our clients to understand their needs and requirements, and we tailor our testing approach accordingly.Effective communication is crucial in ensuring that the product meets our client&#039;s requirements and exceeds their expectations. Therefore, we collaborate closely with our clients throughout the development process to gather feedback, answer questions, and provide progress updates.

<h2>Conclusion</h2>Our approach to QA includes both manual and automated testing methods and tools to ensure that our products work as intended and provide an excellent user experience. We use a combination of browser and device testing, as well as automated testing using Cypress, to deliver high-quality software solutions to our clients. In addition to testing, we follow industry best practices such as code reviews, continuous integration, and continuous deployment to ensure that our software is reliable, maintainable, and scalable. We also stay up to date with the latest technologies and trends to provide innovative solutions that help our clients achieve their goals.If you&#039;re looking for a digital agency that prioritizes software quality and provides custom solutions tailored to your needs, look no further than Simple Code. Contact us today to learn more about how we can help your business thrive.

1678244426806-(1)

Discover Our QA Approach - Ensuring Excellence Through Rigorous Quality Assurance Practices.

Our approach to QA

Our Approach to QA

While you&#039;re reading this article, chances are that a new JavaScript framework or library is being actively developed, or even released. Developers are constantly trying to keep up with different trends, requirements, specifications, APIs, etc. in order to make the available tools (harder) better, faster, stronger.

Evolution of Frontend Technologies Since 2014

js-code

<h3>JavaScript Revolution</h3>The last 10 years represent a transformative period in the world of web development, marked by rapid advancements, the introduction of groundbreaking frameworks, and a paradigm shift in how developers approach building user interfaces and experiences on the web.This era is characterized by the rise of modern JavaScript frameworks, the embracing of new web standards, the focus on mobile-first and progressive web applications, and a growing emphasis on developer experience and tooling.One of the most significant shifts in the frontend landscape has been the evolution of JavaScript into a powerful, first-class language for web development. The emergence of ECMAScript 6 (ES6) in 2015 introduced new syntax and features, such as classes, modules, and arrow functions, that have become foundational to modern web development practices. This evolution has allowed developers to write cleaner, more maintainable code and has paved the way for the development of complex web applications that rival traditional desktop applications in functionality and performance.<h3>TypeScript</h3>TypeScript, developed by Microsoft and released in 2012, started gaining significant popularity around 2014. It is a superset of JavaScript that adds static type definitions. The adoption of TypeScript has grown over the years because it helps developers catch errors early through its type-checking feature, leading to more robust and maintainable codebases. Major frameworks and libraries like Angular, React, and Vue have embraced TypeScript, further cementing its place in the frontend ecosystem.<h3>Progressive Web Apps (PWAs)</h3>Progressive Web Apps have been a game-changer since their inception around 2015. PWAs leverage modern web capabilities to deliver an app-like experience on the web. They are designed to work offline, load quickly, and integrate seamlessly with the device’s operating system. Google has been a strong proponent of PWAs, emphasizing their importance for the future of web applications. This technology has enabled developers to build web applications that can rival native applications in terms of performance and user experience.<h3>Web Components</h3>Web Components are a set of standards that allow developers to create reusable custom elements and widgets with their encapsulated functionality, which can be used in web pages and web applications. The concept of Web Components has been around since 2011, but it gained significant traction after 2014 as browsers started to support these standards natively. This evolution has allowed for the development of more modular, maintainable, and scalable web applications.<h3>Frameworks and Libraries</h3>The period since 2014 has seen the rise and consolidation of several key JavaScript frameworks and libraries, each with its philosophy, strengths, and ecosystem. They offered developers comprehensive solutions for building dynamic, responsive web applications. These tools have introduced concepts such as two-way data binding, virtual DOM, and reactive data systems, revolutionizing how developers manage state and updates in their applications. Some of the most popular frameworks to day are:<ul><li>Angular</li><li>React</li><li>Vue</li><li>Svelte</li><li>... and many more.</li></ul><h3>Server-side Rendering (SSR) and Static Site Generators</h3>The need for faster load times and improved SEO led to the rise of server-side rendering (SSR) and static site generators. SSR frameworks have become popular for their ability to render JavaScript applications on the server, improving the initial load time and SEO. Static site generators have also seen a rise in popularity, offering blazing-fast load times by serving pre-rendered static pages. Some of the most popular are:<ul><li>Next for React</li><li>Nuxt for Vue</li><li>SvelteKit for Svelte</li><li>Astro</li><li>... and others.</li></ul><h3>Deprecations</h3>In the fast-evolving landscape of frontend development, certain technologies, frameworks, and practices that were once popular have seen a decline in use as newer, more efficient solutions have emerged.<ul><li>AngularJS - the original version of Angular released in 2010, has seen a significant decrease in use since the introduction of Angular 2+ in 2016. AngularJS introduced concepts like two-way data binding and declarative templates, but its performance issues and the complexity of large-scale application development led to the complete rewrite of the framework. The Angular team ended long-term support for AngularJS at the end of 2021, pushing developers towards the more modern, component-based Angular framework.</li><li>jQuery - once the cornerstone of frontend development for simplifying DOM manipulation, event handling, and AJAX calls, has seen its necessity diminish with the evolution of vanilla JavaScript (ES6+) and modern frameworks that offer more structured approaches to building web applications. While jQuery is still in use, especially in legacy projects, its importance has significantly decreased as native browser APIs have become more powerful and easier to work with.</li><li>Grunt and Gulp - task runners that automate script minification, compilation, and other repetitive tasks, have seen a decline in favor of npm scripts and more modern tools like Webpack, Parcel, and Vite, which offer more integrated and efficient ways to manage build processes.</li></ul>

increase

<h3>Timeline - 2014 to Present</h3>Here&#039;s a recap of some major events and releases related to the frontend technologies in the last 10 years:2014<ul><li>Webpack - Initially released in March 2012, Webpack became increasingly popular in the frontend ecosystem around 2014 as a powerful module bundler. Its ability to transform, bundle, or package just about any resource or asset has made it a staple in modern web development workflows. Webpack&#039;s significance grew with each major release, introducing features like code splitting, lazy loading, and extensive plugin systems to optimize the performance and efficiency of web applications.</li><li>TypeScript - Initial release in October 2012. TypeScript introduces static typing to JavaScript, aiming to improve the development experience for large-scale applications by catching errors early through types. TypeScript&#039;s popularity and adoption steadily grow as the development community recognizes its benefits.</li><li>Vue.js - Initial release of Vue.js, a progressive JavaScript framework for building user interfaces, introducing an accessible and flexible model for developers.</li></ul>2015<ul><li>React - Significant updates and community growth, as React solidifies its position with the introduction of React Native, expanding beyond web development into mobile app development.</li><li>GraphQL - Released by Facebook, GraphQL offers a new data querying and manipulation language, aiming to improve upon REST API architectures.</li></ul>2016<ul><li>Angular 2+ - A complete rewrite of AngularJS, introducing a component-based architecture and TypeScript integration, marking a significant shift in Angular&#039;s development approach.</li><li>Vue 2.0 - Major update to Vue.js, enhancing its performance and introducing a virtual DOM.</li><li>Next.js - Initial release of Next.js, offering server-side rendering and static site generation for React applications, focusing on performance and developer experience.</li><li>Nuxt.js - Launched as a framework for Vue.js applications to simplify the development of universal or single-page Vue apps.</li><li>Svelte - First release of Svelte, introducing a new approach by shifting much of the work to compile time, aiming for faster runtime performance and smaller bundle sizes.</li></ul>2017<ul><li>Preact X - Introduction of Preact X, offering a smaller, faster alternative to React with the same modern API.</li><li>Vue CLI 3 - Release of Vue CLI 3, providing a standardized toolchain for Vue.js development.</li></ul>2018<ul><li>Angular Ivy - Preview release of Angular Ivy, a next-generation compilation and rendering pipeline, aiming for better performance and smaller bundle sizes.</li></ul>2019<ul><li>Svelte 3 - Major update to Svelte, introducing a new reactivity model that makes it easier to write performant applications with less boilerplate.</li></ul>2020<ul><li>Vue 3.0 - Release of Vue 3.0, introducing the Composition API, improved performance, and better TypeScript integration.</li><li>React 17 - Introduction of React 17, focusing on making future upgrades easier with changes like event delegation improvements and new JSX transforms.</li></ul>2021<ul><li>SvelteKit - Beta release of SvelteKit, offering a framework for building highly optimized web applications with Svelte, focusing on server-side rendering and static site generation.</li><li>Vite - Gaining popularity, Vite, a build tool that significantly improves the developer experience with its fast hot module replacement (HMR).</li></ul>2022 - Present<ul><li>React 18 - Released with improvements like automatic batching, new APIs for concurrency, and better server-side rendering support.</li><li>Astro - Introduction of Astro, a new kind of static site generator that delivers lightning-fast performance with less client-side JavaScript.</li><li>Solid.js - Solid.js emerges as a notable framework focusing on reactivity without a virtual DOM, aiming for optimal performance and fine-grained reactivity.</li><li>Qwik - Announcement and introduction of Qwik as a frontend framework designed for optimal loading performance through resumability and efficient code delivery mechanisms.</li></ul>

While you're reading this article, chances are that a new JavaScript framework or library is being actively developed, or even released.

Evolution of Frontend Technologies Since 2014

Slow website costing you customers? Discover 10 practical ways to enhance your site&#039;s performance and keep visitors engaged.

sc-logo-solid-gray

Speed Up Your Website in 10 Easy Steps

A swift website is key to keeping visitors on your page and turning them into customers. We recently helped a client improve their site&#039;s speed, which led to better Google rankings and more satisfied users. Here&#039;s what we learned, broken down into 10 actionable steps:<ol><li>Streamline Your ImagesLarge images can slow down your site significantly. Use the right format for each image: JPEG for photos, PNG for graphics with transparent areas. Don&#039;t overlook newer formats like WebP and AVIF, which offer better compression. For logos and icons, SVG is ideal as it stays sharp at any size.For images further down the page, use &quot;lazy loading.&quot; This technique tells the browser to load these images only when they&#039;re about to come into view. Here&#039;s a simple way to add lazy loading to your images:<pre><code>&lt;img src=&quot;image.jpg&quot; loading=&quot;lazy&quot; alt=&quot;Product showcase&quot;&gt;</code></pre></li><li>Use Browser CachingBrowser caching lets visitors&#039; browsers save parts of your site, so it loads faster on repeat visits. Set up your server to tell browsers which files to save and for how long. If you&#039;re using WordPress, the W3 Total Cache plugin can help you implement this easily.</li><li>Simplify Your CodeRemoving extra spaces and characters from your site&#039;s code can make a big difference. This process, called minification, can be done with tools like UglifyJS for JavaScript and cssnano for CSS. WordPress users can try the Autoptimize plugin to handle this automatically.</li><li>Enable CompressionGzip compression squeezes your web pages to make them smaller before sending them to visitors. This means faster load times. Turn on Gzip on your web server, or ask your hosting company for help if you&#039;re not sure how to do this. Here&#039;s a simple configuration for Apache servers: <pre><code>&lt;IfModule mod_deflate.c&gt; 
 AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript application/javascript
&lt;/IfModule&gt;</code></pre>While Gzip is still relevant, also look into Brotli compression, which offers better compression ratios for text-based resources. Some CDNs now offer automatic Brotli compression.</li><li>Utilize Content Delivery Networks (CDNs)A CDN puts copies of your site on servers around the world, so it loads faster for everyone, regardless of their location. Services like Cloudflare, Amazon CloudFront, or StackPath can help you set this up. Use a CDN especially for static content like images, CSS, and JavaScript files.</li><li>Load Important Things FirstEnsure the top part of your page loads quickly by prioritizing critical content. Put essential CSS directly in the HTML file and load less important scripts later. For crucial images at the top of the page, use the fetchpriority attribute:<pre><code>&lt;img src=&quot;main-image.jpg&quot; fetchpriority=&quot;high&quot; alt=&quot;Main Image&quot;&gt;</code></pre></li><li>Improve Server Response TimeA fast server means faster response times. Improve how your site talks to its database, use server caching, and consider upgrading your hosting plan if needed. These backend optimizations can significantly impact your site&#039;s overall speed.</li><li>Reduce File RequestsCut down on the number of separate files your page needs to load. Combine multiple CSS or JavaScript files where possible. For small, repeated images, consider using CSS sprites. Fewer requests mean faster load times.</li><li>Handle JavaScript EfficientlyPrevent JavaScript from slowing down your page load by using &quot;async&quot; or &quot;defer&quot; attributes on script tags. Load non-critical scripts after the main page content. This ensures that important content is displayed quickly, even if some features take a bit longer to become active.</li><li>Break Up Complex TasksHelp your site stay responsive by splitting up big jobs. Use the &quot;yield&quot; keyword in JavaScript to let the browser handle other tasks in between parts of a big job. For really heavy tasks, consider using web workers. Here&#039;s a simple example of breaking up a big task:function* <pre><code>bigTask() {
 for (let i = 0; i &lt; 1000000; i++) {
 if (i % 1000 === 0) yield;
 // Do work here
 }
}

function runTask() {
 const iterator = bigTask();
 function keepGoing() {
 const result = iterator.next();
 if (!result.done) {
 requestIdleCallback(keepGoing);
 }
 }
 requestIdleCallback(keepGoing);
}</code></pre></li></ol>

Want to stop losing customers to a slow website?

<h2>Conclusion</h2>Implementing these steps isn&#039;t just about technical improvements—it&#039;s about enhancing your business&#039;s digital presence. A faster website can lead to:<ol><li>Improved User Satisfaction: When your site loads quickly, visitors are more likely to stay and engage with your content or products.</li><li>Higher Conversion Rates: Speed directly impacts sales. Studies show that even a one-second delay in page load time can result in a 7% loss in conversions.</li><li>Better Search Engine Rankings: Search engines favor faster websites, potentially improving your visibility to potential customers.</li><li>Reduced Bounce Rates: Visitors are less likely to leave your site if pages load swiftly, giving you more opportunities to convey your message or showcase your offerings.</li><li>Mobile User Retention: With more users accessing sites via mobile devices, a fast-loading mobile site is crucial for retaining this growing audience.</li><li>Cost Efficiency: Optimized sites often require less bandwidth and server resources, potentially reducing hosting costs.</li></ol>Remember, website speed optimization is an ongoing process. As technologies evolve and user expectations change, regularly revisiting these strategies will help ensure your site continues to perform at its best.By prioritizing your website&#039;s performance, you&#039;re not just improving a technical aspect of your business - you&#039;re enhancing the overall experience for your customers and setting a strong foundation for your online success.

frustrated-person

Discover 10 practical steps to enhance your website's speed and performance. Learn how faster load times can improve user experience and drive business growth.

10 Ways to Speed Up Your Website and Boost Business

Speed Up Your Website in 10 Easy Steps

The integration of Artificial Intelligence (AI) in web development marks a transformative era in the digital world. As a web development agency, our journey with AI tools, specifically GPT-4 and GitHub Copilot, has reshaped our approach to development tasks, enhancing both efficiency and creativity.

Integrating AI in Web Development

<h3>GPT-4 and GitHub Copilot - Pioneers of AI Assistance</h3>GPT-4, a marvel of OpenAI, excels in understanding and generating human-like text, while GitHub Copilot, powered by OpenAI&#039;s Codex, serves as an AI pair programmer directly within the code editor. These tools embody the fusion of AI with web development, streamlining code generation, content creation, and problem-solving.Our experience integrating GPT-4 and GitHub Copilot into development projects has been nothing short of revolutionary. GPT-4 has automated content generation and provided solutions to coding challenges, saving invaluable time. GitHub Copilot, with its real-time code suggestions, has accelerated project timelines and improved code quality, guiding us through the development process with unprecedented ease.<h3>AI in workflow</h3>

christopher-gower-m_hrflhgabo-unsplash

In one of our projects, one developer was faced with a tight deadline and the task of delivering a high-quality product using a technology stack that was relatively new to him. The challenge was not just to learn and apply this new technology swiftly but also to ensure that the final product adhered to industry best practices and was optimized for performance. This is where the capabilities of GPT, particularly its latest iteration, became a game-changer.GPT served as a resource in this high-pressure situation. It acted as a dynamic learning assistant, providing him with concise explanations, relevant examples, and best practices related to the new technology stack. This AI-driven guidance significantly accelerated the learning process, allowing him to quickly become proficient enough to start building the project with confidence.Thanks to the support provided by GPT, he was able to complete the project within the set deadline, meeting all specified requirements and quality standards. This experience showed how AI tools like GPT can be leveraged to quickly adapt to new technologies, optimize development practices, and deliver projects successfully, even under challenging conditions.<h3>Revolutionizing Development with AI Integration</h3>

mojahid-mottakin-c1dhxbtjyqk-unsplash

The integration of AI technologies like GPT-4 and GitHub Copilot into the web development process has led to a remarkable transformation in how projects are executed. This shift has not only significantly accelerated development timelines, allowing tasks that once took weeks to be completed in mere days, but it has also brought about a substantial improvement in the overall quality of the code produced. The precision and efficiency provided by these AI tools have greatly reduced the time spent on debugging, thereby optimizing the development cycle and enhancing productivity.Moreover, the use of AI in development has opened up new avenues for tackling more complex and ambitious projects. By automating routine tasks and offering intelligent suggestions for both backend and frontend development, these AI assistants empower developers to focus on innovation and creativity. This holistic enhancement of the development workflow demonstrates the potential of AI to elevate efficiency and user engagement across various projects, reshaping the landscape of web development with its capabilities.<h3>The Balance Between AI Assistance and Human Expertise</h3>

igor-omilaev-eggfz5x2lna-unsplash

While the benefits of AI in web development are immense, it&#039;s crucial to address the limitations and ethical considerations. AI tools depend on vast datasets and algorithms that may not always align with the nuanced requirements of every project. The key to successful integration lies in combining AI&#039;s computational power with human creativity and oversight, ensuring the delivery of innovative and secure web solutions.To use the full potential of AI while mitigating risks, developers should maintain an active role in the decision-making process, critically assessing AI-generated suggestions and staying informed about the latest advancements in AI technology and web development practices.<h3>The Future of AI in Web Development</h3>Looking ahead, the role of AI in web development is set to expand, with emerging technologies offering even more sophisticated tools for code generation, personalized user experiences, and automated testing. The future promises a seamless integration of AI, further blurring the lines between human and machine collaboration in the creation of digital experiences.We urge our fellow developers and readers to explore and experiment with AI tools like GPT-4 and GitHub Copilot. The journey into AI-assisted development not only enhances your current projects but also equips you with the skills and insights needed for the future of web development.

<h2>Conclusion</h2>Integrating AI into web development is not just about staying ahead of technological advancements; it&#039;s about actively participating in the reshaping of the digital creation landscape. By embracing AI tools, we can unlock new levels of efficiency, creativity, and innovation, paving the way for a future where technology and human ingenuity converge to create unparalleled web experiences.

The integration of Artificial Intelligence (AI) in web development marks a transformative era in the digital world.

Integrating AI in Web Development

Google Maps is an incredibly powerful tool for businesses worldwide, enabling them to integrate maps, geolocation services, and place searches into their websites and applications. Whether you&#039;re developing a location-based service, enhancing your customer&#039;s user experience, or simply displaying your business location, Google Maps APIs play a crucial role in connecting your services with the vast data Google Maps offers.

How to Setup a New Google Maps API Key

This guide will walk you through creating a new Google Maps API key and adding specific features like Maps, Places, and Geolocation APIs to it. Not all projects require all these features, so we&#039;ll cover how to customize your API key according to your needs.<h3>Step 1: Access the Google Cloud Console</h3>The entire process takes place within Google Cloud Console. To access the Google Cloud Console, you can follow this link: <a target="_blank" href="https://console.cloud.google.com/.">https://console.cloud.google.com/.</a> You will need to log in with your Google account. If you don’t have one, you will need to create it.If you don’t have a Google account and need to create it, you can follow the steps on the following link: <a target="_blank" href="https://support.google.com/accounts/answer/27441?hl=en.">https://support.google.com/accounts/answer/27441?hl=en.</a> When you open the Console, you should see a screen similar to the one below. If you’re opening it for the first time, it might ask you to accept the Terms and cookies.

image3-31

<h3>Step 2: Create a New Project</h3>Once logged in, you’ll need to create a new project for your API key.<ul><li>Click on the project dropdown at the top of the page labeled “Select a project”. If you have any projects from before, it might default to it, so instead of seeing “Select a project”, you might see a project name.</li></ul>

image1-33

<ul><li>A modal should appear. At the top right corner of the modal, click on NEW PROJECT.</li></ul>

image14-35

<ul><li>Give your project a name, select an organization (if you have it) and provide a location. At this stage, the name is the most important part on this screen. After you fill in all the required fields, click on CREATE.</li></ul>

image6-37

<ul><li>You should be redirected back to the Console. A notification pop-up should show your project being created and after it’s done, it should show a success. Click on SELECT PROJECT in the pop-up to select the project.</li></ul>

image10-39

<ul><li>You should now be redirected to the project screen. If, for some reason, the notification from point 4 didn’t show up, give it a few minutes, reload the page, and select the project from the dropdown from point 1.</li></ul>

image15-41

<h3>Step 3: Create the API Key</h3>Now that your project is set up, you can create the API key. It can be created from multiple locations. <ul><li>If you’re on the project screen from Step 2, you can scroll down a bit to the Getting Started section and look for Explore and Enable APIs.</li></ul>

image8-43

<ul><li>Another way is to click on the menu in the upper left corner to open the left sidebar. In the sidebar, if it’s not pinned by default under PINNED PRODUCTS, look for APIs &amp; Services under MORE PRODUCTS. Hover over it and click on Enabled APIs &amp; services.</li></ul>

image7-45

Either way, you should now be redirected to the APIs screen.

image12-47

From this screen, do the following:<ul><li>Click on + ENABLE APIS AND SERVICES. You should be redirected to the API Library screen.</li></ul>

image5-49

<ul><li>The essential API for adding maps to web pages is the Maps JavaScript API. Click on it. It should redirect you to the Maps JavaScript API screen.</li></ul>

image9-51

<ul><li>Click on ENABLE to enable this API. It will ask you for certain information, like country, etc. After filling all the data, click on AGREE &amp; CONTINUE. Next, it’s going to ask you to provide information about your account type, address, contact info, etc. After filling all the information, click on START FREE. This will ask you for credit card information in order to use the services. Also, you’ll need to verify it’s a legit credit card. Don’t worry, they won’t charge you anything.</li><li>After you complete all the verification steps, go back to the APIs &amp; Services screen. It should look a bit different now. It should show the enabled Maps JavaScript API.</li></ul>

image2-53

<ul><li>Click on the Maps JavaScript API in the table. A modal should appear with some questions about your business, development experience, etc. After you fill those fields, another modal should appear with your API key.</li></ul>

image13-55

<ul><li>We recommend disabling the first option, Enable all Google Maps APIs for this project, in order to select only the ones you want manually. If you want to use all the APIs out of the box, leave this option selected. Make sure to store the API key somewhere so you can refer to it later. Once you stored your key, click on GO TO GOOGLE MAPS PLATFORM.</li><li>A modal should open with restrictions. We recommend selecting HTTP referrers (web sites) option.</li></ul>

image11-57

<ul><li>A modal is going to add another field in which you want to add your website’s URL.</li></ul>That’s it. Your API key is ready. If you didn’t store your API key, don’t worry, you can access it from the Google Maps Platform. On the Google Maps platform, click on Keys &amp; Credentials in the left sidebar and click on SHOW KEY in the table, next to you Maps API Key. A modal is going to open with your key.To quickly access Google Maps Platform, you can try using this link: <a target="_blank" href="https://console.cloud.google.com/google/maps-apis">https://console.cloud.google.com/google/maps-apis</a>

image16-59

<h3>Step 4: Enabling different APIs (e.g. Places API, Geolocation API, etc.)</h3>Enabling different Google Maps APIs is relatively simple. In the Google Maps Platform, click on APIs &amp; Services in the sidebar. From here, look for the APIs you want to enable and click on the ENABLE button in the card’s upper right corner. It’s going to take a few seconds and enable the selected API.

image4-61

<h2>Conclusion</h2>You&#039;ve now successfully created a Google Maps API key and customized it with the necessary features for your project. Remember to monitor your API usage through the Google Cloud Console to keep track of any potential billing issues.

google-maps-1

This guide will walk you through creating a new Google Maps API key and adding specific features like Maps, Places, and Geolocation APIs to it.

How to Setup a New Google Maps API Key

Discover the power of Next.js Image component for image optimization. Learn how it automatically optimizes images, facilitates lazy loading, and serves modern formats, enhancing website performance and responsiveness.

Understanding Next.js Image: The Ultimate Guide for Developers

If you&#039;re familiar with modern web development frameworks, you&#039;ve likely come across Next.js, an open-source React framework developed by Vercel. One notable feature of Next.js is the Image component, a powerful utility for streamlining image optimization in web applications. In this comprehensive guide, we&#039;ll delve deep into the inner workings of Next.js Image, its use cases, misconceptions, limitations, and advantages.<h2>How Next.js Image Works Under the Hood</h2>The primary objective of the Next.js Image component is to facilitate image optimization. It automatically optimizes images as they are requested, implementing inlining images, lazy loading, resizing, and serving modern image formats. These actions can lead to significant performance improvements for your web application.When a user requests an image, the Image component sends a request to the Next.js server. The server then retrieves the original image, performs necessary optimizations, and returns the optimized image to the browser. The server caches the optimized image to serve future requests faster.Here&#039;s a basic example of how to use the Next.js Image component:<pre><code>import Image from &#039;next/image&#039;;

&lt;Image
 src=&quot;/path/to/image.jpg&quot; // Path to your image
 height={500} // Image height
 width={500} // Image width
 alt=&quot;Description of image&quot; // Alt text for accessibility
/&gt;</code></pre><h3>Handling Internal (Local) and External Images</h3>You can use the Next.js Image component to serve both internal and external images. For internal images, you only need to specify the path to the image file as in the above example. However, for external images (those not located in the public directory), you need to specify the domains of these images in the &#039;next.config.js&#039; file:<pre><code>module.exports = {
 images: {
 domains: [&#039;example.com&#039;], // Add the domain here
 },
};</code></pre>After specifying the domains, you can use the external image in the same way as the local ones:<pre><code>&lt;Image
 src=&quot;https://example.com/path/to/image.jpg&quot; // Use the full URL
 height={500}
 width={500}
 alt=&quot;Description of image&quot;
/&gt;</code></pre>

caspar-camille-rubin-89xup-xmyra-unsplash-(1)

<h3>Customizing deviceSizes and imageSizes</h3>The &#039;next.config.js&#039; file also allows you to customize &#039;deviceSizes&#039; and &#039;imageSizes&#039;. &#039;deviceSizes&#039; is used to define the sizes of viewport devices, while &#039;imageSizes&#039; is used to specify sizes of images. By default, Next.js uses five values for &#039;deviceSizes&#039; and &#039;imageSizes&#039;. Modifying these arrays can affect how images are served and rendered, optimizing your application for specific devices or visual layouts.Please note that changing these values affects the image generation process, and unnecessary alterations could lead to inefficiencies. Therefore, only adjust these values if you understand the implications and have a specific need.<h2>Limitations and Misconceptions</h2>While the Next.js Image component offers substantial benefits, it does have certain limitations:<ol><li>Image cropping: The component can resize images, but it does not support cropping. If you need to display only a part of an image, you&#039;ll have to manually crop it before serving.</li><li>Mandatory width and height: The Image component requires the &#039;width&#039; and &#039;height&#039; attributes to be explicitly defined. This requirement is part of how Next.js optimizes image delivery by ensuring the correct size of the image is sent based on the consuming device&#039;s screen resolution. You can&#039;t use the Image component without specifying these attributes. If you try to do so, it&#039;ll lead to an error. However, using the &#039;layout&#039; property set to &#039;fill&#039; or &#039;responsive&#039; allows the image to resize based on its container.</li><li>Server-Side Rendering (SSR) and Static Site Generation (SSG): As of now, the Image component only supports client-side rendering. Images aren&#039;t pre-rendered with SSR or SSG, which might cause some delay in image loading.</li><li>Restricted to Next.js environment: As a part of the Next.js framework, the Image component can&#039;t be used in projects that don&#039;t use Next.js.</li><li>Configuration for External Images: As mentioned earlier, to work with external images, you must add their domains to the &#039;next.config.js&#039; file.</li></ol>In terms of misconceptions:<ol><li>The Next.js Image component is not a drop-in replacement for the HTML &#039;img&#039; tag. Although it provides additional functionalities, you can still use the &#039;img&#039; tag where image optimization is not critical or when you need more control over the image, such as applying specific CSS styles or interactions that the Image component does not support.</li></ol><h2>Advantages of Next.js Image</h2>Despite its limitations, the Next.js Image component offers several compelling advantages:<ol><li>Automatic Optimization: The component optimizes images on-demand, thereby improving website performance and reducing bandwidth usage.</li><li>Responsive Images: By setting the &#039;sizes&#039; property, images can adapt to the screen size and resolution, enhancing your website&#039;s responsiveness.</li><li>Lazy Loading: Images are only loaded when they come into the viewport, which improves initial page load time.</li><li>Modern Formats: The component automatically serves images in modern formats like WebP when the browser supports it, further reducing image sizes.</li></ol>

<h2>Conclusion</h2>In conclusion, the Next.js Image component is a robust tool for optimizing website images. Although it has a few limitations, its advantages significantly outweigh them, especially for performance-focused applications. Armed with this guide, you&#039;re now ready to leverage the power of image optimization in your Next.js applications.We hope you found this article insightful. Please feel free to share your thoughts and experiences with the Next.js Image component in the comments section below. Happy coding!

samantha-borges-gxsj9ywb5as-unsplash-(1)

Master Next.js Image: Your Developer's Guide for Comprehensive Understanding. Dive into Next.js Image Optimization, Implementation, and Best Practices. Elevate Your Web Performance with In-depth Insights Today.

Understanding Next.js Image: The Ultimate Guide for Developers

Matija began his TypeScript journey fueled by curiosity and a keen interest in enhancing his programming expertise. In this blog post, he reflects on his experiences at TypeScript School, focusing on the program&#039;s key aspects that engaged him deeply and the considerable progress he has made in his learning path.

Matija&#039;s Experience at TypeScript School

<h3>The drive to learn more about Typescript</h3>My fascination with TypeScript began when I delved deeper into the world of web development. Seeing the growing popularity of TypeScript and its ability to make the development process more efficient, I was motivated to learn and understand it better. The language&#039;s typing system, combined with its ability to detect errors early, has made TypeScript an excellent tool for any serious developer. My goal was not only to understand the syntax of TypeScript but also to adopt best practices that would increase the efficiency and quality of my coding.

picture1

<h3>A real-world school approach</h3>What set TypeScript School apart was its practical, real-life-oriented curriculum. The tasks were not just theoretical exercises; they were created to reflect the challenges developers face in their daily work. This approach allowed me to apply what I learned in a context that was relevant and enlightening. The real charm of the program lies in its ability to make learning interesting and applicable, providing a bridge between theoretical concepts and real-world applications.

picture2

<h3>Witnessing his progress</h3>As I progressed through the course, I noticed a significant improvement in my coding style and problem-solving abilities. My skill with TypeScript features such as interfaces, generics, and type protectors grew with each assignment. I started writing more efficient, error-free code, which is a very valuable skill in development. A thorough and challenging training program at the school led to a visible improvement in my technical skills.

<h2>Gratitude and Future Aspirations</h2>Looking back on the time I spent at TypeScript School, I can attribute a significant part of my growth to my mentor, Renato. Renato is not only a mentor; he is a great programmer with a lot of experience and knowledge. Each lesson with Renato was not only about learning TypeScript but also about understanding how to think and solve problems like an experienced developer.This mentorship was the cornerstone of my learning experience, and I am truly grateful for it. Looking forward, I&#039;m excited to apply these new skills in my professional projects. With the knowledge and techniques I have acquired, I&#039;m ready to contribute more sophisticated applications to the Simple Code team. My TypeScript journey is just beginning, and I&#039;m curious to see where these skills take me in the future of my development career.

ts-blog-post

The beginning of Matija's journey to deepen his understanding of TypeScript was a decision driven by curiosity and a desire to improve his programming skills.

Matija's Experience at TypeScript School

The beginning of my journey to deepen my understanding of TypeScript was a decision driven by curiosity and a desire to improve my programming skills.

My experience in TypeScript school

In the following story, Urs invites you to join him on this journey—sharing the challenges, victories, and transformative impact of mastering the backend stack.

Learning journey in back-end development

The beginning of his journey in backend wasn&#039;t just a career move; it marked a transformative stage in his development journey. Moving from front-end development - where HTML, CSS, JavaScript, React, Vue.js and Next.js were his playground - Urs took on the challenge of mastering the backend stack. This shift was not just about acquiring new skills; it was a deliberate move to deepen his understanding of the complexities that drive server-side applications. Backend School, an internal initiative created by our company, became the key to this transformation. Tailored to the unique needs of our company, it offered more than the usual learning experience. It was a hands-on exploration of the background technologies that shape the digital landscape.The core of Backend School&#039;s success lies in a carefully designed program. Guiding him from basic concepts to advanced topics, the program ensured that he understood the entire background set step by step. This was not just about learning individual technologies; it was about recognizing the interconnected nature of background development.As Urs reflects on his journey through Backend School, it&#039;s clear that it was no mere educational pursuit; it was dynamic research that set the stage for a profound impact on his professional growth. In the following story, he invites you to join him on this journey—sharing the challenges, victories, and transformative impact of mastering the backend stack.<h3>SQL Mastery: Building Database Solutions</h3>

sql-1701955376

A key aspect of his Backend School journey revolved around mastering SQL, the driving force behind effective database management. This phase of the program pushed him in hands-on exercises and real-world scenarios, providing hands-on experience in building effective databases. As he delved into SQL, he not only learned how to write complex queries, but also gained a deep understanding of data manipulation.The emphasis placed on SQL was not just about acquiring technical skills; it was about cultivating the ability to design databases that could seamlessly handle the demands of back-end applications. This mastery of SQL has become a cornerstone of my backend development toolkit, empowering him to create robust and scalable data management solutions — an indispensable skill in the dynamic landscape of modern software development.<h3>PHP: Dynamic Scripting Language</h3>

ben-griffiths-bj6enzdmsdy-unsplash

In the area of ​​backend development, PHP emerged as a central focus during his time at Backend School. This versatile scripting language, known for its efficiency in web development, has become the cornerstone of his skills. The course took a deep dive into PHP, taking him through its basic syntax to the intricacies of advanced features.The comprehensive coverage of PHP in the curriculum was not limited to theoretical discussions; it was practical research. Practical tasks formed a key part of the learning process, allowing him to translate newly acquired knowledge into tangible skills. Through these assignments, Urs honed his ability to write dynamic server-side scripts, delved into the principles of object-oriented programming in PHP, and gained skill in constructing logical frameworks that support robust server-side applications.This immersion in PHP went beyond mere knowledge of the language; it equipped him with the tools needed to design dynamic and responsive server-side solutions, reinforcing the practical orientation of the Backend School.<h3>Introducing Laravel: A Framework for Modern Development</h3>

laravel-1701955485

Progressing through the Backend School curriculum, the framework that took center stage was Laravel — a PHP web framework known for its elegant syntax and developer-centric features. The course precisely exposed the core concepts of Laravel, immersing him in key aspects such as Eloquent ORM, routing strategies, middleware, and various templating mechanisms.What set this research apart was the emphasis on practical application. By getting involved in practical projects, he not only gained theoretical knowledge, but also translated it into tangible results. These projects served as a testing ground for building robust web applications, implementing industry best practices, and leveraging the full potential of Laravel&#039;s feature-rich ecosystem.In essence, this phase of the journey not only demystified Laravel, but also empowered him to operate it as a versatile tool for building modern, efficient and scalable web solutions. The combination of theoretical understanding with practical projects marked a key moment in my expertise as a backend developer.<h3>Practical application and real-world project: Bridging theory and practice</h3>Backend School&#039;s unique approach stood out for its emphasis on practical application, providing a distinct advantage to my learning journey. The theoretical foundations laid in SQL, PHP and Laravel were not limited to the classroom; instead, they transitioned seamlessly into hands-on experience through a real-world project.This key project served as a bridge between theoretical understanding and practical implementation, offering insight into the challenges facing real-world backend development scenarios. By working on this project, he applied his newly acquired knowledge to solve tangible problems, gaining valuable insights and honing the skills necessary for professional success in the dynamic field of backend development.<h3>In-house mentors: nurturing growth through personal guidance</h3>One of the invaluable aspects of the Backend School experience was the direct access to experienced mentors within your own company. The in-house nature of the program not only allowed for a strong sense of camaraderie, but also provided a unique opportunity for personalized guidance. Among these mentors, our team leader and senior software developer, Bruno, emerged as a key figure in his learning journey.Bruno, a professional in backend development, brings a wealth of industry experience. His role expanded beyond that of a conventional instructor; he became a mentor who was truly invested in development. Regular interaction with Bruno went beyond the classroom as he generously shared real-world insights, practical advice and anecdotes from his professional journey. This personalized mentorship has played a key role in bridging the gap between theoretical knowledge and its practical application in the dynamic field of background development.In the collaborative sessions, Bruno fostered an environment where questions were encouraged, challenges were solved through collective problem solving, and every milestone achieved was celebrated as a team. This mentorship not only improved technical skills, but also instilled a sense of confidence and resilience in facing complex challenges in the background. As Urs and Bruno navigated the intricacies of SQL, PHP and Laravel, Bruno as a guide added a layer of depth to this learning experience, not only about mastering the technologies, but also about imbibing the ethos of effective collaboration and continuous learning.<h3>Backend development moves forward: A constant journey of growth</h3>

backend-ice

As he delved into the intricacies of backend development during his time at Backend School, it became clear that this learning journey is not a final experience, but rather the beginning of a continuous process of growth and evolution. Armed with a solid foundation in SQL, PHP, and Laravel, he was equipped to explore the ever-expanding backend technology landscape.Moving forward, he am enthusiastic about staying up to date with the latest industry trends, new technologies and best practices. The dynamic nature of backend development calls for a mindset of constant learning. Whether it&#039;s adopting new frameworks, optimizing database performance, or mastering advanced features in Laravel, the journey ahead promises plenty of opportunities to improve his skills and contribute innovative solutions to the world of web development. With a commitment to remain curious and embrace challenges, he looks forward to the exciting advances and discoveries that the field of background development brings us.

<h2>Conclusion</h2>Urs&#039;s experience at Backend School went beyond conventional learning. It was a journey that equipped him with an extensive skill set, from mastering SQL and PHP to harnessing the power of Laravel. The in-house approach managed by the company provided a unique learning environment, combining theoretical knowledge with practical application. Armed with this foundation, he ventured further into the world of Laravel development, setting the stage for a fulfilling career in backend technologies.

backend

I invite you to join me on this journey - sharing the transformative impact of mastering the backend stack.

My learning journey in back-end development

Learning journey in back-end development

By definition, regex, which is short for regular expression, is a sequence of symbols and characters expressing a string or pattern to be searched for within a longer piece of text.

WTF is a Regex?

<h3>Where or when would I use a regex?</h3>Regular expressions are usually used when you want to check if a string matches a certain pattern. For example, you could use a regex to check if a string is a valid email address, if a username has unallowed characters, get all the words starting with a specific letter, etc.<h3>How exactly does regex work?</h3>As the definition says, regex is a pattern that you want to test against. Let’s say you want to check if a string is a valid email. You probably know that, in a broad sense, email has to have a word with a possibility of some special characters, followed by an @ (monkey), a word again, a . (dot) and a word again. This “description” would be written with a regex.<h3>How do you define a regex in JavaScript?</h3>In JavaScript, regex is defined with two / (slash) symbols, at the beginning and at the end of a regex. Another way is to use a RegExp constructor and pass a regex to it as a string. Throughout this article, we will use JavaScript / notation.<h3>Does each character represent itself?</h3>Each (non special) character represents itself. That means that letters a and B represent themselves, number 9 represents itself, etc.<table><tbody><tr><th rowspan="1" colspan="1">🔮 Regex</th><th rowspan="1" colspan="1">✅ Match</th><th rowspan="1" colspan="1">⛔️ No Match</th></tr><tr><td rowspan="1" colspan="1">/dog/</td><td rowspan="1" colspan="1">dog</td><td rowspan="1" colspan="1">Dog, dOg, cat, …</td></tr><tr><td rowspan="1" colspan="1">/high5/</td><td rowspan="1" colspan="1">high5</td><td rowspan="1" colspan="1">High5, high 5, highfive, …</td></tr></tbody></table>Special characters and flags extend regex abilities and they are what make regexes such a powerful tool.<h3>Square brackets ([])</h3>Square brackets represent a character set, and are used to match a single character or a range of characters that can be in that particular place. Range of characters can be either a range of letters (lowercase or uppercase) and a range of numbers. Range is denoted with the - (dash).Note: [] escapes most of the special characters i.e. they are treated as a normal character.<table><tbody><tr><th rowspan="1" colspan="1">🔮 Regex</th><th rowspan="1" colspan="1">✅ Match</th><th rowspan="1" colspan="1">⛔️ No Match</th></tr><tr><td rowspan="1" colspan="1">/[a1]/</td><td rowspan="1" colspan="1">a, 1</td><td rowspan="1" colspan="1">a1, b, c, …</td></tr><tr><td rowspan="1" colspan="1">/[ab][12]/</td><td rowspan="1" colspan="1">a1, a2, b1, b2</td><td rowspan="1" colspan="1">1a, 2b, ab, 12, …</td></tr><tr><td rowspan="1" colspan="1">/[a-zA-F][0-9]/</td><td rowspan="1" colspan="1">a0, F1, z9, …</td><td rowspan="1" colspan="1">z, 0, 9A, Z0, …</td></tr></tbody></table>Pattern in square brackets can be prefixed with the ^ (circumflex) symbol. It works like a NOT operator and means match any character, except the ones in the pattern.<table><tbody><tr><th rowspan="1" colspan="1">🔮 Regex</th><th rowspan="1" colspan="1">✅ Match</th><th rowspan="1" colspan="1">⛔️ No Match</th></tr><tr><td rowspan="1" colspan="1">/[^a]/</td><td rowspan="1" colspan="1">#, B, 0, q, …</td><td rowspan="1" colspan="1">a</td></tr><tr><td rowspan="1" colspan="1">/[^0-9][0-9]/</td><td rowspan="1" colspan="1">C4, !1, a5, …</td><td rowspan="1" colspan="1">01, 1a, 25, …</td></tr></tbody></table><h3>Dot (.)</h3>Dot is used to match any character (except new line, but can be changed with a flag).<table><tbody><tr><th rowspan="1" colspan="1">🔮 Regex</th><th rowspan="1" colspan="1">✅ Match</th><th rowspan="1" colspan="1">⛔️ No Match</th></tr><tr><td rowspan="1" colspan="1">.</td><td rowspan="1" colspan="1">a, %, ., \, …</td><td rowspan="1" colspan="1">N/A</td></tr><tr><td rowspan="1" colspan="1">..</td><td rowspan="1" colspan="1">xx, Y#, 12, …</td><td rowspan="1" colspan="1">N/A</td></tr><tr><td rowspan="1" colspan="1">[A-Z].[0-9]</td><td rowspan="1" colspan="1">A%0, Zz9, CC0, …</td><td rowspan="1" colspan="1">000, zz9, ###, …</td></tr><tr><td rowspan="1" colspan="1">[.].[^.]</td><td rowspan="1" colspan="1">.ab, .#c, .a2, …</td><td rowspan="1" colspan="1">abc, ..., ab., …</td></tr></tbody></table><h3>Pipe (|)</h3>Pipe is used as an OR (alternation) operator i.e. match either left or right side.<table><tbody><tr><th rowspan="1" colspan="1">🔮 Regex</th><th rowspan="1" colspan="1">✅ Match</th><th rowspan="1" colspan="1">⛔️ No Match</th></tr><tr><td rowspan="1" colspan="1">/a\|b/</td><td rowspan="1" colspan="1">a, b</td><td rowspan="1" colspan="1">c, 1, …</td></tr><tr><td rowspan="1" colspan="1">/john\|mike\|dex/</td><td rowspan="1" colspan="1">john, mike, dex</td><td rowspan="1" colspan="1">michael, jesse, 123, j, …</td></tr><tr><td rowspan="1" colspan="1">/[0-9]a\|b/</td><td rowspan="1" colspan="1">b, 1a, 9a, …</td><td rowspan="1" colspan="1">a, 0b, …</td></tr></tbody></table><h3>Plus (+), asterisk (*), curly brackets ({}), question mark (?)</h3>Plus, asterisk, curly brackets and the question mark are part of the special character set called quantifiers. They indicate that a certain character (or a range of characters) must be matched a certain number of times. They are greedy, and will always try to match as much as possible.+ matches 1 or more characters.* matches 0 or more characters.{} match the specified quantity. For example, {2,5} will match between 2 and 5 characters, {6} will match exactly 6, {4,} will match 4 or more.? matches 0 or 1 character. However, since quantifiers are greedy, if used with other quantifiers, it will behave like a lazy operator, meaning that the preceding quantifier will match as few characters as possible.<table><tbody><tr><th rowspan="1" colspan="1">🔮 Regex</th><th rowspan="1" colspan="1">✅ Match</th><th rowspan="1" colspan="1">⛔️ No Match</th></tr><tr><td rowspan="1" colspan="1">/do+dle/</td><td rowspan="1" colspan="1">dodle, doodle, dooodle, …</td><td rowspan="1" colspan="1">ddle, …</td></tr><tr><td rowspan="1" colspan="1">/[0-9]{3}-[0-9]{4}/</td><td rowspan="1" colspan="1">123-4567, 666-6666, …</td><td rowspan="1" colspan="1">1-2, 1111-234, …</td></tr><tr><td rowspan="1" colspan="1">/https?/</td><td rowspan="1" colspan="1">http, https</td><td rowspan="1" colspan="1">anything else</td></tr></tbody></table>

regex-(1)

<h3>Parentheses (())</h3>Parentheses are used for capturing groups. They group multiple parts of an expression together and create a capture group for extracting a substring. Each group can be later accessed as a separate entity.In order to exclude certain group i.e. group multiple parts of an expression without creating a capture group, group can be prefixed with ?: (non-capturing group).<table><tbody><tr><th rowspan="1" colspan="1">🔮 Regex</th><th rowspan="1" colspan="1">✅ Match</th><th rowspan="1" colspan="1">🧩 Group 1</th><th rowspan="1" colspan="1">🧩 Group 2</th></tr><tr><td rowspan="1" colspan="1">/(ab)c/</td><td rowspan="1" colspan="1">abc</td><td rowspan="1" colspan="1">ab</td><td rowspan="1" colspan="1">N/A</td></tr><tr><td rowspan="1" colspan="1">/([0-9])([a-z])/</td><td rowspan="1" colspan="1">1c, 2b, …</td><td rowspan="1" colspan="1">1, 2, …</td><td rowspan="1" colspan="1">c, b, …</td></tr><tr><td rowspan="1" colspan="1">/(?:[0-9])([a-z])/</td><td rowspan="1" colspan="1">1c, 2b, …</td><td rowspan="1" colspan="1">c, b, …</td><td rowspan="1" colspan="1">N/A</td></tr></tbody></table><h3>Word (\w), digit (\d) and whitespace (\s)</h3>Regular expressions become really complex really fast, even when the logic is relatively simple. That’s why there are special characters that are kind of abbreviations for character sets.\w will match any word character. That includes letters, numbers and underscores. An alternative expression is /[A-Za-z0-9_]/. Its negative counterpart is \W and will match any non-word character.\d will match any number character. An alternative expression is /[0-9]/ and its negative counterpart is \D.\s will match any whitespace character, including spaces, tabs and line breaks. Its negative counterpart is \S.<table><tbody><tr><th rowspan="1" colspan="1">🔮 Regex</th><th rowspan="1" colspan="1">✅ Match</th><th rowspan="1" colspan="1">⛔️ No Match</th></tr><tr><td rowspan="1" colspan="1">/\w/</td><td rowspan="1" colspan="1">a, 0, _, …</td><td rowspan="1" colspan="1">#, -, …</td></tr><tr><td rowspan="1" colspan="1">/[A-Z]\w+/</td><td rowspan="1" colspan="1">Regex, Wo_rd, Alph4</td><td rowspan="1" colspan="1">test, 4lpha, 123, …</td></tr><tr><td rowspan="1" colspan="1">/\d{3,}/</td><td rowspan="1" colspan="1">123, 1443, 11221, …</td><td rowspan="1" colspan="1">2, 31, …</td></tr></tbody></table><h3>Word boundary (\b)</h3>Word boundary matches a position between a word (\w) and a non-word character or position (start and end of string included). For example, expression /y\b/ for the string yay yoy will match only (circled) (y) positions: ya(y) yo(y). Its negative counterpart is \B, and, for the same example, would match (y)ay (y)oy positions.<h3>Beginning and end anchors (^ and $)</h3>Beginning and end anchors, as they name suggest, match the beginning and the end of a string.<table><tbody><tr><th rowspan="1" colspan="1">🔮 Regex</th><th rowspan="1" colspan="1">📄 String</th><th rowspan="1" colspan="1">✅ Match</th></tr><tr><td rowspan="1" colspan="1">/^\w+/</td><td rowspan="1" colspan="1">hello world</td><td rowspan="1" colspan="1">hello</td></tr><tr><td rowspan="1" colspan="1">/\d+$/</td><td rowspan="1" colspan="1">123 hello high5</td><td rowspan="1" colspan="1">5</td></tr></tbody></table><h3>Backslash (\)</h3>Backslash is used to escape any special character in order to match the literal character it stands for.<table><tbody><tr><th rowspan="1" colspan="1">🔮 Regex</th><th rowspan="1" colspan="1">✅ Match</th><th rowspan="1" colspan="1">⛔️ No Match</th></tr><tr><td rowspan="1" colspan="1">/\[a-z\]/</td><td rowspan="1" colspan="1">[a-z]</td><td rowspan="1" colspan="1">c, e, …</td></tr><tr><td rowspan="1" colspan="1">/wow\$$/</td><td rowspan="1" colspan="1">wow$</td><td rowspan="1" colspan="1">wow, wow$w, …</td></tr></tbody></table><h3>Flags (i, g, m, s)</h3>Flags are special attributes that are applied to a whole expression. In JavaScript, they are added at the end, after the second forward slash (/).i (ignore case) makes the whole expression case-insensitive. That means that, for example, /[a-z]/i will also match uppercase letters.g (global) returns all matches i.e. doesn’t stop after the first match. It’s typically used when one needs to find and/or replace all occurrences.m (multiline) makes beginning and end anchors (^ and $) match the start and end of line, instead of the start and end of the whole string.s (dotall) makes dot (.) match newline character as well.<h3>JavaScript and Regex</h3>There are two ways of creating a regex in JavaScript.The first one is using a literal syntax:<pre><code>const regex = /\d+\w+/i;</code></pre>The second one is using RegExp constructor:<pre><code>const regex = new RegExp(&#039;\d+\w+&#039;, &#039;i&#039;);</code></pre>Note: Since ES6, RegExp constructor accepts regex literals as well.<h3>Example: Check if valid username is provided</h3>We need to check if the user provided a valid username. Username is valid if it’s between 4 and 15 characters long and it contains only letters, numbers, dashes or underscores.Let’s construct the regex first. Since we want to check if the entire string is a valid username, we’ll add ^ and $ to match the start and end of the string. Next, we’ll use \w to match letters and underscores, \d to match digits and - to match exactly that - a dash. We’ll also add {4,15} quantifiers to limit the username validity between 4 and 15 characters.<pre><code>function isUsernameValid(username) {
  const regex = /^[\w\d-]{4,15}$/;
  return regex.test(username);
}
console.log(isUsernameValid(&#039;john_Doe&#039;)); // true
console.log(isUsernameValid(&#039;@mike&#039;)); // false</code></pre><h3>Example: Extract class names from an HTML string</h3>Let’s say we have an HTML string like this:<pre><code>&lt;div class=&quot;wrapper grid&quot;&gt;
  &lt;div class=&quot;column column-left&quot; data-type=&quot;large&quot;&gt;
    &lt;h1 class=&quot;title&quot;&gt;Hello World!&lt;/h1&gt;
  &lt;/div&gt;
  &lt;div class=&quot;column column-right&quot;&gt;
    &lt;p&gt;Lorem ipsum dolor sit amet.&lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>We want a function that will return an array of unique class names:<pre><code>[&#039;wrapper&#039;, &#039;grid&#039;, &#039;column&#039;, &#039;column-left&#039;, &#039;title&#039;, &#039;column-right&#039;]</code></pre>Let’s first write a regex that will help us get all class values. When we look at the HTML code, we can see that classes are declared using a class attribute. class keyword is followed by = (equal) sign and then the classes are declared between quotes. At the first glance, you might be tempted to write something like this:<pre><code>/class=&quot;(.+)&quot;/g</code></pre>If you only had HTML with class attributes only, this would technically be correct. However, if you tried to execute this, you would see that the second match would return:<pre><code>column column-left&quot; data-type=&quot;large</code></pre>Why? Because regex said “match anything between two quotes”, and it did, but not between the quotes you wanted. :) When writing regexes, whenever you can, try to be as explicit as possible. Let’s fix this by saying “match anything except a double quote symbol”:<pre><code>/class=&quot;([^&quot;]+)&quot;/g</code></pre>In order to iterate through matches and capture groups, we need to use .exec() method on the string. If a match is found, .exec() returns an array, where the first item is a full match, and next n items are the capturing groups.<pre><code>function getClassNames(html) {
  const regex = /class=&quot;([^&quot;]+)&quot;/g;
  const classes = [];
  let match;
  while((match = regex.exec(html)) !== null) {
    const className = match[1];
    const unique = className.trim()
      .split(/\s+/)
      .filter(c =&gt; !classes.includes(c));
    classes.push(...unique);
  }
  return classes;
}</code></pre>

<h2>Pro-tip by the author</h2>When writing a regex, always start by writing out several cases that should be matched, and several that shouldn’t. That way, you have a better overview of the logic and will be able to cover more edge cases. Also, as always - practice makes perfect!

web-(1)

Demystifying Regex (Regular Expressions): Unveiling the Power of Pattern Matching. Explore the Definition, Applications, and Benefits of Regex. Master Text Manipulation and Data Validation with Our Guide.

WTF is a Regex

WTF is a Regex?

In this article, we compare WordPress, TYPO3, and Craft CMS - platforms that allow you to manage and customize your website. We help you decide which CMS is the most suitable for your business and use case.

WordPress vs TYPO3 vs Craft CMS

<img src="https://cdn.simple-code.agency/articles/pexels-eye4dtail-134402-2.jpg" alt="Three wise monkeys pictorial maxin">WordPress, TYPO3, and Craft are Content Management Systems(CMS). CMS helps you create manage, and organize content on your website, allowing you to easily add, edit, and delete text, images, videos, and other elements on your website. With a CMS you don’t have to manually code each webpage or update content directly in the website’s code. Instead, you use a simple dashboard or editor to make changes, and the CMS takes care of the rest, automatically updating your site’s design and layout. CMS platforms come with various features and functionalities that offer flexibility and different website needs.<h3>Overview</h3>WordPressWordPress is an open-source, user-friendly CMS made for blogging. WordPress boasts a simple and intuitive interface, making it accessible to users with limited technical expertise. It offers an extensive library of themes and plugins, allowing users to customize their websites without the need for extensive coding knowledge.TYPO3TYPO3 is an enterprise-level CMS known for its robustness, scalability, and flexibility. It provides a comprehensive set of features, making it suitable for large-scale websites and complex web applications. TYPO3 offers advanced content management capabilities, including powerful workflow management, sophisticated access control, and multilingual support. It is highly customizable, allowing developers to create tailored solutions for specific business requirements. It’s built for more experienced users with coding expertise.CraftCraft emerged as a solution that was intended from the start to be an advanced and flexible content management system (CMS), a popular alternative to WordPress. The system is built on a foundation in the form of a PHP framework called Yii, mostly focused on technically experienced users because it comes without themes or blocks.<h3>Ease of Use</h3>Looking from a technical perspective WordPress was designed with beginners in mind, earning it a reputation for user-friendliness over the years. Users don’t need coding knowledge or previous experience to create a website. It offers a simple easy-to-use interface, an intuitive content management system with a block-based editor, and an extensive theme &amp; plugin library. Due to its popularity, it has very large community support. <img src="https://cdn.simple-code.agency/articles/image1-31.png" alt="WordPress sidebar">TYPO3 on the other hand has a steeper learning curve because out of the box it comes with more features and advanced functionalities. User interface is much more complex, so you may need some technical expertise to navigate efficiently. It also comes with an intuitive content management system that uses a block-based editor.<img src="https://cdn.simple-code.agency/articles/image2-33.png" alt="TYPO3 sidebar">CraftCMS like TYPO3 isn’t tailored for users with no programming experience. It offers a relatively straightforward learning curve, with an intuitive interface for content creators. Developers may need some familiarity with its structure for optimal usage because it comes without themes and with a very simple editor that offers almost no blocks.<img src="https://cdn.simple-code.agency/articles/image3-35.png" alt="Craft CMS sidebar"><h3>Themes &amp; templates</h3>Themes &amp; templates offer the visual appearance and functionality of a website. By changing the theme user can easily update the appearance of the content. Both TYPO3 and WordPress come with preinstalled themes, unlike Craft which after installation comes without any themes or templates so users need some programming experience to build their themes. WordPress by default doesn’t use any templating engine, just a mixture of HTML and PHP code. <img src="https://cdn.simple-code.agency/articles/image4-37.png" alt="WordPress code example">(WordPress template)Craft comes with Twig templating language mainly for PHP while TYPO3 uses a Fluid Template Engine.<img src="https://cdn.simple-code.agency/articles/image5-39.png" alt="Craft twig code example">(Craft Twig)

image6-41

(Typo3 Fluid)WordPress due to its popularity has a very large collection of free and premium themes and predesigned templates that come with different customization options. Just looking at theme forest there are more than 10000 offered themes and templates. TYPO3 also offers a wide range of templates, but the selection may not be as extensive as WordPress due to not being that popular.Users with some programming knowledge can extend base themes by creating child themes. This feature can be done both in WordPress and TYPO3.<h2>Editor experience</h2>Through the page editor users can manage content, and add different blocks, elements, and lists to build the visual appearance of the page. WordPress uses a Gutenberg block editor that offers a full-page editing experience with a very modern UI. WordPress initially comes with over 40 blocks that have a wide variety of options and settings. Blocks can simply be dragged and dropped anywhere in the editor, and some blocks can be nested. It also provides block patterns that are predefined combinations of blocks. For more experienced users with the ACF plugin (Advanced custom fields), it is easy to extend blocks or create new ones. <img src="https://cdn.simple-code.agency/articles/image7-43.png" alt="WordPress Gutenberg block editor">

<img src="https://cdn.simple-code.agency/articles/image8-45.png" alt="WordPress Patterns example">Craft out of the box comes with simpler UI, and no blocks, just field types. So users need to have programming skills to build blocks that will in the end be used in the editor. Craft offers matrix fields to easily build flexible pages by creating a collection of block types inside each matrix field. <img src="https://cdn.simple-code.agency/articles/image9-47.png" alt="Craft adding a new entry example">

<img src="https://cdn.simple-code.agency/articles/image10-49.png" alt="Craft Block Types example">In TYPO3 blocks are called content elements that are divided into few groups, like Wordpress comes with few of them out of the box. Editor has a simple UI, editing is a bit different then with Wordress and Craft because each block editing has its own page. Blocks also offer lots of customization options, so programming skills are a must like in Craft when it comes to editing and block creation.<img src="https://cdn.simple-code.agency/articles/image11-51.png" alt="Typo 3 content elements/blocks">

<img src="https://cdn.simple-code.agency/articles/image13-55-1713533187.png" alt="TYPO3 creating a new content element/block example"><h2>Plugins</h2>Plugins/extensions are used to extend or add new functionality to CMS, ranging from simple solutions to more advanced ones. WordPress has an extensive plugin repository that offers more than 60000 plugins, free or premium ones. So, the big advantage is in this massive collection where you can find almost any functionality that you need, but also this is a drawback. Plugin code doesn’t have that strict quality control so they may degrade performance, often plugins become abandoned or don’t have regular updates which may cause site crashes or security vulnerabilities.<img src="https://cdn.simple-code.agency/articles/image14-57.png" alt="WordPress plugins">

<img src="https://cdn.simple-code.agency/articles/image15-59.png" alt="WordPress Plugins">Craft also has a built-in repository, but the number is much smaller compared to WordPress due to its popularity. With a smaller repository code quality should be better, and regularly updated, and plugins can be installed and tested before purchase. The disadvantage of a much smaller plugin repository is that you are more likely to have to write the needed functionality yourself.<img src="https://cdn.simple-code.agency/articles/image16-61.png" alt="Craft CMS Plugin Store">Typo3 plugins are called extensions, it has about 1000 extensions in its repository. Like with Craft, its smaller repository is an advantage. Extensions have better code quality and higher standards.<img src="https://cdn.simple-code.agency/articles/image17-63.png" alt="TYPO3 Extensions"><h2>E-commerce</h2>WordPress, Craft, and Typo3 offer e-commerce solutions. WordPress does so through a very popular free plugin called WooCommerce, Craft CMS has an e-commerce product called Craft Commerce and Typo3 has an e-commerce extension called Aimeos shop. Unlike Craft and Typo3 which only offer a single solution WordPress as the most popular CMS has multiple e-commerce solutions but most of them are paid premium.

<h2>Conclusion</h2>Each CMS has unique strengths and serves different purposes, meeting different user needs:WordPress: This CMS shines in its affordability and broad feature set, making it ideal for smaller businesses, blogs, or informational websites that require minimal technical expertise. An extensive library of plugins and themes allows for significant customization, but users should be wary of compatibility and quality issues when integrating third-party plugins.TYPO3: Known for its robustness and flexibility, TYPO3 is tailored for enterprise-level projects. It is suitable for large corporations and organizations that need secure, scalable solutions with advanced workflow management. However, the steeper learning curve and complex features require technical expertise to use effectively.Craft CMS: Built for tech-savvy users, Craft CMS is designed for projects that require complete control over content and appearance. It is suitable for creative agencies or companies with unique branding needs. The simplified architecture facilitates sophisticated customization but requires advanced programming skills.

Still not sure which CMS is suitable for your business and need help? Book a no-obligation discovery call and let&#039;s find the perfect solution.

cta-logo

pexels-eye4dtail-134402-2

CMS helps you create, manage, and organize content on your website, allowing you to easily add, edit, and delete different elements on your website.

WordPress vs TYPO3 vs Craft CMS

CMS helps you create, manage, and organize content on your website, allowing you to easily add, edit, and delete text, images, videos, and other elements on your website.

In the digital age, images are not just embellishments on your website; they are crucial components that can significantly impact your site&#039;s performance, user experience, and search engine visibility. A well-optimized image can enhance the aesthetic appeal of your website, reduce load times, and improve your search engine rankings. This comprehensive guide will combine insights from leading sources and our expertise to help you master image optimization for your website.

The Ultimate Guide to Optimizing Images for Your Website

aspect-ratio

<h3>Understanding Image Optimization</h3>Image optimization involves modifying images to reduce their file size without compromising quality, ensuring they load quickly and look great across all devices. It also includes making your images discoverable by search engines through proper naming and tagging. Optimizing your images can lead to faster page load times, improved user experience, and increased organic traffic.<h3>Choosing the Right Aspect Ratio and Image Format</h3>Aspect RatioThe aspect ratio, the ratio of an image&#039;s width to its height, is pivotal in ensuring your images fit perfectly within your site&#039;s design without looking stretched or compressed. Choose an aspect ratio that complements the content and layout of your website, whether it&#039;s for product photos, banners, or blog post images.The appropriate aspect ratio to use differs from purpose to device to platform, However, there are commonly utilized aspect ratios that are a constant standard web designers, photographers and developers.Aspect ratios are written out as a formula of width to height, such as 4:3. Same aspect ratios for two images doesn&#039;t mean those images would be the same size. For example, a 1:1 ratio would mean the width and height of the image are the same. Image&#039;s dimensions can be 320x320 pixels or 1080x1080 pixels, but the aspect ratio will remain 1:1. As another example, an image could be 1920x1080 pixels or 1280x720 pixels, but noth have a widescreen 16:9 aspect ratio in common.For website images the most common aspect ratios are 1:1, 4:3 and 16:9.1:1 ratioImages with this ratio have equal width and height and are squares. 1:1 aspect ratio is commonly used on social media sites, like Instagram photos. In terms of pixels, example dimensions would be 1080x10980.4:3 ratioA 4:3 ratio creates a rectangular shape that&#039;s common on some computer monitors and television displays. In terms of pixels, example dimensions would be 800x600.16:9 ratioThis aspect ratio features panoramic size making it perfect for TV, cinema, and computer screens. You&#039;ll also spot its elongated rectangular shape in presentation slides, widescreen television, computer monitors. Most smartphones record video at 1920x1080 pixels, which is 16&quot;9 aspect ratio. In terms of pixels, example dimensions would be 1920x1080.In order to make content fit a variety of mediums, having an easy-to-use aspect ratio calculator on hand is important. These calculators can help you calculate aspect ratios and pixel dimensions when handing off content for your website:<ul><li><a target="_blank" href="https://wistia.com/aspect-ratio-calculator">Wistia</a></li><li><a target="_blank" href="http://toolstud.io">Toolstud.io</a></li><li><a target="_blank" href="https://imageresizer.com/">Image Resizer</a></li></ul>Image Formats and When to Use Them<ul><li>JPEG: Ideal for most websites content, such as photographs and images with gradients. JPEGs offer a good balance between quality and file size. They can be compressed by almost 80% when you use compression tools. Although JPEGs do not support transparency, so you&#039;ll need to pick PNG instead.</li><li>PNG: Best for images requiring transparency or cut out figures, icons and profile images. PNGs provide high-quality images but can have larger file sizes. You can always use the PNG format for icons, but there&#039;s a better format as you want them to stay crisp at any size.</li><li>WebP: A modern format that offers superior compression and quality characteristics compared to PNG and JPEG. WebP is suitable for all types of images and supports transparency.</li><li>SVG: Use for logos, icons, and illustrations. SVG files are vector-based, so they can scale without losing quality and usually have smaller file sizes. With SVG, some amazing on-page animation using code can be done, and they are so light that there won&#039;t even be any changes towards your site performance.</li></ul><h3>Scaling and Compressing Images</h3>Scaling Images to the Correct ResolutionScaling images to the appropriate resolution is crucial. Use image dimensions based on the maximum display size on your site and consider different devices and screen sizes. Retina displays require images to be at least double the standard resolution for crisp display.

scaling-images

<h3>Compressing Images</h3>Compressing images reduces file size, which in turn improves your website’s loading time. Use tools for PNG and JPEG files, which intelligently compress images without significant quality loss. Always aim to strike a balance between file size and image quality.Among the image compression tools there are a few browser-based tools, like <a target="_blank" href="https://tinypng.com/">TinyPNG.</a> <a target="_blank" href="https://tinypng.com/">TinyPNG</a> optimizes images reducing the file size by decreasing the number of colors used. But don’t worry, It will positively affect your website in a way that the human eye won’t notice. Consider using this free and quick tool for PNGs and JPEGs.If you’re more into apps, there’s a selection of them for different operating systems.<a target="_blank" href="https://imageoptim.com/mac">ImageOptim</a> for Mac compresses images by removing unnecessary embedded metadata. This data, often an artifact of an editing process, bloats the file’s size and slows down your site. Consider using this free app for JPEGs, SVGs and PNGs as well.<a target="_blank" href="https://riot-optimizer.com/">RIOT</a> for Windows reduces image file size using multiple techniques. For example, it visually reduces the number of unique colors for PNG images, removes unsupported metadata and lets you decide whether you want to keep metadata in general or not. Automatic optimization comes in handy selecting the most suitable format and parameters for you, which is a great option for those who are only starting their optimization journey.And last but not least, <a target="_blank" href="https://www.jpegmini.com/">JPEGmini</a> is a powerful paid option that helps you reduce file size by analyzing the input image with a quality detector which imitates the human visual system. You can choose between desktop app and plugins that can be integrated with Photoshop, Lightroom and Capture one. JPEGmini does not alter the quality of your images and they will look exactly the same after optimization.Now, when it comes to WordPress sites there are plenty of image optimization plugins that will compress and resize your images when you upload to your WordPress site. This means the end-users and content creators would be able to keep speed and performance of the site skipping those manual optimization steps.You should already be familiar with TinyPNG, but did you know it is <a target="_blank" href="https://wordpress.org/plugins/tiny-compress-images/">a wordpress plugin</a> too?If you’re a fan of the browser-based tool, streamline the process of optimizing JPEGs and PNGs on upload with this plugin. Being uploaded to TinyPNG or TinyJPG services, an optimal optimization strategy is chosen based on the content of your image. On average JPEGs are compressed by 40-60% and PNGs by 50-80% without visible loss of quality. It can happen that optimization should be performed on existing images too, and <a target="_blank" href="http://kracken.io">Kracken.io</a> is the one capable of optimizing both new and existing images on your WordPress site.Consider using Kracken.io for JPEGs and PNGs with file size not more than 32 MB. The plugin replaces the image files with the optimized ones, so they’re staying on your end even if the plugin was uninstalled. Along with existing and  newly uploaded images any generated thumbnails are optimized too.Another plugin option would be <a target="_blank" href="https://wordpress.org/plugins/imagify/">Imagify</a>. Images will be automatically optimized at the best compression level, leaving you the possibility to restore them to the original version. In case you have many images to optimize, you can resize them in bulk with async bulk optimization option. For high-quality images, Imagify has a setting that allows you to choose a maximum width for all of your images. With this setting applied, uploading images larger than that size won’t cause any issues since the plugin will do a resize during optimization.<h3>Enhancing SEO with Proper Naming and Alt Tags</h3>Naming your image files descriptively and using alt tags not only improves SEO but also accessibility. Include relevant keywords in both your file names and alt tags to make your images more discoverable by search engines and assistive technologies.<ul><li>File Names: Describe what the image is, using dashes to separate words (e.g., red-sports-car.jpg). Using a relevant filename, you’ll give your images a better chance to rank in Google Image Search because Google has extra content to describe the image.</li><li>Alt Tags: Provide a concise description of the image for those who cannot see them and include relevant keywords (e.g., alt=&quot;Red sports car accelerating on track&quot;).</li></ul>The right image name helps search engines understand the content and context of your visuals. There are things to aim and avoid in naming which are the following:Avoid irrelevant filenames, help search engines and users make sense of your images.  Use descriptive and relevant names that accurately depict the content of the image, make sure it provides a clear idea of what the image is about.Good examples of image file names:<ul><li>snowy-mountain.jpeg</li><li>company-logo.svg</li><li>strategy-whiteboard.jpg</li><li>main-office.jpeg</li></ul>Bad examples of image file names:<ul><li>DCS_0645.jpg</li><li>photo0001.jpg</li><li>Img_1542.jpg</li><li>IMG_489E9666EAAB-1.jpeg</li></ul>Carefully include targeted keywords in the image filename. Targeted keywords can further improve your SEO efforts. By incorporating keywords, you signal to search engines that your image is relevant to a particular topic or query.Good examples of image filenames:<ul><li>seo-friendly-url-structure.jpg</li><li>technical-seo-audit-process.jpg</li><li>voice-search-seo-optimization.jpg</li></ul>Bad examples of image filenames:<ul><li>url-url-url-structure.jpg</li><li>technical-seo-seo-seo-process.jpg</li><li>voice-search-seo-seo-seo.jpg</li></ul>

enhancing-seo

Avoid generic names and overloading with keywords. Generic names like image6.jpg or pic.svg don&#039;t provide useful information to search engines. For keywords stuffing, it can lead to a negative user experience and may potentially cause your site to be flagged as spam.Good examples of image filenames:<ul><li>seo-content-writing-tips.jpg</li><li>mobile-first-indexing-seo.jpg</li><li>seo-keyword-research-tools.jpg</li></ul>Bad examples of filenames:<ul><li>seo-content-seo-writing-seo-tips-seo.jpg</li><li>mobile-first-seo-seo-seo-indexing.jpg</li><li>Keyword-seo-research-seo-tools-seo.jpg</li></ul>Alt text, also known as alternative text, is dedicated to users who may not be able to see the image. Search engines like Google also use alt text to understand the subject matter of an image, which can help improve your image&#039;s SEO ranking.<ol><li>Follow this recommendations to achieve the best results:</li><li>Don&#039;t use phrases like &#039;picture of&#039; or &#039;image of&#039; in your alt text, as screen readers already announce the presence of an image</li><li>Aim for alt text of 125 characters or fewer. This ensures that screen readers can easily process the information and users get a clear understanding of the image&#039;s content.</li><li>Use the keywords in a natural and meaningful way to ensure that alt text makes sense to users and search engines.</li><li>Provide essential details describing the content of the images</li></ol><h3>Using Image Sitemaps</h3>If your site uses image pop-ups, JavaScript galleries or other similar ways to improve overall user experience, Google can have trouble finding images not called out specifically on the webpage source code. Image sitemaps will help get your images noticed by search engines by listing their location.<h3>Implementing Advanced Techniques</h3><ul><li>Responsive Images: Use the srcset attribute to allow the browser to choose the most appropriate image size, improving loading times and conserving bandwidth.</li><li>Lazy Loading: Implement lazy loading to defer the loading of images until they are in or near the viewport. This can significantly reduce initial load times and save bandwidth.</li><li>Content Delivery Networks (CDNs): Use CDNs to host your images. CDNs can speed up image loading times by storing copies of your images on servers around the world, closer to where your visitors are.</li></ul>Having one large image may sound like a good idea, a large image won&#039;t lose quality when shrunk. But it&#039;s not that simple when it comes to different viewports.If your image is 800px wide it might look good on a 300px display. But all 800px still has to be processed which is a massive waste of bandwidth. In this case, srcset attribute may come in handy pointing the browser to different image version. From there, the browser decides which one to serve based on the device.For CDN, the greatest advantage of using it is shortening the distance between your visitors and your website. The CDN stores cached versions of your website in different geographical locations. So when visitors from the USA come to your website, the data won&#039;t travel all the way from Europe and vice versa. It&#039;ll come from a location that&#039;s close to them.

<h2>Conclusion</h2>Optimizing images for your website is a multifaceted process that encompasses choosing the right formats and sizes, compressing images without losing quality, and enhancing your site’s SEO through proper image naming and tagging. By following the guidelines outlined in this guide, you can ensure your images are not only visually appealing but also contribute positively to your site’s performance and search engine rankings. Remember, the goal is to create a fast, engaging, and accessible online experience for your visitors.

This comprehensive guide will combine insights from leading sources and our expertise to help you master image optimization for your website.

The Ultimate Guide to Optimizing Images for Your Website

Simplifying Many-to-Many Relationships with Laravel Polymorphic Relations

In database architecture, many-to-many relationships often add complexity to our system. One way to tackle this is by using polymorphic relations, which Laravel gracefully handles. This blog post will delve into how you can use Laravel’s polymorphic relations to simplify many-to-many relationships.We will use the scenario where a user can &quot;like&quot; an item in an online store. To achieve this, we typically need user, item, and pivot tables. This structure can prove challenging, especially when adding more likeable types to the system. Fortunately, with polymorphic relations, we can consolidate all these relationships into one table, simplifying the process of adding new likeable types to the system. The following illustrations compare a non-polymorphic table structure with a polymorphic table structure: Non-polymorphic table structure

many-to-many-polymorphic-example---many-to-many

Polymorphic table structure

many-to-many-polymorphic-example---polymorphic

The latter structure is simpler and more reusable. When we want to introduce a new likeable type to the system, we only need to create a table for the model and add internal relationships within Laravel. We can forgo the extra steps of creating multiple pivot tables.In this blog post, we won&#039;t delve into the entire process of creating tables, models, migrations, etc. Instead, we&#039;ll focus on the key steps to make the transition to polymorphic relationships.You can find a full working example on our GitHub repository.<h2>Code Examples &amp; Definitions </h2>Before we proceed, it&#039;s worth mentioning that we have a working example of the Laravel setup on our<a> GitHub</a>. This provides a practical context to understand the code examples and definitions we&#039;ll discuss.It&#039;s good practice to rename the morph relationship to something other than the model namespace - a simple string would suffice. In the boot method of the AppServiceProvider, add a morph map that specifies the class used. By doing this, we decouple the names from the application&#039;s internal structure.<pre><code>Relation::enforceMorphMap([
 &#039;book&#039; =&gt; Book::class,
 &#039;item&#039; =&gt; Item::class,
 &#039;sweet&#039; =&gt; Sweet::class,
]);</code></pre>You can read more about this in the Laravel documentation <a target="_blank" href="https://laravel.com/docs/10.x/eloquent-relationships#custom-polymorphic-types">here</a>.<h2>Models</h2><h3>Sweet/Book/Item Model relationships</h3>After creating the necessary models, we must define the polymorphic relationship within them. In this case, we&#039;re focusing on the likeables table. This definition must be added to all models that will be &quot;likeable&quot; by the user.<pre><code>public function likes()
{
	// omit Model name with the one you are using
 return $this-&gt;morphToMany(User::class, &#039;likeable&#039;);
}</code></pre>In our case, all models share the same relationship.You can find the final Sweet, Book, Item models here:<ul><li><a target="_blank" href="https://github.com/simple-code-agency/blog-laravel-polymorphic-relations/blob/master/app/Models/Item.php">Item model</a></li><li><a target="_blank" href="https://github.com/simple-code-agency/blog-laravel-polymorphic-relations/blob/master/app/Models/Sweet.php">Sweet model</a></li><li><a target="_blank" href="https://github.com/simple-code-agency/blog-laravel-polymorphic-relations/blob/master/app/Models/Book.php">Book model</a></li></ul><h3>User Model relationships</h3>We also need to define additional relationships for all models that the user can like inside the User model. <pre><code>// Sweets relation
public function likedSweets(): MorphToMany
{
 return $this-&gt;morphedByMany(Sweet::class, &#039;likeable&#039;);
}

// Items relation
public function likedItems(): MorphToMany
{
 return $this-&gt;morphedByMany(Item::class, &#039;likeable&#039;);
}

// Books relation
public function likedBooks(): MorphToMany
{
 return $this-&gt;morphedByMany(Book::class, &#039;likeable&#039;);
}</code></pre>To fetch all items liked by the user, we add a hasMany relationship.<pre><code>// All likes of this user
public function likes(): HasMany
{
 return $this-&gt;hasMany(Likeable::class);
}</code></pre>The final User Model can be found at <a target="_blank" href="https://github.com/simple-code-agency/blog-laravel-polymorphic-relations/blob/master/app/Models/User.php">this link</a>.<h3>Likeable Model</h3>The Likeable model should be created with a belongsTo relation to the user. This way, we can retrieve all items liked by a user when needed.<pre><code>public function user(): BelongsTo
{
 return $this-&gt;belongsTo(User::class);
}</code></pre><h2>Controllers</h2><h3>Sweet/Book/ItemController Controllers</h3>The like controllers will be identical, as their goal is to fetch the template we&#039;re using and count the items liked by the user.Take the BookController as an example, and add the index method inside.<pre><code>// BookController.php
public function index()
{
 // Just count number of likes here
 return view(&#039;books&#039;, [
 &#039;books&#039; =&gt; Book::withCount(&#039;likes&#039;)-&gt;get()
 ]);
}</code></pre>You can apply the same logic to all other controllers for likeables - just replace the model name used.You can find them here:<ul><li><a target="_blank" href="https://github.com/simple-code-agency/blog-laravel-polymorphic-relations/blob/master/app/Http/Controllers/BookController.php">BookController</a></li><li><a target="_blank" href="https://github.com/simple-code-agency/blog-laravel-polymorphic-relations/blob/master/app/Http/Controllers/ItemController.php">ItemController</a></li><li><a target="_blank" href="https://github.com/simple-code-agency/blog-laravel-polymorphic-relations/blob/master/app/Http/Controllers/SweetController.php">SweetController</a></li></ul><h3>LikeController</h3>The Like Controller is responsible for adding or removing likes from items. Create a store method that is triggered via a POST request.Below is an example of a method responsible for adding the necessary relationships to a pivot table. This method finds the model passed from the request as the model type and tries to find that model_id. If we have defined all relationships between the models correctly, we can use the attach &amp; detach method to add or remove relationships from the pivot table.<pre><code>// LikeController.php
public function store(LikeableRequest $request): RedirectResponse
{
 $validated = $request-&gt;validated();

 $likeable = $validated[&#039;model_type&#039;]::findOrFail($validated[&#039;model_id&#039;]);

 $likeable-&gt;likes()-&gt;where(&#039;user_id&#039;, auth()-&gt;id())-&gt;exists() ?
 $likeable-&gt;likes()-&gt;detach(auth()-&gt;id()):
 $likeable-&gt;likes()-&gt;attach(auth()-&gt;id());

 return redirect()-&gt;back();
}</code></pre><h2>Views</h2>Let&#039;s take a look at a short example of a form-action view. It passes the model ID and modelType to the controller.<pre><code>// books.blade.php
&lt;form action=&quot;{{ route(&#039;like&#039;, [&#039;model_type&#039; =&gt; \App\Models\Book::class, &#039;model_id&#039; =&gt; $book-&gt;id]) }}&quot; method=&quot;POST&quot;&gt;
 @csrf
 &lt;button type=&quot;submit&quot; class=&quot;bg-gray-200&quot;&gt;
 @if(auth()-&gt;user()-&gt;likes()-&gt;where(&#039;likeable_id&#039;, $book-&gt;id)-&gt;where(&#039;likeable_type&#039;, &#039;book&#039;)-&gt;first())
 liked
 @else
 like
 @endif
 &lt;/button&gt;
&lt;/form&gt;</code></pre>You can find the full code at <a target="_blank" href="https://github.com/simple-code-agency/blog-laravel-polymorphic-relations/blob/master/resources/views/books.blade.php">this link</a>.<h2>Seeders</h2>Lastly, we have a simple seeder for creating random users and adding polymorphic relationships.Check the Database\Seeders\UserSeeder<a target="_blank" href="https://github.com/simple-code-agency/blog-laravel-polymorphic-relations/blob/master/database/seeders/UserSeeder.php"> here</a>.<pre><code>public function likeRandomly()
{
 $users = User::all();
 $sweets = Sweet::factory()-&gt;count(10)-&gt;create();
 $items = Item::factory()-&gt;count(10)-&gt;create();
 $books = Book::factory()-&gt;count(10)-&gt;create();

 foreach ($users as $user) {
 for ($i = 0; $i &lt; random_int(1, 10); $i++) {
 $user-&gt;likedSweets()-&gt;attach($sweets-&gt;random());
 $user-&gt;likedItems()-&gt;attach($items-&gt;random());
 $user-&gt;likedBooks()-&gt;attach($books-&gt;random());
 }
 }
}</code></pre>

<h2>Conclusion</h2>By leveraging Laravel&#039;s polymorphic relationships, you can simplify your many-to-many relationships. The likable example we explored today shows how polymorphic relations can streamline your code, making it cleaner and more manageable. Enjoy building and keep coding!

building

Mastering Laravel Polymorphic Relations for Effortless Management of Complex Many-to-Many Relationships.

Simplify Laravel Many-to-Many with Polymorphic Relations

Simplifying Many-to-Many Relationships with Laravel Polymorphic Relations

As developers, it is crucial to prioritize the creation of clean, maintainable, and well-documented code. By adhering to established methodologies, principles, conventions, and architecture, we can ensure that our CSS code is clean, simple, and easy to maintain. In this blog post, we will explore some essential practices for writing clean SCSS code.

Clean SCSS

<h2>Utilizing Best Practices</h2>To achieve clean code, we are using the following best practices:<ol><li>DRY (Don&#039;t Repeat Yourself): The DRY principle in software development emphasizes the reduction of code repetition. By avoiding duplications, we can improve maintainability and reduce the chances of introducing bugs.</li><li>7-1 Sass Architecture: The 7-1 Sass Architecture is a widely used approach that organizes CSS files into seven folders and one main file. This structure helps to effectively sort and structure the codebase, making it easier to navigate and maintain.</li><li>BEM (Block Element Modifier): BEM is a naming convention and methodology that promotes clear, self-documenting CSS code. By defining blocks, elements, and modifiers, we can create meaningful class names that improve code readability and maintainability.</li><li>Careful Namespacing: Careful namespacing involves choosing appropriate and descriptive names for CSS classes. By using prefixes such as &#039;u-&#039; for utility classes, &#039;t-&#039; for theme-related classes, and &#039;is-&#039; or &#039;has-&#039; for temporary or state-based classes, we can enhance code clarity and avoid naming conflicts.</li><li>&quot;Outside In&quot; Ordering of CSS Properties: The &quot;Outside In&quot; approach suggests ordering CSS properties based on their impact on the element from the outside to the inside. Following this order, we prioritize layout properties, box model properties, visual properties, typography properties, and miscellaneous properties. This ordering improves code readability and makes it easier to locate specific properties.</li></ol>

guy-coding-(1)

<h3>Applying the Best Practices</h3>To demonstrate the application of these best practices, let&#039;s consider an example component. Keep in mind that this example is not designed or responsive and may not adhere to best coding practices.Example Component:HTML file:<pre><code>&lt;div id=”accordion” class=&quot;accordion&quot;&gt;
 &lt;h2 id=”accordion-title” class=&quot;accordion-headline&quot;&gt;
 &lt;button class=&quot;accordion-button”&gt;
&lt;span&gt;What is Flowbite?&lt;/span&gt;
&lt;span class=&quot; icon”&gt;X&lt;/span&gt;
 &lt;/button&gt;
 &lt;/h2&gt;
 &lt;div id=&quot;accordion-body&quot; class=&quot;body-accordion&quot;&gt;
 &lt;div class=&quot;body-accordion-wrapper&quot;&gt;
 &lt;p class=&quot;&quot;&gt;Content part 1 …&lt;/p&gt;
 &lt;p class=&quot;-&quot;&gt;Content part 2 …
 &lt;a href=&quot;https://example&quot; class=&quot;link&quot;&gt;Link Example&lt;/a&gt;
 &lt;/p&gt;
 &lt;/div&gt;
 &lt;/div&gt;
&lt;/div&gt;</code></pre>SCSS file:<pre><code>.accordion {
 background-color: black;
 color: white;
 border: 1px solid green;
 margin: 5rem auto;
 max-width: 50%;
}
.accordion-title {
 color: red;
 pointer: cursor;
 margin-right: 1rem;
 padding: 2rem;
}
.accordion-button {
 font-size: 1.5rem;
 justify-content: space-between;
 align-content: center;
 display: flex;
 .icon {
 font-size: 1.25rem;
 height: 1.5rem;
 width: 1.5rem;
 }
}
.accordion-body {
 overflow: hidden;
 max-height: 0;
 .is-open-accordion &amp; {
 max-height: 100%;
 }
}
.accordion-content {
 padding: 2rem;
}</code></pre><h3>Improvement Steps</h3><ol><li>Replace IDs with classes: Instead of using IDs for element selection, it is better to use classes with a &#039;js-&#039; prefix to indicate their purpose for JavaScript functionality. This approach promotes separation of concerns and improves code maintainability.</li><li>Use BEM structure and naming convention: Apply BEM to define blocks and elements, taking advantage of SCSS nesting for improved readability and easy design adjustments. Ensure that the SCSS elements are ordered according to their importance and appearance.</li><li>Extract reusable components: Identify frequently used components and extract them into separate SCSS files. For example, a button component can be defined and styled independently, making it reusable throughout the project.</li><li>Improve namespacing: Add appropriate prefixes to classes based on their nature. Use &#039;c-&#039; for components, &#039;u-&#039; for utility classes, and follow BEM&#039;s naming convention for blocks, elements, and modifiers.</li><li>Apply the &quot;Outside In&quot; approach: Order the CSS properties within each class based on the &quot;Outside In&quot; principle, starting with layout properties, followed by box model properties, visual properties, typography properties, and miscellaneous properties. This ordering enhances readability and makes it easier to locate specific properties.</li></ol><h2>Result of Applying Best Practices</h2>After applying these best practices, the code will look more professional and maintainable:HTML file:<pre><code>&lt;div class=&quot;accordion&quot;&gt;
 &lt;h2 class=&quot;accordion__headline&quot; data-accordion-heading&gt;
 &lt;button class=&quot;accordion__button&quot;&gt;
 &lt;span&gt;What is Flowbite?&lt;/span&gt;
 &lt;span class=&quot;accordion__icon&quot;&gt;X&lt;/span&gt;
 &lt;/button&gt;
 &lt;/h2&gt;
 &lt;div class=&quot;accordion__body&quot; data-accordion-body&gt;
 &lt;div class=&quot;accordion__content&quot;&gt;
 &lt;p&gt;Content part 1 …&lt;/p&gt;
 &lt;p&gt;Content part 2 …
 &lt;a href=&quot;https://example&quot; class=&quot;accordion__link&quot;&gt;Link Example&lt;/a&gt;
 &lt;/p&gt;
 &lt;/div&gt;
 &lt;/div&gt;
&lt;/div&gt;</code></pre>SCSS file:<pre><code>.accordion {
 &amp;__headline {
 margin-right: 1rem;
 padding: 2rem;
 color: red;
 cursor: pointer;
 }
 &amp;__button {
 font-size: 1.5rem;
 justify-content: space-between;
 align-content: center;
 display: flex;
 &amp;__icon {
 font-size: 1.25rem;
 height: 1.5rem;
 width: 1.5rem;
 }
 }
 &amp;__body {
 overflow: hidden;
 max-height: 0;
 &amp;.is-open-accordion {
 max-height: 100%;
 }
 }
 &amp;__content {
 padding: 2rem;
 }
}</code></pre>

<h2>Conclusion</h2>Writing clean CSS code brings numerous benefits to developers and clients alike. By adopting best practices and focusing on maintainability and efficiency, developers can work more effectively and deliver high-quality results. Prioritizing clean code reduces the likelihood of bugs, improves code readability, and promotes code reuse. Ultimately, these practices lead to satisfied clients and a positive development experience.

code-screen-(1)

Improve Your Front-End with Clean SCSS: Streamline Stylesheets for Web Development. Discover How to Organize, Optimize, and Maintain Your SCSS Codebase. Elevate Your Design and Development Process Today.

Clean SCSS

Joining a new company is like stepping into a new world, filled with novel experiences. Here at our company, we welcome every new member with a lively atmosphere, and an eagerness to foster a feeling of belonging. Our onboarding process, designed to set you up for success, is both relaxed and informative, allowing you to ease into your role comfortably.

hero-logo-big-gray-1685702750

Welcome to Simple Code: Our Unique Onboarding Process

Experience a Welcome to Our Company! Explore Our Onboarding Process, Designed to Immerse You in Our Culture and Equip You for Success. Join Us on a Journey of Growth with Our Onboarding Approach.

Crafting Visual Narratives

Design

Let's Start a Conversation.