September 2018 Summaries

JavaScript, a dynamically typed language, offers flexibility in variable types, allowing variables to change types during their lifecycle, unlike strictly typed languages like Java. The typeof operator in JavaScript, while useful for basic type checking, can be misleading as it returns "object" for null and arrays, necessitating additional methods like instanceof, constructor property checks, and Object.prototype.toString() for more precise type identification. ES6 introduced improvements such as the Number.isNaN() function for checking NaN values, and Array.isArray() for arrays, addressing limitations in the typeof operator. Despite the common misconception that everything in JavaScript is an object, primitives are not objects; instead, the JavaScript engine creates temporary wrapper objects to allow methods and properties to be accessed on primitives. Understanding and utilizing these nuances in type checking is crucial for writing predictable and reliable JavaScript code.

The evolution of CSS has seen a shift from older practices of maintaining large and unorganized stylesheets towards modern methodologies that enhance maintainability and scalability. Developers often undervalue CSS, leading to problematic practices like using !important indiscriminately or relying on ultra-specific selectors. However, the front-end community's drive for improvement has introduced advanced CSS features like Grid Layout and Flexbox, and the emergence of preprocessors such as Sass, Stylus, and Less, which offer functionalities like variables, nesting, and mixins to streamline styling processes. Post-processors like PostCSS further transform CSS for optimized performance, while CSS-in-JS libraries, popularized in the React ecosystem, integrate styling directly into JavaScript, addressing issues like global namespace conflicts and dead code elimination. Despite their advantages, CSS-in-JS solutions are sometimes met with skepticism due to the unconventional merging of styling and scripting. Ultimately, the choice of using preprocessors, post-processors, or CSS-in-JS depends on the specific needs of a project, emphasizing the importance of moving beyond basic CSS for complex applications.

SQL, or Structured Query Language, remains a vital tool for database management despite the rise of NoSQL alternatives. With over forty years of development, SQL offers a structured, predictable framework that ensures consistency through predefined schemas, making it ideal for web applications that require reliability and multi-row transactions, such as accounting systems. Although NoSQL databases are appreciated for their scalability and flexibility in handling large data volumes without a fixed schema, they can suffer from inconsistencies and require significant developer intervention to manage data representation. SQL's ability to execute complex operations, like sum calculations, directly on the server reduces data transfer overheads and enhances performance. Additionally, SQL's widespread adoption is supported by a robust community, extensive compatibility with various programming languages, built-in security features, and automated functions like stored procedures. The demand for SQL skills remains high, with numerous job openings and resources available for learning. Ultimately, while both SQL and NoSQL have their merits, choosing between them should be based on specific application needs and the potential for long-term scalability and maintainability.

Launching a web app in a business context requires careful attention to various organizational, technical, and legal aspects. Preparation involves agreeing on a technology set, covering infrastructure costs, and determining an operating model and business plan. Infrastructure complexity has increased with cloud-first setups, necessitating automated build processes and error tracking. A solid technical foundation with end-to-end tests, minified resources, and cache-friendly structures is crucial for stability and performance. Accessibility and mobile compatibility are essential for a broad user base, requiring mobile-friendly views and optimized resources. Security measures such as encrypted connections and reliable authentication are fundamental, alongside compliance with privacy regulations like GDPR. Performance optimization through caching and lazy loading and the use of web analytics for user insights and SEO are also highlighted. Additionally, fancy additions like in-app tutorials can enhance user experience, while the overall preparation serves as a guideline to address potential challenges and ensure the app's success.

Redux-Observable is a middleware for Redux that allows developers to manage asynchronous operations using RxJS operators, enabling the transformation of streams of actions similar to how JavaScript arrays are manipulated. It introduces the concept of "epics," which are functions that take a stream of actions and return modified streams, akin to "sagas" in redux-saga. Through practical examples, the text demonstrates how Redux-Observable can handle asynchronous requests using RxJS's mergeMap() for functions that return promises, with catchError() handling potential errors. By dispatching actions such as 'CLICK_INCREMENT' or 'FETCH_STOCK_PRICE', the middleware modifies action streams, facilitating operations like asynchronous HTTP requests and stock price fetching with node-fetch. This makes Redux-Observable a compelling alternative to redux-saga and redux-thunk, particularly for those familiar with RxJS, and it offers a structured approach to managing async logic in React and Redux applications.

The recent release of Chrome 69 includes support for conical gradients, a CSS feature that allows developers to easily create pie and doughnut charts using conic-gradient fills that have color stops around the circumference of a circle. This feature simplifies the creation of these charts, which were previously complex to implement with JavaScript libraries or hacky CSS and SVG approaches. Conical gradients are part of the CSS Image Values and Replaced Content level 4 module and enable developers to transform progress bars into visually appealing doughnut charts by masking parts of the chart with pseudo-elements. While support for conical gradients is currently limited to Chrome and WebKit, developers can use fallback strategies or polyfills for other browsers like Firefox and Edge. This advancement promises to make web design more dynamic and aesthetically pleasing by enabling a range of applications beyond charts, such as color wheels and optical illusions.

ReasonML, a syntax extension for OCaml created by Facebook, builds on the established functional programming language to tackle real-world problems in production environments, much like React, with which it shares a creator. It supports both native and JavaScript as compile targets, facilitating code that can run anywhere, and utilizes the BuckleScript project for compiling into JavaScript. Reason's strong type system reduces runtime errors by converting them into compile-time issues, simplifying refactoring and enhancing development efficiency. It emphasizes immutable data structures by default, though it allows for controlled mutation when necessary, balancing functional purity with practical imperative programming needs. The language's syntax is designed to be approachable for JavaScript developers, offering features like automatic currying and pattern matching, which streamline code readability and error handling. ReasonML's pragmatic approach and strong typing provide a robust framework for developers, reducing the likelihood of runtime errors while maintaining flexibility for practical coding solutions.

Blazor is a single-page web app framework built on .NET that operates in the browser using WebAssembly, allowing C# to be used for web development by leveraging JavaScript interoperability for accessing the browser's DOM API. Since WebAssembly cannot directly interact with the DOM, Blazor uses JavaScript interop to call JavaScript functions from .NET and vice versa, facilitating the use of existing JavaScript libraries within Blazor applications. This interop capability is crucial for overcoming the limitations of WebAssembly and for providing flexibility and backward compatibility in web development. As Blazor is still an experimental framework, it allows developers to fall back on JavaScript when needed, providing a migration path for users familiar with JavaScript-based libraries. The framework supports creating abstractions around browser features, providing C# methods to enhance functionality at the application level. As the ecosystem of interop libraries grows, developers are likely to spend more time in C# and less in JavaScript, which could simplify the development process and improve efficiency. Blazor's integration with monitoring solutions like LogRocket allows developers to better manage frontend complexities by providing enhanced visibility into application performance and user interactions.

At the turn of the Millennium, the internet was rapidly integrating into daily life, with many people buying their first computers to go online, and web design practices were still evolving through trial and error. Early web platforms like Geocities enabled users to create personal websites, while browsing experiences were limited by specific browser and resolution recommendations. Developers relied on image-heavy layouts and HTML tables due to nascent CSS support, and creative, though often cumbersome, features like animated GIFs, scrolling marquees, and auto-playing MIDI files were common. Social interactions took place on message boards and guestbooks, which have since been largely replaced by social media. The era also saw the rise and fall of Internet Explorer as the dominant browser, until competition from Firefox and Chrome revitalized browser technology. Many of these early internet practices have been replaced or evolved into modern equivalents, highlighting the significant progress in web development and user experience.

Custom properties, initially introduced as "variables" in the CSS Variables Module in 2012, have evolved into a versatile tool for defining responsive behavior in web design, despite the module still being a candidate recommendation since 2015. These properties, which follow the CSS cascade, can be used in any CSS block and are referenced through the var() function. While their direct use might not be evident when building custom behaviors, they shine when integrated into frameworks, acting as an API that allows users to control behavior without delving into the underlying code. LayerJS serves as a prime example, where custom properties assist in creating responsive, animated user interfaces by defining dynamic, overlapping layers controlled by HTML attributes or CSS properties. This approach empowers users to tailor layouts and behaviors across different devices, enhancing responsiveness without imposing predefined assumptions. The utility of custom properties extends beyond aesthetics, streamlining the creation of adaptable UIs within frameworks like layerJS, which accommodates user-defined responsiveness through a grid system or breakpoints, thereby offering a flexible and efficient means of defining interface behavior.