ServerGrove PHP Hosting, Symfony Hosting, Zend Framework Hosting Typographic effects in canvas My Background Ajaxian, describing the transformation matrix, inspired me to create my first Color Sphere (2007). Which immersed me into the world of colors, and graphic primitives; inspiring the creation of Sketchpad (2007-2008) in an effort to put together an application “better than Paint” in the browser. These experiments eventually led to the creation of the startup Mugtug with my long-time friend Charles Pritchard. We’re developing Darkroom in HTML5 <canvas>. Introduction <canvas> brings Javascript programmers full-control of the colors, vectors and pixels on their screens—the visual makeup of the monitor. The following examples deal with one area in <canvas> that hasn’t gotten much attention; creating text-effects. Text-Shadows in <canvas>. CSS-like text-effects in <canvas> creating clipping masks, finding metrics in <canvas>, and using the shadow property. Neon-rainbow, zebra-reflection—chaining effects. Inner & outer shadows in <canvas> Spaceage—generative effect. Text-Shadows in Canvas
10 Great Google Font Combinations You Can Copy The average man considers which flavor of Doritos will taste good with his Heineken. The sophisticated man considers which cheese will pair well with his choice of wine. The designer of course considers which two fonts will look great on the same page. Today we’re going to use the Google Font API as a playground for mixing fonts and finding ideal pairings. A couple of times each month, we re-publish one of our popular posts from the archives. Why Google Fonts? The web font game was up in the air a few years ago. Here’s why @font-face wins. Now, within the @font-face world there are many competitors. However, I’ve used this solution several times on Design Shack before so I wanted to switch things up today and use something else. Quick Tips for Combining Fonts Before we get started, there are a few basic rules that you can keep in mind when combining fonts. Use Font Families First of all, when possible, check out the various fonts within a single family. Contrast is King Go Easy The Fonts!
Get a free Twitter Brand Assessment & Action Plan | Twylah A Place of Record: Let The World Know Everyday people from all over the world register hashtags with Twubs. Registration provides you with a record of your claim that can be used in any trademark or other legal challenge. We record the date of registration and the important details regarding the registrant. SEO For Free: Enhance Your Search Engine Optimization Strategy No SEO strategy is complete without Twubs hashtag registration. Market Presence: Brandable, Media-Rich Hashtag Landing Pages Branded hashtag pages are the missing link for any hashtag marketing strategy. Safe Content: Customizable Feed. You are in control. Hashtags are a great way to organize your followers and get the word out about your brand.
Making Image Filters with Canvas Introduction The HTML5 canvas element can be used to write image filters. What you need to do is draw an image onto a canvas, read back the canvas pixels, and run your filter on them. Sounds simple? Processing pixels First, retrieve the image pixels: Filters = {};Filters.getPixels = function(img) { var c = this.getCanvas(img.width, img.height); var ctx = c.getContext('2d'); ctx.drawImage(img); return ctx.getImageData(0,0,c.width,c.height);}; Filters.getCanvas = function(w,h) { var c = document.createElement('canvas'); c.width = w; c.height = h; return c;}; Next, we need a way to filter images. Filters.filterImage = function(filter, image, var_args) { var args = [this.getPixels(image)]; for (var i=2; i<arguments.length; i++) { args.push(arguments[i]); } return filter.apply(null, args);}; Running simple filters Now that we have the pixel processing pipeline put together, it's time to write some simple filters. Adjusting brightness can be done by adding a fixed value to the pixels: Conclusion
Template Designer Documentation — Jinja2 2.7.2 documentation This document describes the syntax and semantics of the template engine and will be most useful as reference to those creating Jinja templates. As the template engine is very flexible the configuration from the application might be slightly different from here in terms of delimiters and behavior of undefined values. Synopsis A template is simply a text file. It can generate any text-based format (HTML, XML, CSV, LaTeX, etc.). A template contains variables or expressions, which get replaced with values when the template is evaluated, and tags, which control the logic of the template. Below is a minimal template that illustrates a few basics. <! This covers the default settings. There are two kinds of delimiters. {% ... %} and {{ ... }}. Variables The application passes variables to the templates you can mess around in the template. You can use a dot (.) to access attributes of a variable, alternative the so-called “subscript” syntax ([]) can be used. {{ foo.bar }}{{ foo['bar'] }} Filters Note
umpirsky/country-list Code inComplete - Binary Tree Bin Packing Algorithm I recently built a ruby gem for auto generating CSS Sprites. It’s simple and flexible, and can be used to generate sprites in either a horizontal or a vertical layout. This works great for most use cases, but has a couple of downsides: Very wide or tall images are not very human friendly, need to zoom and pan. With different sized sprites, it can leave whitespace bulking up your images. For example, you can see the difference between this: and this: In reality, neither of these issues are very critical. Or you can read on to find out… I started by looking up bin packing algorithms in the Algorithm Design Manual: “Even the most elementary-sounding bin-packing problems are NP-complete. Ok, fair enough. “Analytical and empirical results suggest that ‘first fit decreasing’ is the best heuristic. Now we’re getting somewhere. How to pack the sprites within a single bin. Lets tackle one problem at a time: Do this recursively in the form of a binary tree and you end up with a packed image:
15 Slide Panel jQuery Plugins - DesignHuntR 15 Easy to use slide panel jQuery plugins for web designers and developers to design their websites more in a user friendly manner. Sliding panels are important in today’s world of company showcasing of your website contents. Slide panels helps you to toggle or hide your contents either by clicking or hover on a hook button. Toggling the content using a ready to use plugin can be something very useful to many of us to make the slide panel more robust. Not just that, some of the plugins I found can slide your panel from top, bottom, left or top with just some lines of script. I’ve composed 15 cute slide panel plugins out of which 11 are free and others are premium(they are worth to try). Free slide panel jQuery plugins 1) MB.jQuery Extruder Plugin – Slide down, up, left and right content This is the best sliding content panel jQuery plugin I found and it is free. 2) PageSlide jQuery Plugin – Slide the content on your sidebar 3) TabSlideOut jQuery Plugin 4) jPanelMenu – A Panel jQuery Plugin
vvvv - a multipurpose toolkit | vvvv Dealing with SVG images in mobile browsers - Adventures in WebKit land When browsing the web with my retina iPad, I often see websites that could have used SVG for their cartoon-like graphics, but used PNG instead. It seems weird, because most likely those images have been created with some vector graphics editor and then exported or converted to bitmap images. SVG has been supported in most browsers for years, but still it seems that developers are not yet comfortable with using SVG images on their websites. SVG is quite well-supported in mobile browsers. Using SVG on older Android versions Todd Anglin wrote a very good post on Kendo UI blog a year ago on how to deal with the situation on Android 2.X. In his post he writes that according to Google’s stats 94% of the Android users use version 2.1, 2.2 or 2.3. Polyfilling missing SVG support with Canvas You can use Modernizr and Canvg together to provide fallback(s) for SVG: Polyfilling SVG with Canvas demo Here is a link to a JSBin example that shows the polyfilling in full action:
Premailer: pre-flight for HTML email Faster Canvas Pixel Manipulation with Typed Arrays Edit: See the section about Endiannes. Typed Arrays can significantly increase the pixel manipulation performance of your HTML5 2D canvas Web apps. This is of particular importance to developers looking to use HTML5 for making browser-based games. This is a guest post by Andrew J. Baker. Eschewing the higher-level methods available for drawing images and primitives to a canvas, we’re going to get down and dirty, manipulating pixels using ImageData. Conventional 8-bit Pixel Manipulation The following example demonstrates pixel manipulation using image data to generate a greyscale moire pattern on the canvas. JSFiddle demo. Let’s break it down. First, we obtain a reference to the canvas element that has an id attribute of canvas from the DOM. The next two lines might appear to be a micro-optimisation and in truth they are. We now need to get a reference to the 2D context of the canvas. Now comes the main body of code. We draw pixels to image data in a top-to-bottom, left-to-right sequence.