spank/

Let's k all browsers! @lucien144's blog

[htmlspank]

🖕com.checkpoint.cpfw

Ok, this one is another from the "Hard Headache" series.

If you can’t ping your own computer (macbook in my case) in your private network but you can access any other device from that computer, keep reading...

tl;dr: The problem might be with com.checkpoint.cpfw which is macOS’s kernel extension of the Check Point Endpoint Security VPN for macOS. To be sure run this command in your terminal kextstat -kl | awk ' !/apple/ { print $6 } '

This gives you list of all 3rd party kernel extensions and if the com.checkpoint.cpfw is one of it, it's most likely blocking your network access. To remove it call sudo /Library/Application\ Support/Checkpoint/Endpoint\ Connect\uninstall.

Long story:

Today I tried to connect to my macbook from my smartTV for some reason and I was getting errors. So, I tried to connect to the laptop from my iPhone and I couldn't too. Even ping didn't work. Which was weird - everything was whitelisted, the router was correctly setup, no firewall, no blocked ports, no other things that could block it. I even could ping any device in the network from that macbook.

The biggest mistery was that my phone could see the macbook but the ping was failing. I kept running the ping while I ran the sudo tcpdump -i en1 dst host 192.168.1.20 on my macbook and I could see the ping packets! This command tells you about every incoming packet - so if I can see the ping packets but I can't ping, something has to block transmission in my computer.

After hours of practicing google-fu I finally tried to list all kernel extensions: kextstat -kl | awk ' !/apple/ { print $6 } '. The com.checkpoint.cpfw  was first in the list and I started to be suspicious. WTF is that, I've never heard of it. This thing is so hidden that you don't even see it in running processes. When I google it I was told it's related to VPN. That was smelly and I recalled I installed some VPN tool ages ago in order to connect to one of my client's VPN. Installing this software was the only option how to get there - it was Microsoft VPN and I had to get there from macOS. After another hour I was able to locate its files and how to remove them from the system by calling simple sudo /Library/Application\ Support/Checkpoint/Endpoint\ Connect\uninstall. Right after the removal the ping started working again.

I remember I uninstalled this software when I didn't need it anymore. But the b!7c# obviously stayed hidden in my system.

Stay away from Check Point Endpoint Security VPN for macOS!

[htmlspank]

MySQL DB backup split by tables w/ upload to Amazon S3

There are several options how to do MySQL backups like mysqldump, automysqlbackup or Percona’s xtrabackup.

I tried them all and ended up with mysqldump as it’s the fastest if you need to restore few tables ONLY.

What I wanted to achieve:

export tables only for faster sync/restoration/...

avoid locking the DB

sync with Amazon S3

delete backup files that are older than 2 days

create easy restore file of all tables

Here's what I've ended up with:

Todo: add encrypting would be nice

[htmlspank]

(Ubuntu) LEMP stack with PHP7

If you ever needed to install LEMP stack with PHP7 on Ubuntu, these notes might come handy to you.

https://github.com/lucien144/lemp-stack

[htmlspank]

IOError #2032, iOS9, Adobe Air and ATS

Apple comes with something called App Transport Security (ATS) in their new iOS9. This thing hidden behind the fold is pain in the ass. Apps that worked like charm might stop working. The reason is that following ATS all your API communication MUST run through HTTPS. This applies for all URLLoader calls as well as for WebViews etc.

This happens only when you build your apps using the iOS9 SDK!

So if you experiencing IOError #2032, blank WebViews or silent api responses, this might be the cause. The fix is pretty easy - just add these lines to your XML descriptor in InfoAdditions tag.

[htmlspank]

CSS-only accordion without any form element

See the Pen CSS-only accordion without any form element by Jan Blasko (@lucien144) on CodePen.

This is an example of really simple css-only accordion. Most css-only accordions are based on checkbox/radio elements so the code is not really clean and semantic.

The example does not use any form elements and the HTML is simple and clean, based on the content (Content is King! :)). So every accordion's tab is basically an article with header and body. All magic is done by using pseudo-selector :target and transitioning max-height with opacity. The only limitation is you have to set the max-height for the selected tab. As a default value I set it to 1000px, so you have to keep in mind you have to increase it in case of very long content - longer than 1000px. This is crucial as the transition does not work on "height" or "max-height: auto;" - the only way is to set the max-height.

I'm avoiding any complex animations on purpose as I want this as much clean as possible. Add your own animations/transitions during the implementation process. There are million ways how to do this and even more examples.

Check it our. I'd be pleased for any comments, likes and shares.

The code has not been tested yet, but according to http://caniuse.com/#search=target it should work in all major browsers without any glitch, including IE9.

[htmlspank]

How to test Air apps using Apple's Testflight.

If you are developing iOS apps using Adobe's Air, here are few tips that might come in handy for you if you want to test them in Apple's TestFlight (iOS8 only):

The tested app has to be uploaded and signed as a final distribution app.

If you have provisioning profile generated before iOS8, regenerate it (older profiles missing entitlements for Testfligh)

Add get-task-allow and beta-reports-active entitlements to your descriptor. Here's a gist: https://gist.github.com/lucien144/a6ef87c21e8b28128af8

It's better to place <Entitlements/> right after the <iPhone/> tag.

Invitation email is better to open in default iOS Mail.app. The invitation link has to be opened in Safari - otherwise the app does not show up in the Testflight.

If you experiencing problems opening the app from the Testflight, try to open it directly from the phone. There might be an "Untrusted App Developer" popup that blocks your try. Reference: http://stackoverflow.com/questions/25719713/untrusted-app-developer-message-when-installing-enterprise-ios-application

Reference: Daniel Albu - http://www.flashdeveloper.co/post/99200413877/enabling-testflight-testing-in-itunes-connect-for

[htmlspank]

Custom checkboxes/radios in pure CSS

This idea comes on my mind when I was working on http://discovervanuatu.com.au. I needed to skin checkboxes really quickly and I didn’t want to use another jQuery plugin - just because I didn’t want to increase the overall javascript size if I need to skin 3 checkboxes only.

The solution is easy - just add one span right after an input, skin that span, hide the input and skin the span if the input is selected. The last thing might look as a blocker, but using pseudo-selector “:checked” brings some light on that.

Crucial is to select the right span, which we can achive by using a selector “+”. So the the whole magic is this: “input:checked + span”.

Last thing that is good to think about is to cache the checked state. The cross sign should be image and there might be small delay between first click and showing the checked state. There are several ways how to deal with this - using a sprite sheet, an inline image in CSS and so on. I’ve choosed to inline the image in the CSS using base64 encoding. Fast and easy…

The full solution is here: http://jsfiddle.net/lucien144/s9mmbz88

This should work in all new browsers and IE9+. Actually tested in IE9, FF, Safari 8, Chrome and Safari 8 on iOS.

Enjoy!

[htmlspank]

Coffeescript: Optional arguments

Sometimes you need to define a function with unknowm number of arguments - that's called optional arguments. As a good example might be a FB's feed dialog, where you combine default values with system pre-defined arguments.

Let's imagine we work on a campaign where all FB share images are same as well as other things, but the name, description and link should change depending on what element you click.

How to do that in Coffeescript? Well, it's quite easy as all thing in Coffeescript ;) Here it is:

facebookShareDialog: ({name, link, picture, caption, description, message}, callback) -> name ?= Environment::fb.name link ?= "#{globalAppVariables.baseUrl}/detail/#{entrantId}" picture ?= 'default value' caption ?= 'default value' description ?= 'default value' message ?= 'default value' callback ?= -> FB.ui method: 'feed' name: name link: link picture: picture caption: caption description: description message: message (response) -> callback(response)

As you can see, we need to setup default values at the beginning in case if there's no argument. There are several options how to do this - some of them are highlited in the example (like global objects or just a string).

The call then looks like this:

facebookShareDialog name: 'Share this!' description: 'You should really share this.' link: $(this).attr 'href' , (response) -> console.log 'All is ok!' console.log response

One thing is important. The last parameter is a callback so you should handle it as a callback -> see the indentation.

[htmlspank]

Highlight asterix in placeholder w/ 2 different color

Imagine designer designs a form where mandatory fields are highlighted using asterix and this asterix is a part of the placeholder. The issue begins when the asterix is highlighted by different color than the placeholder is.

Here's an example:

How to do that using CSS? Well, the clean solution offers Webkit only - you can use :before pseudo-selector on :placeholder selector there. The dark side of this solution is this won't work in IE nor Firefox.

Here's the code (in LESS using LessHat, as it's faster for me to write):

input[type=text] { &.required { &::-webkit-input-placeholder { color: blue; &:before { content: '*'; color: red; vertical-align: top; font-size: small; } } } }

As you can see, we are moving the asterix slightly up to fake supperscript. Instead of using vertical-align: top; we can use vertical-align: super; - but then the placeholder can be pushed down and it does not look good.

So, that's it. But now we are facing another problem - the dark side. How to deal with it? First step is that we have to do a fallback for other browsers.

Simply put the asterix into the placeholder attribute!

<input type="text" name="name" placeholder="*First name" />

Now we are facing another problem - Webkit browsers displaying 2 asterixes! Well, that's easy to fix using Javascript. Here's a code in CoffeeScript:

if RegExp(' AppleWebKit/').test navigator.userAgent $('input.required').each -> if RegExp(/^\*/).test $(this).attr('placeholder') $(this).attr('placeholder', $(this).attr('placeholder').replace '*', '' )

Voila, that's it! So, webkit browsers display highlighted asterix, although other browsers display at least some asterix...

Cool, huh?

Fiddle here: http://jsfiddle.net/lucien144/x935vobn/

[htmlspank]

Bind event to the end of CSS transformation

In case you need to bind some event on the end of CSS transformation, it's quite easy to do it in jQuery (written in Coffeescript):

$('div').bind 'transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd', ->   console.log 'Transition ended'

[htmlspank]

Placeholder color for Firefox

If you are wondering why you set up placeholder color and just Firefox is rendering it wrong - meaning the color is slightly darker - the reason is that Firefox 19+ adds opacity to placeholders. Don't ask me why...

So if you wanna setup precise color, you have to set up opacity to 1, like that:

::-moz-placeholder { opacity: 1; color: red; }