50 New And Crazy Cool jQuery Plugins From Year 2011
With 2011 a little over half over it’s the right time to look at, and uncover, the current trends of web design and development. It’s sure been a helluva ride for jQuery and it’s growth just doesn’t stop. With more than 40% of websites using jQuery now it’s no longer possible to ignore this efficient, powerful and lightweight tool.
jQuery gives developers the chance to enrich websites with amazing elements without the need to write dozens of lines of code. This article presents 50 advanced, cutting-edge yet simple jQuery plugins that will enhance your web experience drastically.
Read More
WordPress Plugin Development – Relate Posts as a Series Part 2
So, we started our dive into WordPress plugin development with the first part of this tutorial where we talked a little about planning, basic plugin structure, custom post types, metaboxes and how to add custom functions to WordPress’s defaults actions.
Today we will talk a little more about metaboxes and jQuery, shortcodes, and front-end functionality.
All these things with a pretty practical example of how to make a plugin that will relate posts as a series.
So, let’s rock!
Read More
CSS Tricks for Smart Quotes and Tooltips
The CSS content property is a powerful way to add content to some elements via CSS. It is good because it allows you to add “formatting content”, that is things that you need in your presentation but isn’t the content itself, like quotes, icons (when you have text along with them), titles (not the text title, the HTML attribute).
But you may thinking now “Well, isn’t content always HTML’s job?” Well, most of the time it is.
Think about it a little bit: when you have a fancy quote, image caption, or even a custom icon for certain links (like “.pdf”), aren’t all these things just “decoration”? They are just there to clarify the message of your content, they are meaningless by themselves.
So we will learn simple and cleaner techniques to get some cool results via CSS! Although our title only mentioned smart quotes, we will do show you some other quick examples to get the most of this cool CSS trick.
So, let’s rock.
Read More
CSS Counters – The Right Way to Organize Your Ordered Content
It is pretty common to see step-based content. Tutorials, shopping carts, FAQ’s, grandma’s recipes. You know, numbers and steps are really good to grab attention, so many writers use this.
But, talking about HTML how should we write it? Most (all?) use numbers as text in headings, as they were common content.
Well, let me tell you a secret: They are doing it wrong.
Actually we are doing it wrong ( nothing against this fantastic post of Ruben, just take a look at how we do the numbers, directly in HTML as text ).
A little time ago I was wondering about this thing, isn’t it more a CSS job? Actually yeah, it is. We have to keep content in HTML and presentation in CSS, and since we may want other ways to order titles, they are all about presentation. But, how can we do this kind of thing? One class for each item? That would be terrible!
Then CSS counter property comes to save us. It is a pretty unknown property that allows us to perform a simple count via CSS. It will be better explained with our demos :D
So, let’s rock!
Read More
An Introduction to Object Oriented CSS
With richer interactions and media heavy pages mushrooming on the web, creating web pages, which load faster and respond well has become a challenge. Separating the content, presentation and behavior of a page using HTML, CSS and JS, is not the only thing that front-end engineers have to concentrate on nowadays. The limelight is now on the performance of the pages, cleanliness and leanness of the code within, scalability and reusability of CSS, and the semantic correctness of the markup.
There are a handful of frameworks, techniques and approaches that are built towards this goal of maintainability, scalability and reusability of CSS. Each of them is having its own pros and cons. But, this is not a stage to elaborate on all of them.
This article is an introduction to implementing the concept of ‘Object Oriented Programming’ in building CSS for high scale websites and applications, with an eye on maintainability and reusability.
Read More
How to Customize Twitter Search and Profile Widgets
So you want to say something and get heard from anywhere. The best way to do this is with Twitter and its widgets. We will be talking about a profile widget, that shows your latest tweets, and a search widget, that runs a custom query search and shows all the results.
They have a pretty simple customization when you generate them, but what many people haven’t noticed is that you can make advanced customization to them with CSS. This is possible because the Twitter team has made it without using any inline CSS rules, and they are such nice people that almost all their CSS is quite simple to overwrite (just with the class of the item itself in most cases).
Then, what you have to do is to turn on your CSS Zen Garden side and let your imagination create awesome widgets in a really simple way.
So, let’s rock!
Read More
Getting Smarter Code with PHP Variable Variables and Variable Functions
Oh, variables. Who doesn’t love them? They are such nice guys, you know. When you need something, just call $something and your value is there.
But something really cool is that you actually don’t need the name of the variable. You can use other variables to access a value of one variable.
For example, let’s say you have two variables $jude = "hey" and $hey = "jude". If you echo $$jude $$hey(yeah, double “$”) your output will be “hey jude”.
But, as you might be thinking it is not just about variables. You can name dynamic functions, methods, arrays, and almost anything you want to.
This time we will see some uses for it, with arrays, functions, classes and how this technique can help you write better code.
So, let’s rock!
Read More
jQuery Plugin: Table of Contents with Smooth Scrolling
Hey guys, have you noticed that pretty box on WordPress codex that gives us a preview about what we can see on a page? So, I haven’t seen too many blogs use this kind of feature and it is really useful for our readers, since they can just skip to the content that they are interested in and avoid wasting time. Wikipedia has a table of contents that makes it easier for readers to skip around, right?
I’m not the very first to do something like this with jQuery. But our goal in here is to develop a complete jQuery plugin, from start to finish, with options, and that is easy to customize. And, of course, something that I hope is useful to you
So, let’s rock!
Read More
Convert 1st Ideas from PSD to HTML [Very Detailed]
In this article you will learn how to convert 1st Ideas: Stylish Design Agency Website from PSD to HTML in a detailed step-by-step tutorial. You will learn how to create this layout using CSS styles, some CSS3 styles and JavaScript. When you’ve completed this tutorial you’ll have a valid HTML/CSS, cross browser compatible and dynamic layout. I hope that you can go through this tutorial and learn a few techniques that will help you in future projects.
![Convert 1st Ideas from PSD to HTML [Very Detailed]](http://www.1stwebdesigner.com/wp-content/uploads/2011/05/preview_large_1stideas_convert.jpg "Convert 1st Ideas from PSD to HTML [Very Detailed]")
Read More
WordPress Wp_Nav_Menu with Icons and Active Item Highlight
WordPress is a great tool, for sure, but as many other CMS’ it drives us into an “all standard” way of thinking, that is, you design things thinking that every element has to be identical to his brothers, same color, same style, same size.
How many WordPress sites with pretty menu icons do you know (with wp_nav_menu, not “static” menus)? How many of them use a different color for some categories? Well, these little things make a big difference.
This time we will learn a simple way to customize our WordPress menu, without losing its wonderful admin options. We will be doing:
• Home link in our wp_nav_menu that always gets current blog url
• Customize each menu item as you want
• Put pretty icons in our menu
• Active item highlight
From now on, it is useful to have a little understanding about what wp_nav_menu is, and if you have a blank WordPress install, it is time to play with it ;)
So, let’s rock!
Read More
