How to use src.sencha.io This Guide is most relevant to Sencha Touch, 1.x. Sencha.io Src helps you dynamically resize images for the ever increasing number of mobile screen sizes. We’ve previously done a lot of work in Sencha Touch to make your UI resolution independent, and Src expands this to include your image assets. It’s easy to use, and in this guide, we run through the main API options for the service. Sencha.io Src is essentially a proxy that lies between image assets (hosted either on your own server or by a third party) and the browser or application requesting them via HTTP. The API is accessed entirely via placing a prefix before the original image URL. Let's start with a quick example. To use Sencha.io Src in its default mode, you simply prefix your absolute src attribute with Add that into the tag and your image will be magically resized for a smaller, mobile screen: In this particular case, the image is of landscape orientation, and so width becomes the constraining dimension.
Brakeman - Rails Security Scanner » Responsive IMGs Part 2 — In-depth Look at Techniques Cloud Four Blog Responsive IMGs Part 2 — In-depth Look at Techniques In Responsive IMGs Part 1, I took a high-level look at what responsive IMGs are, the problem they are trying to solve, and the common issues they face. In this post, I’m going to take a deeper look at the specific techniques being used to provide responsive IMGs and try to evaluate what works and doesn’t. When I started working on this project two months ago, I thought I would get to the end and be able to say, “Here are the three approaches that work best. What I’ve found is that there is no comprehensive solution. Because of this, the best thing we can do is understand the common elements and challenges so that we can start to pick the best parts of each for building our own solutions. So um… this is a long post. Abandoned approaches Dynamic Base Tag Many of the early techniques used javascript to dynamically change the base tag. Unfortunately, this approach ran into race conditions that I described in part 1. Temporary images 1. 2. 3.
Vertically Center Multi-Lined Text If you only have a single word or a single line of text, there is a clever way to vertically center it in a block with CSS. You set the line-height of that text to be equal to the height of the box. Works great, but is a major fail if that text needs to wrap. A "speech bubble" is a classic example of somewhere we might want text to be centered both horizontally and vertically and be adaptable to multiple lines. View Demo Download Files The HTML is nothing fancy. <div class="area"><div class="bubble"><p>To look best, text should really be centered inside this bubble both vertically and horizontally. The "bubble" we'll set to display: table;, which really doesn't do much by itself, but then we can set the <p> element inside to be a table-cell, which allows us to use the vertical-align property on it. Does the trick beautifully I think. What about IE <= 7 ?! IE 8 is supporting CSS tables, but IE 7 and below do not. ... could be worse. First wrap the inside <p> in a new <div> and then: Share On
» Responsive IMGs — Part 1 Cloud Four Blog In my post “Where are the Mobile First Responsive Web Designs”, I noted that one of the first things I look for when trying to determine whether or not a responsive web design is “mobile first” is whether or not it has a strategy for handling the IMG tag. A recent Smashing Magazine round up of responsive web design techniques included several new approaches for handling IMG tags which makes it the perfect time to dig into this problem and the potential solutions in more depth. Why IMG Tags Suck for Responsive Web Design If you want your site to load as quickly as possible, you do not want to deliver larger files than are needed. Many responsive web design sites provide mobile devices images at sizes appropriate for desktop and ask the mobile device to resize the image. In my research, I found nearly 80% decrease in file size by delivering images at the actual size they were going to be used on a mobile device. So what’s the problem with the IMG element in responsive designs?
#130 Monitoring with God Need to ensure your background processes stay up and running and don't use too many resources? Check out the god gem as shown in this episode. Download: source codeProject Files in Zip (121 KB)mp4Full Size H.264 Video (27.9 MB)m4vSmaller H.264 Video (16.9 MB)webmFull Size VP8 Video (42.3 MB)ogvFull Size Theora Video (38.9 MB) johnkoht/responsive-images Nil Gradisnik : CSS inverted border radius Everybody knows how to make rounded borders, it's right there in the CSS3 spec. Ever wondered how to do borders with radius inverted in pure CSS? I was facing this challenge a while ago and I just wanted to share the results. You start off witht this HTML structure As you can see it takes quite a few extra DOM elements to achieve this. The following CSS will do the trick You can control the border radius by changing the width and the height of the .inner i and adjust the margins accordingly, which is half of the width/height. One thing to note about this is that you will need a solid background color of the parent container. You can see the results at the bottom our Jobs page:
Which responsive images solution should you use? There are a bunch of techniques going around for dealing with responsive images lately. That is, solutions to help us serve the right image for the occasion (e.g. size of screen and bandwidth available). They all do things a bit differently. To keep track, Christopher Schmitt and I have created this spreadsheet of techniques. The spreadsheet has the data, but let's digest it through thinking about it through the lens of practical questions. To choose which technique is right for you and your project these questions may help as a guide. Do I have legacy content? Which really means... do I have legacy content that is impractical to update? The only technique I know of that works with absolutely no markup changes is Adaptive Images. Another question to ask yourself is if you care about legacy content. Do I care about special markup? This is really a sub-question of the above. Do I care about semantics? Some responsive images techniques involve markup which isn't strictly semantic. Share On
A Beginner's Guide to Wireframing Wireframing is an important step in any screen design process. It primarily allows you to define the information hierarchy of your design, making it easier for you to plan the layout according to how you want your user to process the information. If you've yet to use wireframing, it's time to get your feet wet. Before we get started though, a quick question: are you needing a pro website solution? If so, we have a number of HTML Templates and PSD Templates that may fit your needs. Otherwise, let's get into this tutorial! It's like an architectural blueprint; you need to see it in two-dimensional black and white diagrams before you understand how to build the actual house. At a deeper level, a wireframe is also very useful in determining how the user interacts with the interface. Wireframing is important because it allows the designer to plan the layout and interaction of an interface without being distracted by colors, typeface choices or even copy. What makes it a winner?
ResponsiveImages: A Ruby Gem for Server and Client-Side Responsive Images A simple, flexible and elegant solution for responsive images in rails applications. Responsive images seems to be an ongoing problem without any great solutions yet. As we continue to develop responsive front-ends, we continue to develop better way to address the problem. The Problem Most solutions tend to be either client-side implementation like HiSRC or rwdImages or occasionally, there are server-side solutions for Apache that require .htaccess. Unfortunately, we don't use Apache and I'm not a big fan or relying on third-party services. A few months ago I developed a simple jQuery plugin to handle Responsive Images on the client-side. Our Solution The overarching problems is that we don't know what size the device is before the page is rendered. Using the responsive_image_tag helper, the gem will automatically load the appropriate size for the src attribute prior to rendering the page. The gem also handles background images with responsive_background_image.