HTTP, TCP, Web server, Socket, etc. I’ve had some ideas but never knew a good way to wrap my head around it. We heard things like “TCP is a transport layer”, “reliable”, or “HTTP sits on top of TCP”, but what do they actually mean though? In this guide, I will show how to code a simple HTTP server on top of TCP via socket API.

Get the code for this article here.

Introduction: From IP to TCP

In networking, a higher layer builds a new abstraction on top of the lower ones. Recall the OSI-like diagram for the internet:

__________________
|…

Let’s dig deeper into the definition of a tool we mentioned in our previous post.

A tool is anything that can give us a mental unit that our mind can build skills upon. With this definition, tools include language, words, math symbols and equations, bicycle, pen, car, computer, smartphone, algorithm, and much more. Tools let us move to more complicated problems within the domain of possibilities that the tools provide, offset by an individual’s ability to use it. After we learn how to drive, we only think about where to go. Once we learn how sorting works and what it…


Does technology dumb us down? Are we dumber as it becomes easier to use?

It’s better to think in its more general form, that is, technology as a tool, just like knife, pencil, or calculator. A tool is something we wield to do things, to achieve our individual and shared goals. Now we have just brought down some specific examples, let’s use it:

Does knife dumb us down? Are we dumber as it becomes easier to use?

Does a pencil dumb us down? Are we dumber as it becomes easier to use?

Does calculator dumb us down? Are we dumber…


Summary:

  • Use a scaletransform to animate shrinking
  • Disable delaysContentTouch to make it shrink faster
  • Always allow users to scroll using .allowUserInteraction animation option

One easy way to add a feel of interactivity is by making a cell shrink on touch:

Cell shrinking on touch

This can be done by setting transform on a view:

Then in the cell subclass, trigger this function on isHighlighted changes:

Easy!

Why is there a delay before it shrinks?

You will notice delays of the animation on touch. This is because UIScrollView adds some delays on touch by default, with a good reason.

This is to help it determines if the touch is actually a…


Animating AutoLayout constraints is easy:

// ...Change some constraints here, or inside the animation blockUIView.animate(withDuration: 1) {
view.layoutIfNeeded()
}

The Problem

But that animates every constraint changes under a single, linear animation. What if you want to animate vertical constraint with spring, then animate width and height constraints in linear curve?

“Why would I want to do that?”

You might ask.

One reason is that it allows you to do the bouncing expansion similar to the iOS 11 App Store, using pure Auto Layout:

This is AutoLayout constraint animation!

This is exactly achieved by animating vertical constraint with spring, together with animating width and height linearly.

A Solution


Let’s admit it, it’s hard to remember all the UIView’s classes, even in medium-sized iOS apps. There’re hundreds of those files, made by multiple people, using different languages, scattered around the whole project!

TL;DR: We use UI automation to snap full view hierarchies of the app in each page and export them to a Sketch file. 👉 Check out the code.

Searching for a UIButton

True Story

First you look at the page in a running app. You notice it’s not a regular UIButton, there might be some subclass going on.

Then you guess:

“Oh it’s a button to add item to the cart, must be…


Just give me the code!

An attempt to replicate the custom transition

There are two parts involved: presenting and dismissing. We will do it both with pure UIKit APIs: UIViewControllerTransitioningDelegate, UIViewControllerAnimatedTransitioning, and UIPercentDrivenInteractiveTransition.

In part 1 (this article), I will show you how to do presentation animation. The upcoming article will be about interactive dismissal transition.

Quick UIKit’s transitioning delegate recap:

  • UIViewControllerAnimatedTransitioning is the delegate that performs custom animation. You have access to toView, fromView, containerView that you can apply some fancy animations inside func animateTransition(context:).
  • UIPercentDrivenInteractiveTransition is the object that can control progress of the animation. …


Useless variable problem

You want to fetchObject with id, if failed, use the default object you pass in:

Well, problem is that if it’s a success, you don’t need defaultObject .

You might try to put makeDefaultObject() where it’s needed, but that is so inflexible as you might want to use different default objects:

Enter the Builder

Note: This is totally unrelated to the Builder design pattern.

Whatever code you write, you can wrap it inside a closure (or function) and execute them later.

For example, instead of making a UIImage:

let image = UIImage(named: "img.png")!

You can step back, and make () ->…


First let’s check if you need this article or not:

This doesn’t work:

var intHandler: (Int) -> Void = { (num) in 
print(num)
}
let anyHandler: (Any) -> Void = intHandler ___ ERROR!

But the opposite works:

let anyHandler: (Any) -> Void = { (any) in
print(any)
}
let intHandler: (Int) -> Void = anyHandler ___ OK.

Lastly, this works:

let intResolverLater: ((Int) -> Void) -> Void = { f in
f(0)
}

var anyResolverLater: ((Any) -> Void) -> Void = intResolver ___ OK.

If you already know what happens, you don’t need this article. …


You just bought a new $5 DigitalOcean droplet with Ubuntu 16.04 to deploy your first website, and you need these things:

  • Node.js
  • React (or Next.js!)
  • MongoDB
  • NginX
  • HTTPS with LetsEncrypt
  • and a simple way to automate deployment

Great tutorials are scattered all over the internet, so I compiled the essential list for you!

Note: The explanations here are not technically accurate.

1. Node 8 (& NPM)

curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash — sudo apt-get install -y nodejs

2. MongoDB

Note: The link uses MongoDB 3.2.

3. NginX

A reverse proxy server that maps incoming urls to the correct apps. E.g., myfirstapp.com → localhost:3000, api.myfirstapp.com → localhost:3001. …

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store