Imagine we are building the next big social app that lets users share content with other users. We will call our app The Snap Gram. This app will put all other apps out of business, so it is very important that we build it well. A flawed design can mean the difference in failure or success for our venture. All it takes is some big company to steal our idea and make it their own. In order to win the tech race, we have to be able to build and ship [...]
If you are like me and have a background of using AngularJS, making the move to Angular may have come with some resistance. What I find to be the biggest difference of the two, and my biggest impedance, is Angular’s use of TypeScript. They have married themselves to TypeScript so strongly I do not even know where Angular ends and TypeScript begins. Another source of my contention is handling the responsibility compiling and module loading that c [...]
Animation can explain whatever the mind can conceive. When animation is functionally applied to a website or app, the event flow can easily map with the user's ability to navigate through the app. In the post Animating React Applications, we covered multiple ways to animate in React, including mounting and unmounting animations without explicitly using the lifecycle hooks. We were able to do this simply with ReactCSSTransitionGroup and better wit [...]
In this article, I want to quickly introduce you to the idea of Observables, using elementary but real-life examples. There will be some basic theory at the beginning, but the rest is just me, you, and Observables. Let the fun begin! Theory Well, actually, everything I ever wanted to teach about Functional Reactive Programming is this quote: Reactive programming is programming with asynchronous data streams. (It is from the article The introduc [...]
You may or may not know this already, but you can follow a functional approach when using React's setState(), We usually update our state just passing an object describing the changes we would like to make and let React assign those values and trigger an update, but... But... how? You can pass a function to setState() that takes state and props as params and returns your desired state, which React will use for the update. You can go from: // Incr [...]
When building applications, many repetitive tasks could be automated so that you can spend more time developing and less time on grueling tasks like optimization, testing, and deployment. This is where Gulp and similar automation toolkits come into play. In this video, we will learn how to solve a common problem that many developers face when they are getting ready to deploy. We will see how to use Gulp and Node.js to optimize a website consis [...]
Whether it is because you just want to migrate to a new framework or you are desperately in need of getting out of your current app, micro-frontends may be the way to get there. If you work with a single page application, you might be thinking, "I can bootstrap this framework inside this app or add those new libraries in this small place to start; maybe use these functional and typed languages that compile to javascript or any of those exciting t [...]
Great applications not only look good and perform well, they also have few bugs. In the process of developing and deploying an application, it is just as critical to write test scenarios as it is to write attractive and amazing code. In this video tutorial, we see how to use the Jasmine testing framework to write unit tests that test not only various Node.js functions but also API endpoints that were created using Express. With well-designed u [...]
This past month has been the strongest hurricane month in the Atlantic Ocean that's ever been recorded. After we didn't think it could get any worse after Hurricane Harvey, it only continued with Hurricanes Irma and Maria, with Maria causing some of the biggest natural disaster damage in U.S. history. Many X-Teamers live in the Dominican Republic, and it's been an emotional time anxiously awaiting the hurricanes to pass and hoping for the best f [...]
Introduction Since I heard about snapshot testing at the 2017 React Europe conference, I was curious about this new tool for my daily testing. I must admit that I am a Mocha lover but Jest really caught my attention with this feature. At some point during testing, everyone has to print the expected result of the test and copy it to your test file. Now, with Jest snapshots, this is not required anymore. Jest will save the expected result for us. Y [...]