InRhythm

Your partners in accelerated digital transformation

Code Lounge

How To Publish A Command-Line Tool To NPM

Overview

The Command-Line Interface, or otherwise referred to as CLI, is a common way for developers to interact with different processes. CLI tools are often used in software development, DevOps, or even application structure. Overall, the command-line provides a more streamlined developer experience as well as automation tools for routine maintenance.

NPM, on the other hand, is the world’s largest software registry. The registry contains over one million code packages, supporting open-source developers in their mission to not only share software, but provide an accessible playing field for the management of private development projects. 

With NPM supporting command-line tools, developers are given the opportunity to expedite collaboration amongst teammates.

In William Kimak’s Lightning Talk session, we will be uncovering the primary strategies for Publishing A Command-Line Tool To NPM:

  • Popular Libraries
  • jasmine-spec-builder
  • Building Complex Packages
  • Live Demonstrations
  • Closing Thoughts

Popular Libraries

Yargs and Commander.js are two of the most popular libraries used for parsing user input. While both have their own collection of pros and cons per developer style, the primary difference between them is:

  1. Yargs
  • Uses types to check for invalid user inputs 
  1. Commander.js
  • Routes commands to functions, in order to clean up code 

With Yargs and Commander.js leading the charge, there are a number of sub-libraries that provide interactive user-experiences to your application.

  1. Inquirer
  • Provides real-time error feedback 
  • Prompts user identity verification questions and validates the answers
  • Manages hierarchical prompts
  1. Yargs-Interactive
  • Based on inquirer
  • Supports mixed mode, in which a user doesn’t need a direct prompt for all navigation options
  1. Chalk
  • Changes color of terminal output
  • Intuitively bolds, dims, and underlines text
  • Creates reusable style code
  1. Ora 

jasmine-spec-builder

A jasmine-spec-builder is a command-line tool to build and update jasmine spec files. It allows you to build a spec folder from scratch and/or update an existing file’s providers. It provides developers the option to utilize a MasterServiceStub to initialize service stubs before each unit test. Overall, giving the developer the opportunity to automate tests for both synchronous and asynchronous code. 

jasmine-spec-builder has a number of features, including: 

  • Speed and low overhead with no external dependencies
  • An all inclusive library that offers everything needed to test code pre-development
  • Availability for both Node and browser
  • Use with other languages like Python and Ruby
  • Does not require the DOM
  • Providing a clean and easy to understand syntax and a rich, straightforward API
  • Using natural language to describe the tests and the expected results

Building Complex Packages 

The common requirements for developers looking to run more complex tests with the command-line for their  NPM packages are:

  • Running tests before every publish
  • Consistently updating versions using semantic versioning 
  • Creating a git tag using semantic versioning
  • Pushing the package to Github or NPM 
  • Creating manual release notes for the update 

Live Demonstrations

You’ve unpacked quite a few introductory principles to the publishing of command-line tools to NPM…But the best way to learn is through practical and tangible demonstration.

William Kimak has crafted an intuitive demonstration to help guide you through these principles in practicum: 

Be sure to follow Kimak’s entire Lightning Talk to view this impressive demonstration in real time.

Closing Thoughts

Publishing Command-Line Tools To NPM has given developers the ability to expedite their team’s backend processes. Overall, bringing more power and innovation to your “coder’s toolbox!” The properties explored above are the primary stepping stones to experimenting with the primary knowledge needed to test how publishing command-line tools to NPM can help streamline processes for your current (or future!) development portfolio. Be sure to explore, have fun, and match up the components that work best for your project!

Happy coding!

To learn more about Publishing Command-Line Tools To NPM, along with some live test samples, and to experience William Kimak’s full Lightning Talk session, watch here. 

Migrating To Jetpack Compose

Overview

Jetpack Compose has been on the tip of every developer’s tongue since the release of its original 1.0 stable version. Jetpack Compose is Google’s modern toolkit for building native Android UI. It simplifies and accelerates UI development to quickly bring your app to life with less code, powerful tools, and intuitive Kotlin APIs. Compose UI is defined by creating modular, easily reusable Composable functions. 

Declarative UIs have developed into a major innovation trend, lending adoption to be a primary growth curve for web and mobile application development teams. 

In William Kingsley’s Lightning Talk session, we will be uncovering the the primary strategies for Migrating To Jetpack Compose:

  • Why Migrate To Jetpack Compose?
  • Migration Strategies 
  • Live Demonstrations
  • Closing Thoughts

Why Migrate To Jetpack Compose?

Google’s clear directive points towards moving developers towards Declarative UI development tools for future Android mobile development. Compose has been clearly articulated as the “future” of native Android and certainly the target for future platform SDK efforts – likely diverting resources from legacy development paradigms. Therefore, Google will expect Android UI development to migrate to Compose over time. 

In order to prep for this full transition, there’s been a particular push for adoption, in order to prep developers for the gradual move:

  • Google recommends Jetpack Compose for all new applications from the Android go- to-market platform moving forward 
  • Updating “View Components” is very error prone and coupled with a rather difficult process for anyone that’s used it previously comparatively to Jetpack Compose
  • Jetpack Compose’s views update in response to data – meaning, the development platform has “data binding” capabilities right out of the gate!
  • Like other Jetpack components, Compose has excellent backward-compatibility with older Android OS levels – even users with older Android devices can run applications built with Jetpack Compose UI
  • New UI developed with Jetpack Compose can be incrementally added to existing applications built with conventional Android UI techniques (i.e. XML-based or code-based UI development). This allows developers to dip a toe in the Jetpack Compose water without a wholesale rewrite of their apps up-front 

Jetpack Compose saves developers a substantial amount of time and effort for larger scale application layout files. Compose takes about a third of the average modern development duration, meaning– less code to sift through and more bandwidth to experiment and create!

Migration Strategies 

There are two primary avenues to migrate an existing Android application to Jetpack Compose:

  1. Developing A New Screen Entirely With Compose
  • When new screens and features are being created within a developing Android application, Jetpack Compose functions can be accessed interoperably with “View” by using the ComposeView class 
  • In the case of single-activity applications, using the Navigation component for “View,” a developer can drop their composable functions into the existing framework using ComposeView

These user-friendly functions, pre-built into the Jetpack Compose interface, enable developers to convert each new Compose component without needing to change the underlying navigation or data-source logic. 

Example: The below screen split utilizes the aforementioned “new” implementation of Jetpack Compose components, allowing easy transition from an existing Android application infrastructure. 

  1. Taking An Existing Screen And Gradually Transferring Components Into It
  • For development teams that are completely “fresh to Jetpack Compose,” this gradual shift is a great way to get familiarized and build a culture around maintenance of a new structural interface
  • Using this strategy, a development team can take their time to test out the components in order to ensure UI consistency and functionality 

Example: The below screen split utilizes the aforementioned “gradual” implementation of Jetpack Compose components, allowing teams the flexibility to migrate as appropriate to an existing Android application. 

Live Demonstrations 

William Kingsley has crafted an intuitive demonstration to help guide you through these principles in practicum: 

Be sure to follow Kingsley’s entire Lightning Talk to view this impressive demonstration in real time.

Closing Thoughts

Jetpack Compose is a fundamental rethinking of how Android UI is authored. It is a game-changer for Android developers – simplifying layouts and behaviors that once spanned multiple files and formats into an easy to navigate singular UI tree of composable functions with the power of Kotlin in the palm of your hand! 

Happy coding!

To learn more about Migrating to Jetpack Compose, along with some live test samples, and to experience William Kingsley’s full Lightning Talk session, watch here.

An Introduction To Web Components

Overview

Have you ever dreamed about sharing components across multiple applications? As a developer, the ability to reuse code is an irrefutable advantage. Traditionally, however, this hasn’t been the easiest venture for coders – even with careful diligence, your custom UI controls when manually multiplied, could create a huge web UX mess.

Web Components aim to solve this problem– by creating versatile custom elements with encapsulated functionality that can be used whenever and wherever you’d like without fear of code collision! 

In Chen Song’s Lightning Talk session, we will be uncovering the following topics:

  • What Are Web Components?
  • JavaScript Frameworks vs. Web Components 
  • Browser Compatibility
  • Closing Thoughts

What Are Web Components?

First introduced by Alex Russell at the 2011 Fronteers Conference, Web Components have served as a great resource for frontend developers. 

Web Components are a suite of different technologies allowing you to create reusable custom elements — with their functionality encapsulated away from the rest of your code — so you can utilize them at a multiplicity throughout your custom web application, without frontend glitches. These components work across all modern browsers and can be used with any JavaScript library or framework that works with HTML, making it an accessible asset for any coder. 

The primary elements that fuel Web Components are:

  1. Custom HTML Elements

The Custom HTML Elements serve as a set of JavaScript APIs that will allow you to define custom elements and their behaviors – to be used as desired in your user interface. 

Example: These elements will allow you to register your own HTML Tags, as shown below.

When coding your custom HTML elements using Web Components, you will need to pull in code support from JavaScript in order for the browser to recognize it and present it properly on your frontend. 

When done correctly, with the assistance of the Web Components engine – you should see the following interface browser display:

  1. Shadow DOM

A Shadow DOM is an encapsulated “shadow” DOM tree which is attached to an element, in order to allow you to render it separately from the main document DOM – so you can externally control the associated functionality. In this way, you can keep the element’s features (script and style) private and avoid any possible collision with other parts of the document. 

Example: In order to attach a Shadow DOM to your script, you’ll be attaching it per the “this.shadowRoot.” to connect the element to your Web Components, as shown below.

When done correctly, with the assistance of the Web Components engine – you should see the following interface browser display:

  1. HTML Templates And Slots

The <template> and <slot> enables you to write markup templates that will not be rendered on the display. These templates can be reused multiple times as the basis of a custom element’s structure.

When done correctly, with the assistance of the Web Components engine – you should see the following interface browser display:

JavaScript Frameworks vs. Web Components 

While both engines pose their own compilations of pros and cons, with the software industry being one of the fastest growing pipelines – it’s important to keep our resources in perspective. 

JavaScript Frameworks

  • More complex – they include a number of components, as well as additional features to build out the rest of your application post-code
  • They can’t be shared across different platforms 

Web Components

  • Only features code components
  • Built with Vanilla JavaScript, meaning they are reusable cross-platforms
  • Strong encapsulation 

Browser Compatibility

To receive the most up-to-date frontend service compatibility information, visit here. 

Closing Thoughts 

Web Components have revitalized the frontend game, giving coders an accessible point of reference to intuitively build displays without “reinventing the wheel.” Overall, bringing more power and innovation to your “coder’s toolbox!” The properties explored above are the primary stepping stones to experimenting with the basic components needed to test  how Web Components can help streamline processes for your current (or future!) development portfolio. Be sure to explore, have fun, and match up the components that work best for your project!

Happy coding!

To learn more about Web Components, along with some live test samples, and to experience Chen Song’s full Lightning Talk session, watch here. 

The Accelerating Future Of Server-Side Swift In Vapor

Overview

Server-Side Swift is an amazing new opportunity for coders to build fast, safe, and scalable back-end applications. This new open-source framework has enabled developers to use the Swift language on major servers, so nothing can stand between you and effectively creating your backend. 

In Austin-Michael Komatz’s Lightning Talk session, we will be uncovering the following topics:

  • What Is Swift?
  • Introducing Vapor
  • Test Your Skills
  • Closing Thoughts

What is Swift? 

In the simplest of terms, Swift functions as a general-purpose programming language – meaning, it can be used in any environment for a variety of applications.

Swift has a number of unique features that make it a versatile language to have in your personal “programmer’s tool box”:

  • As open source software (OSS), Swift is a coding language that can be seen, modified, and distributed by anyone
  • At its core, Swift is written in C++. C++ is an object-oriented programming (OOP) language that is one of the best sources for creating large-scale applications

The primary win associated with Swift, is that it’s not a language for only making iOS apps – but instead it can be applied seamlessly to a number of applications – making it an immeasurable advantage to implement into your industry practice.

Introducing Vapor 

Vapor is more than just a web framework. The project includes over a hundred official and community maintained server-first Swift packages. Vapor is a framework for writing HTTP server applications, front end websites, backends, and APIs in Swift.

Vapor has a unique set of properties that set it apart from other frameworks:

  • It is 100% written in Swift
  • It is a non-blocking, event-driven architecture built on top of Apple’s SwiftNIO
  • With a protocol orientation, it allows Vapor to be scalable, modular, and a type-safe network

Vapor allows you to create complex, full-featured applications that can power mobile applications or stand on their own.

Example: The below Vapor code base represents the unique “package manager” the platform utilizes in order to easily implement code cross-functionally. 

Vapor offers many features, some of the most important and widely used ones include:

  1. Databases

Databases allow data to be persisted and stored for later. This data can then be read back at any time. Vapor provides an ORM for working easily with a variety of databases. This allows developers to easily access their database without having to write custom queries.


Vapor allows you to easily create and manage RDS and Aurora Serverless databases directly from the Vapor UI or while using the Vapor CLI. Database backups are automatically performed and you may restore a database to any point in time (down to the second) within the backup retention window.

Vapor supports a number of commonly used databases, including (but not limited to):

  • PostgreSQL
  • redis 
  • SQLite
  • MySQL
  • mongoDB
  1. HTTP

Vapor’s client API allows you to make HTTP calls to external resources. It is built on async-http-client and integrates with the content API.

Vapor supports HTTP/1, HTTP/2, and protocol upgrades like WebSockets. The server also supports Transport Layer Security (TLS).

  1. Authentication

Authentication is the process of transforming a unique token (identifier) to actual user data. This can be a cookie with a session identifier stored in a browser, or in this case a JWT (JSON Web Token), but based on this ID the backend can retrieve the associated user object.

The end user signs in using a login form on a website (or an API endpoint), and sends the usual credentials (email, password) to the backend. If those credentials were valid, then the server will return a (randomly generated) identifier to the client. 

  1. Websockets

WebSockets allow for two-way communication between a client and server. Unlike HTTP, which has a request and response pattern, WebSocket peers can send an arbitrary number of messages in either direction. Vapor’s WebSocket API allows you to create both clients and servers that handle messages asynchronously.

Testing Your Skills

You’ve unpacked quite a few primary principles of the Server-Side Swift backend approach… But the best way to learn is through practical and tangible demonstration.

Austin-Michael Komatz has crafted an intuitive demonstration to help guide you through these principles in practicum: 

Using a coded chat application, Vapor is able to connect the two threads via a websocket to allow for real-time communications. 

Closing Thoughts

Why do you want to use Vapor as a backend engineer? The simple answer is– it uses Swift! It’s an ultra-modern language that is leading architecture use cases in the industry right now.

The longer answer… the abundance of functional benefits put it ahead of the industry curve in terms of speed, stability, and passionate community interactions.

Vapor is an optimistic look to the future for backend engineers, ensuring and maintaining a bigger and better future!

Happy coding!

To learn more about the introduction of Server-Side Swift in Vapor and to experience Austin-Michael Komatz’s full Lightning Talk session, watch here. 

An Introduction To Web Animation

Overview

Web design has undergone a number of innovations over the years, with each new implementation bringing a unique “flavor” to their coding.

Web animation has been dominating our screens in recent years, raising the bar for more intuitive and exciting user experiences online. Website design animation turns an ordinary user experience into an unforgettable journey that amazes with its bold colors, movements, adventures, and exciting interactions. 

In Alec McGovern’s Lightning Talk session, we will be uncovering the following animation topics:

  • What Is Animation?
  • Timing Functions
  • Test Your Skills
  • Closing Thoughts

What Is Animation?

Animation is all about breathing life into your web page. It can be anything from a simple button hover to a more complex customized menu slide – an animation serves a primary purpose in making your application readable, user friendly, and overall… FUN! Animations work to engage your users in a tangible way, meanwhile drawing attention and focus.

The two most commonly used CSS (Cascading Style Sheets) for animation are:

  1. Transitions

Transitions are the simplest way to animate a DOM (Document Object Model) element – or in other words, the determined page contents and its associated elements. They allow you to make a smooth consistent change to page elements over a specific duration of time. 

The primary components to a successful transition animation rule are:

  • transition-property

A transition-property will specifically denote what CSS element you’ll be specifically changing (examples include: color, opacity, etc.)

  • transition-duration

A transition-duration will specifically denote the allotted time the animation should take to complete before looping.

  • transition-delay

A transition-delay will specifically denote how long the animation should wait (in-between period) before looping the animation over again. 

  • transition-timing-function

A transition-timing-function will specifically denote how “fast” the visual animation should move on the web browser when a user engages with it. 

Example: The below transition code utilizes the property and duration formulas used to show that changes in opacity (transparency) should span a duration of two seconds before disappearing completely.

  1. @keyframes

For more complex animated changes over time, @keyframes, a specialized CSS rule, needs to be utilized. @keyframes allow a larger string of properties to be changed within a singular animated sequence. 

Example: The below @keyframes codes utilize the more complex from→to animation types (fadeout), as well as a percentage formula of exact color transitions throughout each animation duration point.

Once you’ve defined your @keyframes elements, you’ll be able to directly code them into your DOM, as shown below:

With both these animation formulas in mind, you’ll not only have a basic understanding of the coding associated but will also be able to implement either CSS code to execute the following tenets of animated web elements. 

What Are Time Functions? 

A time function controls the speed that your animation occurs at. The most commonly used value is, ease: which starts slow, accelerates in the middle, and slows again as the animation loop comes to an end. 

Some other examples include:

  • linear
  • ease-in, ease-out
  • step (int, start│end)
  • cubic-bezier (n,n,n,n)

Test Your Skills

You’ve unpacked quite a few animation principles – think you’re up to trying your hand at some practical animation exercises?

Alec McGovern has created an individual testing space just for you!

To rise to the challenge and apply what you’ve learned to the following animation exercise, click here. 

Closing Thoughts

All animations should always be designed with performance and the user experience in mind. The properties explored above are the primary stepping stones to experimenting with the basic components needed to test how animation can improve your personal web application. Be sure to explore, have fun, and match up the components that work best for your project!

Happy coding!

To learn more about the introduction of animation coding in web development and to experience Alec McGovern’s full Lightning Talk session, watch here.