Last week I reviewed ‘Responsive Web Design’ by Ethan Marcotte and in theory I stand by what I thought of it but in practice things are a little different. As I rework my recent blog engine project into making it responsive I noticed a fundamental flaw in Ethan’s teachings.
Now making a pre-built site responsive is simple a case of changing all pixel based css values into percentages based upon their container. When it comes to margins and paddings for example this is what the book stated:
- When setting flexible margins on an element, your context is the width of the element’s container.
- When settin flexible padding on an element, your context is the width of the container itself.
Now this made perfect sense to me thinking about the box model, but on using this theory in my project I found the resulting padding was completely off target. Only when using the padding in relation to the elements container was I able to get the values I wanted – not as Ethan Marcotte explained.
On a brief search of the web, I was unable to find a direct apology from the author ( unlikely I know) but will do some research into how other developers have achieved flexibility of margins and paddings.
I am currently reading ‘Responsive Web Design’ by Ethan Marcotte from the ‘a book apart’ series to further my knowledge in this area. The number of devices and browsers that we need to design and build for is continually growing and this book brilliantly explains how we can approach targeting them all. Having known a little on the subject of media queries, this book was a good choice for expanding my knowledge but would be equally useful to a novice front-end developer.
Now although I think this book is great at simplifying quite a complex subject, there were a few annoyances I had. Throughout the lines of explanatory code, (and there is a lot,) the author seemed to avoid using css3 selectors, in what is clearly a css3 subject. Whereas this could have been a deliberate attempt to not confuse the beginner, it felt a little bit sloppy. For example, the author added an ID to each navigational item as css hooks where he should have used pseudo classes e.g nth-child(even).
Another example of outdated code was the authors use of the <b> and <i> tags to wrap an image. He explained his reasoning was a preference for one letter tags but the problem is these have semantic meaning and default styling as well. Therefore a <span> or <div> would have been more appropriate as a css hook here.
Reading this book has encouraged our front-end team to think about standardizing our approach to responsive development. Going forward we will include media queries inside our default stylesheet so as to reduce the number of browser requests and make for more logical reading.
So although I couldn’t help pulling apart the code in places I think this book demonstrates how we can respond to the user’s needs no matter how they are choosing to view a site. And all In just 150 pages.
The next step in my blog engine project is to use the attribute contentEditable that I talked about in my last post together with jquery to add different elements to the page. Depending on what button the user clicks, the correct markup is added to the page, which is then editable. My code looks like this:
$('#controls ul li a').click(function () {
var markup = $(this).attr('href');
if (markup == 'hr') {
$('section[role=main]#detail #movable').append('<' + markup + ' />');
} else if (markup == 'blockquote') {
$('section[role=main]#detail #movable').append('
<' + markup + ' contenteditable="true">"Click to edit"
');
} else if (markup == 'ul' || markup == 'ol') {
$('section[role=main]#detail #movable').append('
<' + markup + ' contenteditable="true"><li>Click to edit</li>
');
} else {
$('section[role=main]#detail #movable').append('
<' + markup + ' contenteditable="true">Click to edit
');
}
$('section[role=main]#detail .editable').unbind();
bindHover()
return false;
});
I then want to add a toolbar when hovering over these editable areas on the page,that disappears when you move the mouse away. My code for this is as follows:
$('section[role=main]#detail .editable').mouseenter(function () {
if (!$(this).hasClass("active")) {
if ($('.top-bar', $(this)).length == 0) {
$(this).prepend('
<ul><li><a href="#" class="move">Move</a>
<li><a href="#" class="delete">Delete</a></li>
');
$('.top-bar ul li a.delete', $(this)).click(function () {
$(this).closest('.editable').remove();
});
}
}
}).mouseleave(function () {
if (!$(this).hasClass('active')) {
$('.top-bar', $(this)).remove();
}
});
In extension of this functionality, I want the toolbar to remain visible when the area is clicked and include extra styling options. Here is my code:
$('section[role=main]#detail .editable').click(function () {
if (!$(this).hasClass("active")) {
$('section[role=main]#detail .editable').removeClass('active');
$('section[role=main]#detail .editable .top-bar').remove();
$(this).addClass("active");
$(this).prepend('
<ul class="styling"><li><a href="#" class="bold">B</a></li><li><a href="#" class="italic">I</a></li><li><a href="#" class="link">Link</a></li></ul><ul><li><a href="#" class="move">Move</a></li><li><a href="#" class="delete">Delete
</li></ul>');
$('.top-bar ul li a.delete', $(this)).click(function () {
$(this).closest('.editable').remove();
});
}
});
Finally here is how it all works together.
Recently I’ve been collaborating on a blog engine with a designer (Simon) and back-end developer (Jason). Using Simon’s built WYSIWYG editor ( see previous post ) as a starting point we are aiming to create a user friendly blog that can be edited ‘on the fly’.
So the html5 attribute ‘contenteditable’ is fundamental in our development allowing us to avoid the use of form textareas to input text. This quick demo shows that by adding ‘contenteditable=”true” to the element the user can directly edit the text inside. Such an easy bit of work for a massive chunk of our editor.
For a recent project I was required to create a scrollable map that also acted as a slideshow of content. I was pointed in the direction of an online script called dragdealer.js. On first view this seemed to have all the features I needed and would be easily customizable to the design I was working from.
So I started editing the markup to create my 3x4 grid but immediately hit a problem with my slides not scrolling to the coordinates I had set. With little explanation to the script online I eventually realized that I would need a grid of equal slides horizontally and vertically, so I reworked my coordinates. The drawback of this was I would have to use extra markup to create these empty slides.
So my code then looked like this; with steps being the number of slides horizontally/vertically.
var canvasMask = new Dragdealer('canvas', { x: 1, y: 0, vertical: true, steps: 5, loose: true });
var slideCoordinates = [[1, 0], [2, 0], [3, 0], [1, 1], [2, 1], [3, 1], [1, 2], [2, 2], [3, 3], [1, 3]];
However at this point my dragging functionality still wasn’t working correctly. After a lot of trial and error I worked out this formula.
x = x / (steps -1) & y = y /( steps-1)
So..
var canvasMask = new Dragdealer('canvas', { x: 0.25, y: 0, vertical: true, steps: 5, loose: true });
var slideCoordinates = [[0.25, 0], [0.5, 0], [0.75, 0], [0.25,
0.25], [0.5, 0.25], [0.75, 0.25], [0.25, 0.5], [0.5, 0.5], [0.75, 0.5],
[0.25, 0.75]];
Take a look at my demo
I wanted to create a typical navigation bar that progressively enhanced for those browsers supporting HTML5 and CSS3.
I used Jquery in conjunction with HTML5 and CSS3 to give the user more information about the link destination. So for instance I used custom data attributes to avoid using unnecessary paragraph tags in the markup that would appear irrelevant to those not using JavaScript.
The trickiest thing to overcome was setting the paragraphs background colour dependant on what link had been hovered on. After struggling with using multiple arrays I was introduced to JSON. JavaScript Object Notation allowed me to manually set an href value for each links color attribute and then call it on a mouseover function and set it to the visible paragraph.
And after removing a few little mouseout glitches I now have a smooth working navigation that works for all browsers. Take a look at the demo.
So for a recent project I needed to create multiple lists and be able to drag and drop their items from one to the other. The idea of user interaction that involves dragging elements was completely daunting until i stumbled upon jQuery UI.
jQuery UI is a great open source library of animation plugins and effects that you can easily integrate into your existing jQuery code. They are compatible with all modern browsers and can be easily skinned to fit seamlessly with your work.
jQuery UI Sortbale plugin was exactly what i was looking for as i could move items around freely and empty lists were acceptable. The site provides great documentation telling you exactly which files to include.
Take a look at some demos to see jQuery UI’s capabilities.
A project I’ve been recently working on required me to create an background google map with specific locations plotted. On top of this functionality, the design called for it to have a custom overlay to fit in with the branding of the website. And there started many long days of searching the web and playing around with scripts before finally producing a working map. The lack of a simple tutorial for this visually impressive feature has inspired me to write one myself.
I’m going to try and explain how to give an already embedded map a custom overlay. This will only work in accordance with V2 of Google’s map API.
1) Create a GCopyright Object
Google requires all tiles to have a copyright owner set. The GCopyright constructor follows the following form:
var copyright = new GCopyright(, , );
2) Create a GCopyrightCollection
You then have to create a GCopyrightCollection as you are going to be creating a set of tiles. This follows the form:
var copyrightCollection = new GCopyrightCollection();
3) Add the GCopyright Object to the GCopyright Collection
You then have to add your GCopyright instance to the GCopyrightCollection. This will group together the copyright of your generated tiles.
var copyrightCollection = new GCopyrightCollection('Chart');
copyrightCollection.addCopyright(copyright);
4) Create a GTile Layer Object
You then need to create a layer that will represent the actual images of the custom map type. Here you will need to decide on the minimum and maximum zoom levels of your map as well as the location of the tiles. This script will map the tile coordinate to the map tile where a is the coordinate and b is the zoom level.
var tilelayers = [new GTileLayer(copyrightCollection, 13, 15)];
tilelayers[0].getTileUrl = CustomGetTileUrl;
CustomGetTileUrl = function (a, b) {
if (a.x >= 533 && a.x <= 2133 && a.y >= 295 && a.y <= 1187) {
return "Uploads/Images/Map/" + b + "_" + a.x + "_" + a.y + ".jpg";
} else {
return "Uploads/Images/Map/" + b + "_" + a.x + "_" + a.y + ".jpg";
}
}
5) Create a GMapType Object
Most of this can be unchanged for your map but it is vital for the next step.
var custommap = new GMapType(tilelayers, G_SATELLITE_MAP.getProjection(), "Old OS");
6) Apply the GMapType to your map
Now you’ve set up your GMapType, just add it to your already created default google map.
map.addMapType(custommap);
Now this is all the code you will need in your javascript file. However at the moment it is pointing to images of tiles that don’t exist. So we need to save these to the folders we specified earlier. Now if you have a lot of time you could do this manually but the likelihood is you’re implementing multiple zoom levels in which case there will be hundreds or even thousands of images.
7) Configure your tile generator
There is a great script here http://mapki.com/wiki/Automatic_Tile_Cutter#Updated_Script.
You will need to customise the following values in accordance with your map.
var FolderPath – //The path to the folder where the images will be stored.
var OrgX - //The x value
var OrgY - //The Y value
var OrgZoomLevel = 5; - //The zoom level
var OrgTileWidth - //The number of tiles wide your map is.
var OrgTileHeight - //The number of tiles high your map is.
http://anymap.org/GmapImage2TileGenerator/ - This app will help you work out map width, height and your first x and y values.
8) Run your tile generator
You need to open your custom map image in photoshop and run the script that you have just created. File > Scripts > Browse >. Make sure the folder that you have set in the script exists.
And you should now have a custom overlay for your google map. Here a few examples:
http://dentsunetwork.com/#/network/agencies
http://novembro.net/es/home
Moving on from my last post in which I drew the CJ origami bear using HTML5 Canvas, I discovered that animating it was a lot tougher.
Setting the canvas to refresh every third of a second, it was obvious that I needed to write a function that would plot the new points of the shape as it moved. Manually setting these each time would be ridiculous!
The process of animating with Canvas follows three steps: Draw, update and clear.
-
So first you draw your shape, which I had done previously.
- Then you have to update its position. This could be a relatively simple function; for example adding 1 to the x coordinates each time would move the shape in a horizontal line. I chose to use context.rotate which quite obviously rotates the shape round a fixed point.
- And finally you clear the canvas to start again. I discovered this part’s pretty important after getting an infinite amount of bears drawn on top of each other!
However, whilst it’s all very exciting that it moves, it’s just not realistic enough for my liking. So until I can make the bear jump through hoops I’ll keep working on it.
Recently I came across the custom error page of the creative jar website; featuring a very fancy image of an origami bear. Because of it’s simplicity in the shapes that are used to make it up I thought this could be replicated using the latest technologies in web design.
Now I’m well aware that uploading a jpeg takes a fraction of the time, but thought it would be neat to create this using just a bunch of code.
My first thought was to use CSS3 to draw and layer up the shapes having just learnt a little trick about creating triangles. By defining a width and height of 0, then setting transparent borders on all but one of its sides I was able to play around with border-width to create different angled triangles. The downfall with this method was there is no way off adding drop shadows to custom shapes in CSS3 so I was not able to achieve the realism of the shapes in the original image.
.left-front-foot {
border-color: transparent transparent #ff4500 transparent;
border-style: solid;
border-width: 0px 11px 17px 21px;
height: 0px;
width: 0px;
position: absolute;
top: 205px;
left: 178px;
-moz-transform: rotate(4deg);
-moz-transform-origin: 0 100%;
}
I then turned to HTML5 canvas having never used it before and was surprised at how easy it is to get something drawn on the page. Using this method I was able to plot the points of each shape separately with no need to position them on the page using CSS. I was able to replicate the origami image almost perfectly by defining individual shadows for each shape. Maybe with a slight cheat at the end I positioned an image of the more 3D looking shadows underneath the canvas to get it looking as accurate as possible.
//Left front foot
context.beginPath();
context.moveTo(179, 220);
context.lineTo(200, 204);
context.lineTo(214, 220);
context.fill();
context.closePath();
Take a look at the final example here.
After a little more research i’m going to attempt to animate this little fella.