This Week’s in Web Development (Week #7)
With our current project load it is insanely hard to keep up with the Simplified Source Blog. As of right now I will be trying to post either resources/code snippets that are helpful or a weekly summary of articles and resources in regards to Web Development and Design. I hope that these articles are helpful. Each week I can say that I have a different interest than the week before. Therefor this article takes a turn each week from SEO to Wordpress to CodeIgniter to Social Marketing to Android and so on. Enjoy.
Google Releases “Dartium” Browser for Developers
Google is trying to get developers interested in Dart with a technology preview of the Dart VM in Chromium, better known as Dartium. The plan is ultimately to include the Dart VM in Chrome itself, but no timeline has been given yet for that.
Google has been pushing pretty hard to move Dart forward. The company released a Rosetta Stone for JavaScript programmers called Dart Synonym at the beginning of February. However, developers have had to compile Dartium from source or find unofficial builds to test the code.
Now it’s much easier to get ahold of a browser with the Dart VM. If you’re using Linux or Mac OS X, you can download Dartium today. Windows builds are not available yet, but should be available “soon.” [Continued]
(Author: Joe Brockmeier)
21 Examples of Excellent Navigation Menus in Web Design
Navigation is certainly a very important element in web design, especially if we keep in mind that the navigation of a page is there to orient and guide the user. I believe we know that it’s extremely important that users understand navigation options to better explore a website and that is why today we are showcasing examples of navigation menus, to show how websites are presenting menus to their users. From the traditional header menu to side bar menus, footer menus and much more, you will see that there are a variety of ways to present your navigation options. So check it out and let us know which one you like most. [Continued]
(Author: Gisele Muller)
The Impending CSS Vendor Prefix Catastrophe
Developers have a love-hate relationship with CSS vendor prefixes. They allow us to use bleeding-edge technologies at the expense of long-winded declarations:
background-image: -webkit-linear-gradient(#fff, #000); background-image: -moz-linear-gradient(#fff, #000); background-image: -ms-linear-gradient(#fff, #000); background-image: -o-linear-gradient(#fff, #000); background-image: linear-gradient(#fff, #000);
It works well in theory but consider what happens in the wild:
- Experimental properties are often implemented in the webkit engine first and there’s no guarantee they’ll be replicated in other browsers.
- It’s often difficult to determine whether a vendor-prefixed property is part of the CSS specification. Some vendors don’t submit properties for standardization.
- Even if the standard property changes, the incorrect vendor-prefixed version continues to be supported. Your old code still works; you won’t revisit it to correct the implementation.
You’ll often find sites using the -webkit prefixes alone — even if other browsers support the property or it has widespread availability without a prefix (such as border-radius). Chrome and Safari therefore look better than competing browsers — and the other vendors aren’t happy. [Continued]
(Author: Craig Buckler)
Flexible Notifications With jQuery – noty
noty is a jQuery plugin for creating user-friendly, “JavaScript-alert alternative”notifications very easily It has built-in support for alert, success, error and confirmation messages and they can either be displayed as HTML elements that fade in/out or as modal boxes. [Continued]
(Author: WebResourcesDepot)
12 Things I Have Learned After 7 Years of Freelancing
At the age of 15 I started with this web design stuff. Here I am, almost 7 years later and I wish I knew a lot more about this field rather than learning just by my own mistakes. But you don’t have to pass through all of this, dear Padawan.
There are a few particularities in our field that unless you have a geek dad you would never think about… So if you are aware about what you need to do you can have a much simpler, more productive, and happier freelance life.
The crazy thing is that success is not (just) about coding skills alone. You have to build a whole environment to compensate the instability that you probably won’t face in a regular job.
Finally, here we’ll see a few tips for novice and experienced freelancers, ranging from controlling your finances to networking. And I really want to hear your advice and tips after reading this, because we always have something to share, right? So, let’s rock! [Continued]
(Author: Rochester Oliveira)
18 Android Apps for Designers & Web Developers
Although Apple devices have been getting a lot of attention there is plenty of great stuff to focus on with Google’s Android project. Their open source mobile operating system features a similar app store where developers can publish their ideas quickly and effortlessly. There are sincerely dozens upon dozens of fantastic apps to guide web developers & designers in completing project work.
This small gallery below contains 18 such examples of my favorite apps. Android users will love to try these out and see what kind of functionality can benefit designers, developers, and freelancers of all types. If you have similar apps of your own be sure to let us know in the post comments area. [Continued]
(Author: Jake Rocheleau)
Showcase of Annual Report Design
Annual reports are important for presenting information to a company’s investors, so having an annual report that looks professional and presents a good image can certainly help the cause. The design of the report is, of course, secondary to the content, but still important.
In this post we’ll showcase some examples of annual report design for your own inspiration. These samples come from the Behance Network, and in most cases you can see more images from each annual report by clicking on the image and following the link to Behance. [Continued]
(Author: Vandelay Design)
Seo Tools And Why They Play A Big Part In The Seo Industry
It’s no secret that there are thousands of tools available for search engine optimisation beginners and experts alike. They were all built with two things in mind; Making life easier and automation. Without them the work of an SEO would be slow and incomplete. It’s too easy to miss out steps in a procedure that has been put together, but tools that have been built to this prevent that happening.
Some tools are very simple and serve only a single purpose, such as extracting meta tags, checking for H1 and H2 tags or simply checking the page for its analytics code. But imagine extracting all of this information manually. The time it would take for each site is significantly longer than just entering a URL into a box and hitting go. However there are some tools which have been built to provide a multitude of information in one shot. These are the real time savers.
One good public example of this is the David Naylor Playground. This is a JavaScript pop-out which works with any website. It provides a range of information from hosting location to the number of links and keywords on the page. Another great site is Open Site Explorerprovided by SEOmoz. This tool provides you lots of off-page information that you can use as part of your off-page campaign, from links on the page to links pointed at the domain. Some information requires a subscription but the free version still provides plenty of useful data. [Continued]
(Author: Andrew via SEO Consult)
Musings on Preprocessing
I’ve been using SASS for pretty much everything I do recently. Here’s some musings on the journey. From hold-ups, to trip-ups, to turn-offs. From apps and teams to workflows and syntax. [Continued]
(Author: Chris Coyier)
Weekly Web Developer Resources (Week #4)
Try to get back on track here. As we are currently developing Simplified Source and the new Blog— we will continue to publish Web Design & Development related articles. You are always welcome to join us on our other Social Network and RSS Feeds for information.
Visit us on Twitter Visit our RSS Feed
And with our further adieu, this Weeks Shared Articles for Web Developers and Designers.
When’s the Best Time to Blog & Share?
Anyone who spends their day on the Internet inevitably wonders this question. Should I start publishing later in the day, to hit the after-work traffic? Should I publish earlier in the morning, to catch commuters while they’re on the way to work? Or is everything completely random, driven by the off-chance that a post will end up on StumbleUpon and enjoy a slightly longer tail? Social sharing widget Shareaholic looked at its 2011 data, breaking it down to the top 100 days and times for sharing. See the results in Eastern Standard Time.
Shareaholic looked at two metrics: social shares and traffic. For some, getting the highest number of shares is the goal; for others, increased traffic is where it’s at. Please remember that this data all comes from Shareaholic, so it’s specific to those users, though it’s possible to infer more from the results.
(Author: Alicia Eler @ ReadWriteWeb)
Better Bookmarks With Grazely
Bookmarking apps are not exactly the rare breed they used to be. A lot has changed over a couple of years. In fact, there is too much supply than demand in the marketplace. On the other hand, the volume of bookmarks are going up exponentially and in nine out of ten cases users are locked into the service they first sign up with.
That probably explains the torrent of new wave bookmarking apps. Grazely is a next generation social bookmarking tool that helps you discover, save, organize and share exciting content on the web, privately or publicly. Is this web app as exceptional as it clams to be? Let us go find out!
Overview
Grazely strives to not be the garden variety bookmarking apps that we know already. The web app works by letting you create a single user account to manage all your bookmarks. Sign in from any Internet connected device and you can instantly access all your bookmarks and find the content you need, without hassles.
(Author: Justin Stravarius @ AppStorm)
What You Should Know About ACTA and Your Rights
The most controversial measures of concern to Internet users in the final version of the international Anti-Counterfeiting Trade Agreement (ACTA) for most Internet users are 1) that signing governments pledge to allow copyright holders a way to request, under court warrant, personal information about a suspected infringer from that person’s ISP; 2) that means will be provided for a rights holder to legally pursue someone suspected of circumventing rights management technologies; 3) that goods crossing countries’ borders may be made subject to search and seizure if they’re suspected to contain infringing material, with exceptions provided for things like personal luggage.
President Obama signed this treaty on October 1, 2011, effectively ratifying it on behalf of the United States.
(Author: Scott M. Fulton, III @ ReadWriteWeb)
Pancake: A new project from Mozilla Labs
What is Pancake?
Pancake is a new Mozilla Labs project focused on exploring, evolving and expanding how we search, browse, navigate, organize and discover amazing things on the Web. To do this, we’re creating an app — a usable prototype that we’ll share and iterate on rapidly through an ongoing series of experiments. We want to better understand what people do on the Web, why and how they do those things, and how we can make those things easier and more efficient.
We’re playing with some huge concepts, monumental problems and occasionally crazy ideas. We’ll be looking at what tools and systems we can create to put more of the Web at users’ fingertips. We hope to devise new metaphors and new systems that give users greater power and control within the modern Web.
We want to address questions that go to the core of how users experience the Web. Some examples of the questions we are asking include: How can we make it easier for people to find what they’re really looking for on the Web? Do URLs still need to be something users care about? Can we make it easier for people to discover new and interesting things on the Web? What impact does social play in discovery on the Web?
The prototype app we are building is really only the surface of Pancake. We’re also pushing the envelope — using the latest and greatest Web technologies — to build an amazing, portable experience for users. The back-end of Pancake will live in the cloud, where we’re creating an extensive Web service that will allow you to carry your data and experience across many devices. Our initial focus is on iOS and Android tablets and phones, but our long-term goal is to help people live their online lives on their own terms, across all devices and platforms.
The project will operate as a typical open-source project — allowing open collaboration so everyone can test our ideas, give us feedback, conduct usability testing, and with us to discover new avenues of experimentation and exploration. We are working hard to release our first prototype in the next few months.
(Author: Stuart Parmenter @ Mozilla Labs)
Use Join.Me to Train Staff and Collaborate with Customers
Do you manage a website or a blog? Do you build websites for customers? If so, then you know all that’s involved in getting your staff up to speed with tasks that need to be accomplished for the website. You know what’s involved in showing customers how their project is coming along. It’s a lot of work… especially when most of the time your staff is working remotely and your clients are miles away. In this article we are going to show you an online tool that can help make your life much easier. We will go over what it is and what it does, its benefits, how you can use it to make your life easier, and show you how to use it!
What is Join.Me?
Join.me is a screen sharing tool. Join.me easily allows users to share what’s being done on their screen with others. Screen sharing tactics help your listeners understand what you’re talking about by providing visual support to back up what’s being discussed. It’s a great tool for collaborating with staff or freelancers. Need to train a client on a new piece of software or show them progress on the website you’re developing for them? Done. Join.me is a quick and dirty tool that allows you to share your screen with anyone at any time. It’s definitely worthwhile to know about, especially for those situations where you didn’t take time to set up some of the more complex screen sharing software programs and you just need to quickly share your screen with someone. Hop on join.me within seconds.
(Author: Ryan Taft @ 1stWebDesigner)
Colour Combination Makes a Better Impact in Logo Designing
It’s undeniable. Branding is the life blood of any business. Even for small businesses, you’ve gotta build brand identity, or be ready for your company to go belly up.
A big part of many company’s brand identity is the logo. It’s like the face of your company. You need one that’s good looking and instantly recognizable. To that end, colour can make a big impact on not just how your logo looks, but as a result how your company’s perceived.
In the following article, we discuss the impact that colour combinations can make in the design of your company’s logo and the power that logo’s going to have for your brand.
How Colour Combination Makes a Better Impact in Logo Designing
Any person who owns a small business or is otherwise involved with logo designing should have a crystal clear concept of how colour combination makes a better impact in logo designing. The logo of a company is a big part of what attracts customers to its products. Thus, since a simple logo can decide the fate of a business or its popularity, every aspect of the design should be carefully explored. Especially, how the colour combination makes a better impact on the logo.
(Author: WizKraft @ SpeckyBoy Design Magazine)
slabText – A jQuery plugin for creating big, bold & responsive headlines
slabText is a jQuery plugin that splits headlines into rows before resizing each row to fill the available horizontal space. The ideal number of characters to set on each row is calculated by dividing the available width by the CSS font-size – the script then uses this ideal character count to split the headline into word combinations that are displayed as separate rows of text.
(Author: CodeVisually)
Semantic CSS Buttons Powered With @font-face Icons – Zocial
Zocial is a semantic set of CSS buttons (no images used) that are beautified with @font-face icons. There are buttons for 40+ services including Facebook, Twitter, Google+, PayPal, LinkedIn and much more. Each button can be displayed with or without text (only icons) and the HTML element wrapping them can be anything (which is nice for flexibility). Demo is available at http://zocial.smcllns.com/sample.html#.
(Author: WebResourcesDepot)
Questions to Ask Yourself Before Becoming a Blogger
For the most part, being a professional blogger is a freelance position. It doesn’t matter how many different blog sites you are loyal to, even if it is your own, a blogger still has the option to have work published anywhere they feel. Unless you’re a corporate blogger who signed a contract with your company of employment stating you would not do so, but then again that technically might make you more of a copywriter. Moving on, being a full-time or part-time blogger means you’re freelancing on some level. As the typical freelancer asked themselves many questions before taking the big leap, you would think the same would go for bloggers.
In the same fashion as any other occupation, there are certain skill requirements that must be met. Almost every industry blog site has published an article about how blogging can improve your career, and then proceeds to convince the majority of readers that being a blogger is the way to go for them. However these articles, for the most part, are all missing one key aspect to them. Somewhere before, or after, informing the readers about the benefits of being a blogger, there needs to be time to reflect on why one shouldn’t be one.
(Author: Jamal @ 1stWebDesigner)
Outsmarting Your Competition in High-Stakes PPC Markets
Are you competing in a high-stakes PPC market with bids in the $25 to $40 range? If you are, don’t simply fight your competition head on; if you do, you’ll end up paying premium prices for clicks you might capture for far less. There are several shrewd approaches you can employ to side-step your less-vigilant competitors. We’ve learned a few valuable tricks that can earn you valuable clicks for less-than-premium prices. The techniques begin with carefully monitoring PPC activity throughout the day to discover low-competition time slots in the PPC bidding and striking while your competition snoozes.
Getting Started
The types of campaigns for which these techniques will work will be high bid environments with smaller but determined competitors. You want to look for competitors bidding for terms in the $20-and-up range, but whose campaigns are not fully budgeted to run at the maximum number of available clicks. Specifically, we want to look for competitors’ ads that don’t appear consistently or whose ads disappear later in the day. Smaller competitors tend to fit this model fairly often. An illustrative keyword example we see in our local market of Austin Texas is “Personal Injury Lawyer”. We know the bids in that space are $24 to $30 depending on the time of the day—but we see some advertisers drop out at various times of the day. For illustration, we’ll examine Google’s Adwords system, but these principles will apply to any PPC program.
(Author: TastyPlacement @ SEOMoz)
As always we appreciate you reading Simplified Source’s Weekly Web Developer Resources and please do visit us on Twitter or Subscribe to our RSS Feed for your viewing pleasure.
Creating Custom Wordpress Plugin and Widget
(This blog post originated from a post that I made earlier on Forrst.)
Wordpress 3.x has a lot to offer us Developers. We should take advantage of it. I’ve been developing a lot of custom plugins and custom widgets for my Clients who use Wordpress as their CMS. Now there are a ton of tutorials and code snippets of how to create a custom Plugin or a custom Widget for your Wordpress Installation but I kept running into issues with my Widgets not being able to be reused. So, I created a basic template for a Custom Plugin that creates a Widget Class that can be reused and is more than customizable.
View on PasteBin View on Forrst
Every Wordpress Developer has their own methods and own opinions on how to create Widgets and Plugins and I just wanted to share my method. This is my basic template which creates a Plugin for a Client, and wrapped in this Plugin is a custom Widget that shoots back some text. Of course you can get nice and complex and do what ever you want here. (My code is a compilation of research and publicly available information).
Constructive criticism and feedback is welcome, as always.
<?php
/*
Plugin Name: ClientName Custom Widget
Description: Displays a custom feature for your Client in the form of a Widget.
*/
class customClientWidget extends WP_Widget {
function custom_clientWidget() {
// Declare your Widget name, the class name and a Description for the Dashboard
$widget_ops = array('classname' => 'customClientWidget', 'description' => 'Displays something that you specify in the code below.' );
$this->WP_Widget('customClientWidget', 'Your Custom Widget', $widget_ops);
}
function widget( $args, $instance ) {
// Very basic code that takes the Title from the form function and then displays your code
extract($args, EXTR_SKIP);
echo $before_widget;
$title = empty($instance['title']) ? ' ' : apply_filters('widget_title', $instance['title']);
if (!empty($title))
echo $before_title . $title . $after_title;
// Content to be displayed on page goes here
echo 'Displaying some data here.';
runThisFunctionNow();
echo $after_widget;
}
function update( $new_instance, $old_instance ) {
// Allows for the Widget to be reused
$instance = $old_instance;
$instance['title'] = $new_instance['title'];
return $instance;
}
function form( $instance ) {
// Creates a very simple form so that you can Title your Widget.
$instance = wp_parse_args( (array) $instance, array( 'title' => '' ) );
$title = $instance['title'];
?>
<p><label for="<?php echo $this->get_field_id('title'); ?>">Title: <input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo attribute_escape($title); ?>" /></label></p>
<?php
}
} // End of Widget Class
function customClient_widgets() {
// Register the Widget
register_widget( 'notable_pressWidget' );
}
// Quick WP Action to register the Widget
add_action( 'widgets_init', 'customClient_widgets' );
// From here you can upload the file and directory to your /wp-content/plugins/ directory, then goto Admin Dashboard and Plugins and Activate the Plugin. Afterwords you can goto your Widgets and add the Widget to a Sidebar. Simple stuff.
?>
When it comes down to it, that’s a pretty easy setup.
