Tag: Php

<?php
//is not going anywhere
?>

Posted on

CodeAnyWhere, literally, anywhere

Codeanywhere Logo

This are the IDEs I’ve used

  • Dreamweaver: It was ok to start like 15 years ago.
  • Notepad++: the best back then, but no linux, so no thanks.
  • Sublime text: I can’t put “love it” enough times to express what I fell for it, despite the annoying messages to buy the app or the plugins.
  • Brackets: very cool, cool enough to envolve Adobe, and more important, open source. No enough plugins to win to sublime.

But Codeanywhere is like the “One Ring” for web developers: A web developed IDE to rule them all. This very site it’s been developed on it!

Main features:

  • Any Browser, any devices: Your computer broke, you can go to another computer and continue working where your was, doesn’t matter if is linux, mac or Windows. No computer near? you can use it on tablet or smartphone (even use chromecast to see it on the TV) it has apps for iOs and Android.
  • Free version: Only 1 FTP and 1 virtual machines is more than enough to see if you are comfort with it. I already switched to pay version.
  • Virtual machines (containers): You can generate your own ones preconfigured and start developing in seconds, nothing of command lines on linux, nothing of missing libraries, updates or so. You have ubuntu/centos machines with lot of setups: Laravel, Php7, wordpress, Symphony, node.js, Mean, ember, meteor, backbone, swift…
    • You can connect to this virtual machines with a web SSH client
  • Multiple storage clients: FTP, SFTP, Dropbox, Git, Google drive, Amazon S3 you name it.
  • Friendly editor: It’s clearly inspired by the best: Sublime Text, it has emmet preinstaled, you have shortcuts (configurable) , multiline selection, regular expresions search/replace, multiple code linting, html/css beautyfier.


[lazy_responsive_img ids=”172″]
Yeah, they already have PHP7!

If some codeanywhere developer is reading this here it is some improvements to make:

  • History in tab switching: so you can alternate between 2 tabs by pressing a single keyboard shortcut.
  • Php beautifier: and other languages.
  • Sass css: Classes highlight is in a grey hard to read, I have to switch to CSS in order to beautify the code, which works nice.
  • Html: closing tag underlining when open one is selected, so you don’t have to collapse the tag.
  • Mouse multiline selection (like sublime with right button).
  • Code snippets and macros creation
  • Docblock support with the snippet “/**”
  • Better Emmet on CSS, so you can write “tt”+TAB and is processed to “text-transform: “

 

 

Posted on

Implement Lazy Responsive images in your wordpress

Webpages are read from top to bottom, and by bottom I mean the end of the whole content, even the one you are never going to see.

Video is the most bandwidth consumer in internet, but if you are in your phone, the browser will protect you avoiding video “autoplay”, but no with the images. So, sometimes, the browser will save your data plan avoiding play a 200 Kb background video, but it will be ok if the proud guy with the portfolio decided to put 30 Mb of images on a single page.

But because surely a lot of readers don’t give a damn about clients data plans I’ll say the magic words: Save bandwidth is very good for SEO. Less Mb = more speed loading = better ranking. Google knows that regular user is impatient and will hit “back” on a search result if takes long to load.

What is a lazy image? An image that will not download any data until is visible in the screen. Usually it’ll start to load when is closer to be seen, avoiding the wait to show up. So if you fill the site with hundreds of images it won’t matter until you scroll down. The browser doesn’t do it by itself so we’ll need a javascript solution.

We are saving a lot of data here, but it is not enough.

Very often you see a really big image in a very small screen. Imagine an slider with 5 images of 1200×700 px, and you are seen them in portrait mode in a 720×1280 screen, so in the end, you’ll  see five 720×420 images with 4 times more (surface) weight they should have.


[lazy_responsive_img ids=”144″]

EG: 600×600 images shown as 150×150, and some PNGs!

What is a responsive image? An image with a set of source files that will load the closer to the size is been seen. It is included in HTML5 and it can be coded in two ways, adding a “srcset” attribute to an <img> tab or use the HTML5 “picture” tag with different sources.  I am not going to repeat the great article from Smashing magazine with all the info you are gonna need.

It has one big annoying issue, you have to calculate (using media queries) which file to serve using mediaqueries, a good pain in the ass.

Shouldn’t be great have one solution to have lazy images and auto-responsive-images?  meet lazysizes

This great plugin allows you to release this feature today (take care, not IE8 supported).

So you want to use this on your WordPress theme, you don’t find the right plugin, and you want to learn how to do it, here you have what came with, put it on your functions.php o create a plugin, hope you like it!

[gist id=”e6f8a1f1397efa9019de”]