Registration for the jQuery Conference 2010: San Francisco Bay Area is now open!
Register here:
http://events.jquery.org/2010/sf-bay-area/registration
The agenda is still being worked on and will be announced shortly. It’s fully expected that the conference will sell out again (as it has every year, so far) so if you’re interested in coming please sign up sooner rather than later!
Interested in speaking? Please fill out our call for speaking submissions form
Ignite will be at this year’s Google I/O! Last year, we had talks on big data, cartography and DIY devices -- a "typical" Ignite line-up. This year, our line-up includes folks like Cheezburger CEO, Ben Huh, and digital artist, Aaron Koblin. However, we also want you! We want to hear your cool ideas, hacks, how-to's, and war stories.
Each Ignite talk is 5 minutes long -- with 20 slides and only 15 seconds a slide (they auto-advance) -- and I'll be hosting the talk at I/O. If you’re not sure what to talk about, watch Scott Berkun's excellent How and Why to Give an Ignite Talk.
Submit your talk by March 31st, and we’ll announce the selected speakers on April 3rd. Those who are chosen to give an Ignite talk will receive a free ticket to Google I/O.
If you need further inspiration, you can watch any of the hundreds of Ignite videos at Ignite Show.
By Brady Forrest, O'Reilly/Ignite
About the Author: Daniel Barreiro (screen name Satyam) has been around for quite some time. The ENIAC was turned off the day before he was born, so he missed that but he hasn’t missed much since. He’s had a chance to punch cards, program 6502 chips (remember the Apple II?), own a TRS-80 and see some fantastic pieces of operating equipment in his native Argentina which might have been in museums elsewhere. When globalization opened the doors to the world, his then barely usable English (plus an Electrical Engineering degree) put him on the career path which ended in a 5-year job in the Bay Area back in the days of NCSA Mosaic. Totally intrigued by the funny squiggles a friend of his wrote in his plain text editor, full of <’s and >’s, he ended up learning quite a lot about the world of frontend engineering. It’s been a long journey since COBOL and Fortran. Now he lives quite happily semi-retired in the Mediterranean coast close to Barcelona, Spain. When he’s not basking in the Mediterranean sun, Satyam can be found among the most prolific and knowledgable participants in the YUI community on the YUILibrary.com developer forum.
As usual, it is developers on the YUI forums who come up with the most interesting questions (tip: this makes the forums a good place to hang around). Recently, someone asked the following: Using YUI 2 DataTable, could you nest a child table to provide details about a row when it is “expanded” in a master table? It has been asked a few times before, but I haven’t had a good solution to share in the past. Now I do have a solution, and you can find it, along with my other examples, here.
This is what it looks like:
The top input box is actually a YUI 2 AutoComplete box where you can first look for a particular music artist. When you find in the dropdown list the artist you are looking for, selecting it will bring up a DataTable listing all the albums for that artist, ordered with the most recent albums at the top. The [+] sign to the left of each row allows for that row to expand; when the row expands, a nested DataTable is displayed listing the tracks in the selected album.
The nested child table is indented to the right, leaving the column with the expand/collapse icon encompassing it. Several child tables can be open at the same time. The master table can be sorted and the child tables will move along with their master records.
The technique we’re using here involves changing the height of the row in the master table so that it leaves enough space for the child table to overlap it. The code in the sample is heavily commented, so here I’ll just describe the logic. First, the child table is created and appended to the document.body and removed from the pageflow (position:absolute). The width is set to the width of the master table minus the width of the expand/collapse column. Only then is the height of the child table measured, since narrowing the child table can cause the text on a cell to wrap (like in the second track), increasing the height. The height of the master row is increased by the height of the child table. In fact, it is the height of the cell containing the toggle icon the one that gets adjusted, the row will simply match the tallest cell. The position of the child is then set to the position of the master row, offset to the right to clear the expand/collapse column and down to clear the master row.
It is important to keep track of all the information to do this. DataTable records are a good place to do so. A record object can take extra information beyond what was originally read by the DataSource. If you use method setData() on a new field, that field will be created if it didn’t exist before. We store all related information in the field associated with the expand/collapse column, which is called __NESTED__ and holds an object that has the following properties:
The existence of a value (not undefined) for this field tells us that the child table exists, whether visible (expanded:true) or not.
Positioning is done in two steps. When the table is created, the horizontal position (left attribute) is set just once. The vertical position (top) is set in a second step along with those of other records. While the left position is stable, expanding and collapsing rows or sorting the master table makes the rows move up or down (but not horizontally); when this happens, the vertical position of all child tables needs to be moved accordingly. (Note: From a positioning perspective, it might have been easier to make the child table part of the parent table and use position:relative to let the browser move it for us. Though it makes the positioning easier, this approach creates other potential issues. Since the child table would become part of the same branch of the DOM tree as the master, styles would propagate down from the master table to the child, events from the child table would bubble up to the master, and so on.)
In this example, you can keep querying for different artists, which means a new master table and new child tables. It’s important not to forget about those child tables and leave them behind. When a new artist is requested, we make sure to destroy all the child tables and their containers by first going through the RecordSet and, for those Record instances that have a __NESTED__ field we call the destroy() on the child tables and then remove the whole child from the DOM tree.
YQLDataSource: Getting Data from YQLAll the data both from the AutoComplete and for the several DataTables is read via YQLDataSource, a subclass of ScriptNodeDataSource that uses the YUI 2 Get Utility to fetch data directly from the YQL Service. You usually don’t need to provide any arguments when creating an instance of a YQLDataSource. It already points to the URL for the YQL Service so you don’t want to change that. YQLDataSource will read all the fields that it receives from the servers. On the one hand, this means you don’t need to provide a responseSchema.fields list of fields, but on the other it means that you shouldn’t use Select * in your YQL query; rather, list the specific fields you want to retrieve in the YQL statement. You may still use the responseSchema.fields array to attach parsers for some of the fields if they are numbers (as many fields in this example are), dates, Booleans or come in special formats.
Since YQLDataSource is a subclass of ScriptNodeDataSource, it can be used with any YUI component that uses a DataSource. I used a YQLDataSource for the AutoComplete box, another for the main table and one shared YQLDataSource for all child tables. Since the format of the reply for all child tables is the same, there is no problem reusing that single instance of YQLDataSource amongst them. If there had been anything worth plotting, I might have also used Charts with YQLDataSource.
YQLDataSource takes the YQL statement as the first argument in its sendRequest() method. That means that in a DataTable, it is the value you set in the initialRequest configuration attribute or you pass to my requery() method, which is also included in the page. For AutoComplete, you assemble the YQL statement in the generateRequest() method that you must override. All YQL statements used in this example are stored in three YQL_QUERY_xxxx constants near the top of the code. YAHOO.lang.substitute is used to assemble the query with its arguments.
The expand/collapse column is initially empty; it has no data coming from the server. The column is added on the spot and then the associated data field is used to store the settings for the nested table. The formatter associated with it adds an invisible <a> element so it can serve as a tab stop and can hold a suitable ARIA role and status. It has a className that sets the [+] sign as a non-repeating background, like this:
.yui-skin-sam .yui-dt td.__NESTED__ div.expand { background:transparent url(http://yui.yahooapis.com/2.8.0r4/build/assets/skins/sam/sprite.png) no-repeat 0 -350px; }There is a similar style declaration for the collapse icon. This makes it really easy for the visual designer to completely change the look of the page if needed. If I had set the contents through the formatter for that column setting its contents as text, an image or a button, there would be no way to change it without changing the code. In this way, the cell content remains invisible and the styling is fully in the hands of the designer.
To toggle the nested tables we respond to any click on that cel. To handle clicks, we can simply rely on DataTable’s cellClickEvent:
albumDt.on('cellClickEvent', function (oArgs) { var target = oArgs.target, event = oArgs.event, record = this.getRecord(target), column = this.getColumn(target); // We care about clicks on columns 'expand' and 'title' switch (column.key) { case 'expand': Event.stopEvent(event); // . . . .First I find out, from the event target (which is the <td> element), the record and column corresponding to that cell. From the key of the column I then decide what to do and from the record I get all the information I may need.
Final ThoughtsThis is an example, and it has some rough edges. If you resize the browser window, the child tables may end up floating in weird places. Further event listeners would be needed to detect such changes and redo the layout. Another enhancement would be to leverage ARIA live regions to make the child tables more discoverable to screen-reader users; in its current form, this example would fare poorly in a screen reader because of the dissociation between child tables and their corresponding rows in the master table.
YQL is a query system for external tables or data APIs and it cannot do any better than the tables or APIs it represents. The search for artists only works on full names, it won’t find an artist by partial names, which makes the AutoComplete search box behave a little funny. Still, for the purpose of the example, it is the best table I could find because it has a three level hierarchy: artist – album – tracks.
So many articles explain how to design interfaces, design graphics and deal with clients. But one step in the Web development process is often skipped over or forgotten altogether: content planning. Sometimes called information architecture, or IA planning, this step doesn't find a home easily in many people's workflow. But rushing on to programming and pushing pixels makes for content that looks shoehorned rather than fully integrated and will only require late-game revisions.
On day one things are great. You've landed a new job, the client is excited, you're stoked and the project will be great. First things first: you have to collect the main materials to begin the design. You send the client an email asking for what you need.
Posted by randfish
Late last week, Eric Enge of Stone Temple (and a co-author of mine on The Art of SEO) published a fascinating interview with Google's head of Webspam, Matt Cutts. I think the whole of the SEO community can agree that Matt taking time for these types of interviews is phenomenal and I can only hope he does more of them in the future. Understanding more about Google's positions, their technology and their goals will benefit website creators and marketers dramatically.
The interview itself is certainly worth a read, but as one mozzer noted to me during the email string on the subject "I'm embarassed to say I couldn't make it all the way through." Fair enough; and that's why I'm presenting Matt's primary points in graphical, cartoon format. I've also included some adlibbing, interpretation and fun into these. Only the bits surrounded by quotes were actually taken directly from Matt's words, so please do keep in mind that this is my opinion of what Matt means (along with the occassional editorial).
#1 - There is No Hard Indexation Cap; But Indexation Has Limits #2 - Duplicate Content Might Hurt Your Indexation #3 - Lots of Qualifiers on Whether Affiliate Links Count #4 - 301 Redirects Pass Some, But Not All of a Page's Link Juice #5 - Low Quality, Non-Unique Pages Might Drop Your Indexation #6 - Faceted Navigation and PageRank Sculpting are Thorny IssuesPersonally, I liked how much Eric pushed Matt with scenarios that would require some advanced methods of showing faceted navigation to users but not search engines. However, I also understand that Matt needs to take a position that's right for 95% of site owners 95% of the time or risk creating a new "PR sculpting" issue.
One other item that really stood out and got me excited was this response:
Matt Cutts: (with regard to links in ads) Our stance has not changed on that, and in fact we might put out a call for people to report more about link spam in the coming months. We have some new tools and technology coming online with ways to tackle that. We might put out a call for some feedback on different types of link spam sometime down the road.
That sounds really good - a huge frustration for the SEO world has been the fact that so many SEOs perceive their competitors to be outranking them with black/gray hat linking techniques and feel they must engage as well is order to stay competitive. Shutting this down or making SEOs feel that Google is taking consistent action when obvious manipulation is reported would go a long way to quelling this thorny problem.
My last recommendation is that you check out Eric's 29 Tidbits from my Interview with Matt Cutts; a post that summarizes a lot of the critical information and takeaways quite neatly.
To end, I thought I'd add the four questions I wish Eric would have asked Matt (maybe next time!):
If you've got thoughts to share, questions outstanding from the interview or my amateur drawings or things you wish Eric had asked Matt, feel free to post them below.
The jQuery Project is excited to announce that Microsoft is expanding its support of the jQuery JavaScript Library through new initiatives, to include code contributions, product integration, and the allocation of additional resources.
Building on two years of collaboration with the jQuery Project, Microsoft announced today at MIX 2010 that it will be working with the jQuery Core Team and community to provide source code that will help to further advance the jQuery JavaScript Library. The planned contributions target specific functionalities in areas of mutual interest. They include:
The initial focus will be on a new templating engine that will allow for easy and flexible data rendering via defined templates. Microsoft has submitted a proposal for public review along with an experimental plugin, and is actively collaborating with the jQuery team and community on a unified implementation. The templating engine will be reviewed and considered for inclusion into the jQuery JavaScript Library or maintained as an official jQuery plugin.
Microsoft will also ship a current release of the jQuery JavaScript Library in both Visual Studio 2010 and ASP.NET MVC as well as continue to host current versions of the library on the Microsoft CDN.
Lastly, Microsoft will be providing resources to assist in QA testing of jQuery in new environments to ensure continued stability and longevity of the library.
We see these contributions as a tremendous benefit to the jQuery effort and community and look forward to continued collaboration with Microsoft.
At the time of our last blog post, there were 120 tickets open. Over the last week, we have purged a bunch of tickets that weren't critical to the release of 1.2, and we have made 50 Subversion commits. There have also been a couple of new tickets added.
As a result of this activity, 84 tickets remain. Of those tickets, 21 are documentation and translation updates. This leaves 63 substantive tickets that need to be addressed before we have a release candidate.
There are three areas in particular that have large ticket counts. Not surprisingly, these areas correspond to the three areas of biggest change in 1.2:
Many of these issues are small oversights or minor corrections. However, there are a couple of tickets (for example #13023) that aren't trivial, and will require some significant design work.
As a result, we're going to push back the expected release date by another 2 weeks. This would put an RC1 release around April 5, with a final release around April 12.
To help speed things along, we'll be running a development sprint focused solely on tickets for 1.2; if you'd like to join in, add your name to the list of sprinters on the wiki. We're aiming to sprint either this weekend (March 20/21) or next (March 27/28), depending on which weekend has the best availability for the folks who sign up.
As always -- any and all assistance is most welcome; the more assistance we get, the faster 1.2 will land.
It’s important to promote your design business. This is especially true when economic times are challenging, you’ve got news to announce, or you’re simply hungry for growth. Many forms of promotion are available to the modern designer – with banner ads and Google AdWords among the most popular. In this digital age, it’s easy for web and graphic designers to overlook one of the most effective and fun forms of promotion: the mail campaign. In an era when people are accustomed to communicating electronically, the value and meaning of something you can hold in your hands is greater than ever before.
The promo mailer is perhaps most popular among illustrators and graphic designers working for editorial clients, which means that it is a powerful, untapped resource for some web designers. Likewise, it was probably a much more common practice ten years ago than it is today due to the rise of online promotion techniques – but those who ignore its potential are missing out on a tool with the power to gain new clients, increase web traffic, and attract publicity for your business and events.
Posted by Errioxa
This post was originally in YOUmoz, and was promoted to the main blog because it provides great value and interest to our community. The author's views are entirely his or her own and may not reflect the views of SEOmoz, Inc.
In the past, I have tried several different ways to skip the first link that Google takes into account for a given URL (nofollowed links, links with 301 redirections, etc). However, all these attempts had little success (301 works but it's very suspect). Recently, I ran a test to see how Google handled the anchor links (links to different sections within the same page, eg: <a rel="nofollow" href="http://example.com/index.php#anything)">example.com/index</a> and was surprised by the results I found. In the setup I tested, Google completely ignored the first standard link and instead credited the second anchor link.
The Test
For my test, I included several links on a page (Page A),
Or in graphic form:
Results for Test 1
If you search for the first linked text we can see that we don't get the results of the destination page (Page B) . This link is not an 'anchor link', this link is a link to a 'simple URL' (that´s how I named it) but it is ignored.
SERP for first link: simple link (no # mark)
Instead, Google takes the next two anchor links (this and this) and shows the page they point to in the results. Although the apparent ignoring of the first link is odd, the way the link is displayed is even weirder. As you can see the URL that shows in the SERPs (See red box in image above) does not take to the anchor link, but to the simple link.
SERP for second link: anchor link (#)
SERP for third link: anchor link (#)
Results for Test 2
SERP for first link: simple link
SERP for second link: anchor link (#)
I ran two more tests to see if the test could be reproduced. Both of the other tests had the same results!
Conclusion
It is interesting to see the impact that link order has on rankings. Keep this in mind going forward and I hope you find this as interesting as I did.
Note from Jen: Errioxa had an updated version in the queue that I missed that explains this all a bit better. I have updated this post with the new version. 3/16/10
Nate Cavanaugh and Eduardo Lundgren of Liferay have spent the last six months building out a new widget library, AlloyUI, based on YUI 3. Nate wrote about the project recently on his Liferay blog. AlloyUI is available as a preview release today and early April is the GA release target.
AlloyUI comprises a wide array of components — more than 60 in all — that range from utilities to sugar layers to full-blown UI widgets. All of Alloy’s component’s are built on YUI 3; some of the widgets are based to some degree on YUI 2. All are free to use under an LGPL license. Nate and Eduardo intend to share AlloyUI components on the YUI 3 Gallery, making them as easy to use as any YUI 3, YUI 2, or other Gallery module; they hope to have more news on that effort soon.
AlloyUI components include:
Check out their demos page to explore all of these and many others.
If you’re pinching yourself and asking, “Are Nate, Eduardo and Liferay contributing dozens of components into the YUI ecosystem, core UI and utility elements that I can use in my everyday development?”, the answer is yes…that’s pretty much what they’re doing. Although we’ve known about the project since late last year, we had the chance to visit with Nate and Eduardo at Yahoo! today and we’re extremely impressed with the work they’ve done.
The jQuery Project is very excited to announce the dates for our first-ever San Francisco Bay Area conference. The conference will be held at the Microsoft Silicon Valley Research Center in Mountain View, California on April 24th and 25th, 2010.
The San Francisco Bay Area conference is the second of four events planned by the jQuery Project in 2010. The first was the jQuery14 event, and additional conferences are being planned in Europe and on the East Coast for later this year.
This venue is the largest that the project has worked with to date (Harvard Law School in ‘07, the MIT Stata Center in ‘08 and Microsoft New England Research Center in ‘09) and we expect to sell out very quickly.
Registration is currently scheduled to open on Wednesday, March 17th; tickets will be priced at $199. In addition to General Admission tickets, we’re offering a limited number of discounted student tickets priced at $99, with a valid student ID.
Watch the jQuery blog or jQuery Twitter feed for notification when registration opens.
A brief synopsis of some of the content that you’ll be able to expect:
In addition to two days of jQuery sessions, for the first time we’ll be adding an additional day of jQuery training, prior to the main event. The training will be provided by appendTo and focused on helping you and your team get up to speed on jQuery prior to attending the conference. The training will cover the following topics:
The training will be held on April 23rd at the Microsoft San Francisco offices in downtown San Francisco; tickets will cost $299. All proceeds from training go to the jQuery Project.
Interested in speaking? Please fill out our call for speaking submissions form and watch the jQuery Blog for updates.
Posted by Sarah Bird, Esquire
May It Please the Mozzers,
I haven't written on the blog in months, but I simply couldn't let today pass by without acknowledging the courage and perserverance shown by Rhea Drysdale in her pursuit of justice. She's my hero and I want to be just like her--A woman of action and humble fortitude.
Rhea announced victory against Jason Gambert in a trademark dispute lasting more than two years. She fought to prevent "SEO" from becoming trademarked for one mysterious man's private use. She fought on behalf of all of us who work in the SEO industry. Like many of you, I feel sad and ashamed I couldn't do more to support Rhea--but we've had other legal trouble to sort out at SEOmoz that consumes our limited legal resources. :(
Lawsuits are expensive, stressful, and very time consuming. There is nothing glamorous or certain about them. Even when you're in the right, you have to keep worrying about whether justice will prevail, and whether you'll be broke or demoralized before it finally does.
I'm feeling really jazzed and happy today because Rhea has bolstered my belief in people, the SEO industry, and the justice system. As Joanna Lord said earlier, "Its a good industry-day folks, good industry day :)" It just feels warm-and-fuzzy to work in a community of people like Rhea who sacrifice a lot without hope of any financial gain. And of people like Aaron Wall, Michael VanDeMar, Barry Schwartz and many others who've publically supported and recognized Rhea for her efforts both today and in the past.
I just wanted everyone out there in blogland to know that we have a big crush on Rhea and a big crush on the SEO industry. It's so great to see everyone coming together to support Rhea and recognize what she's done for all of us.
You can show your support by helping Rhea recoup some of her legal fees. She's updating her blog with the best way to donate to her (without inadvertently giving her some tax grief!) on the OutSpokenMedia blog.
Group Hug!
Sarah Bird
Chief Operations officer and Erstwhile Legal Blogger
SEOmoz, Inc.