All posts tagged “8211”

Fresh Resources for Web Developers – February 2015

After doing this for more than a year, the hardest part about writing this monthly resource pile for designers and developers is the introduction. While we’re on the subject, here’s your February 2015 recap of the best and freshest of resources for web developers like you.

In this installment, we are looking at a special search engine to find code snippets, a very resourceful reference to address issues in the Flexbox module, and development tools for better management of color, typeface and gradients.

Gradient Animator

CSS3 Gradient allows us to create imageless gradients on our website without the need for loading any images. We can even combine it with CSS3 Animation to give a more compelling effect. But if the code is too much for you, use the simpler Gradient Animator route to generate one with a nice interface.

SVG Pocket Guide

SVG Pocket Guide is compiled by Joni Trythall. It is a handy reference that will walk you through the basics of SVG (such as creating shapes and text) all the way to more advanced features (like creating gradients, clipping paths and patterns). The book comes in Markdown format and is available in English and Portuguese.

Flexbugs

Flexbox is a very promising new module in CSS3 that would totally change they way we build web layouts. However it also comes with cross-browser compatibility issues of its own. This repository, Flexbugs, is a collection of these bugs and the workarounds to address them. This is a very useful resource for anyone who lives on the bleeding edge of the Web.

Icono

It’s amazing what we can achieve with just CSS like create a fully presentable icon using just a single element. Icono is the library that does this. In this library, you will find a collection of familiar icons that are made only with a single element, and CSS. These icons will load faster and are more customizable than image-based icons.

Dillinger

Dillinger is an eye-pleasing Markdown editor. Here you can write in Markdown format, and instantly see the output on the right hand tab. For your convenience Dillinger allows you to export your work into HTML, PDF, or just in a Markdown file format once you have done. Alternatively, you can also connect it to a third-party service like Dropbox and Github where you can save your file.

HTML5Up

HTML5Up is a collection of free HTML5-based templates. You can find a handful of layouts that cater to different types of websites: business, portfolio or just a simple blog. All templates are responsive as well ensuring that the content and the website layout are enjoyable in varying screen sizes.

CSS Colours

Ever wonder what a particular color is named? CSS Colours shows the color name as well as the Hex and RGBA format for a collection of basic colors. It’s a good source to find the perfect color combination for your websites.

Emmet Re-view

Re-view is a Chrome extension that parses your website @media queries and displays your website in each of the breakpoints specified in each @media query. If you are looking for a tool that could save you a little bit of time when testing responsive websites, then this is the tool you need.

TypeGenius

If you take a look at the Google Font library, you will find a lot of fonts in varying faces, family, weight, and types. Hence choosing the right pair or combination of fonts could be a real overwhelming task. TypeGenius makes selecting font pairs simple and fast and possible for the general population.

SearchCode

As the name said, this is a search engine to look for codes or code snippets of many programming languages including JavaScript, C, PHP. This search engine will derive its result from many sources such as Github, Bitbucket, and Google Code. This is a definite must-have tool for heavy coders.





hongkiat.com

Materialize – A Material Design CSS Framework

Google’s Material Design is aimed to work well on the Web and also on mobile apps. It’s gaining popularity with developers and if you want to adopt it too, there are many ways to implement Material Design on your site. You can use Polymer or Angular, or you can use Materialize.

Materialize is a CSS framework based on Material Design principles with Sass support for better development. It carries default styling for easy use, and has detailed documentation.

You can find a lot of useful components within: dialog, modal, date picker, material buttons, parallax, cards and more. It also has many navigation options you can choose from, such as drop down, slide in menu and tabs. Materialize also uses a 12-grid system with 3 default screen size media queries: a max width of 600px is a mobile device, 992px tablet device and anymore than 992px is considered a desktop device.

Getting Started

There are two ways to get started with Materialize: use standard CSS or Sass. Both sources can be downloaded here. You can also get them with bower using the following command:

 bower install materialize 

After you get the sources, make sure to properly link them on your project file or compile the source if you are using the Sass version.

Features

In this section, I will explain some features that Materialize offers.

1. Sass Mixins

This framework carries Sass Mixins which automatically adds all browser prefixes when you write certain CSS properties. It’s a great feature to have to ensure compatibility across all browsers, with as little fuss, and code, as possible.

Take a look at the following animation properties:

 -webkit-animation: 0.5s; -moz-animation: 0.5s; -o-animation: 0.5s; -ms-animation: 0.5s; animation: 0.5s; 

Those lines of code can be rewritten with a single line of Sass mixin like so:

 @include animation(.5s); 

There are about 19 main mixins available. To see the full list, head over to the Sass category in the MIXINS tab.

2. Flow Text

While other frontend frameworks use fixed text, Materialize implements truly responsive text. Text size and line height are also scaled responsively to maintain readability. When it comes to smaller screens, the line height is scaled larger.

To use Flow Text, you can simply add the flow-text class on your desired text. For instance:

 <p class="flow-text">This is Flow Text.</p> 

Checkout the demo here on the Flow Text section.

3. Ripple effect with Waves

Material Design also comes with interactive feedback, one notable example is the ripple effect. In Materialize, this effect is called Waves. Basically when users click or tap/touch a button, card or any other element, the effect appears. Waves can be easily created by adding waves-effect class onto your elements.

This snippet gives you the waves effect.

 <a href="#" class="btn waves-effect">Submit</a> 

The ripples are grey by default. But in a situation where you have a dark color background, you may want to change the color. To add a different color, just add waves-(color) to the element. Replace the "(color)" with a name of a color.

 <a href="#" class="btn waves-effect waves-light">Submit</a> 

You can choose from 7 colors: light, red, yellow, orange, purple, green and teal. You can always create or customize your own colors if those colors don’t fit your needs.

4. Shadow

To deliver relationships between elements, Material Design recommend using elevation on the surfaces. Materialize delivers on this principle with its z-depth-(number) class. You can determine the shadow depth by changing the (number) from 1 to 5:

 <div class="card"> <p>Shadow depth 3</p> <p class="z-depth-3"></p> </div> 

All shadow depths are demonstrate with the image below.

5. Buttons and Icons

In Material Design there are three main button types: raised button, fab (floating action button) and flat button.

(1) Raised button

The raised button is the default button. To create this button, just add a btn class to your elements. If you want to give it the wave effect when clicked or pressed, go with this:

 <a href="#" class="btn waves-effect waves-light">Button</a> 

Alternatively, you can also give the button an icon to the left or the right of the text. For the icon, you will need to add custom <i> tag with the icon class name and position. For instance:

 <a href="#" class="btn waves-effect waves-light"><i class="mdi-file-file-download left"></i>Download</a> 

In the above snippet we use mdi-file-file-download class for the download icon. There are about 740 different icons you can use. To see them head over to the Sass page in the Icons tab.

(2) Floating Button

A floating button can be created by appending btn-floating class and your desired icon. For instance:

 <a href="#" class="btn-floating waves-effect waves-light"><i class="mdi-content-send"></i></a> 

In Material Design, the flat button is often used within the dialog box. To create it, just add btn-flat to your element like so:

 <a href="#" class="btn-flat waves-effect waves-red">Decline</a> 

Additionally, buttons can be disabled with the disabled class and made larger using btn-large class.

6. Grid

Materialize uses a standard 12-column responsive grid system. The responsiveness is divided into three parts: small (s) for mobile, medium (m) for tablet and large (l) for desktop.

To create columns, use s, m or l to indicate the size, followed by the grid number. For example, when you want to create a half sized layout for mobile device then you should include an s6 class into your layout. s6 stands for small-6 which means 6 column on small device.

You must also include a col class in the layout you create and put it inside an element which has the row class. This is so the layout could be put into columns properly. Here’s an example:

 <div class="row"> <div class="col s12">I have 12-columns or full width here</div> <div class="col s4">4-columns (one-third) here</div> <div class="col s4">4-columns (one-third) here</div> <div class="col s4">4-columns (one-third) here</div> </div> 

Here’s the results:

By default, col s12 is fixed-size and optimized for all screen size, basically the same as col s12 m12 l12. But if you want to specify the size fo the columns for different devices. All you need to do is to list the additional sizes like so:

 <div class="row"> <div class="col s12">My width always has 12 columns everywhere</div> <div class="col s12 m6 l9">I have 12 columns on mobile, 6 on tablet and 9 on desktop</div> </div> 

Here’s what this looks like:

Those are just a few features of Materialize. To learn more about their other features, head over to the documentation page.





hongkiat.com

Fresh Resources for Web Developers – January 2015

It’s here! We’ve finally left the tumultous year of 2014 and as we usher in a new beginning with the new year, we have new hope, wishes, and certainly new tools to try out. In this post, we have put together a handful of perfect tools and plugins to get this rolling.

From a handy online test tool to something for easy access to mobile design patterns, there are quite a few choices to get your 2015 on the right track.

Seti UI

Seti UI is a Sublime Text theme, not to be confused with Sublime Text Color Scheme. The theme in Sublime Text affects the app interface such as the tab and the sidebar. Seti UI is a ported theme. Its flat look is really nice to look at. A perfect choice of theme if you are using Sublime Text in Windows 8 or OS X Yosemite.

Seti UI

IXD Check List

Having a checklist can help you keep track on what has been done and what is to come. If you are a UI designer, you should probably add IXD Check List in your bookmark.

IXD Check List contains a collection of common to-do lists to check. Each item is supported with link references, so you can also learn why it’s on the list. If you prefer, there is a little button on the left where you can print the page and check the list offline.

IXD Check List

Coolors

Well, we have a handful of tools for picking out a color scheme already. But none is as easy as this tool, called Coolors. Simply hit the Space key and it brings up a new color scheme. It will generate new color scheme infinitely, derived from its algorithm and outsourced from its users contributors, as you repeat hitting the Space key.

Coolors

Nibbler

Nibbler is an online test tool that evaluates and scores your website for various factors including Code Quality, Mobile Compatibility, and Accessibility. It’s handy if you want to run a final check for your website before launch.

Nibbler

Velositey

Velositey is a Photoshop plugin to make the process of creating a website prototype in Photoshop easyil and quickly. This plugin allows you to quickly create a new document with a preset grid, adding preset web components, and generating icons or favicons. An indispensable Photohop plugin for every web designer.

Velocitey

Vagrant Manager

If you are using Vagrant in OS X, install Vagrant Manager. This app lets you manage multiple environments in a more convenient way. Once it is installed, it adds a new icon in the OS X task bar where you can monitor and control your virtual machines with only a few clicks. No more messing with command lines.

Vagrant Manager

CSS Specificity

CSS Specifity is one notorious topic of CSS which is not easy to digest. This tool is created to illustrate how this specificity concept works in an interactive manner. Draw several selectors and it will tell you which selector to apply.

CSS Specificity

CSS Dig

CSS Dig is a Chrome extension. And as the name implies, it will dig into your website and parse its CSS. It will show you a report which you can evaluate to perform required optimizations.

CSS Dig

Material Up

For those of you who might not aware of it, Google has just introduced Material, a new philosophy of its product design. Material Up is a collection of apps and websites that has already adopted this new philosophy. A good source of inspiration for web designers.

Material Up

Tindddle

Tindddle helps you enjoy Dribbble in a more streamlined manner. It will feed you with a selection of the best “Shots” from Dribbble. If you don’t like the particular Shot, hit the left arrow key of your keyboard, and if you like it hit the right arrow key. All the Shots that you have liked will appear in your Dribbble account — here’s a sample.

Tindddle

Mobile Design Pattern

The Mobile Design Pattern book is a collection of selected common mobile design pattern applied in mobile in 2014. Not only does it provide inspiration, the book also covers the decision and reasoning behind such design. A good book that should be on the digital book shelf of any web and app designer.

Mobile Design Pattern

FontAwesome Photoshop

FontAwesome is… awesome. To make it even more… awesome, install this plugin in Photoshop so that you can quickly add it in your design.

FontAwesome Photoshop





hongkiat.com

Fresh Resources For Web Developers – December 2014

Editor’s note: We’ve come to the end of another year. This final month of 2014, we’re looking at a round of resources by Daniel Pataki.

A developer’s toolbelt should always contain plenty of items but should never be considered final and unchangeable. Fellow developers are creating great tools every day. Some of these go on to be huge successes like the Foundation framework or Twitter Bootstrap but some remain diamonds in the rough.

To round up a great year, I’ll take a look at some great tools that have proven to come in very handy for my own use. From documentation creation to loader elements, here’s a useful collection of tools for all web developers.

Daux.io

Daux.io is an extremely capable documentation generator. It is completely free and the source code can be found on Github. You can run the documentation on a web server or with Grunt, if you prefer.

There is a lengthy feature list, with built-in support for Github flavoured markdown, a file editor, Google Analytics and many more features. Plenty to help you out with most projects. [Get it here]

Ladda

In the creator’s own words, Ladda is “A UI concept which merges loading indicators into the action that invoked them“. Ladda enables you to create awesome interaction indicators for buttons.

A number of sizes and animations are available. I particularly enjoy the progress bars which have been built right into the buttons. [Get it here]

Revaxarts Theme Documentor

This project is used by a number of Themeforest authors but can be used for any documentation purpose. Its online interface makes it easy for you to assemble your documentation and it has great HTML5 tech to store them on your local computer.

Plus you can enable auto-saving and come back any time to complete the docs. In addition, it has json import and export functionality and theme modification capabilities, allowing you to tailor it pretty well to your company colors. [Get it here]

Unicode Table

Unicode characters can be a great help when you want to add specific characters not usually found on keyboards. You should always be careful of adding arrows and other elements because screen readers may not handle them well but in some cases they still are the most effective solution. This Unicode Table is my favorite because it allows me to search with plain English like “circle” or “arrow” and get a pretty good list of results to work from. [Get it here]

WordPress Plugin Boilerplate

WordPress Plugin Boilerplate is now in it’s third iteration. It’s a boilerplate for creating modular WordPress plugins. It tries to impose a stricter architecture on you which should lead to better code. Thus, leading to equal intrepretation by all programmers. It takes an object oriented approach which is a breath of fresh air amidst all the procedurally coded plugins. [Get it here]

CSS Guidelines

CSS Guidelines is basically a set of rules and best practices for writing Javascript. It was written by Harry Roberts – a front end architect – who knows his stuff well. The goal is to make your CSS as clear as possible so everyone can understand it at a glance.

The rules cover everything from syntax and commenting to naming conventions, specificity and architectural principles. If some of it is over your head don’t worry, try to keep to things you can understand and your code will already be that much better! [Get it here]

Spinkit

Another entry into loading animations, Spinkit provides awesome CSS only transformations for simple elements. Whether you use them for loading or interaction purposes, they are easy to grab off the site and then make your own. [Get it here]

Random User Generator

Since Random User Generator is a fully functioning API, you can build it into your application development needs as a dynamic tool. No more having to go to the website to generate test data each and every time.

It spits back emails, addresses avatars, names, all that good stuff, using a fast and secure connection. Using it programmatically with AJAX is extremely simple and understandable, this is something you shouldn’t forget for your next project! [Get it here]

jQuery Plugin Boilerplate

The jQuery Plugin Boilerplate is a starting template for jQuery plugins which employs good practices throughout. Javascript is something a lot of developers learn as an afterthought, as a result lower quality code tends to be written.

By using the boilerplate, you are already writing better code by adhering to some simple rules it lays out. How the plugin is initialized, how functions are added and so on. There’s also a more recent version which you can get via the site. [Get it here]

Regex 101

Many people are scared of regex because of the perceived complexity and the difficulty of testing with it. Regex 101 helps us by allowing the testing of our regex right in the browser.

Tools like explanations, hints, match explanations and others are also offered. I find this an invaluable tool because I myself struggle a bit with regex but this tool helps me figure it all out much faster! [Get it here]

Font Awesome

Of all the icon fonts available on the web, Font Awesome is my favorite resource. It is completely free, regularly updated and has over 450 icons at the moment. I use it regularly in a wide range of projects, from designs to keynotes to websites.

Since it is a proper font, you can embed it in any capable application making it a very flexible and portable option. Be sure to check out the Cheat Sheet for a full list of copy-pastable icons, class names and hex codes. [Get it here]





hongkiat.com

Frankendesign – When Re-Using Old Designs Makes Sense

Do you all know the story of Frankenstein’s monster? A mad scientist attempts to create a living creature using parts from a myriad of individuals. Designers often have a lot in common with this classic tale, using elements from their old designs to create new ones for completely different clients.

This of course raises the question: is it ethical to do what I like to call “Frankendesign”? When is it a good time to dig up old work and repurpose it, and when should you create something entirely new?

Check The Legalities

First, I have to state the obvious disclaimer: when a client purchases exclusive rights to your work, that means they alone can make the decisions about where and how to reproduce it. It’s what they’re paying for, after all. So always make sure you have legal permission to use any previous client work that would be recognizable.

If no one can recognize it, then it’s probably fine to use. To be on the safe side, make sure you own the rights to your work. The topic of intellectual property and selling rights to design work can and has filled entire books, but as a side note, unless there’s a specific reason a client needs exclusive rights, it’s probably better not to offer them.

Time Factor

In many art and design fields, reusable graphic elements are called assets – the designer creates them once, and they can be used over and over in many different projects. A typeface is an example of a common 2D design asset. Some type designer created it one time, and you bought the license to reuse it again and again.

Another type of asset is a template, or a fixed composition that allows you to drop in designs in infinite combinations, knowing that they’re always going to look good together. Templates can be formal (Adobe software usually comes with dozens of pre-made templates that are free to use), or – my favorite – simply custom made compositions that suit your own style and needs.

Time constraints factor in big here. If you need, say, a custom layout for a WordPress theme, and your client has given you a tight deadline, it makes sense to simply use a template from something you’ve done before, switching out the actual design elements for new ones relevant to the project.

Dig Into That Huge Backlog

If you’ve been designing for awhile, you’ll eventually build up an enormous backlog of work, everything from early drafts that were never used to full-blown projects that were killed at the last minute. Variations, revisions, that thing you did for your mom for her church’s bake sale. Whatever it is, you’ve probably saved it.

Even if you only design part-time, it’s inevitable that you will accumulate many gigabytes of designs: logos, navigation buttons, custom type and lettering, vector illustrations, and so on. This is great for the designer on a deadline, because it means that you don’t have to reinvent the wheel each time you sit down to do a new project.

If you’re not already in the habit of cataloguing your old designs, I would recommend getting started on that ASAP. Not only will it help you find exactly the type of asset you need right when you need it, it will also give you the opportunity to study your old work, rather than just toss it in a folder somewhere.

Use Old Work To Get New Ideas

That leads us to perhaps the best use of old designs: inspiration. Designers are often inspired by old work they did, using it as inspiration to create new work. Perhaps there was an idea that wasn’t appropriate for that client at the time, but that you now want to explore. Or maybe you print out a previous layout or sketch and use it in a mood board to show a new client your thought process.

Another reason to study old work is so that you can get better as a designer. The more you examine what you did in the past, the easier you can correct mistakes and avoid technical errors going forward. I make it a habit to reorganize my old work every quarter at least, browsing through for old dogs that I can teach a new trick or two.

What Do You Think?

Do you use “Frankendesigns” in your work? What do you think of the practice – should designers reuse their old work more, or less? What insights have you learned from repurposing your old work?





hongkiat.com

Fresh Resources for Web Developers – November 2014

As web developers, it’s important for us to stay in touch with what’s going on in terms of new technology and the new programs available. Sometimes, this can be a bit difficult with so much information being out there.

Fear not, as I’ve done the work and have put together some more fresh resources for the month ahead that will hopefully come in handy. We have for you a new bunch of goodies to choose from. From an online compiler for Sass and SCSS to a jQuery plugin that can lend a typing effect to your website, take a look for yourself.

Shine

Shine is a JavaScript library that lets you generate interactive shadows; e.g. the demo website shows how the spread of the shadow follows the movement of the pointer, which is really fascinating. Shine.js is a great alternative for generating shadow on top of CSS box-shadow or text-shadow property. The shadow can be applied to both text and elements.

ShineJS

SassMeister

SassMeister is an online compiler for Sass and SCSS. You don’t need to install the Sass gem or deal with the terminal. Simply write the Sass syntax and SassMeister will instantly generate it. On top of that, you can include and use some popular Sass libraries such as Bourbon, Susy, and Foundation. SassMeister is a good tool for authors to provide quick examples or instructions for using Sass/SCSS.

SassMeister

Tethr

Tethr is an essential design-kit for mobile designers. Tethr comprises of hundreds of various templates and UI components of common design patterns in iOS mobile applications. You can use Tethr as a starting point for your mobile design, or to build a mockup quickly. Tethr comes in PSD format.

Tethr

Ideal Image Slider

Ideal Image Slider, as the name suggests, proposes an ideal solution for presenting an image slider or carousel. It’s a JavaScript library, built by Gilbert Pellegrom, who happens to be the same developer that built Nivo Slider (one of the most popular jQuery plugins for image slider). The library runs independently, built purely with JavaScript, and ships with the essential features you need such as HTML5, SEO friendly, responsive, touch-enabled, and retina support.

Ideal Image Slider

CSS Shorthand

Shorthand, in CSS terminology, is the short version of a property. For example, instead of declaring both background-color and background-image, you can simply use background property and declare both the color and the image through it. Using the shorthand version of the property will make your CSS look leaner and reduce the file size. This tool can help you accomplish that easily.

CSS Shorthand

WPComJS

WPComJs is the official JavaScript library to interact with WordPress.com API. You can integrate the library with a Node.js application or simply link the library in an HTML file using the script tag. To use it, you will need a token number, which you can obtain from your WordPress.com account. Afterwards, the library allows you to access almost anything from your WordPress.com account, including the posts and pages. You can even upload an image.

WordPress.com API

Typed

Typed.js is a jQuery plugin that allows you to create a typing effect on your website, as you can see in the demo website. You can configure the word or sentence that you would like to animate as well as how fast the animation is. Enhance your website with Typed.js.

Typed JS

Page Speed

You got it! This is an extensive article on how to optimize your website for speed. The article is split into 6 chapters, covering specific topics on the subject. So, if you want to speed up your website, this article has got you covered.

Crud Admin Generator

Do you hate the outdated dull UI of phpMyAdmin? If so, you might want to install Crud Admin Generator. With it, you can generate a separate new backend for your MySQL databases with a much nicer UI.

phpMyAdmin Generator

StockUp

Today, there are a lot of websites that brings free high-quality images, like Unsplash for example. Yet, looking through all these websites is certainly a cumbersome task. Instead, you can search through them in one place, StockUp. In this site, you can search for high-quality images from 6 difference sources at once.

Stock Up Image





hongkiat.com

Mondrian – Easy To Use Vector Graphics Editor

In the field of graphic design, there are two types of graphic format: pixel and vector. Each type has its own strengths and limitations. If you decide to go with the vector, there are a bunch of handy vector graphic tools to use. Adobe Illustrator is one of the best and most popular one especially in the field of web design for creating SVG.

If you’re looking for an alternative to Illustrator which is free, portable and not too complex; then you must take a look on Mondrian. Let’s dive in and see what this web-app is capable of.

Getting Started With Mondrian

Mondrian is an online vector-based editor which is simple and easy to use. With its minimalistic and flat UI, you won’t have any difficulties using it. The UI also has a smart feature which only shows the utilities that can be used at that moment.

To get started, we’ll import the available albq.svg design that is already in the web-app itself. Just go to File >> Open….

Basic Editing

For basic vector editing, Mondrian has a range of tools and features to start with. Each tool and some features have their own shortcut key. This is useful if you need easy access without touching the mouse.

There are about 10 tools you can use to manipulate the vector including the pen tool, the crayon tool, scaling and rotation for shape manipulation, typography, zoom and more.

In the menu, you can find some other features for additional assistance like import/export, opening files, copy/paste, undo/redo (through file history API), show the visual history, show the grid, positioning and sharing option.

When you hover over any shape, you can see and edit the path you created.

After you select a shape, a size option window will appear. Here you can define the size, position or thickness of the shape.

Zoom In And Out

Zooming in and out of the design can be achieved in 2 ways. You can use the magnifier glass icon from the tools list. To zoom in, easily hit left click and right click to zoom out. But with this way, you can’t zoom out beyond its actual size. Alternatively, you can use the zoom feature from the menu. You can zoom in and out as much as you want and restore it to the actual size easily.

Unfortunately, when using this feature (at the time of writing), I found a bug. After you zoom in or out and hover the path, it won’t follow the shape’s actual position. To fix this, you can restore it to the actual size. If it still doesn’t work, just reload the page.

Import And Export Files

To import some files, just navigate to File >> Open menu. You can only open/import files in SVG format. As stated in the basic doc, the import feature uses FileReader API. If you want to export the design itself, you can download it as a SVG or PNG (this uses canvas API).

DropBox Sync

One of cool things I found in Mondrian is its ability to sync with Dropbox. With this feature, all of the SVG files in your Dropbox are easily accessible and displayed through the “Open” menu. To activate this, you must firstly sign in to the app. Easily sign up by clicking the top right button.

Once you have signed in, you can navigate to File >> Connect to Dropbox… and allow the app access to your Dropbox.

Final Thought

Besides being free, Mondrian is also open source. If you want to install this app locally and use it offline, head over to the Running the app document to see how. With Mondrian, now you can design any SVG logo or icon whenever and wherever you want.





hongkiat.com

Free Code Editors For Android – Best Of

Programming can be fun when done with the right tools – development tools that let you write and test the source code without pestering. Coding on the computer is surely more congenial, but it cannot beat the convenience of viewing or editing the source code from anywhere. This is where mobile devices come in handy – you can carry them anywhere and do your tasks from your own comfortable place.

The Android app ecosystem offers a plethora of applications for programming. The Google Play Store is full of apps for all your coding needs – code editors, compilers, and development environments, just to name a few. They are all different and come with a varied set of features and drawbacks, which makes selecting the best tool a challenge. This is where we come in. Let’s take a look at the top 5 code editors for Android that can help you code, edit, compile and run your source code on the move.

1. Quoda

Quoda is certainly the best free multi-language code editor for Android. It is a powerful yet easy source code editor, and comes with nearly all the essential features that a software programmer would need. It also bundles various productivity-enhancing functionalities that can boost the developer’s efficiency. It is packed full of many useful features such as syntax highlighting, auto-suggestions, line bookmarking, auto-indentation, etc.

Syntax highlighting comes with variety of themes and fonts, and works for various programming languages including HTML, XML, CSS, JavaScript, PHP, C, C++, C#, Java, ActionScript, Lisp, Markdown, Haskell and more. It has support for code templates and snippets, which can help minimize the coding work. It adds extra keys to your keyboard that gives you the ability to boost your typing speed. Other features include find and replace, comment and uncomment, preview for HTML files, website source downloader, HTML cleaner, etc.

Quoda understands your uploading requirements and offers various solutions. It can open, edit and upload files to an unlimited number of FTP or FTPS servers. It can even store and fetch files from popular cloud storage services such as Dropbox and Google Drive, and support for Box and Skydrive is expected in a future release. [Get it here]

2. DroidEdit

DroidEdit is a source code editor and text writer with a clean and simple interface. It has multi-language support with features to help you achieve your goal easily and effectively. It is for Android as Notepad++ is for desktop operating systems – that means it can be used to open and modify simple text files as well as source code files of various programming languages.

DroidEdit offers syntax highlighting that comes with support for more than 200 languages, and many built-in themes as well as an option to create custom color themes. Writer mode turns off the auto-correct and switches on the spell-checker. Emmet can be used to expand simple expressions into full-fledged HTML code. Other features include line wrap, search and replace, extra keys on your keyboard for faster code typing and even support for editing system files on your rooted device.

DroidEdit has support for downloading and uploading files from remote storage providers. You can upload and download files from (s)FTP servers. It even supports reading and writing to cloud storage providers such as Dropbox, Google Drive and Box. Additionally, it has a rare feature of built-in support for Git that allows you to checkout, edit, commit and push directly from your phone or tablet. [Get it here]

3. AWD

Android Web Developer (AWD) is a simple yet feature-rich integrated development environment. It lets you code and develop web projects using your Android phone or tablet. You can use it to edit and code HTML, CSS, JavaScript and PHP as well. It comes with full-screen mode and tablet-ready user interface that improves the overall coding experience.

AWD is a simple yet effective code editor for writing or editing the source code of your project’s files. It supports various productivity features including code highlighting, code completion, error checking, code beautifying, fast navigation, search and replace among other things. It even offers a quick preview of your web pages inside the application.

AWD supports managing remote projects easily by providing many quick ways to reach your project. It allows you to work with local as well as remote files. You can upload and download files from FTP, FTPS and SFTP servers. To top it off, it even supports WEBDav for accessing and storing your web projects. [Get it here]

4. AIDE

AIDE, which stands for Android IDE, is a complete integrated development environment for Android development. It lets you code and develop Android applications right on your Android device without the need of a computer system. You can also learn how to develop Java and Android applications. Programming lessons are interactive with step-by-step instructions, which help amateurs to easily learn the skills of app development for Java and Android platforms.

AIDE lets you develop Android apps, Java apps or PhoneGap apps using Java, C/C++, HTML5, CSS and JavaScript. Visual Designer lets you visually design the user interface of the app without the need of writing XML code. There’s also the feature-rich editor which comes with code completion, real-time error checking, refactoring, and smart code navigation. It offers a one-click solution to compile and run your project.

AIDE is compatible with the popular desktop IDEs for Android – Eclipse and Android Studio. This means that it can open and run projects created with the given desktop IDEs and vice-versa. It can integrate with Dropbox for uploading and downloading files from the popular cloud storage. Best of all, there’s support for Git, and it can edit, checkout, commit and push files directly. [Get it here]

5. CppDroid

CppDroid is a simple yet powerful integrated development environment for C and C++ development. It is a fresh baked application, which brings the GCC compiler to Android. It allows you to code, edit, compile and execute C/C++ programs on your Android device without any difficulty. It comes with various demos or practice programs, which can help you learn the basics of programming in C and C++ languages.

CppDroid offers an intuitive code editor that comes with various features for productive coding. Syntax highlighting is smart enough to highlight various parts of the program, and offers an option for configurable themes. Other features include auto-indentation, code-completion, real-time diagnostics (warnings and errors), file and tutorial navigator, and terminal emulation to run your compiled programs.

CppDroid supports Dropbox – the popular cloud storage provider. It integrates with Dropbox to provide you with the functionality of uploading and downloading from the cloud storage. There’s also an intergrated add-on manager with auto-update feature, which is used to download and install add-ons for this application. [Get it here]

How do you choose the best one from the given code editors? It all depends on your requirements. Have a check on your needs and just choose one from the above that meets what you’re looking for.

Which is your favorite code editor for Android? Did we miss your favorite code editor? Let us know through the comments.

More: 11 Top CSS Editors – Reviewed »





hongkiat.com

Fresh Resource for Web Developers – October 2014

Being a Web Developer is a really exciting thing. Why? Because there are always new shiny tools to try and play with every month. Whether you’re a developer who likes playing around with CSS or someone who prefers tinkering with Java, there’s always something to get a hold of and it’s hard to keep track.

Well, you’re in luck as we’ve done the work for you. We have searched every corner of the web and put these resources together. And this time we’ve come up with a bunch of goodies for web developers who always deal and struggle with code on a daily basis.

Recommended Reading: Fresh Resources For Designers And Developers – September 2014

Monocle

Monocle is a tiny JavaScript library that will magnify the item along with the user scroll. This library is created by Hakim El Hattab, the developer who have created a handful of popular libraries like Ladda and Reveal.js.

Inspired by the Flash-based which he once visited, Hakim built the same effect using JavaScript and CSS3, so we can apply it on websites without having to depend on Flash plugin. It’s a really great plugin for a more embellished scrolling experience on your website – take a look at the demo here.

OS X App Icon Template

The new version of OS X, Yosemite, is just around the corner. The OS X Yosemite interface will finally bear some resemblance to iOS 7 with a flatter and more translucent design. So, have you prepared your app to adjust with the the new interface? This is a new PSD template that’s specifically designed to allow you to create new icons of your applications for OS X Yosemite.

As you’re designing an icon, you can see and clearly imagine how your icon will turn out in different sizes and in some corner of OS X like in the Dock, in the Folder, or in the prompt window. If you’re an OS X designer and developer, this is a PSD template that should be ready in your toolbox.

Marka

Marka is the Indonesian translation for the word “mark”. It’s a JavaScript library that allows you to create a popular mark, icon, or sign using only a single element of HTML. This library currently brings 36 icons.

You can customize the color and the size of each icon by passing JavaScript parameters or through the CSS stylesheets. The demo shows us how the library nicely shifts from one icon to another, which also constitutes that this is a handy JavaScript if you want to display a flexible and customizable icon on your websites.

jQuery FocusPoint

The general method is that we simply scale the image down to fit in the screen, which could make the image focal point barely noticeable or even missing to some degree. The jQuery FocusPoint, as the name implies, is created to address this notorious problem. The library will smartly crop the image and retain image focus on what matters most.

Markdown Table

Markdown has simplified the way we write on the web. But that’s not the case with writing table. Writing or stucuturing a table has always been a frightful task since its inception.

Fortunately here is the tool that makes it a bit easier to format a table for Markdown. You can easily insert new columns, rows, and put in content too. It will generate the Markdown format that you can easily copy and paste. Also check out our beginner’s guide on Writing Web Content with Markdown.

CSS Gradient Inspector

One of the great inventions in CSS3 is the CSS gradient. But, it is also one with the most complex syntax to write.

If you happen to find an interesting gradient and would like to know how it is made, install this Google Chrome extension named CSS Gradient Inspector. Once installed, it adds a new tab in the DevTools where you can see all the gradient composition as well as the preview.

UiGradient

UiGradient is a website that puts together some of the nicest and harmonious color combinations of gradients. On top of that, you can also copy the CSS code of each gradient.

Runnable

Runnable is a website where you can post and run code snippets. Unlike JSFiddle of Codepen which only supports JavaScript, HTML, and CSS, Runnable is able to run back-end language too such as SQL, PHP, Ruby, and Bash. This makes Runnable a perfect place for both front-end and back-end developers to share and find useful snippets.

CSS Trashman

CSS is a double edged sword as it’s easy to learn and straightforward to use but it also the hardest language to administer. Over time, as your website and your CSS capabilities grow, you will soon realize that your CSS looks like trash with a lot of duplicates and redundancies.

This is the time where you should re-examine your CSS, and CSS Trashman can help you make this job a bit easier. CSS Trashman will examine both your website’s DOM and CSS together, and generate the optimized possible output. You can opt for a CSS or Sass format output.

ColorSublime

ColorSublime is a collection of SublimeText syntax highlighting themes. There you can view how the theme looks before you download it for your usage. There is even a plugin, Colorsublime Plugin, which allows you to apply the themes from the ColorSublime collection seamlessly right into your SublimeText.





hongkiat.com

How Internet Acts To Restore Faith In Humanity – Part III

It was not long ago that we highlighted some stories of how people touch other lives through the use of the Internet and social media. Since then, a lot more depressing news have surfaced, whether it is ongoing war in other parts of the world or the death of a beloved celebrity. Sometimes we even wonder if there’s any good news in this world left at all.

But of course there is. The magnitude of recent events may have overshadowed these stories or they might have simply not turn up in your radar. Whether it is a simple lost and found story or even a life-saving one, we hope that this selection of 5 stories depicting Internet acts will hopefully brighten your day and restore your faith in humanity.

Read also:

1. Reddit’s Photoshopping Skills

Nathen Steffel became a proud father to baby girl on May 30. His joy was short-lived as his daughter Sophia passed away 6 weeks later due to complications from a hepatic hemangioma, a live tumor in her liver. Heartbroken and grieving, Nathen wanted a photo as a reminder of his daughter and her short life. However, all he had were pictures of Sophia in tubes tethering her to life.

sophia
(Image source: Nathen Steffel)

Enter Reddit, known for being a cesspool of photos, memes, and photoshopped images. Trying to seek respite for his grief, Nathen posted a plea to anyone in the Reddit community to help remove the tubes in Sophia’s photo. His post was met with an overwhelming amount of photos and drawings as well as messages from the Redditors.

redditpics
Some of the modified photos and art that Reddit did. (Image source: ShareDots)

Nathen and his wife were extremely touched and grateful by Reddit’s immense response. Thanking the Redditors, he replied, “This is really amazing. Everyone you have made my day. All I wanted was a nice picture. What I received was a lot of love and support from a bunch of strangers.”

2. Found: Lobster Ring

It seems like an ordinary day at the beach for Jenn Birchim. She was strolling along Ellwood Beach, California when she stoop to pick up a bottle cap among the rocks. Only it wasn’t a bottle cap but a ring. Inspecting the ring, Birchim saw that the inside was inscribed with these words: “My Love, My Life, My Lobster”.

The unusual inscription perked her attention and she wondered if the ring belonged to a fisherman. Jenn decided to reunite the ring with its rightful owner by posting on Facebook.

facebookpost
(Image source: Jenn Birchim)

As this is Facebook, it didn’t take too long for multiple shares and likes to reach an acquintance of the Lindsays. Sarah Lindsay’s co worker came upon the post and showed it to her. Sarah knew right away that it was the ring that her husband Greg lost 2 years ago on the same beach. Greg was upset when he lost it then, as both the ring and inscription was meaningful to him.

“One of the episodes (of Friends) was where they talk about Ross and Rachel being each other’s lobsters and I looked at her and said, ‘Hey you’re going to be my lobster.’ And that’s why she had it inscripted in there,” said Greg in an interview with KEYT.

Within 4 days, Jenn met up with the Lindsays and returned the ring to the happy couple. The return of the ring couldn’t come at a more opportune time as the Lindsays were expecting a child in August. Here’s a picture of the Lindsays with Jenn on the left.

ringreturned
(Image source: Daily Mail)

3. Accessing Son’s Look Back video

Does anyone remember making a Look Back video for Facebook’s 10th Anniversary in February 2014? Everyone was creating and sharing theirs all over timeline while reminiscing on past events. It was what John Berlin did. His Look Back video struck a chord in him as it brought up photos and memories of his son Jesse who passed away on January 28, 2012.

Missing his son, John tried to find a way to view Jesse’s video. John was unable to as Facebook only memorilized an account and does not divulge the dead person’s account password. John tried emailing the social network and tweeting to Mark Zuckerberg but was doubtful about receiving a response. He decided to appeal through a video message.

videoappeal

Within 24 hours, John’s tearful video garnered around 700,000+ views and successfully caught Facebook’s attention. Soon Facebook got in touch with John and granted his request. Mark Zuckerberg himself even called John personally to thank the grateful father for bringing it to Facebook’s attention.

In gratitude, John shared Jesse’s Look Back video with everyone saying, “First of all I just want to thank everyone for all the shares and support. We couldn’t have done this without you.”

4. Tumblr user prevents suicide

People can be cruel on social media with their comments and messages leading to adverse results in the recepient. Which was what happened to one unnamed girl from New Jersey when she received a slew of online hate messages on Tumblr. The messages took its toll and she posted her last post announcing her intention to end her life.

On the other side of the screen at California is 18-year-old Jackie Rosas. Jackie had seen how the messages had tormented the 16-year-old Tumblr user who also struggled with depression. As she read the girl’s suicidal post, Jackie’s first instinct is to seek help. She called the suicide hotline but she didn’t have the teen’s last name. So she called the police.

tumblr
(Image source: Daily Mail)

This lead to a chain of people racing against time to locate the girl. Jackie passed details of the girl that she knew – first name and blog URL – to a police officer who in turn contacted the local high school’s assistant principal on the offchance that the girl is a student. Each contact lead to a dead end but whoever was contacted did their own sleuthing. They eventually found the girl’s Twitter account that has the same picture as her Tumblr blog.

That Twitter account proved useful when the police browsed through for information: a location and a last name. With the missing pieces at hand, the police were able to hand the information to the authorities from the correct district. They managed to find the girl who was unconscious after swallowing a bottle of pills. She was subsequently rushed to the hospital and lived.

5. Abducted baby brought back

This separate but no less chilling incident unfolded on May 26, 2014. A woman wearing a nurse outfit turned up at the Sainte-Marie Hospital in Montreal, Canada. Drawing no suspicion with her outfit, she walked straight into the maternity ward and carried a baby out who was wrapped in a blue blanket. She however left the hospital along with the baby in a red car with a ‘Baby on Board’ sign.

victoria
(Image source: La Presse)

Mélissa McMahon suddenly had a bad feeling after a nurse came into her room, saying that she had to take her daughter Victoria for weighing. She checked with the hospital staff on the nurse before rushing to the entrance. She was distraught when she found out that she was too late. Soon the police were notified. Hospital staff and patients who saw the woman quickly provided details of the woman and her vehicle. The police issued an Amber Alert as well as social media posts with the woman’s description and photo. The posts went viral.

amberalert

Four friends from Quebec were hanging out when they came across the alert on Facebook. Mélizanne Bergeron, her sister Sharelle, Marc-Andre Coté and Charlène Plante decided that they’ll try tracking down the woman with the description of her car. On closer inspection of the woman’s photo, Charlene realized that she recognized her old neighbour. She also knew where the suspect lives.

fouryouths
From left: Sharelle Bergeron, Marc-Andre Coté, Charlène Plante and Mélizanne Bergeron (Image source: National Post)

Armed with this knowledge the four decided to drive to the woman’s home. Sure enough, her car was parked outside the house. They called the police. Within minutes, the woman was arrested and baby Victoria was returned safely to her parents Mélissa McMahon and Simon Boisclair.

reunited
(Image source: Gawker)





hongkiat.com