I was tasked to update and curate the content daily at Constructs, which is really exciting. Here’s why.

Sharing & Learning

Before this, the designers and developers at Stampede are always Googling for solutions whenever we encounter any roadblocks. When we found the solutions, often times we just set it aside in our own bookmarking tools. One day, we decide, “hey, why not share the solutions we found with everyone too?” and that was how Constructs was born – to compile all the tricks, hacks and trips every one of us have collected from amazing people.

But just taking in the advice would not be right – we want to give as well.

Guest Post

Stampede is a team of brilliant people who do brilliant work and solving a number of user experience design and development every day, sometimes effortlessly. We decided what better than this than to create a Guest Post section to feature tips from favourite front-end developer, Syazwan Hakim and web analyst, Shaiful Borhan.

These guest posts are easy to identify, there is a little badge located at the most right along the article headers.

Top Posts

Here are some of the top posts in Constructs:

Pure CSS Parallax Effect

Parallax effects are almost always handled with JavaScript and, more often than not, the result is not very impressive. In his blog post, Keith Clark found a way to achieve purely CSS parallax effect thus removing all the web performance issues. The result is consistent frame rates and perfectly smooth scrolling. You can also combine the effect with other CSS features such as media queries or supports. When used for the right purpose, CSS parallax effect engages user better and gives them that extra delight while scrolling down your website.

Bootstrap VS Foundation

At scotch.io, Chris Sevilleja loves to talk about Foundation 5 framework by ZURB. Foundation 5 is a great front-end framework that is a solid alternative to Bootstrap. It does have a few features that Bootstrap doesn’t, hence it deserves a look at the features before being dismissed. In this post, Chris outlined a cheatsheet about the difference of Bootstrap vs Foundation in terms of CSS elements, class names and also grid names.

CSS Animation Effect Libraries

Clever use of animation on websites can certainly make them look more attractive and eye-catching to end users. However, poorly coded animations can easily hog down system resources especially on mobile devices causing the page to feel laggy. Codegeekz author Gavin has compiled a list of 18 CSS animation effect libraries that should help you get started with animating your websites or simply for poking around.

CSS Glitch Effect

Chris Coyier showed us the mechanics behind Lucas Bebber’s stunning CSS effect called Glitch. Chris created three copies of the desired area via pseudo elements and these copies are positioned right on top of each other and they can be controlled individually. View more to see his complete guide to create the CSS glitch effect.

Pure CSS Drawings Cartoon Character

Front-end developers’ creativity in “drawing” using CSS never cease to amaze me. This is not limited to static illustration only but also includes animated CSS drawings. Check out the link below to view a collection of cool CSS drawings of cartoon characters by cssdesignawards. Love the pixelated Son Goku!

Steps To Draw With CSS

With the latest advancements in CSS, creating images or icons is no longer a rare thing. By using only one div, you can pretty much “draw” purely in CSS. In this article by Lynn Fisher and Robert Nyman, the authors walk through the basic steps to draw with CSS. As mentioned in this related post, CSS pseudo classes are the basis of this technique in addition to using various borders, background colors or gradients and shadow combination to produce generic shapes.

5 Thing Front-End Developers Should Learn In 2014

The web industry operates at a breakneck speed and so all front-end developers must continue to learn and keep up to date with the latest trends, methodologies, languages and techniques. In this compact yet excellent article by Joe Howard, you will find 5 useful skills you could master this year that will help you remain at the forefront of the latest web development know-how. Think SASS, Grunt, SVG, CSS animation and custom parallax.

Pure CSS Image Comparison Slider

An image comparison slider is a good design approach allowing user to compare differences between two images. After seeing post about “Before and After” by Dudley Storey, Lea Verou has created an experiment to create the same effect by using minimal and purely CSS code without JavaScript. The original markup shows images as CSS backgrounds, so it posed a problem for screen readers. Instead, Lea overlaid a div on an image and made it horizontally resizable through the resize property.

Alternative Using CSS Float Properties

If you have been designing for the Web at all over the past decade you are undoubtedly familiar with the CSS float property. Since the industry adopted the principle of tableless layouts, floats have been the weapon of choice most of us use to lay out our web pages, but is it the best choice?

Conclusion

Over a few months of running Constructs, I have learned a lot from the articles and demos scoured around the Internet as well as those shared by Syazwan and Shaiful. It also inspires me to be experimental and apply some of the ideas into my projects. We also share our Constructs posts in our Google+ page and some of them have received so many positive feedback. It really made me happy to be able to also inspire people in our industry as well.

Feel free to visit our Constructs and tell us what you think!

The post Running Stampede Constructs appeared first on Stampede: the strategic design & technology company.

The situation

While working on one of my projects, I encountered an issue to render a mobile website on my desktop for debugging purposes. The task was to restyle the mobile version of the site. To make it even more complicated, the requirement includes no html structure change – only CSS.

I found it difficult to debug the styling on mobile since instead of being a responsive template, I was working with an adaptive template. Minimising the browser to mobile size and using mobile emulator didn’t help either – it still shows the desktop version of the site. But if the site is viewed using a mobile device, it will render the mobile version.

The first thing that came into my mind was, “Wouldn’t it be good if we have ‘inspect element’ option on our mobile browser?”

Assuming the wish comes true – it might work on your mobile device, but not on others. Let’s not forget there is an abundance of mobile devices in the market nowadays. No developer will want to purchase every single mobile device just to debug the mobile issue.

The solution

There is this quote from Henry Louis Mencken of which he says, “For every complex problem, there is a solution that is simple, neat and wrong”.

Wrong is not how I would say my solution would be, but definitely better. It comes in the form of the browser’s user agent. By having the browser change its user agent to act as a mobile browser, we can proceed to safely debug mobile issues. We can also change browser user agents very easily too.

Taking Firefox for example, there are add-ons or extensions to switch between user agents. The Override User Agent extension is particularly useful.

Default user agent for Firefox

Android user agent

iPhone user agent

Conclusion

In short, you may find that you are able to debug mobile sites using your favourite web developer tools that you have been using on a daily basis – which goes the very same for me.

Have you got any other solutions to debug the mobile issues? Always happy to hear your thoughts.

The post Debugging mobile website through user agents appeared first on Stampede: the strategic design & technology company.

Supermassive can help you to create a great looking theme that allows you to make your own unique and abstract layouts in minutes. You can easily change the position of a particular element since the <div>s are fluid. Imagine you have two horizontal boxes, named Box Left and Box Right. You can easily make Box Right in 100% width by just removing Box Left completely.

I find this task to code based on Supermassive template really puts my XHTML/CSS skills to the test. I need to optimize everything that I’ve learned about building reliable yet semantic XHTML/CSS template which works on IE6, IE7, IE8, Chrome, Opera, Firefox and Safari. Working with a custom design on an existing theme requires a different set of considerations.

The first thing I needed to consider is where to do the front-end coding for the custom design. This is because we want to be able to update Supermassive template in the future when a new version is released. Therefore, I need to consider where to add my front-end codes. After some discussions, we decided to code on a Supermassive Child Theme. It’s the easiest yet very reliable way to keep the ability to update to new Supermassive version in the future. When updating Supermassive original template, it will only replace the parent theme which is the original Supermassive Theme. In this case, updating the original template won’t affect the child theme.

Second thing to consider is the HTML structure. Since Supermassive uses shortcode heavily for its layout based on <div>, I can’t simply code custom HTML structure. What I need to do is to create each Supermassive element using the shortcode first. Once all elements are created, I can start styling the elements based on design without making changes on the HTML element or structure. Using this method, I can still use any Supermassive shortcode without having to worry about the styling even if the shortcode will never be used.

The last thing to consider is how to make the template styled according to my custom CSS instead of the original CSS. This is the trickiest part. I need to make sure everything on the custom CSS has the highest priority, so the website will be styled according to it. We can’t simply remove the original CSS because we still need some styling from it such as the administration interface, sliding effect and JavaScript element.

For me, the easiest way is to add !important syntax at the end of the styling, e.g. div a {text-decoration:hover !important;}. With that, it will have higher priority. I recommend not to define any font size on the CSS because on current version of Supermassive template, there is a specific panel to change the font size directly.

Supermassive is a great tool for WordPresser because it comes with its own JavaScript snippets which includes sliding effect, tabs, and image manipulation. It also has a very user-friendly interface for administration. I’m sure Supermassive shortcode list will come in handy for beginners.

The post Supermassive Custom Template appeared first on Stampede: the strategic design & technology company.

While this is not a bad thing at all, it is however quite cumbersome if you’re using custom shortcodes (that generate divs) in your content creation and you’re planning to arrange them nicely in the editor by giving a couple of line breaks for better readability. They will end up in the frontend as <div> wrapped inside a <p>, and you’ll get some unwanted <br /> as well. Certainly not pretty.

The auto-formatting function will still run even if you disabled the visual editor entirely because it is not part of the TinyMCE editor. In fact it is performed via a function in WordPress called wpautop that runs before the content is displayed on the frontend. Thus it is possible to bypass this feature by using the remove_filter function in our theme function.php file. The simple code for a global site-wide effect is:

 
   remove_filter('the_content', 'wpautop');

A more elegant approach would be to use a custom field to control which content will bypass wpautop and which not. This way we can still take advantage of the usefulness of the wpautop function for pages that doesn’t require fancy HTML. The code below also goes in the function.php file.

function WP_auto_formatting($content) {
    global $post;
    if(get_post_meta($post->ID, 'disable_auto_formatting', true) == 1) {
        remove_filter('the_content', 'wpautop');
    } 
    return $content;	
}
add_filter( "the_content", "WP_auto_formatting", 1 );

Using this method, you simply have to add a custom field in your post/page called disable_auto_formatting and give it a value of 1 to bypass the wpautop function. To enable auto formatting, simply change the value to 0 or delete the custom field.

Have a nice day!

The post Disable HTML Auto-Formatting in WordPress appeared first on Stampede: the strategic design & technology company.

Why not CAPTCHA?

Well, spam prevention wise CAPTCHA challenge works. But the main problem is it considerably lowers the user experience by requiring extra effort and time to read the garbled image that may deter the user from completing the form altogether. To overcome that, they came out with the audio version of CAPTCHA which seriously, is even more troublesome. On top of that, having a CAPTCHA image certainly cripples the aesthetics of a well-designed form. With all these shortcomings however, CAPTCHA might be the best method to counter manual spammers (humans) because they would get too annoyed to do the CAPTCHA challenge.

Apart from image CAPTCHA, we could use a different version of challenge question method. One of the popular approaches is to present users with simple arithmetic operations e.g. “What is 4 + 2?”  As with CAPTCHA, it is also randomized each time the form reloads. Another variant is to use questions that requires textual answers such as “What animal meows?”. It should be noted that questions like these should be made simplistic as it introduces language barriers between the users and the system and to prevent the user from taking extra efforts.

Alternative “Are You Human?” Tests

The methods described above require user input in order to distinguish humans from spambots. This additional step can be eliminated by using a little bit of programming logic to validate the form submission on the server side.

Spambots usually love to fill out every field on the form. We can take advantage of this behaviour to trap the bots by setting up a field that is hidden from the user’s view, assuming it would not be filled by a legitimate human user. This field has to be a normal type=“text” with a tempting name like ‘email’ or ‘website’ except it has a CSS “display:none” property. The idea is to flag the form submission as spam if this field was filled. To cater screen reader users without CSS support, adequate label should be applied telling them to leave this field blank. Additionally, bots also have the tendency to post links and irrelevant keywords in textarea fields. A carefully crafted regex validation on these fields would help prevent faulty form submissions substantially.

Another advanced approach is to attach a unique, dynamically-generated token as a hidden field on your form and then check its validity upon submission. These tokens can be produced using session IDs or simply timestamps. The idea behind this method is to ensure the user viewing the form is essentially the same user submitting it. The timestamp method can be used to calculate the time elapsed between the page being viewed and submitted.

Modern Day Solutions

In order to stay concurrent with the advancement of spambots, the measures taken to combat spammers have also been taken a step further by using a collaborative, distributed and intelligent approach as can be seen in Akismet and Project Honey Pot. The Akismet service is fairly popular because it comes natively with WordPress, arguably the most used blogging platform in the world. What it actually does is it runs numerous tests on the form submission data against its own huge collection of black/white list and returns the status with a thumbs up or thumbs down. The filter works by combining information about spam captured on all participating sites, and then using those spam rules to block future spam.

All in all, there will not be a silver bullet for solving web form spamming. Spambots will always become smarter and we quite surely couldn’t stop manual spamming. Nevertheless, with modern services like Akismet and Project Honey Pot the prospects certainly look promising.

The post Spam Prevention Alternatives to CAPTCHA appeared first on Stampede: the strategic design & technology company.

HTML 5 is an extension of HTML 4 and XHTML 1. It gives web developers new functionalities for a more dynamic and improved user experience. This bit is interesting to me because the emphasis is now given to users, not only us developers.

It allows for better cross browser compatibility between mobile, desktop, netbook, pda, e-reader and whatever gadget there is in the future with the ability to display a web page.

Kevin Purdy from the Lifehacker sums it all rather neatly:

HTML 5 is a specification for how the web’s core language, HTML, should be formatted and utilized to deliver text, images, multimedia, web apps, search forms, and anything else you see in your browser. In some ways, it’s mostly a core set of standards that only web developers really need to know. In other ways, it’s a major revision to how the web is put together. Not every web site will use it, but those that do will have better support across modern desktop and mobile browsers (that is, everything except Internet Explorer).

The Technicalities

We often define class or id to any major <div> for styling on CSS such as <div id="header"> or <div id="footer">. In HTML5, most common div like header, footer and side content now have their very own element: <header> (for header block), <nav> ( for navigation menu ), <article> (for content), <section> (for generic document inside content), <aside> ( for side content ), and <footer> (for footer block). For a developer like me, this simplifies the entire development process and reduces page load time without the need to assign class or id to your markup.

Remember the long url and <object> or <iframe> tag for fitting video into your website? HTML5 comes with a nifty solution – the <video> element. It can now easily embed video without using the object element. There is some debate about the codec we should use as default, though. You will find an interesting attempt at breaking down the codec debate here.

For the table-base web site, the <td> element is no longer allowed in <thead>. Besides improving page load, I find it useful for the tricky bit when I need to add emphasis to a certain content. I have been using <span> frequently, ranging from font and font color change to adding a different hue to background. HTML5 utilizes <mark> instead of <span> to highlight these content. I look forward to this.

The most stunning thing for me about HTML 5 is the contenteditable attribute. Any element with contenteditable attribute will allow the designated user to add and edit text on the web page, without having to use an editor. And it’s all LIVE.

HTML 5 also packed up the input element with more control, one of which is <input type="tel">. This will automatically change the input box format for telephone number. For the large input box such as comment box, i often use “textarea”. But there are new member of “textarea” in HTML5 called “textLength”. So that, we can easily define the length of the text inside the input box no matter how big the box is. Another cool thing about HTML5 is the capability to drag and drop pretty much anything. It allows you to drag and drop information block on a web site such as URLs, files, bookmarklets and anything into a drop zone. This was achieved by javascript before. To be able to do this with only markup is a refreshing change.

Another new element worth a mention is <nav>. Current HTML relies heavily on CSS to get navigation to work with <ul> or <ol>. In HTML5, <nav> will float the links side by side automatically.

It is also a lot easier to arrange the layout with HTML5. The <hgroup> allows you to group headings, letting you manage headers more effectively. If your content is heavily embedded with video, table or photo, you might want to give <figure> a try. This elements will allow you to add caption for your embedded content. You also can used <figure> element in conjunction with the <legend> element to provide a caption for the contents of your <figure>; element.

Dropped

Apart of the new elements, I noticed that a few deprecated elements have not made it to the latest version. They are <acronym>, <applet>, <basefont>, <big>, <center>, <dir>, <font>, <frame>, <frameset>, <noframes>, <s>, <strike>, <tt>, <u> and <xmp>.

All in all, HTML5 is packed with cool new features, code slimming advantage and a few slick solution to the current way we build front-end. While it attempts to solve issues found in earlier iterations of HTML, HTML5 also addresses the needs of Web Applications – an area previously not adequately covered by HTML. To end with an understatement, it will also change the way we use the web in the future.

(Photo by Anja)

The post My Take on HTML 5 appeared first on Stampede: the strategic design & technology company.