Disable Mobile Safari Top/Bottom Bar auto show/hide viewport changes

Turns out you can disable the top/bottom bar auto show and hide nonsense which changes the size of the viewport, often causing full screen elements to need to be recalculated.

Add "minimal-ui" to the viewport meta tag to remove the behavior.

<meta name="viewport" content="width=device-width, minimal-ui">

Thanks to ayr.com for showing me it’s even possible.

Django – Cannot force an update in save() with no primary key.

If all debugging steps lead you nowhere with this problem, make sure you are not deferring any fields on your queryset prior to an insert attempt.

For example, I was calling save() on a recently copied object which initially had a deferred field.

Example:

obj = Object.objects.defer('foo')[0]

<a href="http://obj.id">obj.id</a> = None
obj.save() # triggers error

OSX: Easily SSH into local computer via ngrok

Enable remote login via going to “Sharing” in preferences, then clicking the “Remote Login” checkbox.

Next, download ngrok
https://ngrok.com/

Once set up, simply write into the command line:

ngrok -proto=tcp 22

Now you can SSH into your computer from the port number specified.

Example: ssh myusername -p PORT_THEY_SPECIFIED

This method bypasses any IP configuration at all, making it bullet proof.

Update: Ngrok2

Ngrok 2 requires authentication. Sign up for an account, authenticate via single command line ngrok authtoken <TOKEN>

Run

ngrok tcp 22

Conntect via SSH via ssh <user>@<HOSTNAME> -p <PORT>

Freelance Developer Pro Tip: Use workspaces to manage multiple clients easily

You know how it’s super annoying to manage small tasks for multiple clients all the time?

Lately a real gamechanger for me has been using OSX workspaces for each client. One terminal and one sublime window open for each client.

It also really helps make "switching between windows of the same application" much more productive… since I can have 4 sublime windows for window 1, 2 for window 2, etc. that are tabbed separately.

Of course this only works if you work on up to say 8 clients max.

-webkit-backface-visibility Fixed Position Safari Bug

I often use -webkit-backface-visibility: hidden; to fix flickering issues with hovers and css transitions or animations on all browsers.

Well I was experiencing a very odd glitch in Safari that caused elements to get stuck in the wrong position, even though their hover/click/event handlers were still located in the proper positions.

For example, when switching from a css class with position: fixed, top: 0 to a class with position: absolute; top: 0; Safari would sometimes render the element in between the previous browser fixed position and its final destination.

After essentially giving up on the problem, I had a random thought about backface-visibility causing issues and I’m not even sure why. Sure enough, after removing it, I no longer have any issues with post-animation glitches or the fixed position to absolute position bug.

jQuery validation errors with custom select wrappers

This was easy.

If an errored element has a parent called .custom-select, then insert after the custom select wrapper. Otherwise, proceed as usual.


$form.validate
errorPlacement: (error, element) -&gt;
inserted = false
if <a href="http://element.is">element.is</a>('select')

customSelect = element.closest('.custom-select')
if customSelect.length &gt; 0
error.insertAfter(customSelect)
inserted = true

if not inserted
error.insertAfter(element)

How to detect if a click event was triggered by the user or programmatically

I often set up click handlers, then trigger it programmatically to set its default state (say an option click handler, where the first option is selected by default). This is a good pattern because you don’t end up with maintaining state via template and JS separately.

It’s also very common to want the programmatic click to happen very quietly, for example without scrolling the user down whereas a user click _should_ scroll the user down.

You simply need to check for the value of `event.originalEvent`.

if ev.originalEvent
console.log &quot;This is a user event!&quot;

Cool.