An Optimized SVG Workflow potomak/jquery-instagram @ GitHub Instagram jQuery plugin A simple jQuery plugin to show a list of Instagram photos. Instagram photos tagged with #hipster. Instagram photos at location 514276. Instagram photos at position (48.858844, 2.294351). License See LICENSE. Authors Giovanni Cappellotto (@johnnyaboh) Download You can download this project in either zip or tar formats. You can also clone the project with Git by running: $ git clone Responsive Web Design Patterns | This Is Responsive Responsive Patterns A collection of patterns and modules for responsive designs. Submit a pattern Layout Reflowing Layouts Equal Width Off Canvas Source-Order Shift Lists Grid Block Navigation Single-Level Multi-level Breadcrumbs Pagination Images Responsive Image Techniques Media/Data Video Fluid Video Iframes Tables Charts & Graphs Responsive Chart Forms Basic Forms Text Lettering Fittext Footnotes Responsive Footnotes Modules Carousel Tabs Accordion Messaging Lightbox
Sauvegarder automatiquement ses sites web distants chez soi - Génération Linux Je m'occupe et administre plusieurs sites hébergés ailleurs que chez moi, sur un serveur d'hébergement mutualisé. Autrement dit, je n'ai qu'un accès FTP au répertoire www. Aucune sauvegarde n'est donc faite sur ces machines. de temps en temps, quand j'y pense, je fais un backup "manuel" en me connectant en FTP et en rapatriant les données chez moi, puis je vais sur l'interface phpmyadmin et fait un export de la base. Une solution pas terrible, vous en conviendrez. Depuis que j'ai mon serveur perso chez moi, je me suis dit qu'il serait intéressant d'automatiser cette sauvegarde. Voici les scripts que j'ai utilisé, ma procédure, mon automatisation, bref, un petit tuto pour sauvegarder automatiquement ses sites web hébergés loin de chez soi. I. Je m'occupe actuellement de 3 "gros" sites 'propulsés par Joomla' hébergés chez un hébergeur qui me propose un accès FTP sur le répertoire www ainsi qu'une base de données que j'administre via phpmyadmin. II. <? #! #! III. IV.
Использование SVG | Frontender Magazine SVG - формат векторной графики. Буквально его название значит «масштабируемая векторная графика» (Scalable Vector Graphics). Попросту говоря, это то, с чем вы работаете в Adobe Illustrator. SVG можно легко использовать в вебе, но сперва нужно во многом разобраться. Зачем вообще нужен SVG? Небольшие размеры файлов, отличное сжатие;Масштабирование до любого размера, без потери качества (разве что, при совсем маленьких размерах);Хорошо выглядит на ретине;Широкие возможности, которые предоставляют фильтры и интерактивность. Создадим изображение SVG, с которым будем работать дальше Создайте произвольный рисунок в Adobe Illustrator. Обратите внимание, что изображение кадрируется чётко по краям изображения. Adobe Illustrator умеет сохранять в SVG. При сохранении появится ещё одно диалоговое окно с настройками. Здесь стоит отметить, что у вас есть возможность нажать OK и сохранить файл или же нажать кнопку “SVG Code...”, которая откроет окно TextEdit (по крайней мере на Mac) с SVG-кодом. if (! 1.
Hide your header on scroll - Headroom.js Downloads Note: the sizes shown are after gzipping. What's it all about? Headroom.js is a lightweight, high-performance JS widget (with no dependencies!) that allows you to react to the user's scroll. The header on this site is a living example, it slides out of view when scrolling down and slides back in when scrolling up. Why use it? Fixed headers are a popular approach for keeping the primary navigation in close proximity to the user. Large screens are usually landscape-oriented, meaning less vertical than horizontal space. Headroom.js allows you to bring elements into view when appropriate, and give focus to your content the rest of the time. How does it work? At it's most basic headroom.js simply adds and removes CSS classes from an element in response to a scroll event: Relying on CSS classes affords headroom.js incredible flexibility. Usage Using headroom.js is really simple. With plain JS Include the headroom.js script in your page, and then: With jQuery/Zepto $("#header").headroom();
WebPlatform.org — Your Web, documented iandunn/WordPress-Plugin-Skeleton Compass URL Helpers These url helpers isolate your stylesheets from environmental differences. They allow you to write the same stylesheets and use them locally without a web server, and then change them to be using asset hosts in production. They might also insulate you against some code reorganization changes. stylesheet-url($path, $only-path) Generates a path to an asset found relative to the project's css directory. font-url($path, $only-path) Generates a path to an asset found relative to the project's font directory. image-url($path, $only-path, $cache-buster) Generates a path to an asset found relative to the project's images directory. Passing a true value as the second argument will cause only the path to be returned instead of a url() function The third argument is used to control the cache buster on a per-use basis. generated-image-url($path, $cache-buster: false) Generates a path to an image generated during compilation using the generated_image related configuration properties.
Zepto.js: the aerogel-weight jQuery-compatible JavaScript library The default build includes the following modules: Core, Ajax, Event, Form, IE. Zepto v1.0 used to bundle Effects, iOS3, and Detect modules in the default build. See below for optional modules. Zepto will only set the $ global to itself if it is not yet defined. There is no Zepto.noConflict method. If you need to support older browers, like Internet Explorer 9 and lower, you can fall back to jQuery 1.x. Note that some optional features of Zepto specifically target mobile browsers; as the original project goal was to specifically provide a leaner alternative to jQuery for the mobile web. Zepto is a good choice for browser extensions (for Safari, Chrome and Firefox) and to develop HTML-based views within native app frameworks, such as PhoneGap. In short, Zepto is expected to work in every modern browser and browser-like environment. zepto.js and zepto.min.js provided above can be used as-is. Core methods When an HTML string is given, use it to create DOM nodes. $.camelCase v1.0+ $.contains v1.0+
Tooltipster - The jQuery Tooltip Plugin Getting Started 1. Load jQuery and include Tooltipster's plugin files After you download Tooltipster, move tooltipster.css and jquery.tooltipster.min.js to your root's CSS and JavaScript directories. <head> ... 2. In order for Tooltipster to work, we first need to add the .tooltip class (or whatever class / means of selection you'd like to use) to whatever element we wish to have a tooltip. Adding a tooltip to an image: Adding a tooltip to a link that already has a class: <a href=" class="ketchup tooltip" title="This is my link's tooltip message!" Adding a tooltip to a div: <div class="tooltip" title="This is my div's tooltip message!" 3. The last thing we have to do is activate the plugin. <head> ... 4. Using HTML tags inside your tooltips Tooltipster allows you to use any HTML markup you can think of inside your tooltips. Customizing Your Tooltipster's Style Tooltipster is also packaged with 4 alternative themes to choose from. Customizing Tooltipster's Functionality
DevOps : une culture de la performance 5 bonnes pratiques pour favoriser la transversalité des équipes, améliorer les performances de la DSI et rendre l’entreprise plus agile. Bien plus qu’un simple « buzzword », le DevOps est aujourd’hui au cœur des stratégies des DSI. Véritable prolongement des méthodes agiles, il vise à réduire les cycles de déploiement et à favoriser les mises en production en continu (continuous delivery), tout en garantissant la qualité, la stabilité et la sécurité des applications délivrées. Une tendance à laquelle les entreprises peuvent difficilement échapper aujourd’hui, dès lors qu’elles veulent rester performantes et compétitives, dans une économie digitale de l’instantanéité, en perpétuelle mutation, et où la concurrence s'intensifie. Des sociétés comme Google, Amazon, Facebook ou encore Twitter l’ont bien compris, et sont depuis longtemps passées maîtres dans l’art du DevOps et du continuous delivery : Amazon peut ainsi se vanter de réaliser jusqu’à 23 000 déploiements par jour ! 1. 2. 3. 4. 5.
6 полезных решений для работы с API Google Maps v3 | Занимательная Веб-картография В этой небольшой заметке я приведу шесть фрагментов кода для использования в API Google Maps v3, которые Вы сможете применять в Ваших проектах. 1. Масштабирование и центрирование нескольких маркеров на карте Задача. У Вас на карте отображается несколько объектов (метки, поллинии или полигоны) и Вам нужно так провести масштабирование и центрирование карты, чтобы были видны все они. Это можно сделать используя следующий код: Здесь, points — массив координат меток на карте. Посмотреть рабочий пример В примере мы проводим масштабирование и центрирование карты по меткам, тоже самое можно сделать для поллиний и многоугольников, передавая координаты узлов в виде массива. 2. Для того, чтобы мы могли на карте использовать маркеры со своим изображением значка, необходимо определить свой стиль. Это можно сделать с помощью кода: В начале мы определяем изображение значка метки image: Далее, аналагичный набор параметров для изображения тени значка (если необходимо). Посмотреть рабочий пример 3. 4. 5. 6.