In this post, we are going to build a Twitter clone demo application using htmx. Before diving into the tutorial, let me tell you the background story about why I decided to build this app using htmx. It all started with this blog post on A List Apart by Matt E. Patterson called The Future of Web Software Is HTML-over-WebSockets. In this article Matt talks about the advantages of sending HTML over the wire via AJAX requests or Web Sockets and the performance benefits they offer and he mentions tools and libraries like Hotwire, StimulusReflex and so on.

In this article we are going to take a look at an Ember.js addon called ember-csz which provides template helpers for csz, a Runtime CSS-Modules with SASS like pre-processing. This is based on a talk I gave recently at ESNextConf. I just wanted to experiment the same with Ember.js and it came out well. I liked it very much the idea of keeping your styles as part of your component.js just like how the React community uses other awesome CSS-in-JS solutions like Styled Components and Emotion.

I have been thinking about playing songs inside Spacemacs for quite a while, so that I don’t have to leave my favorite editor for just playing music. After a small exploration I found out that all I need is to enable EMMS inside Spacemacs. Spacemacs Spacemacs is a community-driven Emacs distribution. It is a new way to experience Emacs with a sophisticated and polished set-up focused on ergonomics, mnemonics and consistency.

nvm is a version manager for Node.js, designed to be installed per-user, and invoked per-shell. nvm works on any POSIX-compliant shell (sh, dash, ksh, zsh, bash), in particular on these platforms: Unix, Mac OS, and Windows WSL. But most of the times, it is not properly identified by eshell in Spacemacs. Recently I found out a package called nvm.el by Johan Andersson. Let’s walk you through how you can use nvm to choose different Node.

What is Spacemacs? Spacemacs is a community-driven Emacs distribution. It is a new way to experience Emacs with a sophisticated and polished set-up focused on ergonomics, mnemonics and consistency. What is Prettier? Prettier is an opinionated code formatter which supports many languages and integrates with most editors. It can be installed through npm. It is recommended to install prettier globally in your system so that your editor integrates it properly and can be even made to auto formatted while saving your files.

In this tutorial, we will see how to setup automated code coverage metrics collection for your Ember addons using Coveralls and Github Actions. Why Code coverage? In simple terms, code coverage is the fraction or percentage of code paths executed by some test or test suite of a program. It is generally measured by a tool which executes the test and logs the lines of code, the test “touches” while running.

Snowpack is a post-install tool. It runs after npm install, and it essentially exists to convert your npm packages (in your “nodemodules/” directory) into JS files that run in the browser without a bundler (written to a “webmodules/” directory). Creating a sample app In this tutorial we are going to create a simple demo app which is going to make use of a library called finance. We are going to create an app to calculate simple interest from principal, rate and time.

In this article, we are going to take a look at a tool called JARVIS which will profoundly transform the way how you write codemods. This is a continuation post for AST Finder which is a tool to generate an api to find AST nodes automatically from source code. If you want to know more about codemods, their building blocks and how they work, please check out this detailed post about codemods.

In this article, we are going to take a look at a tool called ‘AST Finder’ which will significantly improve the developer experience for writing codemods. This is a continuation post for AST Builder which is a tool to generate AST nodes automatically from source code. If you want to know more about codemods, their building blocks and how they work, please check out this detailed post about codemods. What? AST Finder is actually a playground for finding AST nodes using source code.

In this article, we are going to take a look at a tool called ‘AST Builder’ which will significantly improve the developer experience for writing codemods. Codemod is a tool/library to assist you with large-scale codebase refactors that can be partially automated but still require human oversight and occasional intervention. Codemod was developed at Facebook and released as open source. If you want to know more about codemods, their building blocks and how they work, please check out this detailed post about codemods.

In this article, we are going to take a glimpse at the ember-codemods-telemetry-helpers package and how it helps to create more advanced codemods for Ember.js. If you want a more in-depth introduction to codemods, you can checkout this post detailing the why’s and how’s of codemods. Telemetry for layman First we will take a look at what Telemetry is all about. According to Wikipedia, Telemetry is the collection of measurements or other data at remote or inaccessible points and their automatic transmission to receiving equipment for monitoring.

This post is the second in the series of posts called PlantUML in Spacemacs. In this post we are going to see how we can create awesome Mind maps in Spacemacs using PlantUML. Mind map diagrams is the new feature recently rolled out in PlantUML and they are still in the beta* stage. And you will find only minimal documentation in the official site related to mind map diagrams. This post gives you some additional bonus information such as adding colors to your mind map, creating high resolution mind maps and so on.

This article is the first in the series of articles about including and using PlantUML in Spacemacs to do some amazing things. In this article we will see how to setup PlantUML in Spacemacs and use it. In the upcoming posts we will see some advanced usage of PlantUML and some awesome stuff you can do with it. Spacemacs Spacemacs is a community-driven Emacs distribution. It is a new way to experience Emacs with a sophisticated and polished set-up focused on ergonomics, mnemonics and consistency.

Coming from a vim world with tmux, I had really missed the multiple split window layout in Spacemacs. But after knowing how to define custom layouts this seemed to be an easy exercise for me. So I thought, I should write a blog post about it to help others setup awesome layouts and workspaces with Spacemacs. Some Terminology Here I want to make some clarifications on the terminology surrounding vim, tmux and Emacs on windows, layouts, panes and buffers.

In this tutorial, we will see how we can integrate the Merriam Webster Thesaurus in to Spacemacs. Having a thesaurus by your side while writing, is really a productive thing. Since you don’t have to lookup every time the alternative word you want to use and that too integrating with your favorite editor is definitely a feather in your cap. For this we are going to install an awesome package from Ag Ibragimov called mw-thesaurus.

Nobody can predict the future, but everybody can wish for something in it. It could be for the benefit and interest of one person or a community as a whole. I am putting down my thoughts and wishes for Ember.js as both a consumer of the framework itself and producer of the supporting tools and addons for the same. The best way to predict the future is to invent it.

In this article we will take a look at some of the guiding principles which are beneficial while working with large code base. The whole idea of this post is to collect and come up with a checklist of significant approaches and ways to deal with large and legacy code bases. The readers are welcome to share more tools, methods and approaches in the comments section below. 1. Onboarding Documentation Ask if there is onboarding documentation, or someone who can give you a high-level overview of the codebase.

In this article, we take a look at Codemods, a tool for making sweeping changes across your code with ease and effectiveness. Codemods are invented by a team of developers from Facebook to assist large-scale migrations in code-base, and we are going to take a deep look into a particular codemod tool called jscodeshift. Refactoring Before we dive into the codemod tools like jscodeshift, we need to understand why we need to do large-scale refactorings and what is really meant by refactoring.

The other day I was just skimming through an wonderful piece of work by Peter F. Drucker called “the effective executive”. One of the important abilities of an effective executive as suggested by Drucker, is the ability to make effective decisions. He highlights some key differences between effective decision makers and the ineffective ones. Decision-making is only one of the tasks of an executive. It usually takes but a small fraction of his time.

Software craftsmanship is an approach to software development that emphasizes the coding skills of the software developers themselves. It is a response by software developers to the perceived ills of the mainstream software industry, including the prioritization of financial concerns over developer accountability. In this article we will take a look at different perspectives about craftsmanship in general and some specific notions of the same in software and programming from various authors and programmers.

Creating Connection-aware Ember Media Components In this article, we will take a look at creating Ember Components serving media content such as images and videos based on the network bandwidth of the users. For this, we will make use of the Network Information API provided by the browsers. Currently, the only browser that supports this api is Chrome, soon we are expecting that all the browsers will start supporting the network information api.

CSS Conical Gradients is finally gaining momentum among browser landscape The day I started using the Gradient tool in Photoshop, I was fascinated by the different types of gradient styles the tool offered, and especially i am a great fan of the angular gradient style which captivated me more than anything else. Now it gives me great joy to share that the same style is supported in CSS gradients as part of the official spec and Chrome 69 is the first browser to ship it into production.

The Five Joys of the Programming Craft In this article, we are revisiting the original ideas about the pleasures of programming put forth by Fred Brooks in one of the most influential and timeless books on software project management known as The Mythical Man-Month. Why is programming fun? What delights may its practitioner expect as his reward? 1. The Sheer joy of building things First is the sheer joy of making things.

Conceptual integrity is the principle that anywhere you look in your system, you can tell that the design is part of the same overall design. This includes low-level issues such as formatting and identifier naming, but also issues such as how modules and classes are designed, etc. This is vitally important, because inevitably, unanticipated issues come up that must be resolved quickly. If there is a coherent design to the system, it can be much easier to resolve these issues by determining what would be consistent with the overall design, especially if the other designers are not present.

Cognitive Dissonance in Programming In the field of psychology, cognitive dissonance is the mental discomfort (psychological stress) experienced by a person who simultaneously holds two or more contradictory beliefs, ideas, or values. The occurrence of cognitive dissonance is a consequence of a person performing an action that contradicts personal beliefs, ideals, and values; and also occurs when confronted with new information that contradicts said beliefs, ideals, and values. In the fable of The Fox and the Grapes, by Aesop, on failing to reach the desired bunch of grapes, the fox then decides he does not truly want the fruit because it is sour.

Managing Software - Words of Wisdom Software project management is an art and science of planning and leading software projects. It is a sub-discipline of project management in which software projects are planned, implemented, monitored and controlled. These words of wisdom are the outcome of multi-role viewpoint on software development. There is no ranking for better practices. But what really matters is to apply these practices where they make sense and where the users can benefit the most.

Nine Illuminating Quotes on Debugging Here we present you a list of quotes about debugging programs by renowned developers and programmers from around the world. Quote #1 Of all my programming bugs, 80% are syntax errors. Of the remaining 20%, 80% are trivial logical errors. Of the remaining 4%, 80% are pointer errors. And the remaining 0.4% are hard. – Marc Donner, IBM Watson Research Center Quote #2 It takes three times the effort to find and fix bugs in system test than when done by the developer.

Six Sensible Quotes on User Interface Quote #1 The Principle of Least Astonishment Make a user interface as consistent and as predictable as possible. Quote #2 A program designed for inputs from people is usually stressed beyond the breaking point by computer-generated inputs. – Dennis Ritchie, Bell Labs Quote #3 Twenty percent of all input forms filled out by people contain bad data. – Vic Vyssotsky, Bell Labs

Eight Elegant Quotes on Coding best practices Quote #1 When in doubt, use brute force. – Ken Thompson, Bell Labs The brute force method, also known as Proof by exhaustion, proof by cases, proof by case analysis, or the complete induction, is a method of mathematical proof in which the statement to be proved is split into a finite number of cases or sets of equivalent cases and each type of case is checked to see if the proposition in question holds.

Eight Corporate Laws of Gravity Gravity is an unfair limitation on our freedom. After all, we had no say in the matter at all; we didn’t ask to be this heavy. Gravity is a natural law, and we can’t repel it. Yet every day, people are making themselves miserable with futile struggles against the natural laws of business and human behavior. When you fight gravity, you’re apt to end with a busted head.

Why experience and intuition can ruin decision making? There is more than one way. There is always more than one way. There is more than one way. There is always more than one way. This simple credo can be a practical beacon throughout our professional life, leading us to consider alternatives in how software might be organized and how people might be organized. But recognizing alternatives also carries a burden, the burden of making decisions.

A Refreshing Guide to Object.freeze in Javascript by Dr.Victor Fries What killed the dinosaurs? The Ice Age! In JavaScript, objects are used to store keyed collections of various data and more complex entities. Objects penetrate almost every aspect of the JavaScript language. The object might be accessed as global or passed as an argument. Functions that have access to the object can modify the object, whether intentionally or accidentally. To prevent modification of our objects, one of the techniques is to use Object.

Consensus and Compromise Getting the most from a software development team depends on the ability to build technical consensus among the professionals on the project. But why should it matter whether you and your office mate agree on the layout of an entry form or the best way to report error messages? Technical consensus is not about getting along together or feeling close to your fellow programmers. (Not that there is anything wrong with getting along or feeling good about each other.

The Quasi-Forgotten Software Scribe A scribe is a person who serves as a professional copyist, especially one who made copies of manuscripts before the invention of automatic printing. Remember Bob Cratchit in A Christmas Carol, toiling away on the books at the august firm of Scrooge and Marley, finger-less gloves on his hands to keep them from freezing between entries? Watching it will start us to thinking about old Bob and all the other “clarks” who kept the records for so many enterprises over the centuries.

Two simple ways to negotiate consensus in a software development group You can’t reach consensus unless you recognize it when you have it in your grasp. This means that software development groups trying to reach collective decisions are wise to agree, in advance, on the criteria by which technical matters will be decided. What is important? What matters? What is “good” and what is “bad” within the confines of this particular project?

The 10 typical sources of uncertainty in Software projects Suppose you had an utterly perfect process for delivering software. Would that remove all uncertainty from your projects? In fact, is the software building process even one of the major sources of uncertainty? Various project management approaches do not consider the impact that uncertainties have on the project. The identified threats by uncertainty in a project day-to-day are real and immediate and the expectations in a project are often high.

Seven Principles of Software Development - Revisited Principle #1: The Reason It All Exists A software system exists for one reason: to provide value to its users. All decisions should be made with this in mind. Before specifying a system requirement, before noting a piece of system functionality, before determining the hardware platforms or development processes, ask yourself questions such as: Does this add real VALUE to the system? If the answer is no, don’t do it.

Arguing for the sake of arguments in JavaScript This article deals with some intricacies revolving around the arguments object, a magical and mysterious creature residing in the functional realms of the Javascript world, which can be summoned anytime in your code by the programming wizards without any spells, incantations or sorcery. The arguments object is an Array-like object corresponding to the arguments passed to a function. It is a local variable available within all (non-arrow) functions.

The Four Factors of a Good Program If we plan to study programming as a human activity, we are going to have to develop some measures of programming performance. That is, we are going to have some idea of what we mean when we say that one programmer is better than another, or one program is better than another. Although we all have opinions on these questions, we shall find that the answers are not as simple as we might wish.

Egoless Programming Egoless programming is a concept introduced by Gerald Weinberg in The Psychology Of Computer Programming. The idea is that programmers must fight the natural tendency to treat their programs as part of themselves, and therefore to reject all criticism. Rather, they should do their best to treat their designs & implementations as objects independent of themselves, and to view criticism dispassionately on its merits. What is to be done about the ego problem in programming?

An Elementary Guide to Ember Build Performance When we talk about build performance, it is important to understand that there are several build phases: Cold build Warm build Rebuild Cold build Cold build is the build which happens when you boot your app up for the first time. This build is the slowest because the cache is not yet populated and the application is booting for the first time.

The Twelve Roadblocks to Healthy Conversations What obvious obstacles are relevant to obstruct a conversation? Experts in interpersonal communication have identified various response patterns that tend to block conversation. Thomas Gordon devised a comprehensive list that he calls the “dirty dozen” of communication spoilers. These undesirable responses include: Criticizing Making a negative evaluation of the other person, his/her actions, or attitudes. The act of passing judgment as to the merits of anything; censure; faultfinding.

Table of Contents How to create an accessible checkbox component in Ember? Class diagram Component Interface Template Component Github Demo How to create an accessible checkbox component in Ember? In this tutorial we will see how to create an accessible checkbox component in Ember based on the WAI-ARIA authoring practices. A checkbox allows the user to toggle between two choices – checked and not checked.

Table of Contents 1. How to create an accessible slider component in Ember? 1.1. Class diagram 1.2. Component Interface 1.3. aria-slider -> template 1.4. aria-slider -> component 1.5. aria-slider-thumb -> component 1.6. Source Code 1.7. Demo 1.8. References  1 How to create an accessible slider component in Ember? In this tutorial we will see how to create an accessible slider component in Ember based on the WAI-ARIA authoring practices.

Table of Contents Inline Temp Motivation Mechanics Declare the temp as const if it isn’t already, and compile. Find all references to the temp and replace them with the right-hand side of the assignment. Compile and test after each change. Remove the declaration and the assignment of the temp. Compile and test. Inline Temp You have a temp that is assigned to once with a simple expression, and the temp is getting in the way of other refactorings.

In this article we take a look at one of the refactoring techniques named as Inline Function originally known as Inline Method. We will see how to apply these techniques in Javascript code since the original methodology is language agnostic. This is second in the series of articles exploring various refactoring techniques by Martin Fowler.  Table of Contents Javascript Refactoring Series: Inline Function Motivation Mechanics Check that the function is not polymorphic Find all calls to the function Replace each call with the function body.

In this article we take a look at one of the refactoring techniques named as Extract Function originally known as Extract Method. We will see how to apply these techniques in Javascript code since the original methodology is language agnostic. This is first in the series of articles exploring various refactoring techniques by Martin Fowler. Table of Contents Extract Function (aka Extract Method) Motivation Example: No local variables Example: Using Local Variables Example: Reassigning a Local Variable Extract Function (aka Extract Method) You have a code fragment that can be grouped together.

The loop is the typical way of processing collections, but with the greater adoption of first-class functions in Javascript the collection pipeline is an appealing alternative. In this article we look at refactoring loops to collection pipelines with a small example. Table of Contents Refactoring a simple loop into a pipeline in Javascript Defining our Author data type Simple and plain For loop Using ES5 forEach Using a Collection Pipeline Refactor - Moving filter before map Refactor - Combine filters Reference Credits Refactoring a simple loop into a pipeline in Javascript The loop is the typical way of processing collections, but with the greater adoption of first-class functions in Javascript the collection pipeline is an appealing alternative.

Cohesion is the measure of strength of the association of elements within a module. Modules whose elements are strongly and genuinely related to each other are desired. A module should be highly cohesive. Table of Contents 1. Do you care about Cohesion in Javascript Functions? 1.1. Functional Cohesion 1.1.1. Sequential Cohesion 1.1.2. Communicational Cohesion 1.1.3. Temporal Cohesion 1.2. Sequential Cohesion 1.3. Communicational Cohesion 1.4. Temporal Cohesion 1.