Posted by Mindewen on January 10, 2013 at 12:37am
Start:
2013-01-17 18:00 - 19:30 America/Los_Angeles Organizers:
This month we are covering some jQuery, both for beginners and intermediate/advanced users.
Darren Petersen (dsayswhat) and Jesse Nicola (jnicola) will give an intro to jQuery and then lead us through some demos and exercises.
We look forward to seeing all you front-enders there!
Meeting location:
Funny Monkey
2410 E Burnside St.
Portland, OR 97232
Parking is on the street and the #20 bus has a stop right in front of the door / across the street. Please signup if you're interested since the space is a bit limited.
Comments
Jesse's links
Slideshow
Repo of code
- Git clone of code: https://bitbucket.org/jnicola/beginner-jquery.git
- Zip download link of code
Darren's links
Slides
Git repo
jQuery tutorials
The jQuery and Javascript tracks at CodeAcademy might be of interest:
Thanks for all the great questions and interaction last night - I enjoyed it a ton.
Thanks for letting me share
Thanks for letting me share guys, and really rad to catch up with a lot of you again!
If anyone has any jQuery questions, issues, complaints... whatever the situation may be... you're welcome to reach out to me and bounce jQuery related stuff of of me. I enjoy the short breaks it provides my day :)
Jesse Nicola -- Shredical six different ways to Sunday! -- My Portfolio
I had a question that I
I had a question that I alluded to last night that i haven't really found a definitive answer for. I've formed my own opinion, but I was hoping the experts in the room might have already thought through it.
So we are doing all this fancy show/hide stuff. And some key piece of content comes up in google when searched for, but when it get to the page, its actually hidden. We know there are ways of incorporating #anchor in the URL to link to a fancy page with the right divs open/closed/visible (rotators, accordions, etc.). But we can't really control what search bots deem important.
Any thoughts on a best practice or strategy for this?
So let me understand the jist
So let me understand the jist of what you're trying to do:
You want to hide content from search engines, but through interactive elements (powered by jQuery) be able to have users expose said content for themselves.
If so, a clever idea, and not an impossible task, but definitely not a standard usage of jQuery.
Let me know if I understand the goal correctly.
Jesse Nicola -- Shredical six different ways to Sunday! -- My Portfolio
I missed the meetup last
I missed the meetup last night so forgive me if this is not the right direction for you. It sounds like you want to incorporate html5 pushState.
There were some previous hacks using hashbangs to modify google's search process, but those are largely being deprecated in favor of html5 push state. Search "google hashbang seo" for more info on the hashbang approach. About hashbangs from Dan Webb a front-end engineer at Twitter http://danwebb.net/2011/5/28/it-is-about-the-hashbangs
The html5 pushstate is a much better approach. I would recommend thinking of this from an end user perspective. What if I click through a few divs or show/hide some content in your site and then I want to send a link to a friend. It sounds like my friend will get the link and they won't get the corresponding state of what is shown/hidden. If you solve that issue then the SEO solves itself.
I haven't read the full article below in depth but from a quick scan it seems to have a solid overview with some sane approaches primarily using jQuery to swap out links for ajax versions and otherwise full page request for non-javascript enabled browsers.
http://www.seomoz.org/blog/create-crawlable-link-friendly-ajax-websites-...
BINGO! That's exactly what I
BINGO! That's exactly what I was digging for. Thanks Jeff.
I've been struggling with balancing pretty with functional, and I guess beginners (or even clients) may not be thinking about SEO when they want pretty stuff. It is up to us devs to propose something that meets the "pretty" needs with SEO needs, whether the client is aware of SEO or not.
Food for thought, even for the experienced devs.
Naw, I don't want to hide
Naw, I don't want to hide anything from search engines. I was just thinking generally. Here's a use case that I've run into in the past a few times:
You have a FAQ page, and its really long and hard to read. One suggested solution is to hide the answers in in collapsed divs so that when you see the page, all you are presented with initially are the questions, and you have to click to open them up. Much like the grocery list from last night.
Now some user is googling for something related to one of the answers, finds a hit on your site, clicks it, gets to the page and the content of interest is hidden by JQuery. Perhaps the user is savvy and knows to click the question that will open up the answer content of interest. But perhaps not.
Obviously this could be fixed with content strategy (splitting up question answer pairs into separate pages, etc), but that's a lot of work in some cases, especially with pre-existing or migrated content.
So what I was asking is is there a strategy that anybody uses to work through the hidden-content problem? Just generally speaking, i get that its a case-by-case thing, but in my opinion it's "if its important, don't' let it be hidden". Some object to that and say "who knows what's important to any given user. Don't tell me it can't be pretty."
This sort of push-pull comes up a lot in complex theming, and I just haven't developed a rule of thumb that works across many use cases. I was probing for thoughts, that's all.
Cheers.
I've thought up a few
I've thought up a few solutions I could implement, but they introduce other SEO difficulty.
Conceptually, I see you having to run a slightly different URL for each instance of FAQ you may want open (See this stack overflow thread on the basis for such functionality)... which is possible and quite doable (and would work great for social sharing) but if you got Google to pick up your FAQ page 28 different ways... you'd have so much duplicate content that the little bit of functionality you'd gain would surely be surpassed by your losses for duplicate content.
You could operate on anchors, but google won't index all of your anchors...
Ultimately, I don't know a GOOD way to do it.
I've also never Googled into an FAQ with the answer hidden before and never had it come up from a client, so I've not really spent much time thinking about it.
Jesse Nicola -- Shredical six different ways to Sunday! -- My Portfolio
My newbie question...
Thanks to both Jessie and Darren for presenting last night. I really enjoyed both presentations and walked away with some new info.
I have a best practices question. As someone who has been working with Drupal for a little while I have some pretty good ideas as to what's possible but what I don't know often bites me in keaster.
So (HYPOTHETICALLY) let’s say I have the Views Slideshow module installed (or any out-of-the-box module). This has several jquery features programmed in but I need an additional jquery feature not included in the initial features, a feature where the slideshow does not transition unless more than 50% is showing.
I am jquery beginner and I don't know all of the slideshow and jquery modules available in Drupal. What is my best practice to add new code to this module without violating the "don't hack core" option? I have seen people actually paste jquery into a global area inside the view, but I have been told to never, EVER, do that.
This is just the example that popped in my head if there is a more realistic scenario I would be open to that example.
Try again. Fail again. Fail better.
Samuel Beckett
Sounds like some custom
Sounds like some custom functionality not available in the plugin you are using. I've often times found that adjusting some one elses jQuery plugin takes even longer than just writing my own when you're trying to do non-standard functionality... so off hand I'd probably think to write my own to deliver what you're stating :)
So let's say you write such code and are trying to include it. There's a variety of ways you can get the JS to load for the view though. You could hook onto the view itself in template.php in your theme (this being a visual element I feel the JS should be in the theme and not portable as with another theme you may want it visually different in another theme), you can create a views template file that catches the view and uses drupal_add_js (less ideal than first technique)... or you can not split hairs about what will wind up being <1k of code if you're feeling verbose and just let it aggregate and minify with the rest. Delete a few cat pictures to make up the difference :)
Jesse Nicola -- Shredical six different ways to Sunday! -- My Portfolio
@DesignZombie, s usual,
@DesignZombie, s usual, there's a couple hundred ways to to that. If you are in the theme layer you could add a preprocess for your view and do a drupal_add_js there. I've used this ...
http://evolvingweb.ca/story/theming-views-drupal-templates-and-preproces...
... a couple different times to do dynamic pre-processing without having to use a tpl file. The second-to-the last code snippet sets up your preprocess functions and inside a specific preprocess that fires off of that, drop in your drupal_add_js, and i usually scope it to the footer so the view gets loaded completely before i start hammering.
Using a module is slightly more challenging,but if it's strictly presentation, the theme layer is the way to go, IMO. Others probably disagree, but that's what the community is for.
Awesome!
I appreciate the feedback. Thank you both...
Try again. Fail again. Fail better.
Samuel Beckett