Sweet Alert is a beautiful replacement for JavaScript Alert. SweetAlert automatically centers itself on the page and looks great no matter if you’re using a desktop computer, mobile or tablet. It’s even highly customizeable. It is released under MIT License.
Requirements: JavaScript Framework
Demo: http://tristanedwards.me/sweetalert/
License: MIT License
Professional Web Icons for Your Websites and Applications
Já falamos aqui de TrackDuck (trackduck.com), uma ferramenta que pode ajudar designers e programadores de aplicativos a definir tarefas “pintando” em cima do site que estão construindo.
Seu uso é muito simples, basta criar uma conta e fazer o upload dos trabalhos, depois marcar a região que queremos comentar (em cima do desenho), permitindo começar uma discussão sobre detalhes do aplicativo que está sendo criado.
Pois então, agora apresentaram uma nova versão, integrada com as melhores ferramentas PM e CMS. Em seu site podemos ver suas características principais:
Agora se integra com JIRA, onde torna possível sincronizar os projetos de TrackDuck com esta plataforma; com Pivotal Tracker; com StartHQ , onde podemos buscar comentários ou dúvidas de TrackDuck mediante o buscador do aplicativo; com Trello, onde podemos sincronizar projetos; com Hipchat e Slack, para uma melhor comunicação e melhor desenvolvimento; com Basecamp; com Flowdock; com Intercom… ao mesmo tempo apresentam extensões Google Chrome, Safari, Firefox e Bookmarklet, assim como com WordPress e ModX.
Agora estão trabalhando para se integrar com Zendesk, Github e Asana.
O primeiro projeto criado é gratuito, por isso vale a pena criar uma conta hoje mesmo para experimentá-lo.
Veja também:
A equipe de Auttomatic trabalhou junto com a equipe do Google para oferecer aos milhares de sites criados com WordPress.com a integração imediata das Google Apps: Gmail, Google Calendar, Google Drive, Hangouts, etc. Assim, agora será possível linkar e configurar profissionais contas de email com os domínios comprados em WordPress.com, gerenciar eventos através do calendário e armazenar arquivos, inclusive, de forma ilimitada em Google Drive, entre outras coisas.
Vários esclarecimentos, no entanto, ainda faltam ser dados para promover sua ativação e seu aproveitamento:Google Apps for Work, como se chama o programa, estará disponível só para os novos clientes do WordPress.com que optarem a partir de agora por comprar domínios personalizados através da plataforma? Quem já havia comprado um domínio será avisado em breve sobre o que fazer para se atualizar? Neste link se encontra um completo espaço de suporte. Quanto aos preços de integração há dois planos disponíveis, o primeiro com opções estándar e com um valor de 50 dólares anuais por domínio, ou então, um segundo plano com espaço ilimitado em Google Drive por um valor de 120 dólares por ano e por domínio.
Enfim, uma importante integração que enriquece o serviço de Auttomatic facilitando a gestão dos sites, os quais, não só é preciso administrar artigos e páginas como também é preciso um trabalho multicanal já que não só visitantes são os que frequentam nossas criações, são clientes potenciais prontos para converter a qualquer momento. Claro, sem as ferramentas adequadas o trabalho se complica, inclusive, com equipes profissionais a nossa disposição, porém, com as reconhecidas apps de Google à maõ talvez possa ser menos pesado.
Maiores informações: Blog oficial de WordPress.com
Veja também:
Disponível em vários idiomas e de forma gratuita, beefree(beefree.io) é um aplicativo online que podemos usar para criar emails HTML que se adaptam ao tamanho da tela que estivermos lendo.
Se trata de um editor de conteúdo, com vários modelos disponíveis, que torna fácil criar uma mensagem de email, quer seja para anunciar um novo produto ou serviço, promover uma venda, informar os assinantes, etc.
A interface permite arrastar e soltar componentes para ir construindo o email como se fosse um LEGO, sempre com o objetivo de criar um resultado que se adapte também aos celulares, com opção de testarmos antes de enviamos.
É possível alterar modelos, cores, fundos, imagens, textos… tudo sem necessidade de criar uma conta, sendo muito simples testá-lo para ver se atende às suas necessidades.
Embora a maioria dos programas de email marketing tenha seu próprio editor HTML de emails (alguns mais completos que outros), sempre é bom conhecer mais opções que ajudem a melhorar a imagem que mostramos nos boletins, um canal que, embora tenha sido muito afetado pelos filtros anti-spam dos clientes de email modernos, continua sendo uma das formas de comunicação mais usadas atualmente.
Veja também:
Improving workflow and increasing productivity is very important to us developers. Every second counts since the time we spend on small tasks adds up. Small tasks like our Git commands are something that we do on a daily basis.
Today we’ll be looking at a quick way to improve our Git workflow with our favorite editor, Sublime Text.
Here’s a quick example of how fast Git works within Sublime Text.
Let’s run through the things we’ll need to improve our Git workflow real quick.
ctrl + shift + p)Git Installation for Windows User: When installing Git, make sure you select Run Git from the Windows Command Prompt. Everything else can be default settings.
Usually when I am working in Sublime Text and want to commit some changes, I will switch over to my terminal window and type the following:
git add -A
git commit -m 'some crazy stupid message here'
git push
While this is easy enough, let’s cut off a few seconds off our workflow and do this within Sublime Text.
After installing the Git package, if you open your command palette by using ctrl + shift + p, then you’ll see your available Git commands (a ton!).
The cool thing is that like all other times you use the command palette, you don’t have to enter the entire command. Sublime Text will autocomplete things for you. So instead of typing git add -A, you can just type add and Sublime Text will know! Just another way to shave off milliseconds off your workflow.
You will notice that there are two commit commands the Sublime Text Git Plugin provides. The main difference is that Quick Commit will open up a little text box that you can quickly type into while Commit will open a new file and show you the changes in each file.
Here’s Quick Commit in action:
Here’s Commit in action:
Just close the file after using Commit and it will use the message you typed as the commit message!
My workflow when trying to push code to the server inside of Sublime Text looks like:
ctrl + shift + p, TYPE add
ctrl + shift + p, TYPE quick, THEN type message
ctrl + shift + p, TYPE push
Quick Commit command. That will stage and commit for you. It’s the equivalent of git commit -am 'im staging and committing!'. Thanks to Moran Bentzur for the tip in the comments.There’s so much more you can do with this plugin. Read up more on the Git plugin.
Git Gutter Another cool Git Sublime Text package to use is Git Gutter. It will add icons to the text editor to show which lines have been added or removed in the latest commit.
Try out this workflow and see if you find that it saves you some time.
With a quick addition of a Sublime Text package, we’re able to add a ton of functionality into our favorite text editor.
There are many more things you can do with this plugin including branching, rebasing, stashing, and more. It’s very fully featured and I definitely encourage all to check it out. For more plugins, here are some resources.
Chartist.js makes it simple to create highly customizable responsive charts. It’s completely built and customizable with SASS, uses SVG, and is DPI independent.
Is there anything important that should be a part of the above list? Let me know that in comments.
jBox is a powerful and flexible jQuery plugin, taking care of all your modal windows, tooltips, notices and more. You can use jQuery selectors to add tooltips to elements easily. You can set up modal windows the same way as tooltips. But most of times you’d want more variety, like a title or HTML content. The jBox library is quite powerful and offers a vast variety of options to customize appearance and behavior.
Requirements: jQuery Framework
Demo: http://stephanwagner.me/jBox
License: MIT License
Professional Web Icons for Your Websites and Applications
jPList is a flexible jQuery plugin for sorting, pagination and filtering of any HTML structure. It supports data sources: PHP + MySQL, ASP.NET + Sql Server, PHP + SQLite. It works with JavaScript templates like Handlebars, Mustache etc.
jPList supports XML + XSLT. It works in all major browsers. For non-commercial, personal, or open source projects and applications, you may use jPList for free under the terms of the GPL V3 License.
Requirements: jQuery Framework
Demo: http://jplist.com/
License: GPL v3 License
visualCaptcha is a configurable captcha solution, focusing on accessibility & simplicity, whilst maintaining security. It also supports mobile, retina devices, and has an innovative accessibility solution. visualCaptcha is now available across multiple backend languages. If you are using JavaScript, Ruby, or PHP, you can use visualCaptcha.
You can now use visualCaptcha as plain JavaScript, as a jQuery plugin, and Angular JS directive, or even build your own integration with your favourite framework. You can use your own pictures or audio as captchas which can be configured through JSON files. There are thousands of websites are already enjoying the benefits of visualCaptcha, with less spam and more customer engagement.
Requirements: JavaScript Framework
Demo: http://demo.visualcaptcha.net/
License: MIT License
Google Developer’s Web Starter Kit is a boilerplate and tooling for multi-device development. It’s responsive, and includes a living component style guide, cross-device synchronization, and live browser reloading.
Forget the times of ‘There’s an app for that’, PHP scripts are now all the rage! Everyone wants to build their own little something special on the internet and mark their territory. With what we are witnessing on the internet front has been pretty moving and compelling enough to push us to try a few things ourselves. Thinking of file-sharing service for your friends, family, colleagues or business partners with all your rules? ‘There’s a script for that’!
Building such a service may not seem like an accomplishable task in any way possible for a person with little-to-none coding background. That’s the beauty of these scripts; just some simple technical tasks and you could see yourself running a high-tech online portal! Today, we are looking at one such script.
What is FileGator?
Let’s get to the basics of this script. Have you ever shared a file or a whole folder with your friends or colleagues? If you answered yes, then this thing is pretty straightforward for you – You are going to build such service - online!
FileGator offers to be a perfect replacement for DropBox, and making the most of FTP file managers is pretty gruesome task for most of them anyway . FileGator could be the script to offer you a perfect multi-user file management service, even for your existing online files.
So, in short, this is a PHP script for managing files that allows an individual to get the script up and running within a few minutes once uploaded to your server. FileGator offers some pretty advanced features for this task, and we’ll be seeing if it really worth all the talk.
Installation and setup
Setting up of scripts are usually dead simple and so need for worrying about how to get this thing up and running. Since there is no need for a database, installation is quite simpler than you would expect. All it takes is just uploading of a few files to your server and you're good to go. If you do own/rent a server for your website, you can simply add a new address, and upload all the contents of this PHP Script.
Management of users is pretty straightforward from the admin dashboard, and we’ll cover that later. Still if you persist of using MySQL database for storing your user information, that is also provided, but is optional and can be overlooked. All configuration options and tweaks are done in a single configuration file. Also, as far as compatibility is concerned, we have had no issues running it on all the major browsers. So, that’s a less thing to worry about!
FileGator features reviewed
Now that you have your new PHP script uploaded to your server, the very next step is to set it up to suit your needs and demands. Here, we are looking deeper into this script, making important configurations and examining everything it has to offer!
-The initial interface
What you see above is the initial interface of your new file managment tool. The PHP script once uploaded to your server gives this impression upon being accessed. So, what we see here are basically the files and folders on your online storage.
The user-friendly interface makes all common file operations easy to find. The files can be sorted by name, date or size.
-Creating new users
You can add as many new users as you wish from your admin dashboard. For this, you would need to login with your admin credentials. Once done, you can add a few users to test the script and a base to start off from. Adding new users is pretty straightforward as seen above.
From your admin dashboard, you can go to ‘Users’. From there, a noticeable button prompts you to add new users or manage user permissions, a part we will come to later. Each user can have its own repository folder or they can share a common one. You can play around with permissions and diffrent folder levels and create power users that can manage other users and their files.
The script has a registration form implemented and with this feature you can accept new users to your service automatically. However, this is disabled by default and has to be enabled inside the configuration file.
-Uploading new files
What purpose would a file managment tool serve if it isn’t managed properly to upload files? Here comes the important part. Once a user logs into his profile, the first thing that he would notice is a big 'Add Files' button. The upload process itself is presented at the screen above. You can easily upload multiply files at once. A few file formats are disabled by the administrator, like you can see above, the .exe files are not allowed for uploading and hence, the message – ‘Filetype not allowed’.
After uploading your files, hit done. These files will be uploaded into the current working directory.
-Generating download links
Download links are the shareable version of the location where the file needs to be downloaded from. Download links form an essential part of a file sharing network and FileGator has covered you pretty much on this front.
Once a file is uploaded, it will show up in the directory as seen above. The settings tool icon beside every file/folder needs to be clicked and you can generate the download link of files and folders. Copy this link, and share with your friends wanting to access the files!
-Sharing download links
What is all the point of creating a file sharing network and including no easy and quick way to share the generated download links? FileGator also provides an easy feature that lets you enter your recipient’s Email address and a message that includes your recently generated download link.
This feature can also be accessed directly from the settings tool icon beside each file.
-Add to Archive
FileGator provides with a simple-yet-efficient system for adding multiple files to a ZIP archive or unpacking the archive directly on your server. You can select multiple files or a whole folders from the checkboxes beside them, then head on to the bottom of the page and you will find a set of buttons, including copy, move, delete and zip. For adding these selected files to a .zip archive in the same directory, select the ‘Zip’ button and you will see just what you see above.
The rest of the features at the bottom are pretty clear – Copy, Delete and move actions. Select them accordingly for your relevant task.
-File sorting and filtering
When the number of files and folders increase in number, the screen might just get a little bit cluttered up. So, you can view the entire files and folders sorting according to their hierarchy by clicking on the button marked with a red circle in the above image. Files can easily be filtered simply by typing in file name or extension in the search box.
-User permissions
As seen in the user creation window, while you set up all the basic information like username, password and directory, there’s a set of ‘permissions’ or ‘user roles’ for each user. These settings define what a user is allowed to with files and folders within the repository.
The basic permissions available are Read, Write and Upload. Files like .txt are editable from the window itself. So a Read and Write permission to a user will allow him to read the .txt and make some changes to it. The upload permission allows the user to upload new files. You can set the permission of a user at the time of creating them. The user permissions however can also be changed later from your admin dashboard.
FileGator features overview
-Mobile
The best part about FileGator is that the website is also mobile-optimized. So all of the file operations could be done on the go! The mobile version would be just as functional as the main script would be, but this feature is only available on the FileGator PRO version that is priced at 25 USD for a single license.
-Multiple Files/Drag-and-drop
FileGator allows multiple files to be uploaded by selecting all the files at once. It also has a drag and drop feature implemented so you can easily trow your files into the browser and the upload will start imediately.
-Search Files/Folders
This tool also provides a built-in search toolbar for filtering files in the current directory simply by typing a part of the name or extension.
-Translatable Interface
The script has a single translation file and it comes with over 10 translated languages including English, French, German, Persian, Russian, Spanish and a few more.
Pricing
The pricing of FileGator starts from a $9 for a regular single-domain license and would cost $25 for a mobile-friendly version called ‘FileGator PRO’.
Conclusion – Our verdict
Given all its features and capabilities, this script takes minimum of server load for operating. All you would need is a decent size of uploading room on your server if you plan to host large files. No coding needed for getting this script running.
Host your files, manage and share them with your friends/colleagues. This definitely is a must-have tool for any webmaster.
You can have a look at the script and the demo here: http://www.file-gator.com/. This script is quite popular at CodeCanyon, given that it has been a ‘Featured’ product over there.
Our Rating – 4.7 out of 5
Ferramentas para melhorar a produtividade na hora de programar não faltam, e um bom recurso que vale a pena conhecer é Codebox.
O que essencialmente Codebox faz é permitir desenvolver projetos desde nosso PC ou Chromebook de forma local e na nuvem. Esta possibilidade de programar baseada em cloud permite também que se possa editar o código de forma online ou offline, e também compartilhá-lo com outros usuários para criar um espaço de trabalho colaborativo.
O mesmo site sugere utilizar Codebox como plataforma para trabalhar de forma remota, como ferramenta para autônomos que queiram trabalhar em seus projetos de diversos dispositivos, como editor colaborativo com a vantagem de ter um vídeo-chat incorporado para aprender e ensinar a programar.
Como é um serviço desenhado por e para programadores, não só nos permite o registro com Google, como também mediante nossa conta de Github, Bitbucket ou Assembla.
Por fim, só falta comentar que temos disponível o código fonte de Codebox em Github neste link, pois também é uma ferramenta open-source.
Sem dúvida, uma ferramenta que os programadores irão querer guardar em seus favoritos.
Veja também:
Ouibounce is a small library enabling you to display a modal before a user leaves your website. This library helps you increase landing page conversion rates. Ouibounce fires when the mouse cursor moves close to (or passes) the top of the viewport. You can define how far the mouse has to be before Ouibounce fires. The higher value, the more sensitive, and the more quickly the event will fire.
By default, Ouibounce will only fire once for each visitor. When Ouibounce fires, a cookie is created to ensure a non obtrusive experience. Please use Ouibounce to provide value to your visitors. With tools like these it’s very easy to create something spammy-looking.
Requirements: JavaScript Framework
Demo: https://github.com/carlsednaoui/ouibounce
License: MIT License
When it comes time to migrate wordpress, it isn’t all that easy. You have a number of things to move over including your database, your images, your themes and your plugins.
I’ve been teaching WordPress for years and by far the most common question I get is “How do I get my website online?”
Well, I’ve put everything I know into an in depth tutorial on how to migrate your site. This might take a little while the first time, but as you do it a few times, this becoming a pretty quick process.
I recommend using BlueHost for hosting WordPress as it is very affordable, the support is amazing, and they are professionals at hosting WordPress. Here is my link for a discounted rate: http://wesbos.com/bluehost – if you sign up from this link you’ll get a discounted rate and I’ll get a small affiliate fee.
Hope you enjoy!
.png)
.png)
[HKEY_LOCAL_MACHINE\SYSTEM\WPA\PosReady]
"Installed"=dword:00000001
Draggabilly is a small (~10k) JavaScript library that does one thing well — make that shiz draggable. It makes it super easy to add drag-and-drop functionality to your site. It supports IE8+ and multi-touch. You can specify both a containment area and specific handle for dragging. Installation is simple, just download and include the file.
Requirements: JavaScript Framework
Demo: http://draggabilly.desandro.com/
License: MIT License
Professional Web Icons for Your Websites and Applications
Quill was built to address the problem that existing WYSIWYG editors are themselves WYSIWYG. If the editor was not exactly the way you want it, it was difficult or impossible to customize it to fit your needs.
Quill aims to solve this by organizing itself into modules and offering a powerful API to build additional modules. It also imposes no styles to allow you to skin the editor however you wish. Quill also provides all of what you’ve come to expect from a rich text editor, including a lightweight package, numerous formatting options, and wide cross platform support.
Requirements: JavaScript Framework
Demo: http://quilljs.com/
License: License Free
Professional Web Icons for Your Websites and Applications
Sometimes, when we are building websites and web applications, we need a percentage bar / progress bar to show the progress of a specific task. Therefore Kalasoohave has created a lovely Number Progress Bar inspired by daimajia. It is light-weight, easy to use, customizable, free and open-source.
Requirements: JavaScript Framework
Demo: http://kalasoo.github.io/NumberProgressBar/
License: MIT License
Professional Web Icons for Your Websites and Applications
Framer.js is a toolkit for turning static mockups into interactive and animated prototypes. You can generate assets out of Photoshop, animate layers in 3D space, and more.
Quill is an open source rich text editor that has an API to make it easy to customize for your own uses. It’s fast and lightweight, with an extensible architecture, semantic markup, and more.
Just like any other web page, landing pages too have an introductory section, a header. The current design trends and conventions usually use an image - either of the product like an iPhone app, or some cool full width background that somehow relates.
I think it makes sense, images are powerful. Pictures are perfect in showing off your product; duh. This makes for an instant connection, the viewer gets an instant impression of what’s being talked about here. We also see big and beautiful background images. Photographs capture emotions and moments; that’s something we love as humans. We love to connect.
There is more in a header section than just a pretty picture. Most often then not there will be a clear heading explaining what the page is all about. Headings are crucial as they are the first greeting from the page. Think of the heading as the actual first introduction and as another way to grab your visitor’s attention; it’s a chance for you to entice them, so take it! Some headers go even a bit further to have a short description, albeit it a quick summary, of the product.
The one thing that every landing page should have, front and center, is a call to action at the very beginning of the page. After all, landing pages are meant to get people to be interested and convert. You can’t do that if you don’t have a call to action. These calls serve a very specific and great purpose, they tell people what to do. People ned to be guided, if you just present your product, that won’t be good enough. You need to tell your visitors what you want them to do otherwise they won’t do anything, they will leave and you’ll be left empty handed.
Some landing pages keep it very simple where all they have is a header. They have a straightforward introduction and that’s it. On the other hand there are landing pages that just go on and on! Neither form is bad unless it doesn’t help solve your specific problems. If you were going with the short version, you’d be done by now. But for those who don’t want to leave it off just yet there is more that you can do. Most long landing pages are long because they elaborate on the product - what is it, how does it work and what it can do for you. There are a few other sections that you could find. Let’s talk about them now.
Either you call it the features section or whatever else, at the end of the day you are trying to highlight your product. So what kind of things can you expect to find here? Actually there could be so many, none are truly mutually exclusive you could have both benefits and features. It’s up to you.
This section is the meat and patties of the page where you will be highlighting a verity of things. Most obviously you can highlight a few key features. Don’t list every single thing your product can do. It won’t help anyone. Instead, pick 3 or 4 amazing things and talk about them. The same goes for benefits or value proposition. Benefits differ from features as features describe what your product can do a, i.e you can view pictures on your Mac. Benefits on the other hand talk about the problem that it is helping you with or what it could do for you, i.e you can capture memories with Photo Booth.
The whole purpose of the landing page is to specifically advertise and show off your product. However, you can do this more specifically. You can show off your product through a demonstrations or presentation. Say you are selling an iPhone, you will show big pictures of it, you will show pictures of people using it. You will point to the various things it can do like increase value with this button right here. A lot of these things will be intertwined you will mention features and a demo together. That’s okay, it doesn’t have to be separate. At the end of the day, you are trying to show your product in a good light and show what problems it can solve and what capabilities it has.
This is my favorite part of creating any landing page, you can be very creative in the way you present a product. I enjoy pages with short bursts of text that are to the point and amazing images either with illustrations or photography. These types of layouts are easy to digest for the visitor; don’t make them work to understand what makes your product awesome.
People will doubt you, it’s just the way we are. We like the product, but we don’t know 100% if we want it. What if it doesn’t work all that well? What if it won’t be enough? You get the idea. The best way to push people over the fence is to show them some social proof, show them what others are saying about your product.
Social proof is when you prove the credibility of your product by the words of people who have used it. This can be done through testimonies, “Tim is an amazing designer, he helped guide me through the whole process”. This can also be done by providing quotes from publications like Wired, Smashing Magazine or what not. Even publications that are not famous like BeingLimited will help you because the fact that someone praised you is great! You can show off tweets of users who loved your product or pictures of happy users with it. Be creative with this! Credibility is very important and can only help your conversions.
I’ve stated previously that people need to be guided as to what to do. This is especially true on long landing pages because your visitors will forget your original call to action even half way down the page. That’s why if you have an exceptionally long page it’s a good idea to sprinkle call to actions in-between various sections. Don’t be obnoxious about them, subtle is good as it doesn’t put pressure on the user and make them run for the hills.
However, every longer landing page should have a call to action section on the bottom. Yes a whole section dedicated to a call to action. Make the sign up or purchase easy as possible for your visitors. If you want them to sign up, give them a quick form to fill out their email and password right then and there. Boom, converted! If you want their email, just give them the news letter sign up right there and then too. If you want them to buy something… you get the idea. Like always, keep it simple and light. Just because someone made it all the way down your page doesn’t mean they will automatically convert. Life is just not that easy.
For all the newbies out there, let’s see what you’ve got! I want to see the awesome landing pages you’ve created. They are not as scary as they sound! Or at least share some of your favorites that you don’t see listed in this post!
Shepherd is a JavaScript library that guides users through your app, using Tether to position all of its steps. All you have to do to get started is include Shepherd.js and a Shepherd theme file, and then create your steps with straight-forward syntax.
Testing designs across multiple browsers has always been a pain. When you add in various devices and their resolutions, you have quite the headache on your hands.
How do you know that your navigation menu is responsive across all resolutions? Do animations lag on mobile? Do you have any stock browser styles affecting the design? This laundry list could continue for ages.
Services like BrowserStack aim to remedy this issue. However, if you don’t have room in the budget you’re only left with a couple of options.
You can…
The above options are hardly ideal. So what are you left with? Thankfully, Chrome is coming to the rescue.
As of Chrome 32 we have the ability to mimic the behavior of other devices. This is referred to as emulation. Emulating a device in Chrome is extremely easy. With some tweaking of a few settings within Chrome Dev Tools, we’ll be up and running in no time.
You can open the Chrome Dev Tools by pressing F12 on Windows or Cmd + Opt + I on a Mac.
In the top right right corner there is an icon to open the “Drawer” within Dev Tools.
After the Drawer pops up from the bottom you should see several tabs to choose from. Select the “Emulation Tab.”
From the drop-down menu we’re able to select from a myriad of devices. For starters, we’ll select the Apple iPhone 5. Once selected, click the “Emulate” button. You’ll quickly notice that the screen looks funky and nothing like you’d expect from an iPhone. To fix this, refresh the page.
After the refresh, you’ll notice that that the page looks much better. As far as setup goes, you’re done. Next, we’ll focus on cool tricks and features that come with emulation.
Choosing the device you want to emulate is a good start. Currently, it renders as a resized screen, but there’s plenty of features to explore.
It’s not uncommon to see features or entire websites that target mobile devices. Below is an image of Twitter on an emulated iPhone 5. You can see that it resembles the Twitter app and there’s even a banner at the top to download it in the App Store.
We can write code like this ourselves. Visit this CodePen and change your device to an iPhone to see the div appear.
Essentially all we’re doing in that CodePen is asking the browser what the User Agent is. The User Agent is just a long and crazy string that tells us some details about the device and browser that the user is running.
We’re asking the browser if the User Agent contains “iPhone” in its string. If it does, then we’ll assume the user is on an iPhone (even though you can spoof it like we’re currently doing).
Users rely on the ability to pinch and zoom for certain mobile applications. With Chrome’s emulation tools we can mimic this functionality. All you have to do is hold down the Shift key and scroll with your mouse or track pad.
If you’re unable to pinch and zoom then try another website. It’s likely that the website you’re currently on has disabled pinch and zoom within the meta tag.
If you’re developing an application that uses HTML5 geolocation then you’re probably tired of using your same old static location. Thankfully with Chrome we can trick the browser into thinking we’re somewhere else.
In the “Sensors” section we can enable the emulation of geolocation coordinates. So rather than the browser always detecting where we currently are, we can tell it that we’re actually somewhere else. This CodePen uses HTML5 geolocation. If you change your location within Chrome you’ll see it write out different coordinates to the document.
Animations are a really nice way of sprucing up your design. The downside is that they can be pretty choppy on mobile devices. If you notice that your animations lag on mobile, then you should consider disabling them for mobile users.
This CodePen uses a complex Regular Expression test to detect if the User Agent could possibly be one of many known mobile browsers. If it is not a mobile browser, the text will animate continuously. Whereas it will be disabled on a mobile device.
Testing web pages for multiple browsers and devices is traditionally a huge pain that can only be fixed by a third-party service or an unhealthy collection of devices. Fortunately, Chrome has marched in and made this problem much easier to deal with. Now we can see problems and specific device functionality without having to pull up the page in the actual device itself.
What do you use Chrome Emulation for? Share your examples with us in the comments.
Molecule is an HTML5 game framework that’s lightweight, easy to use, and cross-platform compatible. It has no external dependencies and even includes its own basic but powerful physics engine.
Haxe is an open source, multi-platform programming language that has a syntax similar to JavaScript, PHP, and the like. It’s fully documented, and has strict compile-time type checking to make debugging faster and easier.
