Code Clarity (TM) offers handcrafted and elegant Small Business Websites and Web Applications. We ar Web Development and Design firm based out of Boulder, Colorado. We specialize in W3C Standard complaint websites, SEO Marketing, PHP, Ruby on Rails, and much more. We also contribute to many open-source projects with interest and passion for Linux and Android.
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.
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)
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)
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)
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)
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)
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 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)
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)
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)
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.
Every week I am able to take just a tiny bit of time during a lunch break or an afternoon break to read up my web developer news. I ran across this project, as did many other Web Design Blogs. I’ve been using jQuery since 2007 as my primary Javascript Framework and Library. Javascript has turned into such a powerful tool. It’s amazing to me how fast it’s came along. There are many debates to the effectiveness of jQuery for newer users and the size of jQuery has grown over the years. NetTuts recently published an article related to the Pros and Cons of jQuery even. (Published here). When I found this project and saw that the author Demis Bellot was looking to modularize jQuery— I just loved the concept.
Take a look at the GitHub page and of course let us know what you think. I can see this concept and idea being popular with Mobile Developers. I know when I approach a simple HTML5 Mobile Website that I need to use just a little jQuery that I don’t want the whole library. I just need a few aspects of it to accomplish my mission.
jQuery getting too big?
The primary goal of this project would be for the feedback/demand to kickstart jquery.com into re-organizing its code-base so it’s more modular since we believe we’ve proved the most useful parts of jQuery is a fraction of its code-base.
To this end, follow this project if you want jquery.com to measure the demand for this. Another project with similar goals is http://ender.no.de/ - for node.js.JSLim is another project that takes a novel approach to reducing code size with advanced minification techniques.
Zepto.js is another great alternative to jQuery, it’s fast, light and optimized for mobile/webkit browsers. It’s a popular option for PhoneGap developers with full support for the Backbone.js, Underscore.js and Spine.js frameworks. It has very recently added support for the latest Safari, Chrome, Firefox and Opera browsers - it makes use of latest EcmaScript 5 APIs without shims so if this is your targetted market, we encourage you to try it.
Based on recent posts it does looks like jQuery wants to build a slimmer jQuery. Although we don’t thing giving a trim is going far enough, we hope they perform larger re-structural changes allowing us to use most of the useful parts at a fraction of their cost. Their recent conversations into future file size reduction do sound promising.
Introducing jquip - aka jQuery-in-parts.
Smaller, Lighter, Faster, more modular jQuery - include only the parts you want! Don’t use it, Don’t include it.
Minified & gzipped code sizes (v.02):
- jquip.js (5.7k)
- jquip.events.js (1k)
- jquip.docready.js (.5k)
- jquip.css.js (1.6k)
- jquip.ajax.js (.9k)
Query Engine options (not required for modern browsers)
- jquip.q-min.js (.6k) - An extremely fast but limited query engine (see below)
- jquip.q-qwery.js (2.6k) - A New fast replacement for Sizzle.js
- jquip.q-sizzle.js (5.29k) - Sizzle.js
The core jquip.js is only 5.7KB (minified and gzipped) - a fraction of the size of jQuery.
Has 90% of the good parts of jQuery (rest to be added plugins as needed), small enough to drop-in as source saving an external js reference.
Automatically downloads parts needed for older browsers
Sizzle.js is only added on demand from cdnjs.com for browers that need it (i.e. <=IE7) which we believe this is the optimal way to download shims for browsers that need it. We still have some testing to do, but that is at least our goal.
Most code has been ported from jQuery or Zepto.js and optimized where possible, e.g. internals use underscore’s native
_.eachover jquery’s slower$.eachetc.Licence: http://www.opensource.org/licenses/mit-license.php (Same as jQuery and Zepto.js)
Build customizable jquip packages with the jQuip Library Builder service
The jquip Simple Demo is also available to try online, whilst a version compiled with Google’s Closure Library (Advanced mode) is in the repo.
Disclaimer
This is NOT an official jQuery.com project.
Code-base will now be more stable as we’ve reached our goal of jquip.js (with the events + docready plugins) working in Backbone.js, there are likely a few fixes still to be added but the core is close to feature complete and wont require the major refactoring done recently.
We would still like to hear feedback on issues/non-implemented core functionality so we can measure the API popularity of missing pieces.
News
v.02
- We now are able to compile in Closure Compiler’s advanced compilation mode! The minified output passes Backbone.js test suite and reports only 1 not implemented feature in Spine.js tests. We still have Closure Compiler warnings as a result of un-annotated methods which we’ll look at adding in the near future.
- The source code was modified (somewhat unnaturally) so it would work with the Closure Compiler, i.e. have all the API methods exported correctly.
- The total code-size (min+gzip) for jquip and non-query plugins (i.e. docready,events,css,ajax,custom) is 9.67k in advanced mode and 9.86k in Simple mode.
v.01
- Abstracted Events, pluggable query engines and new
$().findandEventssystem courtesy of the much leaner implementation in Zepto.js, refactored to support multiple browsers.- We are now passing Backbone.js latest test-suite in all the latest browsers!
- (we’ll get to older IE browsers as soon as we find a PC with them installed :)
pre-alpha, first release
- Customizable Library builder service at
- Node js build scripts added to minify jquip with UglifyJS.
Roadmap
- Getting jquip to work in Google Closure Compiler’s advanced compilation mode without warnings so it can be used to programatically strip out dead code your application doesn’t use for an even smaller footprint!
- Add caching to improve performance
Changes
v.01
- New Spine.js tests added as well, now passing all but 1 test (in latest browsers)
- New tests added and bug fixes. Backbone.js latest test suite now passes in all the latest browsers - now included in the /test folder.
- New Event system added as a plugin, now with abstracted events.
- We expect most devs would want to include events, but can now be stripped if you dont.
- Query engines are now pluggable and none are included by default but will auto detect window.Sizzle or window.qwery if available and automatically download Sizzle.js from cdnjs.com if a browser doesn’t support
document.querySelectorAll(i.e. <=IE7). Note: because there’s no Sizzle.js it’s important to be aware of limitations when relying on browsers native querySelector implementations, i.e. there are restrictions in IE8 where the HTML page must be in standards mode and Safari in quirks mode can’t handle uppercase or unicode characters.pre-alpha
- $.addConstructor is now
$.hook- $.addPlugin is now
$.plug- scrollLeft and scrollTop is now in the css plugin
- Due to a request by the jQuery team we’re no longer assigning the jQuery variable, you will now need to manually change this yourself on the first line of jquip.js:
window.jquip = window.$ = (function()..What’s in the box? - i.e. the 90% good parts
Methods marked with * are only partially implemented.
- $(selector)
- $(selector, context), $(element), $(array)
- $(callback) requires docready plugin.
Methods operating on a
$(selctor)
- add
- each
- attr
- removeAttr
- get
- toArray
- data
- append
- appendTo
- prepend
- prependTo
- before
- insertBefore
- after
- insertAfter
- toggle*
- hide, show, fadeIn and fadeOut - does so without animation, consider using jquery.animate-enhanced plugin*
- eq
- first
- last
- slice
- find
- not
- filter
- indexOf
- is
- remove
- val - does not do checkbox, select, etc.
- html
- text
- empty
- addClass
- removeClass
- hasClass
- parent
- parents
- parentsUntil
- next
- prev
- nextAll
- nextUntil
- prevUntil
- siblings
- children
- contents
- serializeArray
static methods off $
- $$ - querySelectorAll or query engine shim
- $.each
- $._each - Underscore’s native each
- $._indexOf - Underscore’s indexOf
- $._defaults - Underscore’s defaults
- $._filter - Underscore’s filter
- $.filter
- $.dir
- $.nth
- $.sibling
- $.grep
- $.map
- $.data
- $.attrs
- $.trim
- $.isFunction
- $.isArray
- $.isWindow
- $.isNaN
- $.merge
- $.extend
- $.makeArray
- $.hasClass
- $.typeOf - safe type of an variable
- $.loadScript - (url, callback [, async]) load an external script dynamically
- $.htmlFrag - creates a document fragment from a html string (name changed)
- $.walk - traveres all childElems including self
(predicateFn, [[, context], results])- $.query - query Engine i.r. doc.querySelector || queryEngine Shim
- $.attrs - an elements attributes
- $.unique - return a unique list of elements in document order
- $.contains - parent element contains sibling
Plugins
Pick and choose the parts of jQuery when and add you use them.
Other parts of jQuery can be Added via Plugins which is simply a matter of copying or including the script after the core
jquip.js.events
Methods on
$(selector)
- bind
- unbind
- one
- delegate
- undelegate
- live
- die
- trigger
- $.bind
- $.unbind
Helpers on
$(selector)blur focus focusin focusout load resize scroll unload click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup error
documentReady
yep, it’s a plugin!
css
- $.css
- width
- height
- innerHeight
- innerWidth
- outerHeight
- outerWidth
- scrollLeft
- scrollTop
- $.camelCase
ajax
based on David Flanagan HttpUtils modfied to work like jQuery’s ajax.
- $.xhr (cross-browser XHR Native Object)
- $.ajax
- $.getJSON
- $.get
- $.post
- $.formData - convert object hash into a url Encoded string component
custom
- $._template - Underscore’s template
- $.queryString - cached map of queryString variables
- $.is[Tab|Enter|Shift|…] - static functions to detect named keys pressed, e.g.
if ($.isEnter(e)) console.log("pressed enter")- $.cancelEvent - cross-browser fn to
preventDefault()andstopPropogation(), returns false.Plugin Authors (adding your own plugins)
Extending jquip:
plug(name, fn($))- Register your own plugin, mutate$to extend jquip.bool $.hook (function(selector, contxt))- Intercept the constructor request.$.setQuery (function(selector, context))- plugin your own query engineYou can also include Sizzle.js or qwery.js above jquip.js (using IE’s conditional comments is a good approach), it will automatically be registered. The q-{queryEngine}.js plugins are also self-registering.
Intercept the
$(){ .. }constructor and inject your own implementation. Return true to short-circuit. e.g: from the docready plugin:$.plug(“docready”, function ($) { $.hook(function (selector, ctx) { if (typeof selector == “function”) { this.ready(selector); return true; } }); … });
Limitations
Many corner cases we feel that are not likely to be hit in normal development have been intentionally stripped out, it’s therefore possible for older browsers to experience some issues if you code hits these edge cases.
In addition to its fluent API, jQuery does a lot of cross-browser normalization as well as sanitization and quarantine for edge cases in older browsers which no doubt makes it a safer but slower option.
Non supported examples:
- Script tags in inserted HTML are not automatically evaluated
- Attributes and event handlers of cloned html fragments are not copied across
- No expression support beyond the browsers native querySelector APIs or Sizzle.js shim
We prefer not to take the perf and code-bloat hit of this quarantine - if your app does hit one of these edge cases you will either need to code a specific workaround for your apps usage (which will in all likely be more optimized than jQuery’s general purpose solution) or simply move back to using jQuery.
Best Practices
Contrary to the strong-held opinions of many “javascipt experts” DOMContentReady is rarely the fastest solution to run your app’s logic. It is a safer optionbut in most cases your app will run faster if you execute your javascript somewhere below the HTML elements they reference even if it’s at the bottom of your page it will fire before DOMContentReady which is no longer required. This is the guidance from the Google Apps and YUI developer teams (amongst others). If you can’t control where user scripts are placed, DOMContentReady is still a suitable option. This answer on StackOverflow provides a good overview over when to use it.
We thought we’d clarify as we’ve received a lot of feedback (aka strong opinions) on this subject - this is why jQuery’s popular docready is a plugin that’s not included by default - simply include it as a plugin if you wish.
Simarily related, for best page load times you should move scripts to the bottom of your page, e.g. before the closing
</body>tag.If you’re not referencing jquip near the bottom of your page and don’t have either the events or docready plugins included, you should call
$.onload()in your own post DOMReady event. It performs post processsing tasks like downloading Sizzle.js (for <=IE7), calculates browser feature support, etc.Mini Query Engine (jquip.q-min.js)
Weighing at just 0.6k query-min is an ultra fast selector engine for browsers that don’t provide native support for the querySelectorAll APIs (e.g. <=IE7). It works by offloading as much work as possible to the browsers primitive
document.getElementById(),document.getElementsByTagName()anddocument.getElementsByClassName()apis.On our last JavaScript heavy project, performance was improved by 7-8x in older browsers. If you’re having performance issues with older browsers it’s worth evaluating.
All selectors require an Id (i.e. #) Tag (e.g. INPUT) or class name in each child selector.
Valid Examples:
- TBODY TD.c1 INPUT
- TH.c1 STRONG
- #btnSubmit SPAN
- FORM INPUT[name=’chkProcess’]
- FORM INPUT[type=’text’]
- FORM INPUT[type]
- FORM#id.a.b
- FORM#id .a.b
- .a.b.c
- .a
For optimal performance in <= IE7, the first child selector should be a tag or an #id as it cuts down the amount of DOM traversing needed to be done in JavaScript since there is no
document.getElementsByClassName()available.jquip Library Builder Service
The project now includes the node.js /server/jquip.builder.js so you can host your own jquip Library builder service internally.
Contributing
I’d love help with this so Contributors and pull requests are very welcome!
The main task that needs doing is to get all the missing jQuery parts in as plugins and a comprehensive test suite so we can properly identify the parts of jQuery supported.
Feedback is welcome, drop me a line on @demisbellot.
Contributors
This week was a week of discussions of what HTML5/CSS3 can do for the future web developer, responsive design and life after Steve Jobs. During my weekly reading I found many articles that should be helpful to you developers. Enjoy!
Thanks for reading. If you are interested in seeing all of these articles in one place you can:
(Source: blog.icodeclarity.com)
