Typescript is an amazing language — one that allows us to do everything JavaScript can in a tenth of the debugging time. These tips will mostly be for:
- reducing bugs, by writing more explicit and understandable code
- pack more value into your code without reinventing the wheel.
If you already know these, then congrats! You’re a TS Legend — maybe share some of your wisdom with me in the comments (and read my other article with 5 seperate tips!).
Here’s 5 advanced TypeScript tips that will allow you to write better TypeScript Code.
1. The “is” operator / Type Guards
Swagger is really, really helpful to see what the backend is going to serve you — but, more often than not, programmers are given bad or inconsistant API’s to use, where properties may or may not exist or different objects are returned depending on status. …
I’ve been lucky enough to experience and work in a lot of different programming paradigms, and have developed a strong set of opinions in every part of the stack.
We’ll be going through the frontend, backend, database, systems, and mobile paradigms.
Knowing the best tech isn’t only good for programmers, though: those that work with people who code (like project managers) or those that are implementing business plans (like entrepreneurs or CEOs) will benefit heavily from knowing the best tech. …
When loading up a Single Page Application like React, Vue, or Angular, you’ll spend several seconds staring at a blank, white HTML page. These several seconds are the perfect time for your inner UI/UX to go absolutely crazy — the user doesn’t have to click anything, they just needed to be distracted so that they don’t click away!
I’ve recently taken to building some crazy, over the top loaders here. While it seems pointless, it can add so much life to an app. A fun animation can create an awesome feel for the app without being intrusive at all. …
One of the “big 3” CSS questions is the following:
How do I keep my footer hugging the bottom of the page?
After answering this question on Reddit for the 5th time, I decided that a blog post was necessary. Here’s how.
(Aside: If you’re wondering, the other 2 “big 3" CSS questions are “how do I center elements” and “why aren’t my styles applying”).
tl;dr and full code at bottom.
The Setup
First, we’ll take a look at the setup HTML. Here’s some minimal HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> …
A tl;dr can be found at the bottom of this post.
Most, if not all, apps you use on your phone utilize the app lifecycle for various reasons — maybe you want to show that a user went offline when they close the app, or maybe you want to commit some critical data at the end of the session. App lifecycle is a powerful tool that you should 100% have in your Flutter toolbelt.
Usecases
Here are some usecases for app lifecycle:
- Reporting data analytics (time user spent looking at screen, tap count, etc.)
- Cleaning session data off system
- Reporting offline /…
CSS is one of the most hated things about front end development. Often, your styles won’t do what you ask them to do — Here are 5 things that will help relieve your CSS induced headache.
1. STOP Using !important: How CSS Hierarchy Works
CSS hierarchy is something that is really confusing to front end developers, because often it’s overlooked when learning. Generally, styles don’t really conflict… until they do. When they do, developers often throw in a !important at the end of the style. While it often is the solution, it can cause many problems later down the line.
In fact, at my day job, we have a strict no-important rule, and you must explain exactly why your !important is necessary to get it committed into the repo. …
Sometimes, state management monopoly is good; in React, there’s really only one or two state management solutions that are seen regularly. As the wild beast that 2020 was draws to a close, there seemed to be a new state management solution every month. Here’s a list of where each solution shines, so you can be confident you picked the best state management solutions for your needs.
The Basics
There are two state management solutions you can use without ever touching your pubspec.yaml file, and sometimes (more times than you’d think!) It’s enough.
SetState
In JavaScript, performing a filter on a list and then logging every element takes O(2n). In Rust, it takes O(n). Here’s why, and other cool things about Rust iterators.
We often hear that Rust iterators are lazy, but it never really clicked for me what that meant until I had to filter a list in both Rust and JavaScript (technically TypeScript, but still).
In JavaScript, a list filter looks like this:
myList.filter((t) => t !== "Filter me out")and then to log each element, you’d chain it like this:
myList.filter((t) => t !== "Filter me out").forEach(console.log)What happens behind the scenes is that the filter function will iterate through the list, returning each element that doesn’t fit the condition. in this case, it will filter out all strings that don’t say “Filter me out”. Then, it will reiterate through a new list and log each of them. …
I decided that the best way to keep my programming skills sharp during a pandemic semester was to participate in hackathons.
I’ll be going through the three hackathons I participated in. Each of these hacks, I did solo. My goal was not to win, but to sharpen my skills — if I managed to win, then awesome! I didn’t feel like getting teams together would be the way to go, so I embarked solo on my journey.
Hack 1: Hermes Video Editor, for wit.ai Hackathon
This hackathon, put on by Facebook, was the first hack I participated in. My final product can be found here (depending on when you’re reading this, some links may or may not be broken!). …
About
