Archive for the ‘Develompent’ Category

Cloudflare — простой способ настроить Firewall

Для создания простого правила для целой корпоративной сети можно сначала найти все ее адреса на ipinfo.io, а потом одним правилом прописать AS номер в списке Firewall Rules. Список будет обновляться вместе с обновлениями базы AS данных. Удобно.

Pure CSS Parallax Websites

Parallax is almost always handled with JavaScript and, more often than not, it’s not very performant with the worst offenders listening for the scroll event, modifying the DOM directly in the handler and triggering needless reflows and paints. All this happens out of sync with the browsers rendering pipeline causing dropped frames and stuttered scrolling. Better parallax implementations monitor scrolling and defer DOM updates using requestAnimationFrame which can totally transform the experience – but what if you could remove the JavaScript dependency completely?

This article demonstrates how to use CSS transforms, perspective and some scaling trickery to create a pure CSS parallax scrolling website.

Have a look at the following example – note the debug option!

Instagram images pulled via HTTPS not displaying

Instagram images pulled via HTTPS not displaying.
The source of the problem is AKAMAI.
Their SSL Certificate is reported to be invalid. Thus Chrome/Firefox/Safari does not load images.

To temporarily fix this issue you can use this short code snippet:

var src = '//igcdn-photos-e-a.akamaihd.net/hphotos-ak-prn/'+oldsrc.split('/').pop();

UPD: issue fixed, no need to change the urls 😉

OSX Screen Saver — ISS HD Earth Viewing Experiment

mks

I have created a simple screen saver for NASA Earth Viewing Experiment. This is a live stream from space station mixed with Soma FM Mission Control audio stream.

Download NASA OSX Screen Saver

About the mission:

The High Definition Earth Viewing (HDEV) experiment aboard the ISS was activated April 30, 2014. It is mounted on the External Payload Facility of the European Space Agency’s Columbus module. This experiment includes several commercial HD video cameras aimed at the earth which are enclosed in a pressurized and temperature controlled housing. Video from these cameras is transmitted back to earth and also streamed live on this channel. While the experiment is operational, views will typically sequence though the different cameras. Between camera switches, a gray and then black color slate will briefly appear. Since the ISS is in darkness during part of each orbit, the images will be dark at those times. During periods of loss of signal with the ground or when HDEV is not operating, a gray color slate or previously recorded video may be seen.

Analysis of this experiment will be conducted to assess the effects of the space environment on the equipment and video quality which may help decisions about cameras for future missions. High school students helped with the design of some of the HDEV components through the High Schools United with NASA to Create Hardware (HUNCH) program. Student teams will also help operate the experiment. To learn more about the HDEV experiment, visit here.

For a display of the real time ISS location plus the HDEV imagery, visit here.

Quick notes about hdev video:

Black Image = International Space Station (ISS) is on the night side of the Earth.
Gray Image = Switching between cameras, or communications with the ISS is not available.

Velocity.js — Accelerated JavaScript animation

Velocity is a jQuery plugin that re-implements $.animate() to produce significantly greater performance (making Velocity also faster than CSS animation libraries) while including new features to improve animation workflow.

Velocity works everywhere — back to IE8 and Android 2.3. Under the hood, Velocity uses jQuery’s $.queue(), and thus interoperates seamlessly with jQuery’s $.animate(), $.fade(), and $.delay(). Since Velocity’s syntax is identical to $.animate()‘s, none of your code needs to change.

Download Velocity, add it to your page, and replace all instances of $.animate() with $.velocity(). You will immediately see a performance boost across all browsers and devices — especially on smartphones.

In just 7Kb, Velocity includes all of $.animate()‘s features while also packing in color animation, transforms, loops, easings, class animation, and scrolling. Velocity is the best of jQuery, jQuery UI, and CSS transitions combined.

Animation demo, starfield demo.

How to remove pre-roll ads on Youtube?

Adblock time to time can’t handle this simple task to hide pre rolls on YouTube, so, you can use this simple trick.
Just update your hosts file using these lines:

127.0.0.1 ads.youtube.com
127.0.0.1 s0.2mdn.net
127.0.0.1 s1.2mdn.net
127.0.0.1 googleads.g.doubleclick.net
127.0.0.1 pubads.g.doubleclick.net
127.0.0.1 ad.doubleclick.net
127.0.0.1 static.doubleclick.net

Done!

Next level of craziness — host file with 15K+ lines, check this out.

Javascript: Simple cookie managing

Just a code snippet to manage cookies in a simple way:

function cookie(name,value,expire) {
	var D = document,d,r,c,n,f;
	if (void 0 != value) {
		d = new Date;
		d.setDate(d.getDate()+expire);
		D.cookie = name + "=" + escape(value) + ((null==expire) ? "" : ";expires=" + d.toGMTString());
	} else {
		r = [], c = D.cookie.split(";");
		for (n = 0; n < c.length; n++) (f = c[n].match(RegExp("^\\s*"+name+"=\\s*(.*?)\\s*$"))) && r.push(f[1]);
		return r[0]?r[0]:!1;
	}
}

You can set, read or delete cookie:

cookie(name,val);
cookie(name);
cookie(name,'',-1);

GitHub gist available here.

KPHP: KittenPHP Released

kphp

This is VK/KittenPHP-DB-Engine project, consisting of efficient PHP-to-C++ translator called “KPHP” or “KittenPHP”, and several auxiliary high-performance “engines” (specialized non-relational databases), needed for its deployment.

It has been developed since 2009 mostly by Vkontakte Ltd, operator of social network VK.COM, and thoroughfully tested in high-performance enviroments, until a version useful for the general public was obtained. Fulfilling several previously given public promises, this version is now released for public use under GPL/LGPL terms.

Source code is licensed mostly under GPL version 2 or later.

Benchmarks (KPHP vs Facebook HipHop VM vs PHP):

kphp-testsTests sources available here.

Russian-language documentation is available at Github.
English documentation not available yet, sorry.

Parallax.js

Parralax.js – Simple, lightweight parallax engine that reacts to the orientation of a smart device.

parallax.js

Besides mouse/cursor support, it works on mobile and tablet (where gyroscope or motion detection hardware is available) too.
It comes with multiple options for customizing the effect where they can be set inline using “data attributes” or in JavaScript.

Parallax.js reacts to the orientation of your smart device, offsetting layers depending on their depth within a scene… Oh, you don’t have a smart device? No worries, if no gyroscope or motion detection hardware is available, parallax.js uses the position of your cursor instead. Radical.

Pure — a CSS framework by Yahoo!

Pure is a newest framework that is created by Yahoo!. It uses Normalize.CSS and doesn’t use any JavaScript but only HTML-CSS.

Screen Shot 2013-05-29 at 9.12.58 AM

The framework is built with responsive layouts in mind and has styles for typography, grids, forms, buttons, tables and navigation.
Markup used is very simple and the whole framework is pretty lightweight (5.7KB minified and gzipped).
Also, it is modular and styles for each module can be used separately.