<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Articles by Sani Halid &#8212; Stampede: the strategic design &amp; technology company</title>
	<atom:link href="https://stampede-design.com/blog/author/sani/feed/" rel="self" type="application/rss+xml" />
	<link>https://stampede-design.com/blog/author/sani/</link>
	<description>We are creating better worlds though thoughtful design and technology. Connect with us!</description>
	<lastBuildDate>Tue, 07 Apr 2026 10:17:15 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.8.5</generator>

<image>
	<url>https://stampede-design.com/wp-content/uploads/2024/02/cropped-Stampede-Favicon-old-32x32.png</url>
	<title>Articles by Sani Halid &#8212; Stampede: the strategic design &amp; technology company</title>
	<link>https://stampede-design.com/blog/author/sani/</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>Singapore!</title>
		<link>https://stampede-design.com/blog/singapore/</link>
					<comments>https://stampede-design.com/blog/singapore/#respond</comments>
		
		<dc:creator><![CDATA[Sani Halid]]></dc:creator>
		<pubDate>Mon, 20 Apr 2015 17:25:40 +0000</pubDate>
				<category><![CDATA[Inside Stampede]]></category>
		<category><![CDATA[city series]]></category>
		<category><![CDATA[remote]]></category>
		<category><![CDATA[Singapore]]></category>
		<category><![CDATA[team culture]]></category>
		<category><![CDATA[team travel]]></category>
		<guid isPermaLink="false">http://dev.stampedelabs.com/client/v3/wp/?p=6284</guid>

					<description><![CDATA[<p>There is always the first time for everything – like being dragged along with your Creative Lead and your Project Manager to watch a poetry show across the Causeway. At least, that has happened to Sani.</p>
<p>The post <a href="https://stampede-design.com/blog/singapore/">Singapore!</a> appeared first on <a href="https://stampede-design.com">Stampede: the strategic design &amp; technology company</a>.</p>
]]></description>
										<content:encoded><![CDATA[<p class="lead" class="lead">There is always the first time for everything &#8211; like being dragged along with your Creative Lead and your Project Manager to watch a poetry show across the Causeway. At least, that has happened to me.</p>
<p>It all started when Zana signed in to work, announcing as ever shamelessly as she always is, that she had two extra tickets to go watch <a href="https://www.youtube.com/watch?v=mdJ6aUB2K4g" target="_blank">Sarah Kay &amp; Phil Kaye</a> at <a href="http://theprojector.sg/" target="_blank">The Projector</a> &#8211; and inquired if anyone else would like to go with her. Shaza volunteered right off the bat, while the rest had things to do over the weekend. I was reluctant to go along because I was never interested in literature. However, with a little bit of arms twisting by the girls (they were way stronger than I thought!), I agreed.</p>
<p>Besides, this would be my first international flight. Should be exciting.</p>
<h2>Day 1: Looking for the merlion</h2>
<p>After approximately 1 hour and 30 minutes direct flight from Langkawi Island, we found ourselves in Changi Airport, one of the largest transportation hubs in the Southeast Asia. The multiple award-winning airport serves close to 6,500 flights on a weekly basis! And I thought having to complete 5 HTML/CSS pages in a week is already such a traffic!</p>
<p>I got the window seat, so I had the chance to see how the view changed from when we departed from Langkawi all the way to Singapore. Before landing at Changi, I saw there were hundreds of cargo ships in the coast compared to where it was in Langkawi. Being in the plane, flying untethered, reminds me of what comedian Louis CK said, <em>&#8220;You&#8217;re sitting in a chair in the sky. You&#8217;re like a Greek myth right now.&#8221; </em></p>
<p>I was practically Icarus right at that moment.</p>
<p>We made our way to our hostel, <a href="http://www.5footwayinn.com/links/project-bugis.html" target="_blank">5footway.inn Project Bugis</a> slightly earlier than the check-in time. After leaving our bags at the hostel while waiting for the rooms to be ready, we decided to walk around the place to scout for lunch spots.</p>
<div class="full"><img decoding="async" class="alignnone wp-image-6675 size-full" src="https://stampede-design.com/wp-content/uploads/2015/04/5footwayinn.jpg" alt="5footwayinn" /></div>
<p>This is our first time in Singapore, so we had no idea what to expect much. We were delighted to find that our hostel is situated in the Kampung Glam neighbourhood, where the famous Haji Lane is. The streets are filled with narrow shophouses which had been given a new lease of life by local designers and young entrepreneurs who have set up their fashionable boutiques and hip restaurants here. Grub should not be a problem, so one issue solved!</p>
<div class="full"><img decoding="async" class="alignnone wp-image-6680 size-full" src="https://stampede-design.com/wp-content/uploads/2018/02/masjid-sultan-kampong-glam.jpg" alt="masjid-sultan-kampong-glam" /></div>
<p>A particular place caught my eye: it&#8217;s called Children Little Museum. I begged the girls so that we could visit the place right away, but Zana said, &#8220;Last day, Sani, on our last day here.&#8221;</p>
<p>I sulked, but not too long.</p>
<p>After checking in at our respective dorms, we were out again exploring. We chose to have Minang food at a quaint small restaurant called Restoran Sabar Menanti. And now we are off to look for the (mer)lion!</p>
<div class="full"><img decoding="async" class="alignnone wp-image-6688 size-full" src="https://stampede-design.com/wp-content/uploads/2018/02/singapore-merlion.jpg" alt="singapore-merlion" /></div>
<p>After walking for what seems like an eternity, we were welcomed with the statue of the merlion, standing ever so majestic overlooking the three towers of Marina Bay Sands. Of course, we decided to take some selfies and standard touristic shots to send to the team back home with the sole purpose that they&#8217;d be brewing with jealousy.</p>
<div class="full"><img decoding="async" class="alignnone wp-image-6682 size-full" src="https://stampede-design.com/wp-content/uploads/2015/04/sani-with-merlion.jpg" alt="sani-with-merlion" /></div>
<p>Trivia time: while the merlion is a traditional creature in western heraldry, for example &#8211; on the coat of arms of of the city of <a href="http://files.abovetopsecret.com/files/img/bx508b79ae.jpg" target="_blank">Portsmouth</a> in the United Kingdom, it was never featured in any local folklore or myths of Singapore, and was only used in Singapore initially as the logo for the tourism board.</p>
<p>After sending about 300 images through Whatsapp to the team until Shaiful replied, &#8220;We get it. You are having fun. Go away, guys.&#8221; we decided we had annoyed the team enough for the day. Feet all blistered from walking around the city, we took the taxi back to <em>our</em> neighbourhood (as we have already grown fond of the area) for dinner.</p>
<p>Dinner, as an introduction in one word, was delish in many ways.</p>
<p>Because Zana is Zana, she had done some extensive research before going for dinner and she recommended this hip restaurant called <a href="https://plus.google.com/103068460875506737610/about?gl=my&amp;hl=en" target="_blank">The Lab</a> located in Jalan Pisang. We were their last customers of the day, of which we had to join a small queue before being escorted to our table.</p>
<p>The Lab, as its name suggests, adopts the theme of a laboratory for their restaurant concept. Our drinks were served in beakers, which sent us into picture-taking frenzy and Shaza&#8217;s drink particularly caught our attention &#8211; it was called Heisenberg* served with a syringe filled with blue curacao syrup.</p>
<div class="full"><img decoding="async" class="alignnone wp-image-6686 size-full" src="https://stampede-design.com/wp-content/uploads/2018/02/the-lab-sg.jpg" alt="the-lab-sg" /></div>
<p>On the walk back home to the hostel after dinner, we thought grub time was over. IT HAD NOT.</p>
<p>We decided to stop at a Turkish restaurant on the way back, ordered a kettle of çay (Turkish black tea), some fıstıklı sarma (pistachio rolls) and chatted away into the night &#8211; about life, relationships and how to centre float elements in HTML/CSS.</p>
<h2>Day 2: Navigating CBD by foot</h2>
<p>We are these typical Malaysians, as we have found out &#8211; especially when it comes to food.</p>
<p>While there were many restaurants around the neighbourhood &#8211; western, fusion, Turkish, Korean, etc. &#8211; we still found ourselves at <a href="http://www.straitstimes.com/news/singapore/more-singapore-stories/story/5-reasons-visit-the-new-agrobazaar-malaysia-20140901" target="_blank">Agrobazaar</a> across where we were staying. Aside from selling fruits and fruits-based products from Malaysia, like cordial and juice, they also have a cafe. We grabbed a <a href="http://en.wikipedia.org/wiki/Nasi_lemak" target="_blank"><em>nasi lemak</em></a> in packet each, savouring in the fragrance of pandan leaves and coconut milk and pondered over how beautiful life is.</p>
<p>Food is that moving for us.</p>
<p>Travelling with two bibliophiles, it wouldn&#8217;t be complete without a visit to the <a href="http://www.nlb.gov.sg/" target="_blank">National Library of Singapore</a>. We were lucky to find there is a <a href="http://www.nlb.gov.sg/NewsAnnouncement/tabid/225/announcementId/101/Default.aspx#.VRJvZDuUfrE" target="_blank">cartography exhibition</a> going on in the library, where we could learn about the history of Singapore.</p>
<p>Being at Stampede where we value details, perfection and good user experience in our work, we were astounded at how well-executed the exhibition is. It was told chronologically with such engaging copy, and various mediums such as videos, text, photos and sound were used to express the information better. For someone who is not big on reading, this kind of exhibitions helped me to learn and digest information a lot better.</p>
<div class="full"><img decoding="async" class="alignnone wp-image-6678 size-full" src="https://stampede-design.com/wp-content/uploads/2015/04/inspect-map.jpg" alt="inspect-map" /></div>
<p>My front-end skills are always tested wherever I go, you see. Shaza decided to use her meticulous designer eyes to pick some difficult designs on the walls of the exhibition and asked me to describe the HTML/CSS structure needed to solve them. Needless to say, there were lots of border radiuses involved.</p>
<p>Zana decided to laugh at my misery and documented the situation.</p>
<div class="full"><img decoding="async" class="alignnone wp-image-6684 size-full" src="https://stampede-design.com/wp-content/uploads/2018/02/shaza-questioning-sani.jpg" alt="shaza-questioning-sani" /></div>
<h3>All the way to Orchard Road</h3>
<p>Orchard Road is a huge tourist attraction and the most popular shopping enclave in the city street. I love how despite it being a whole stroll of shopping complexes in this green city, walking amidst the heat is still bearable. The street is clean and it is lined with trees and plants all around. This concept of green city is something many Southeast Asian countries should be able to adopt more.</p>
<h3>Watching Sarah Kay &amp; Phil Kaye</h3>
<p>I had never been into poetry my whole life, let alone watched one. This is such a refreshing experience.</p>
<p>I have decided that:</p>
<ul>
<li>Poets are cool people. They write beautiful words, and not only that, they touch our hearts with those words. That was not an easy task.</li>
<li>Serendipity is even cooler. Sarah and Phil are not related, not married, not dating, however they share the same last name, both of them are Japanese-Jewish and before meeting in college, their lives had actually intertwined more than they could ever imagine &amp; they had never realised this before!</li>
</ul>
<p>While watching Sarah Kay and Phil Kaye performing, I had no idea how many times I said to myself, &#8220;goodness, so much feels.&#8221;</p>
<p>During the show, Phil said, &#8220;In this room, there are at least 5 people who had no idea who we were and were dragged around by their friends to come watch us performing. Hands up to those people!&#8221; so I put up my hand while grinning sheepishly. During the meet and greet session, Zana and Shaza once again dragged me to see Sarah Kay and Phil Kaye and told them about me being one of those 5 people who were dragged along! It was so funny.</p>
<div class="full-c-b"><img decoding="async" class="aligncenter wp-image-6687 size-full" src="https://stampede-design.com/wp-content/uploads/2018/02/with-sarah-kay-and-phil-kaye.jpg" alt="with-sarah-kay-and-phil-kaye" /></div>
<p>Shaza bought me one of their books, <a href="http://www.amazon.com/No-Matter-Wreckage-Sarah-Kay/dp/1938912489" target="_blank">No Matter The Wreckage</a> and the three of us read the poems together on the flight home. Thanks Shaza!</p>
<div class="full"><img decoding="async" class="aligncenter wp-image-6681 size-full" src="https://stampede-design.com/wp-content/uploads/2015/04/no-matter-the-wreckage.jpg" alt="no-matter-the-wreckage" /></div>
<p>Which one of their poems is my favourite, you were asking? Well, it wasn&#8217;t from Sarah or Phil though. It was from one of the local poets opening for Sarah Kay and Phil Kaye &#8211; it was a poem called A Love Letter to the Magikarp. As you can see I am a huge fan of Pokemon!</p>
<h2>Day 3: A room full of childhood memories!</h2>
<p>Remember the first day when I mentioned about <a href="http://www.littledayout.com/article/big-gems-of-a-kampong-childhood-at-children-little-museum.html" target="_blank">Children Little Museum</a>? We were finally going to visit it today!</p>
<p>Upon walking into the humble museum, I was transported back to my childhood. You can see many traditional village games like <em>congkak</em>, marbles, the rubber bands tied together for a game called <em>zero point</em> and so many more. They also have toys like tin robot, some creepy-looking dolls, hand-made wood rifles and swords. It&#8217;s not limited to toys and games, they also have strollers, some makeshift barber shop, elementary school tables and chairs, drink stalls, enough for you to re-live your childhood. We were so elated.</p>
<p>Before leaving the museum, I bought a pack of glue balloons that I used to play during my childhood time. It is sticky and you have to blow it carefully through a small straw. Here&#8217;s how it works:</p>
<div class="video-container">
	<iframe src="https://www.youtube.com/embed/LmN19EMO7Ek" width="480" height="360" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
</div>
<h2>Never the last</h2>
<p>It was time to leave Singapore, unfortunately. But I can assure you this will not be the last time I visit Singapore.</p>
<p>This was my first international flight and I got so excited seeing my first international stamp on my passport. Traveling allows me to open my eyes and learn more about the culture, history, walks of life and the lifestyle of other people in other countries or regions. It allows me to venture more out of my comfort zone, having to navigate a space entirely new to me and having to interact with people of whom I have never met before.</p>
<p>Will I travel again? Definitely!</p>
<p>Where to next though? Feel free to drop your suggestions in the comments!</p>
<p><em>*The first person who caught the reference shall receive something special from Stampede!</em></p>
<p>The post <a href="https://stampede-design.com/blog/singapore/">Singapore!</a> appeared first on <a href="https://stampede-design.com">Stampede: the strategic design &amp; technology company</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://stampede-design.com/blog/singapore/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Running Stampede Constructs</title>
		<link>https://stampede-design.com/blog/running-stampede-constructs/</link>
					<comments>https://stampede-design.com/blog/running-stampede-constructs/#respond</comments>
		
		<dc:creator><![CDATA[Sani Halid]]></dc:creator>
		<pubDate>Sat, 11 Oct 2014 05:15:31 +0000</pubDate>
				<category><![CDATA[Inside Stampede]]></category>
		<category><![CDATA[community building]]></category>
		<category><![CDATA[constructs]]></category>
		<category><![CDATA[curation]]></category>
		<category><![CDATA[design blog]]></category>
		<category><![CDATA[front-end]]></category>
		<guid isPermaLink="false">http://dev.stampedelabs.com/client/v3/wp/?p=6254</guid>

					<description><![CDATA[<p>Staying true to our culture of knowledge sharing and giving, Sani shares his experience of running Constructs, our resident curated content miniblog on front-end development.</p>
<p>The post <a href="https://stampede-design.com/blog/running-stampede-constructs/">Running Stampede Constructs</a> appeared first on <a href="https://stampede-design.com">Stampede: the strategic design &amp; technology company</a>.</p>
]]></description>
										<content:encoded><![CDATA[<p class="lead" class="lead">Constructs, our resident curated content miniblog on front-end development was born out of the idea that we at Stampede, of course, love sharing every bit of knowledge we have hoarded. Created in May 2014 and was shared to public 2 weeks later, <a href="http://constructs.stampede-design.com/" target="_blank" >Constructs</a> is updated daily with tips, tricks, articles and demos from brilliant web developers from all around the world.</p>
<div class="full"><img fetchpriority="high" decoding="async" width="598" height="483" class="alignnone size-full wp-image-6255" src="https://stampede-design.com/wp-content/uploads/2016/06/constructs-featured.jpg" alt="constructs-featured" srcset="https://stampede-design.com/wp-content/uploads/2016/06/constructs-featured.jpg 598w, https://stampede-design.com/wp-content/uploads/2016/06/constructs-featured-300x242.jpg 300w" sizes="(max-width: 598px) 100vw, 598px" /></div>
<p>I was tasked to update and curate the content daily at <a href="http://constructs.stampede-design.com/" target="_blank" >Constructs</a>, which is really exciting. Here&#8217;s why.</p>
<h2>Sharing &amp; Learning</h2>
<p>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, &#8220;hey, why not share the solutions we found with everyone too?&#8221; and that was how Constructs was born &#8211; to compile all the tricks, hacks and trips every one of us have collected from amazing people.</p>
<p>But just taking in the advice would not be right &#8211; we want to give as well.</p>
<h2>Guest Post</h2>
<p>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, <a href="https://stampede-design.com/author/syazwan/">Syazwan Hakim</a> and web analyst, <a href="https://stampede-design.com/author/shaiful/">Shaiful Borhan</a>.</p>
<p>These guest posts are easy to identify, there is a little badge located at the most right along the article headers.</p>
<div class="full"><img decoding="async" class="alignnone wp-image-6124" src="https://stampede-design.com/wp-content/uploads/2014/10/guestpost.jpg" alt="guestpost" /></div>
<h2>Top Posts</h2>
<p>Here are some of the top posts in Constructs:</p>
<div class="full"><img decoding="async" class="alignnone size-full wp-image-6107" src="https://stampede-design.com/wp-content/uploads/2014/10/blog-constructs-css-parallax.jpg" alt="blog-constructs-css-parallax" /><div class="full"></div></p>
<h4><a href="http://constructs.stampede-design.com/2014/08/pure-css-parallax-effect/" target="_blank" >Pure CSS Parallax Effect</a></h4>
<p>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.</p>
<p><div class="full"></div><img decoding="async" class="alignnone size-full wp-image-6104" src="https://stampede-design.com/wp-content/uploads/2014/10/blog-constructs-bootstrap-vs-foundation.jpg" alt="blog-constructs-bootstrap-vs-foundation" /></div>
<h4><a href="http://constructs.stampede-design.com/2014/09/bootstrap-vs-foundation/" target="_blank" >Bootstrap VS Foundation</a></h4>
<p>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.</p>
<div class="full"><img decoding="async" class="alignnone size-full wp-image-6105" src="https://stampede-design.com/wp-content/uploads/2014/10/blog-constructs-css-animation-effect-libraries.jpg" alt="blog-constructs-css-animation-effect-libraries" /></div>
<h4><a href="http://constructs.stampede-design.com/2014/09/css-animation-effect-libraries/" target="_blank" >CSS Animation Effect Libraries</a></h4>
<p>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.</p>
<div class="full"><img decoding="async" class="alignnone size-full wp-image-6106" src="https://stampede-design.com/wp-content/uploads/2014/10/blog-constructs-css-glitch-effect.png" alt="blog-constructs-css-glitch-effect" /></div>
<h4><a href="http://constructs.stampede-design.com/2014/09/css-glitch-effect/" target="_blank" >CSS Glitch Effect</a></h4>
<p>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.</p>
<div class="full"><img decoding="async" class="alignnone size-full wp-image-6108" src="https://stampede-design.com/wp-content/uploads/2014/10/blog-constructs-pure-css-cartoon-character.png" alt="blog-constructs-pure-css-cartoon-character" /></div>
<h4><a href="http://constructs.stampede-design.com/2014/09/pure-css-drawings-cartoon-character/" target="_blank" >Pure CSS Drawings Cartoon Character</a></h4>
<p>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!</p>
<div class="full"><img decoding="async" class="alignnone size-full wp-image-6110" src="https://stampede-design.com/wp-content/uploads/2014/10/blog-constructs-step-to-draw-with-css.jpg" alt="blog-constructs-step-to-draw-with-css" /></div>
<h4><a href="http://constructs.stampede-design.com/2014/09/steps-to-draw-with-css/" target="_blank" >Steps To Draw With CSS</a></h4>
<p>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.</p>
<div class="full"><img decoding="async" class="alignnone size-full wp-image-6102" src="https://stampede-design.com/wp-content/uploads/2018/02/blog-constructs-5-things-front-end-developer-should-learn-in-2014.jpg" alt="blog-constructs-5-things-front-end-developer-should-learn-in-2014" /></div>
<h4><a href="http://constructs.stampede-design.com/2014/08/5-things-front-end-developer-learn-2014/" target="_blank" >5 Thing Front-End Developers Should Learn In 2014</a></h4>
<p>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.</p>
<div class="full"><img decoding="async" class="alignnone size-full wp-image-6109" src="https://stampede-design.com/wp-content/uploads/2014/10/blog-constructs-slider-comparison.jpg" alt="blog-constructs-slider-comparison" /></div>
<h4><a href="http://constructs.stampede-design.com/2014/08/pure-css-image-comparison-slider/" target="_blank" >Pure CSS Image Comparison Slider</a></h4>
<p>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.</p>
<div class="full"><img decoding="async" class="alignnone size-full wp-image-6103" src="https://stampede-design.com/wp-content/uploads/2014/10/blog-constructs-alternative-to-float.png" alt="blog-constructs-alternative-to-float" /></div>
<h4><a href="http://constructs.stampede-design.com/2014/09/alternative-using-css-float-properties/" target="_blank" >Alternative Using CSS Float Properties</a></h4>
<p>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?</p>
<h2>Conclusion</h2>
<p>Over a few months of running <a href="http://constructs.stampede-design.com/" target="_blank" >Constructs</a>, 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 <a href="https://plus.google.com/u/0/+StampededesignMY/posts" target="_blank" >our Google+ page </a>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.</p>
<p>Feel free to visit our <a href="http://constructs.stampede-design.com/" target="_blank" >Constructs</a> and tell us what you think!</p>
<p>The post <a href="https://stampede-design.com/blog/running-stampede-constructs/">Running Stampede Constructs</a> appeared first on <a href="https://stampede-design.com">Stampede: the strategic design &amp; technology company</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://stampede-design.com/blog/running-stampede-constructs/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>The Making of SKROLS</title>
		<link>https://stampede-design.com/blog/making-skrols/</link>
					<comments>https://stampede-design.com/blog/making-skrols/#respond</comments>
		
		<dc:creator><![CDATA[Sani Halid]]></dc:creator>
		<pubDate>Thu, 07 Aug 2014 21:20:20 +0000</pubDate>
				<category><![CDATA[Inside Stampede]]></category>
		<category><![CDATA[development]]></category>
		<category><![CDATA[inside stampede]]></category>
		<category><![CDATA[product build]]></category>
		<category><![CDATA[side project]]></category>
		<category><![CDATA[SKROLS]]></category>
		<guid isPermaLink="false">http://dev.stampedelabs.com/client/v3/wp/?p=5656</guid>

					<description><![CDATA[<p>Sani was recently given an assignment to design and develop his own website from scratch. Underneath our hovering, he captures its tale in this blog post.</p>
<p>The post <a href="https://stampede-design.com/blog/making-skrols/">The Making of SKROLS</a> appeared first on <a href="https://stampede-design.com">Stampede: the strategic design &amp; technology company</a>.</p>
]]></description>
										<content:encoded><![CDATA[<p class="lead" class="lead">When was the last time you did something for the first time?</p>
<p>For me, it was about 4 months ago. New to the team, the least experienced but with spirits aflame to absorb as many things as possible, I was assigned to create my own responsive website.</p>
<div class="full"><img decoding="async" src="https://stampede-design.com/wp-content/uploads/2014/08/ta4k9x-fPwlNA7MaaWDgueIMr8SLtQRcb6gkOECWclA_grande.jpg" alt="just keep making" /></div>
<p>I was free to choose my own theme. Being an inline skater, I decided to design and develop a responsive website for my skating club, SKROLS. The website will revolve around skater&#8217;s profiles, skating news, events and products. The goal is for me, as a new front-end developer, to learn and understand the process and challenges of designing and developing a website from scratch. At the same time, the project is also intended to assess my problem-solving skills.</p>
<p>Challenge accepted.</p>
<h2>Designing the website</h2>
<p>I was a naive one, yes I was. I used to think web designing was easy. You fire up Photoshop, adjust your layers here and there, make sure the colours are nice &#8211; you are ready to go. Boy, I was wrong.</p>
<p>Designing is more of a philosophy &#8211; it is a process where everything needs justifications. For every element you put in the design, for example size of containers, colours, height, button interaction, etc. they all come with good reasons. That is a lesson learned for me. So if you ever felt like designing is easy-peasy, it is not. Go hug your designers today.</p>
<p>Thanks to <a href="https://stampede-design.com/author/admin/">Shaza</a> and <a href="https://stampede-design.com/author/dahlia/">Dahlia</a> who had been hovering over me while teaching some Photoshop techniques while I was working on my website design, as shared above. Not bad for a first-timer, eh?</p>
<p><img decoding="async" width="960" height="310" class="alignnone size-full wp-image-5765" src="https://stampede-design.com/wp-content/uploads/2014/08/skrols1.jpg" alt="skrols" srcset="https://stampede-design.com/wp-content/uploads/2014/08/skrols1.jpg 960w, https://stampede-design.com/wp-content/uploads/2014/08/skrols1-300x97.jpg 300w, https://stampede-design.com/wp-content/uploads/2014/08/skrols1-768x248.jpg 768w, https://stampede-design.com/wp-content/uploads/2014/08/skrols1-790x255.jpg 790w" sizes="(max-width: 960px) 100vw, 960px" /></p>
<h2>Developing the website</h2>
<p>I chose to develop this SKROLS website using Bootstrap 3 as the framework. The reason being is because it has CSS media queries to support responsiveness in websites along with some wonderful features in CSS components and jQuery plugins.</p>
<p>In developing responsive websites, it has to be mobile first &#8211; start from small devices to larger devices e.g. mobile devices to desktops. I learned that developing websites becomes much easier when you are understand and had been thoroughly involved in the design from the start. This process is even easier for me, especially when I have designed it from the start.</p>
<p>Thanks to <a href="https://stampede-design.com/author/syazwan/">Iwan</a> for providing the tips, overseeing and reviewing my SKROLS website from start till finish.</p>
<h2>Conclusion</h2>
<p>Thanks to this assignment, I learned that in order to do front-end, it is good to understand the depth of work it takes to design a website &#8211; the navigation, the interactivity &#8211; in short, <em>fully</em> understand the requirement. It was also both challenging and fun trying to come up with my own website design and developing it from scratch.</p>
<p>In the meantime, I will keep experimenting and creating my own side projects in order to sharpen my skills. Never stop creating, just keep making.</p>
<p>(<a href="http://www.holstee.com/collections/all/products/just-keep-making-print" target="_blank">Just Keep Making print</a> is from Holstee.)</p>
<p>The post <a href="https://stampede-design.com/blog/making-skrols/">The Making of SKROLS</a> appeared first on <a href="https://stampede-design.com">Stampede: the strategic design &amp; technology company</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://stampede-design.com/blog/making-skrols/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Review on Xiaomi Mi Power Bank</title>
		<link>https://stampede-design.com/blog/review-on-xiaomi-mi-power-bank/</link>
					<comments>https://stampede-design.com/blog/review-on-xiaomi-mi-power-bank/#comments</comments>
		
		<dc:creator><![CDATA[Sani Halid]]></dc:creator>
		<pubDate>Mon, 23 Jun 2014 10:21:51 +0000</pubDate>
				<category><![CDATA[Inside Stampede]]></category>
		<category><![CDATA[gadget]]></category>
		<category><![CDATA[power bank]]></category>
		<category><![CDATA[remote work]]></category>
		<category><![CDATA[tech]]></category>
		<category><![CDATA[Xiaomi]]></category>
		<guid isPermaLink="false">https://stampede-design.com/blog/?p=5291</guid>

					<description><![CDATA[<p>Just like every smartphone owner, Sani is often frustrated about the fast battery consumption. Hence when he recently bought a new powerbank - a Xiaomi Mi at that, he isn't reluctant to let us know how it goes.</p>
<p>The post <a href="https://stampede-design.com/blog/review-on-xiaomi-mi-power-bank/">Review on Xiaomi Mi Power Bank</a> appeared first on <a href="https://stampede-design.com">Stampede: the strategic design &amp; technology company</a>.</p>
]]></description>
										<content:encoded><![CDATA[<p class="lead" class="lead">The most frustrating thing using smartphone or tablet PCs is the extremely fast battery consumption. This is especially true if you are hardcore users who use the smartphones for gaming, business and also for users who are always on the move and perpetually checking on the phone to get connected. Here comes the power banks, slowly making an appearance as a very important addition to supply portable power supply to the users.</p>
<div class="full"><img decoding="async" src="https://stampede-design.com/wp-content/uploads/2014/06/Screenshot-19.jpg" alt="dead battery" /></div>
<p>Nowadays, it is almost normal for every smartphone user to carry one, sometimes two powerbanks while on the move. They come in many sizes, shapes and battery capacities &#8211; measured in Milliampere Hours or mAh.</p>
<h2>So I recently bought my own power bank&#8230;</h2>
<p>Having to always resort to many methods of reducing battery power every time the indicator shows less than 20%, I recently bought a Xiaomi Mi power bank with 10400 mAH, after reading a number of many good reviews on the Internet. It is a high quality, China-made power bank with extremely affordable price compared to other brands with the same battery capacity and output power. You can see the range <a href="http://www.mi.com/my/mipowerbank10400/#gallery" target="_blank">here</a>.</p>
<p>Currently, Xiaomi Malaysia is selling the  10400 mAh for MYR36 only. Due to this offer, <a href="http://www.lowyat.net/2014/05/xiaomi-sells-out-5000-mi-power-banks-in-less-than-9-minutes-mi-3-much-later/)" target="_blank">5000 units were sold out after less than 9 minutes</a> after first launch. However, you must be fast enough to buy direct from <a href="http://www.mi.com/my/" target="_blank">their website</a>, otherwise you have to buy from local reseller with a higher price compares to the price offered as advertised in the website.</p>
<p>While I got my Xiaomi Mi powerbank for RM50 from a local reseller, the price is still considered affordable from other brands with the same capacity, which could range around RM80 to RM140. The power banks are also available in 5200mAh for mere MYR25, if you just need a smaller dose of juice.</p>
<h2>The review</h2>
<p>Now for the holy unboxing ritual.</p>
<p>Once I unwrapped the packaging, I found that this power bank was inside hard clear plastic case which were filled with a manual, short (I can say it is about 22cm) white color micro-USB cable and of course, the power bank itself.</p>
<div class="full"><img loading="lazy" decoding="async" width="480" height="360" class="alignnone size-full wp-image-5324" src="https://stampede-design.com/wp-content/uploads/2014/06/IMG_20140623_154200.jpg" alt="xiaomi_mi_stampede" srcset="https://stampede-design.com/wp-content/uploads/2014/06/IMG_20140623_154200.jpg 480w, https://stampede-design.com/wp-content/uploads/2014/06/IMG_20140623_154200-300x225.jpg 300w" sizes="(max-width: 480px) 100vw, 480px" /></div>
<p>The body is made from aluminium and weighs heavier than what I have expected &#8211; about 250g and looked solid (1mm aluminium thick). It has one power button, four light indicators ( one light on represents 25% electric charge), 1 micro-usb slot (input) and 1 usb slot (output).</p>
<div class="full"><img loading="lazy" decoding="async" width="480" height="271" class="alignnone size-full wp-image-5310" src="https://stampede-design.com/wp-content/uploads/2014/06/IMAG1830.jpg" alt="xiaomi mi stampede" srcset="https://stampede-design.com/wp-content/uploads/2014/06/IMAG1830.jpg 480w, https://stampede-design.com/wp-content/uploads/2014/06/IMAG1830-300x170.jpg 300w, https://stampede-design.com/wp-content/uploads/2014/06/IMAG1830-360x204.jpg 360w" sizes="(max-width: 480px) 100vw, 480px" /></div>
<p>Pressing power button for the first time, one light indicator flashed before my eyes which means about 25% battery has been filled. Decided to charge it and it took about 9 hours to get full charge for the first time by using 5V, 1.0A output charger. Once it was full charged, I switched on the button to see the light&#8217;s reaction.</p>
<div class="full"><img loading="lazy" decoding="async" width="480" height="271" class="alignnone size-full wp-image-5311" src="https://stampede-design.com/wp-content/uploads/2014/06/IMAG1832.jpg" alt="xiaomi mi stampede 2" srcset="https://stampede-design.com/wp-content/uploads/2014/06/IMAG1832.jpg 480w, https://stampede-design.com/wp-content/uploads/2014/06/IMAG1832-300x170.jpg 300w, https://stampede-design.com/wp-content/uploads/2014/06/IMAG1832-360x204.jpg 360w" sizes="(max-width: 480px) 100vw, 480px" /></div>
<p>How to charge your phone? It is just so easy &#8211; just plug in the USB cable to the power bank slot then attach the micro-USB to the designated USB slot in your phone. It will automatically charge your phone without switching on the power.</p>
<p>A bit confusing of the power button is for, in this case? It can be used to reset the power bank in unstable environment &#8211; for example there was one time it paused on charging, so I had to press on the button for it to resume charging. In addition, I always use the power button to check the power bank current battery charge.</p>
<p>After a while, I notice that the power bank does not heat up quickly &#8211; which I like the best. That is the pro.</p>
<p>The con? While it is affordable and looks solid, I wish it would support more than one output.</p>
<h2>Finally&#8230;</h2>
<p>A word of advice though: If you are interested to buy, please be careful for fake products. It is not uncommon to say that good products will ultimately attracted companies who would create fake, even cheaper products and this applies the same to Xiaomi range. This could be dangerous for your smartphones and also yourself. You may refer <a href="http://www.spemall.com/forum/topic/1109-how-to-tell-xiaomi-power-bank-real-and-fake/" target="_blank">here to see the different between original and fake</a>.</p>
<p>Do you own one these Xiaomi Mi power banks too? If yes, how did you find them so far?</p>
<p>(Header photo credit thanks to <a href="http://www.phonearena.com/news/Battery-life-tips-and-tricks_id15965" target="_blank">Phonearena</a>)</p>
<p>The post <a href="https://stampede-design.com/blog/review-on-xiaomi-mi-power-bank/">Review on Xiaomi Mi Power Bank</a> appeared first on <a href="https://stampede-design.com">Stampede: the strategic design &amp; technology company</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://stampede-design.com/blog/review-on-xiaomi-mi-power-bank/feed/</wfw:commentRss>
			<slash:comments>16</slash:comments>
		
		
			</item>
		<item>
		<title>Let&#8217;s Go Inline Skating!</title>
		<link>https://stampede-design.com/blog/lets-go-inline-skating/</link>
					<comments>https://stampede-design.com/blog/lets-go-inline-skating/#respond</comments>
		
		<dc:creator><![CDATA[Sani Halid]]></dc:creator>
		<pubDate>Wed, 12 Mar 2014 12:23:42 +0000</pubDate>
				<category><![CDATA[Inside Stampede]]></category>
		<category><![CDATA[fun]]></category>
		<category><![CDATA[inline skating]]></category>
		<category><![CDATA[inside stampede]]></category>
		<category><![CDATA[team culture]]></category>
		<category><![CDATA[team events]]></category>
		<guid isPermaLink="false">https://stampede-design.com/blog/?p=4962</guid>

					<description><![CDATA[<p>Sani is stoked to share with us about his inline skating hobby. Caution: Do not mention the word 'rollerblading' in front of him.</p>
<p>The post <a href="https://stampede-design.com/blog/lets-go-inline-skating/">Let&#8217;s Go Inline Skating!</a> appeared first on <a href="https://stampede-design.com">Stampede: the strategic design &amp; technology company</a>.</p>
]]></description>
										<content:encoded><![CDATA[<p class="lead">(Here is a note to start with: <em>rollerblading</em> is not a valid term. &#8216;Rollerblade&#8217; refers to a brand of an inline skate, while the act itself is called inline skating.)</p>
<div class="full"><img loading="lazy" decoding="async" width="498" height="664" class="size-full wp-image-4988" alt="Me attempting the soul grind technique" src="https://stampede-design.com/wp-content/uploads/2018/02/aggresive-practicing-soul-grind.jpg" /><p class="capt_block">Me attempting the soul grind technique</p></div>
<p>During the weekends, I spend most of my time inline skating with my friends. We are part of an official inline skating club established in 2010 based in Langkawi, Malaysia called SKROLS. Most people thought SKROLS is a combination of the word &#8216;skate&#8217; and &#8216;rolls&#8217;, but it actually stands for <strong>S</strong>ukan <strong>K</strong>asut <strong>Ro</strong>da <strong>L</strong>angkah <strong>S</strong>ukar.</p>
<div class="full"><img loading="lazy" decoding="async" width="498" height="283" class="size-full wp-image-4999" alt="Anatomy of an inline skate" src="https://stampede-design.com/wp-content/uploads/2014/03/anatomie_roller_agressif_2_en.jpg" srcset="https://stampede-design.com/wp-content/uploads/2014/03/anatomie_roller_agressif_2_en.jpg 498w, https://stampede-design.com/wp-content/uploads/2014/03/anatomie_roller_agressif_2_en-300x170.jpg 300w, https://stampede-design.com/wp-content/uploads/2014/03/anatomie_roller_agressif_2_en-360x204.jpg 360w" sizes="(max-width: 498px) 100vw, 498px" /><p class="capt_block">Anatomy of an inline skate</p></div>
<p>If you must know, there are several types of inline skating:</p>
<ul>
<li>Aggressive</li>
<li>Roller hockey</li>
<li>Artistic</li>
<li>Freestyle slalom</li>
<li>Downhill</li>
<li>Recreational</li>
<li>Speed skating</li>
</ul>
<p>When I first started skating in end of 2010, I chose to start with recreational skate. Recreational skate is a basic skate method with flat setup where all wheels slot are filled with same size wheels. Skating method with flat setup have more stability and speed compared to banana setup. As a newbie before, I played recreational inline skate a lot on a flat surface, just as a way to build up skills.</p>
<p>After about 1 year recreational inline skating, one day I decided to attempt to play freestyle slalom. Turns out that I liked it.</p>
<p>If you must know, freestyle slalom skating is a highly technical field of skating that involves performing tricks around a straight line of equally spaced cones. Freestyle slalom uses full rocker setup, a.k.a banana setup. This makes skating much easier to turn and also easier to perform tricks but it lacks in the stability department. Just like recreational skating, the best place to attempt freestyle slalom is a location with a flat and smooth surface. It is definitely not recommended for a newbie because it is hard to maintain balance while attempting it.</p>
<p>After about 2 and half years which is about last two weeks, I attempted to try aggressive inline skating. I have to learn basic movement again using flat setup. It would be completely different to turn and build speed from using full rocker setup, and I fell many times trying to get the flow before I finally was able to master it. It was all worth it.</p>
<div class="full"><img loading="lazy" decoding="async" width="498" height="581" class="size-full wp-image-4992" alt="Different types of skate wheel setups" src="https://stampede-design.com/wp-content/uploads/2014/03/rocker.jpg" srcset="https://stampede-design.com/wp-content/uploads/2014/03/rocker.jpg 498w, https://stampede-design.com/wp-content/uploads/2014/03/rocker-257x300.jpg 257w" sizes="(max-width: 498px) 100vw, 498px" /><p class="capt_block">Different types of skate wheel setups</p></div>
<p>My next goal would be to attempt much more complicated inline skating methods, probably roller hockey or artistic? We&#8217;ll see.</p>
<p>Like many other new things to try, inline skating requires a lot of courage to start. I guess it is safe to say that to play inline skating, skaters must always be prepared to fall many times, being laughed at by friends and at times, get injured.</p>
<p>If you have been inline skating before, what skills have you mastered? Comment below!</p>
<p>(Sources for reference and images: <a href="http://en.wikipedia.org/wiki/Inline_skates" target="_blank">Wikipedia</a> and <a href="http://inlineskating.about.com/od/buyinginlineskate1/ig/Before-You-Buy-Wheels/Wheel-Rocker.htm" target="_blank">Inlineskating.about.com</a>)</p>
<p>The post <a href="https://stampede-design.com/blog/lets-go-inline-skating/">Let&#8217;s Go Inline Skating!</a> appeared first on <a href="https://stampede-design.com">Stampede: the strategic design &amp; technology company</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://stampede-design.com/blog/lets-go-inline-skating/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>CSS Sprite Technique</title>
		<link>https://stampede-design.com/blog/css-sprite-technique/</link>
					<comments>https://stampede-design.com/blog/css-sprite-technique/#comments</comments>
		
		<dc:creator><![CDATA[Sani Halid]]></dc:creator>
		<pubDate>Mon, 13 Jan 2014 10:22:31 +0000</pubDate>
				<category><![CDATA[Field Notes]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[front-end development]]></category>
		<category><![CDATA[sprites]]></category>
		<category><![CDATA[tutorial]]></category>
		<category><![CDATA[web development]]></category>
		<guid isPermaLink="false">https://stampede-design.com/blog/?p=4647</guid>

					<description><![CDATA[<p>Learning new things and sharing what he has learned have always been exciting to Sani. Here he will show you how to produce CSS sliding door technique in his first ever tutorial in the blog.</p>
<p>The post <a href="https://stampede-design.com/blog/css-sprite-technique/">CSS Sprite Technique</a> appeared first on <a href="https://stampede-design.com">Stampede: the strategic design &amp; technology company</a>.</p>
]]></description>
										<content:encoded><![CDATA[<p class="lead">Hello, Sani here. In my first ever tutorial post I am going to show you how to produce a CSS sprite technique.</p>
<h2>What is this CSS sprite technique &amp; why?</h2>
<p>CSS sprite, as interesting as it is called, is also an interesting CSS method itself. This approach involves changing an image to another different image, or the same image but different colour scape (greyscale, sephia etc.) upon hover.</p>
<p>The advantage of using the using css sprite technique is that the web page will automatically load all images at once, instead of one by one. This will speed up the loading time and there will be not much delay for users with slow Internet connection.</p>
<h2>But how?</h2>
<p>When we hover on the block, the background image will change smoothly to second image. If we use separate image for hover effect it will take time for website to load that image from server thus, will create ± 1 second empty space on hover. This will be a problem for user with slow internet connection.</p>
<h2>Interesting. Show me how.</h2>
<p>Here we go. Take a seat.</p>
<p>First of all, get any images or sprite to start. I would suggest an image with transparent background. In this tutorial I am going to use <a href="http://www.36peas.com/blog/2010/9/13/free-japanese-ninja-shinobi-sprite-sheet.html" target="_blank">this Ninja Sprite from 36peas</a>. Choose any two images &#8211; one for normal state and another for hover. Save them on some canvas by side or top and bottom.</p>
<p>Before we start, it&#8217;s a good idea to show some simple css background code.</p>
<div class="full"><img decoding="async" class="alignnone size-full wp-image-4662" src="https://stampede-design.com/wp-content/uploads/2018/02/css-background-value.jpg" alt="css background value" /></div>
<p>Single line css background code in correct order would be:</p>
<pre class="brush: xml; title: ; notranslate">background: color position size repeat origin clip attachment image;</pre>
<div class="full"><img decoding="async" class="alignnone size-full wp-image-4669" src="https://stampede-design.com/wp-content/uploads/2018/02/ninja-sprite.jpg" alt="ninja sprite" /></div>
<p>In this image, each ninja will have <strong>width:227px</strong> and <strong>height:298px.</strong></p>
<p>Total width for both ninjas in one canvas would be <strong>width:454px</strong> and <strong>height:298px.</strong></p>
<p>In this tutorial we will only need a combination of three css background codes. Width and height set will just be for one image.</p>
<p>On hover, just change position of the image. Background image in this tutorial I put straight to image file. So the code should be like this:</p>
<p>Normal state:</p>
<pre class="brush: xml; title: ; notranslate">display:block;
height:297px;
width:227px;
background-position:0 0;
background-repeat:no-repeat;
background-image:url('ninja.
png');</pre>
<p>Hover state:</p>
<pre class="brush: xml; title: ; notranslate">background-position:-227px 0;</pre>
<p>Normal state in shortcut css:</p>
<pre class="brush: xml; title: ; notranslate">
display:block;
height:297px;
width:227px;
background:0 0 no-repeat url('ninja.png');</pre>
<p>Hover state in shortcut background css:</p>
<pre class="brush: xml; title: ; notranslate">background:-227px 0 no-repeat url('ninja.png');</pre>
<p>or</p>
<pre class="brush: xml; title: ; notranslate">background-position:-227px 0;</pre>
<p>If you would like to see how it looks like, you may view the demo links here:</p>
<ul>
<li><a href="http://jsfiddle.net/metalbesi/3YZWr/" target="_blank">normal/regular method</a></li>
<li><a href="http://jsfiddle.net/metalbesi/5sm6m/" target="_blank">shortcut background css</a></li>
</ul>
<p>Correct syntax for shortcut background css :</p>
<pre class="brush: xml; title: ; notranslate">background: color position size repeat origin clip attachment image;</pre>
<p>For background-position, always remember all browser read css background position code from x-axis to y-axis. In these examples:</p>
<ul>
<li>background-position:(x-axis)px (y-axis)px;</li>
<li>background-repeat: By default, all browser will use value &#8216;repeat&#8217;. To make it one image simply put &#8216;no-repeat&#8217;.</li>
</ul>
<p>There are some bits of notes about background-image: &#8211; back during my first time doing css background, it was a bit confusing to do relative path if the file images are in different folder.</p>
<p>Here are some examples to show what I meant:</p>
<div class="full"><img loading="lazy" decoding="async" width="206" height="176" class="alignnone size-full wp-image-4676" src="https://stampede-design.com/wp-content/uploads/2014/01/Screenshot-on-1.3.2014-at-11.32.24-PM.png" alt="location-html-file" /></div>
<p>The location for the html file.</p>
<div class="full"><img loading="lazy" decoding="async" width="230" height="188" class="alignnone size-full wp-image-4677" src="https://stampede-design.com/wp-content/uploads/2014/01/Screenshot-on-1.3.2014-at-11.32.39-PM.png" alt="Screenshot on 1.3.2014 at 11.32.39 PM" /></div>
<p>The location for images and CSS folder.</p>
<div class="full"><img loading="lazy" decoding="async" width="285" height="229" class="alignnone size-full wp-image-4678" src="https://stampede-design.com/wp-content/uploads/2014/01/Screenshot-on-1.3.2014-at-11.34.29-PM.png" alt="Screenshot on 1.3.2014 at 11.34.29 PM" /></div>
<p>The location for the image file.</p>
<p>By default, the browser will find image in same folder where we save the CSS file. The solution for this problem would be that we have to jump outside the CSS folder by typing  &#8216; ../ &#8216; which means going back to one folder:</p>
<div class="full"><img loading="lazy" decoding="async" width="230" height="188" class="alignnone size-full wp-image-4677" src="https://stampede-design.com/wp-content/uploads/2014/01/Screenshot-on-1.3.2014-at-11.32.39-PM.png" alt="Screenshot on 1.3.2014 at 11.32.39 PM" /></div>
<p>Here is an example based on my local html and css folder.</p>
<div class="full"><img loading="lazy" decoding="async" width="285" height="229" class="alignnone size-full wp-image-4678" src="https://stampede-design.com/wp-content/uploads/2014/01/Screenshot-on-1.3.2014-at-11.34.29-PM.png" alt="Screenshot on 1.3.2014 at 11.34.29 PM" /></div>
<pre class="brush: xml; title: ; notranslate">background-image:url('../art/ninja.png');</pre>
<p>Here are some links for you to play around:</p>
<ul>
<li><a href="http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-position&amp;preval=10px%20200px" target="_blank">background-position:</a></li>
<li><a href="http://www.w3schools.com/cssref/pr_background-repeat.asp" target="_blank">background-repeat: </a></li>
<li><a href="http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_background_multiple" target="_blank">background-image:</a></li>
</ul>
<h2>Awesome! I am going to try now!</h2>
<p>Yay! And if you do have some questions, suggestions or examples, do drop them links in the comment.</p>
<p>(Thanks <a href="http://www.w3schools.com/cssref/css3_pr_background.asp" target="_blank">W3C</a> for being my main point of references.)</p>
<p>The post <a href="https://stampede-design.com/blog/css-sprite-technique/">CSS Sprite Technique</a> appeared first on <a href="https://stampede-design.com">Stampede: the strategic design &amp; technology company</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://stampede-design.com/blog/css-sprite-technique/feed/</wfw:commentRss>
			<slash:comments>4</slash:comments>
		
		
			</item>
		<item>
		<title>The New Kid On The Block</title>
		<link>https://stampede-design.com/blog/the-new-kid-on-the-block/</link>
					<comments>https://stampede-design.com/blog/the-new-kid-on-the-block/#respond</comments>
		
		<dc:creator><![CDATA[Sani Halid]]></dc:creator>
		<pubDate>Thu, 21 Nov 2013 08:34:12 +0000</pubDate>
				<category><![CDATA[Inside Stampede]]></category>
		<category><![CDATA[front end]]></category>
		<category><![CDATA[updates]]></category>
		<guid isPermaLink="false">https://stampede-design.com/blog/?p=4527</guid>

					<description><![CDATA[<p>Rookie Sani fills us in about his first few weeks with Stampede, of the importance of self-learning initiatives and how he (and the rest of us) had been faring so far. (Note: We have always been in our best behaviour. Promise.)</p>
<p>The post <a href="https://stampede-design.com/blog/the-new-kid-on-the-block/">The New Kid On The Block</a> appeared first on <a href="https://stampede-design.com">Stampede: the strategic design &amp; technology company</a>.</p>
]]></description>
										<content:encoded><![CDATA[<p class="lead">Hi, my name is Sani.</p>
<p>I believe I just stole Wan&#8217;s throne of being the New Kid On the Block in Stampede (not that he minds at all).</p>
<div class="full"><img decoding="async" class="size-full wp-image-4534" src="https://stampede-design.com/wp-content/uploads/2018/02/wansharifff_on_Instagram.jpg" alt="My first Stampede getaway involves throwing a surprise birthday party for Wan" /><p class="capt_block">My first Stampede getaway involves throwing a surprise birthday party for Wan</p></div>
<p>I love playing computer games, which inadvertently leads to me joining Stampede (we will get to that part later). Also, when the weather is good I would go jogging or inline skating. I am pretty good at the latter, actually.</p>
<h2>How it all started</h2>
<p>I have always been interested in learning new things. My free time is spent going through forums, blogs and Youtube channels on coding and programming. On some instances I try to code &#8211; most of the times it worked, most of the others it did not. Nevertheless, the experience of learning and experiencing new things exhilarate me.</p>
<p>How I joined Stampede was something I believe a pure chance of serendipity.</p>
<p>A few months ago I stumbled upon <a href="https://stampede-design.com/author/root/">Shaza</a>, Stampede&#8217;s Creative Lead in a local Starbucks. She was focusing very intensely on something on the screen, until I saw the mouse she was using. It is a Cyborg R.A.T 7, the one I recognised very much because it is one of the best gaming mice out there.</p>
<div class="full"><img loading="lazy" decoding="async" width="498" height="398" class="size-full wp-image-4609" src="https://stampede-design.com/wp-content/uploads/2013/11/pgallerymadcatz-rat-7-black.jpg" alt="rat7-stampede" srcset="https://stampede-design.com/wp-content/uploads/2013/11/pgallerymadcatz-rat-7-black.jpg 498w, https://stampede-design.com/wp-content/uploads/2013/11/pgallerymadcatz-rat-7-black-300x240.jpg 300w" sizes="(max-width: 498px) 100vw, 498px" /><p class="capt_block">The R.A.T 7 mouse Shaza was using the first time I met her</p></div>
<p>We sat down and chatted about gaming in general for hours. It is not every day you could find a girl you could talk to about video games.</p>
<p>A few months later, she offered me a job as a junior front-end developer at Stampede even that I am entirely new and will be undergoing months of training to prepare myself for client work.</p>
<p><em>Challenge accepted.</em></p>
<h2>How new?</h2>
<p>I am what you could call completely green in programming.</p>
<p>I was an ICT student in secondary school. I have learned the basics of computing and programming languages such as BASIC, C++ and a number of operating systems.</p>
<p>One of my first experiences using HTML/CSS was customising Myspace and Blogger layouts at the helm of these platform&#8217;s glory. At the same time, I learned HTML as my own initiative when I was in pre-university.</p>
<p>And that was it. Joining Stampede is the perfect chance for me to sharpen on my rusty skills in programming.</p>
<h2>Personal tuition with The Man</h2>
<p>Being completely new, Shaza signed me up for a daily programming and coding training with Dov. We often refer to it as a &#8216;tuition&#8217; session. It takes place at Stampede HQ, amidst the million books and purring cats. It could not get any better than this.</p>
<div class="full"><img loading="lazy" decoding="async" width="498" height="498" class="size-full wp-image-4585" src="https://stampede-design.com/wp-content/uploads/2013/11/sani_stampede_violin.jpg" alt="Violin lesson is complimentary." srcset="https://stampede-design.com/wp-content/uploads/2013/11/sani_stampede_violin.jpg 498w, https://stampede-design.com/wp-content/uploads/2013/11/sani_stampede_violin-150x150.jpg 150w, https://stampede-design.com/wp-content/uploads/2013/11/sani_stampede_violin-300x300.jpg 300w, https://stampede-design.com/wp-content/uploads/2013/11/sani_stampede_violin-95x94.jpg 95w, https://stampede-design.com/wp-content/uploads/2013/11/sani_stampede_violin-32x32.jpg 32w, https://stampede-design.com/wp-content/uploads/2013/11/sani_stampede_violin-50x50.jpg 50w, https://stampede-design.com/wp-content/uploads/2013/11/sani_stampede_violin-64x64.jpg 64w, https://stampede-design.com/wp-content/uploads/2013/11/sani_stampede_violin-96x96.jpg 96w, https://stampede-design.com/wp-content/uploads/2013/11/sani_stampede_violin-128x128.jpg 128w" sizes="(max-width: 498px) 100vw, 498px" /><p class="capt_block">Violin lesson is complimentary</p></div>
<p>Apart from that, <a href="https://stampede-design.com/author/syazwan/">Iwan</a> also helped to train me via Skype and Gotomeeting and had been very patient in answering questions related to front-end development. In fact, the whole team also helped to devise a series of training &#8216;modules&#8217; and assessment methods to prepare me for client work.</p>
<p>While I was worried that my progress might be slow and that I make mistakes, the rest of the team made sure that I feel welcome and reassured that it was definitely OK as it is part of the learning progress. The important thing is I <em>learn</em>.</p>
<h2>On Stampede culture</h2>
<p>One thing that struck me the most after joining Stampede is that how close everyone in the team is with each other.</p>
<p>During my first Stampede getaway, we devised a plan to throw Wan a surprise birthday party. On a couple of instances, <a href="https://stampede-design.com/author/zana/">Zana</a> was always being extra observant to catch everyone&#8217;s blunder and typing mistakes so she could tweet and add it up in <a href="http://thingsstampedeteamsays.tumblr.com" target="_blank">this blog</a>. The designers, <a href="https://stampede-design.com/author/root/">Shaza</a> and Wan, cooked up graphic mischiefs using any of the team members&#8217; old photos in time for any special occasion, for example <a href="https://stampede-design.com/author/shaiful/">Shaiful</a>&#8216;s birthday here.</p>
<div class="full"><img loading="lazy" decoding="async" width="498" height="385" class="alignnone size-full wp-image-4579" src="https://stampede-design.com/wp-content/uploads/2013/11/575467_436402683122466_1525510231_n.jpg" alt="shaiful stampede" srcset="https://stampede-design.com/wp-content/uploads/2013/11/575467_436402683122466_1525510231_n.jpg 498w, https://stampede-design.com/wp-content/uploads/2013/11/575467_436402683122466_1525510231_n-300x232.jpg 300w, https://stampede-design.com/wp-content/uploads/2013/11/575467_436402683122466_1525510231_n-146x114.jpg 146w" sizes="(max-width: 498px) 100vw, 498px" /></div>
<p>We call this the act of <a href="http://www.urbandictionary.com/define.php?term=pwn" target="_blank">pwning</a>.</p>
<blockquote><p>pwn. n ˈpȯn, ˈpän: the act of perfect ownage. Flawless victory. Schooled. Lesson taught. Owned beyond conventional words, and so excited about it, it&#8217;s mistyped.</p></blockquote>
<p>Another thing I noticed is that whenever we are about to launch a project, every single one of the team members help out in any way they can &#8211; fix images, point out the styling bugs, help out with the content population, sing (yes) etc. &#8211; even though we are not indirectly involved with the project.</p>
<p>Gotta love working with a team like this.</p>
<h2>What have I learned so far?</h2>
<p>I have only joined Stampede officially for 20 days, but here&#8217;s what I have learned so far:</p>
<ul>
<li>It is OK to make mistakes as long as I learn from them.</li>
<li>Be perpetually hungry for knowledge.</li>
<li>Do not be afraid to ask questions.</li>
<li>A close-knit team is a happy team when working together.</li>
</ul>
<p>Thanks to Shaza and the rest of Stampede, I have never felt welcomed enough to join a team. It might be too early for me to say this, but I think I have already been enjoying working at Stampede.</p>
<p>(<a href="http://madcatz.com/rat-colors/" target="_blank">R.A.T 7 picture credit</a>)</p>
<p>The post <a href="https://stampede-design.com/blog/the-new-kid-on-the-block/">The New Kid On The Block</a> appeared first on <a href="https://stampede-design.com">Stampede: the strategic design &amp; technology company</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://stampede-design.com/blog/the-new-kid-on-the-block/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
