There was one time…

… when I just finished a project and decided to sign off from work. Confident that everything had been uploaded, I drove off to meet my friends about 2 hours away from home. I didn’t notice somehow I (stupidly) forgot to upload the files into our development server. My phone rang and it was our Lady Boss (Shaza: I wonder who this Lady Boss is) asking the link to the project that I have done earlier. She needed it because my team is ready to review the work.

I told her I would send the link through Whatsapp. So I proceeded to verify the link on my phone and noticed that the latest files were not there. I felt like I’m somehow intoxicated by Ghom’s Poison (Diablo 3 was not released yet at that time, but that is the equal thing). At the end, I screwed up. The worst part is I screwed up not because I didn’t finish my job, but just because I couldn’t access my computer using my smartphone for the files.

Did I drive back home 2 hours for the files, you were asking? Yes *facepalm*

But we have cloud storage!

I’m not a big fan of cloud storage (can’t resist Cloud 9 though!). Even worst, if I want to sync it on cloud storage, it will be the revised, polished and final .zip file meant for clients unless clients requested to sync it on cloud while work in progress. Since the project is not reviewed yet, I have not even thought to sync it.

Old story

Well, it was back then. When I just started working with Stampede.

Now, things have changed. Last month, I’ve been in the same exact situation. The only different is I was well prepared this time!

I have assigned two padawans to deal with it.

Accessing your computer using smartphone with Teamviewer

Teamviewer has been around for quite some time. Easy to use, simple and capable to store your computer on your Teamviewer Account.

What I need to do is just launch it on my Note 3 (this is the time when big screen comes in handy) and log in to my account. It will list all the computers that I’ve stored. Tap on it and it will let you remote that workstation.

Access computer using smartphone with Teamviewer

Accessing your computer using smartphone with Chrome Remote Desktop

Earlier this year, I discovered Chrome Remote Desktop. It is similar to Teamviewer but it is much simplified. And quite fast too!

Access computer using smartphone with Chrome Remote Desktop on mobile

Both of them are capable to let you access your workstation from anywhere around the globe, with Internet connection of course. They are not limited to just grabbing files. You can do everything such as scanning virus, grab passwords stored on your computer, troubleshoot computer, etc. in essence – you can easily access your computer using smartphone even if you are miles away. How about that?

There are several other applications that allow you to access computer using smartphone remotely but for me, I’ll stick with this two for time being.

What about you? Are there any applications you have been using to access your computer remotely via your smartphones? Please share!

(First image credit: Startup Stock Photos)

The post Accessing Your Computer Using a Smartphone appeared first on Stampede: the strategic design & technology company.

Or you simply don’t want to use Bootstrap 3 dropdown menu on mobile because the menu is just too tall?

Bootstrap 3 Mobile Menu

Well, why don’t you try to use push menu for mobile instead?

Bootstrap 3 Mobile Push Menu

For this responsive bootstrap push menu tutorial, I’m using Takien’s jPushMenu. The tutorial shall require all the three big guns – HTML, CSS & Javascript to make the push menu happen.

Before jumping to the tutorial, why don’t you check out these demos for Left Overlay, Left Push, RightOverlay, or Right Push?.

Responsive Bootstrap Push Menu – HTML

Here I am using default Bootstrap Navbar with additional classes for push menu to work.

<pre>
<nav class="navbar">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header"><button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> </button> <a class="navbar-brand" href="#">Brand</a></div>

<!-- Collect the nav links, forms, and other content for toggling -->
<div id="bs-example-navbar-collapse-1" class="collapse">
<ul class="nav">
<li class="active"><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown"><a class="dropdown-toggle" href="#" data-toggle="dropdown">Dropdown </a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form">
<div class="form-group"><input class="form-control" type="text" placeholder="Search" /></div>

<button class="btn" type="submit">Submit</button></form>
<ul class="nav">
<li><a href="#">Link</a></li>
<li class="dropdown"><a class="dropdown-toggle" href="#" data-toggle="dropdown">Dropdown </a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div>

<!-- /.navbar-collapse --></div>

<!-- /.container-fluid --></nav>
</pre>

Based on the above html, added classes can be found on line 05 (toggle-menu menu-left push-body) and line 15 (cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left).

The post Responsive Bootstrap Push Menu Tutorial appeared first on Stampede: the strategic design & technology company.

Here are some highlights from the eyes of Stampede’s two biggest football fans, Iwan and Shaiful.

Iwan

Most High Tech World Cup

Referees will have GoalControl watches in Brazil. Photograph: Wolfgang Rattay/Reuters

This is the first World Cup featuring goalline technology that helps deciding the goal. FIFA approved 4 kind of goalline technology to be use in World Cup 2014. They involve camera and chips embedded in the ball itself which uses the magnetic field sensor for detecting goals. While using camera is just as simple as watching replay, embedded chips come quite handy as well. FIFA also equipped referees with smartwatches that not only tell time, but will buzz when the ball crosses the line.

Another high tech gadgets is the ball itself. “Brazuca” is designed from scratch, thanks to 2010’s “Jabulani” failure.

Luis Suarez’s Choppers Strike Again

Looks like he didn’t learn from the past because Luiz Suarez bit again. Doing the offence for the third time this time, Suarez decided to bite on Italian defender, Giorgio Chiellini’s shoulder. While no actions were taken on the field, he was found guilty by FIFA and currently serving a ban for nine Uruguay matches and from all football activities for four months. He also apologised for the bite. Despite this biting saga Barcelona still signed him from Liverpool with a fee believed to be staggering 80 million euros. That’s 14 million less than Real Madrid paid for Christiano Ronaldo’s signature on June 2009. Crazy!

Neymar Jr’s injury

There is no doubt Neymar was Brazil’s best player throughout the World Cup 2014. Unfortunately, during the game where Brazil played against Colombia on quarter final, Colombian defender Juan Zuniga kneed Neymar’s back within the last 2 minutes. Nobody expected the worst. He was seen sobbing soon after, complaining to fellow teammate and defender Marcelo that he could not feel his leg. Nursing a broken vertebra, that was the end of his journey for World Cup 2014.

New Scoring Record

There are several records broken during World Cup 2014. On top of the order is World Cup’s all-time leading scorer. Owned by Brazil’s Ronaldo previously with 15 goals, the Germany veteran, 36 years old Miroslav Klose surpassed him by scoring his 16th goal when Germany defeated Brazil by 7-1 on the semifinal. His own teammate, 24 years old Thomas Müller also make the top ten by 10 goals.

Both have one more game to play on this World Cup – the grand finale – the one we all look forward to.

Shaiful

Spain’s Early Exit

They say the bigger you are, the harder you fall. The demise of defending champion and two consecutive European cup holder Spain marked the end of an era for Spanish football. No doubt they still have the same ‘dream team’ lineup on paper but it’s just not working on the pitch anymore this time. The rise and fall of a golden era is not uncommon in the football world with France as another good example. Anyhow, credit where it’s due, they held it for 5 years and boy, were they invincible!

Brazil & Germany Making It To The Final Leg

This is a trend that we don’t expect to end anytime soon. For every generation of players, these two teams would consistently make it to the playoffs. The squads ‘star power’ may not be as intimidating as Spain or England but they certainly have proven over and over again that they can score goals. The Germans fielded mostly similar faces from the last world cup except now they have matured and really mean business. And despite Brazil’s scorching unearthly defeat by Germany in the semi, we know that it will always be the greatest football nation in the world.

(Update: Brazil, the host team was convincingly beaten by the Dutch in the third-place playoff yesterday.)

It’s GER vs ARG tonight. Who are you rooting for?

The post World Cup 2014: The Talk appeared first on Stampede: the strategic design & technology company.

Nowadays, there are quite a number of font icons provider out there. To name a few, they are Font Awesome, IcoMoon and Typeicons. Most of them provided different icon packs.

Out of all font icons available, I’ll easily pick Fontello as my favourite in the pack.

Why Fontello?

I found out that out of all font icons out there, Fontello provides most of the icons from other providers such Fontalico, Font Awesome, Entypo, etc. This gives me a lot of icons variations for use, and I am not the one who believes in the saying do not be spoiled by choice.

With Fontello service, I can even use my own icon as well. What I need to do is just create a svg format icon and drag it on the section provided. Easy peasy.

Another part of Fontello that I love is that the ability to choose just the icons you need. 

Other font icon providers come with CSS that include all icons. Whilst using Fontello, I just need to choose only the icon(s) that I will need to use.

Let’s also say if I need to add new icons in the future, I just need to import config.json (this comes with the file that you’ve downloaded from Fontello) on Fontello and it will highlight the icon that I have chosen on particular project.

Best of all, Fontello is also highly customisable. You can easily change class for your icons and use your own font name with Fontello, as shown in these examples – changing class name followed by changing font name.

What do you think? Do you also prefer Fontello over other font icons or are there some font icons out there that caught your fancy? I am interested to hear all about it. Comments below!

The post Fontello As My Favourite Font Icon Service appeared first on Stampede: the strategic design & technology company.

Tell me more…

If you noticed, not all services offered on Maybank2U website are included on its mobile app. In return for mobility and convenience, the apps has been stripped down to offer limited services compared to what already had been offered in its website.

For example: Prepaid top up with PIN, one-off payment, new third party account transfer, insurance and investments are a number of services which had been dropped from this app.

What if I want to use current website on my mobile?

Good question. So I did a little sleuthing – I checked Maybank2u website on my mobile and found out that the above services are not available as well. The current Maybank2U website also does not render very well when viewed on mobile. As a front-end developer, this bugs me a bit (OK, a lot).

In the end, I decided that I am just going to use the Maybank2U mobile website just to check the account balance and none for those heavy duty banking stuff.

But I still want to use it on my smartphone. How can I do that?

On 29^th November 2013, Maybank2u rolled out a new interface for the website. As a front end developer, on my first glimpse I knew straight away that it is a responsive design. Despite a lot of people bashing the new interface on social media, I found that it works very well on mobile devices. This new design works well on any devices no matter what the screen size of the device. Most importantly, the new design offers all the services they have on desktop view.

The only thing is that the new design is now reverted to the old one.

Bummer! But how do I get to the Maybank new interface?

First step is to open Maybank2u on your mobile browser. Once loaded, click “Visit Full Website” link on the bottom of the page. Now, you will see normal Maybank2u website on your mobile browser. Go ahead and click that first banner of the slider (red area on below screenshot) which then will redirect you to new Maybank2u interface.

For easy access to the new interface, simply create a bookmark and make a shortcut on your Homescreen.

Do you have any other hacks? Do share them in the comments.

The post Alternative for Maybank2u Mobile App appeared first on Stampede: the strategic design & technology company.

But how about if you own one of those Android devices which don’t have NFC or the equivalent technology – for example Samsung Galaxy S2.

First off, you need to check if your device runs on Android version 4.0 above, because this is where SuperBeam can perform the magic for you. While it is still using NFC to communicate, it is also offering another method to communicate between devices which is designed exclusively for devices that don’t have NFC.

How does it work?

You can use SuperBeam to scan QR code on other devices via SuperBeam app. It will communicate between devices using Wifi Direct once you scanned the QR code. This process is actually fully automatic without the need to do anything – not to mention it can share multiple files too! Imagine the convenience it offers.

Scanning QR Code to start communication

Transfer in progress

Conclusion

I have found that this app has been a great help especially when I need to transfer video or large images to other devices. It’s painlessly easy to use – just with simple tap, it will transfer your selected files for you within minutes. And yes, it is totally free!

Do you have any other method you use to transfer large files between your mobile devices?

The post How to Transfer Large Files Between Android Devices appeared first on Stampede: the strategic design & technology company.

These are amongst my favourites:

Stack Overflow

Deemed as the Quora for programmers, Stack Overflow is a site based on the concept of crowdsourcing where a user posts a question and will be answered by other users who have the knowledge. Free with no registration, this is the site where I first consult because most of the time, I would find the solutions here.

Smashing Magazine

With several categories such as Design, Mobile, UI/UX and loads more, Smashing Magazine is packed with interesting articles based around web design and development – which is not only useful for experienced designers and developers, but also for newbies and basically anyone who is interested in web development in general.

CSS Tricks

Owned by Chris Coyier, a designer at CodePen, CSS Tricks offer a lot of cutting edge techniques for use throughout the development process.

JS Fiddle

JS Fiddle is an open source javascript editor which offers you a canvas to try new stuff and share with people without the need to upload to your own server. It is good for experimenting, which I highly recommend.

A List Apart

A List Apart explores the design, development, and meaning of web content, with a special focus on web standards and best practices. Like Smashing Magazine, the site provides a lot of good articles regarding web development. I could spend hours and hours here going through every article.

CSS Community

CSS Community is a special community for CSS Designing Discussion on Google+. Among the topics discussed are CSS techniques, tips, tricks and many more. Functioning as a community, the members would also help you if you have any issues regarding CSS.

CSS3 Generator

Instead of writing all CSS3 stuff manually one line after another, which can be time consuming after a while – why not give it a try at CSS3 Generator?

Colorzilla

ColorZilla is a Mozilla extension that assists web developers and graphic designers with color related and other tasks. Pretty handy to speed up the development process.

Have you got your own list and would like to share with us? Feel free to add them in the comments section!

The post 8 Useful Resources for Front-End Developers 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.

The biggest problem that we have to face is how we render our XHTM/CSS on IE6. Personally, I haven’t found any problem testing XHTML/CSS in IE10 , IE9, IE8, and IE7. All we need is just a matter of clicking.

Here’s how I do it:

Hitting “F12” while browsing your IE, will popup the “IE Developer Tool” with selections of IE “browser Mode” and “Document Mode”.

Looking at the image above, you might find that there is no option to select IE6 there. This is due to the fact that Microsoft had already abandoned IE6 Standards Mode with the IE7 release.

Fortunately, there are a lot of ways to render on IE6 on the net nowadays. Here are some of them:

Render IE6 on your Firefox. Yes, Firefox! No kidding.
NetRenderer
IETester

For my case, the most reliable way to render IE6 is using Microsoft’s Virtual PC. In short, I can install Windows XP (comes with IE6) on my Windows 7 machine.

Since I only need IE6 to run on my Virtual PC, what I did is to set my Virtual PC to Hibernate Mode and create a shortcut for IE6 on my Windows Seven quick list.

Clicking on “Internet Explorer 6” and you will have exactly the same IE6 on a decade ago.

But that was just how I did it. If you have some other alternatives on reliable way to render your website on IE6, feel free to post them in the comments section.

The post Reliable way to render your site on IE6 appeared first on Stampede: the strategic design & technology company.

Unwanted space below <img>

Image above shows the correct styling (Left Side) and unwanted space below <img> (RightSide).

HTML Code

<a class="link" href="#">
    <img src="your image path" alt="Image" />
</a>

Style

.link {
border:1px solid red
}

Why Does It Happen?

Well, for my case, “line-height” property is the culprit. I often assign “line-height:normal;” to <body> so, I’ll never miss any line-height. However, it will also cause the unwanted empty space below <img>

How to fix it?

Change “line-height” value to 0 for <a> tag.

.link {
border:1px solid red;
line-height:0
}

The post Get Rid of Unwanted Space Below <img> appeared first on Stampede: the strategic design & technology company.