Pinsamt men sant ändå—jag har inte riktigt kläm på att ladda innehåll med Ajax och att koppla upp detta mot HTML5-history (eller history.js). I de mer avancerade gränssnitten som jag varit inbland i har vi utvecklat i par. Min expertis hamnar i layout/rwd och css3-styling i sådana konstellationer. Och den andra personen kör javascripten. RWD sätter press på möjligheten att ladda in både scripts och innehåll per skärmstorlek. Självklart gör jag det redan nu, men via plugins som andra skrivit. Jag vill fatta det här själv.
Det här är en av flera uppgifter som jag gör för att fortbilda mig själv.
1. Fräscha upp grunderna för att ladda in innehåll med Ajax på enklast möjliga sätt
Det här kommer jag att känna igen eftersom jag gjort det förut. Moment:
Uppdatera grunt-filen för Hammer & Chisel:
+ Optimering av javascripten är för klen.
++ Aktivera livereloadCheck!Sätt upp utvecklingsmiljö i MampCheck!Skapa prototyp i html där innehåll hämtas och animeras in.Check!
Edit 2014.03.04: api.jquery.com/load/ är ju egentligen bara vad som behövs. Till och med effekten sker ju i callbackfunktionen… Jag byggde också in getScript() som ju är precis vad jag letat länge efter!
Edit 2014.06.10 Nu finns demo att titta på här: HTML5 History och Flickan med svavelstickorna
2. WordPress och Ajax—filtrera portfolio
WordPress är det CMS som jag kan. Det finns tydligen snyggare och fulare sätt att använda Ajax och Wp tillsammans. Rimligt att ha pejl på? Vi får se.
Uppgift: Använd the terms från en custom taxonomy (som är bunden till en custom post type) som filter på archive-customPostType.php -template. Ladda asynkront.
Sätt upp wp lokaltCheck!Bygg ett enkelt tema för att dema filtren.Check!Lägg till ett script som aktiveras med scroll och använder wordpress egna ajax-filCheck!
Resurser:
how-to-use-ajax-in-wordpress Smashing Magazine
load-page-html-content-through-ajax wordpress.stackexchange.com
using-ajax-with-wordpress-for-conditional-loading nostrongbeliefs.com
loading-wordpress-posts-with-ajax-and-jquery emanueleferonato.com
getting-started-with-ajax-wordpress-pagination–wp-23099 Tutsplus.com
Edit: 2014.03.07: difference-between-ajaxcachefalse-and-ajaxsetupcachefalse-in-jqu
3. Addera history för portfoliofilter via html5 och/eller javascriptplugin
Lägg på history.js till uppgift två ovan. Check!
Resurser:
getting-started-with-the-history-api Teamtreehouse.com
history.js Github
history.js/demo balupton.github.io
http://www.alexpcoleman.com/new-year-of-coding/lesson-6-page-states-html5-history-api/
Avslutningsvis
Jag ska kolla in Ajaxify (javscript plugin). Känner på mig att det är ruggigt bra och just därför är det fint att avsluta med det. Facit kollar man ju efteråt—annars lär man sig ju inget. Eller?