1. PNGGauntlet
2. The Responsive grid generator
3. Responsive Web Design Tools and Services
4. Love your devices: adaptive web design with media queries, viewport and more
5. Event Organiser – plugin WP
6. Backbone Fundamentals – A Free Book For Developers Of All Levels
7. What else does HTML5 need to defeat flash? (Part 1) & Part 2
8. Test-Driven JavaScript Development in Practice
9. Five skills you need to make AB testing work
10. Rapid Application Development with CakePHP

1. The Magic of Custom Post Types – Jeffrey Way
2. Easy-WordPress-Custom-Post-Types
3. Test-Driven JavaScript Development in Practice
4. JQ.mobi
5. Interesting -webkit CSS Properties
6. 5 Things Every Mobile Design Should Have
7. Un demo interesant despre ce se poate face cu WebGL, CSS 3d si alte tehnologii noi. Momentan e vizibil doar pe Chrome

În urmă cu mai bine de un an am scris despre baseproject: un punct de pornire pentru proiectele la care lucrez. Fișierele de bază, ca să zic așa.

Între timp am renunțat la E-texteditor (în favoarea Sublime) și, implicit, la cygwin. De fapt cygwin îl foloseam pentru Git dar aveam o mică problemă: oricât de rapid ar fi fost PC-ul, cygwin avea nevoie de câteva secunde să pornească bash.

Prin urmare, am instalat Git ca extensie a windows command prompt, care pornește instant.

După aia am descoperit powershell și posh-git.

Ceea ce înseamnă că nu mai am nevoie de cygwin! Ceea ce înseamnă alt base project!

M-am apucat să rescriu scriptul pentru inițializare ca .bat, astfel încât sa ruleze pe Windows. În principiu se pleacă de la premisa că ai powershell (nu cmd chior) și că sunt disponibile comenzi ca: xcopy, curl, unzip, mv și tar.

Trebuie doar să copiezi i.bat în c:\windows (sau în orice director ce se află în PATH) sub un nume sugestiv (base.bat, baseproject.bat etc), iar când deschizi powershell în directorul în care vrei să începi proiectul, scrii doar numele fișierului (base, baseproject etc).

La fiecare inițializare vei avea ultima versiune a fișierelor (inclusiv jQuery și WordPress), numai bune de început munca la un nou proiect.

Spor la treabă!

pagina proiectului

1. The JavaScript guide to Objects, Functions, Scope, Prototypes and Closures
2. Understanding JavaScript OOP
3. How To Code an Android Widget
4. scrollorama
5. Impress.js
6. A Fix for the iOS Orientationchange Zoom Bug
7. Design Patterns In Python – Rahul Verma and Chetan Giridhar
8. On single page apps
9. Switch the Ctrl and Fn keys on your Macbook Keyboard

Am fost foarte, foarte ocupat în utlimele luni, iar acest lucru s-a văzut din plin pe blog. Am strâns câteva sute de articole în mail și în readit later și abia azi am avut puțin timp să le sortez un pic. Este prima (și sper ultima) dată când pun doar link-urile spre articole, fără titlu.

1. Introduction to HTML5 Web Workers: The JavaScript Multi-Threading Approach
2. Using HTML5′s PageVisibility API
3. How to implement a 3D engine in HTML5
4. An Introduction to Grids in Web Design
5. Avatar for jdowns Remote Usability Testing on Mobile Devices
6. Build a simple client-side MVC app with RequireJS
7. JavaScript API on top of WebKit for working with the concept of layers.
8. CSS box-shadow Can Slow Down Scrolling
9. Using jQuery .on() and .off()
10. Meaningful Transitions – Motion Graphics in the User Interface
11. Asynchronous UIs – the future of web user interfaces
12. 7 Common Javascript Mistakes or Confusions
13. Creating jQuery Plugins
14. YUI Theater — Dave Herman: “The Future of JavaScript”
15. Efficient JavaScript
16. Principles of Writing Consistent, Idiomatic JavaScript
17. Building interactive web apps with SproutCore
18. A Brief History of HTML5
19. UI Parade
20. Introduction to Git, Part 1, Introduction to Git, Part 2
21. Displaying Icons with Fonts and Data- Attributes
22. 10 LESS CSS Examples You Should Steal for Your Projects
23. Backbone.js Fundamentals
24. Your jQuery: Now With 67% Less Suck
25. Working with MySQL Events
26. The Business of WordPress Theme Design
27. How To Use UTM Parameters In Google Analytics 5
28. Distraction Management: How To NOT Procrastinate or Get Distracted
29. WordPress Internals: The Cron
30. The Art of Estimation
31. Secret Symphony: The Ultimate Guide to Readable Web Typography
32. Migrating From Subversion To Git Quickly With SubGit
33. Explore your blind spot (free ebook)
34. “I want to optimize my JS application on V8” checklist
35. Scott Hanselman’s 2011 Ultimate Developer and Power Users Tool List for Windows
36. The Fundamental Elements of Design
37. New Visual Proportions for the iOS User Interface
38. Designing for Perfection
39. simplePagination.js
40. Web Form Design Patterns: Sign-Up Forms
41. CSS best practices are killing us
42. The Language of Interfaces
43. Top 10 “Must Follow” JavaScript Best Practices
44. PHP 5.4′s New Built-in Web Server
45. Meet the CSS4 selectors
46. How big are PHP arrays (and values) really?
47. Creating your first WordPress child theme
48. Activate WordPress Plugins Automatically via a Function
49. YSlow for Command Line
50. John Resig: “Holistic Performance”
51. A Beautiful Boilerplate for Responsive, Mobile-Friendly Development
52. Master version control with Git
53. How DRY impacts JavaScript performance // Faster JavaScript execution for the lazy developer
54. Mike Toppa: Clean Code for WordPress Plugin Development
55. Animate.css

Microsoft a decis, după multe insistențe, să forțeze update-ul pentru IE. Astfel, în cazul în care ai update-urile activate (și ar trebui!), vei primi automat update la minunatul browser. Din păcate, va fi IE8 pentru WinXP, dar pentru tot ce a ieșit după Vista (inclusiv) ai parte de ultima versiune de IE. În cazul de față IE9.

Din păcate, treaba asta începe în ianuarie și doar în Australia și Brazilia, dar se va extinde la nivel global. Ceea ce înseamnă că va trece încă cel puțin jumătate de an până se va vedea o scădere cu adevărat importantă în statistici

Surse: [1] [2]

If you are using a html version of a site you will notice that sometimes you wont get the touch areas like it should. You have to touch very carefully with your tip of you finger and maybe you will succeed.

If you are designing a mobile app, you will want to add a small button (let’s say a back button) with a small arrow on it. If you are doing it right, you will probably use some sprite image with few other parts in it. One way is to add more white space in that sprite and take in consideration few more pixels, then in CSS you specify a bigger width/height and everyone is happy. Except de developer. You will face the problem of getting the coordinates of your sprites, small tweaks using firebug and so on. Also, you may have issues when you are trying to position that element in page.

My solution

Very easy, very neat, very CSS:

.back { position:relative; width:10px;height:10px }
  .back:before {
    content:".";
    text-indent:-9999px;
    left:-10px;
    right:-10px;
    bottom:-10px;
    top:-10px;
    background:#c00; /* you can remove this */
    position:absolute;
    opacity:0;
  }

That’s all. Basically you extend the active area without changing the space that initial area will cover.

Pretty neat, no?

After trying almost a DAY to figure out why the hell I can’t make the Phonegap’s file API to play nice on iOS 4.x, even if on iOS 5.x everything was just peachy, i tried very last thing i got on my head.

Ok, so I had this snippet of code:

var preview = $('<img />').attr({src : 'data:image/jpeg;base64,' + file, class:'previewImage'})

As I said, everything was ok on iOS 5 (where I initially tested). When I switched to iOS 4, the app crashed (actually all I saw was a blank screen) with no error at all!

[quote]WARNING: When setting the ‘class’ attribute, you must always use quotes![/quote]

After breaking down the code (I had around 400 lines of JS for that file) and trying different versions of Phonegap, I found out that… you kind of need to put attributes inside quotes!

So, after I replaced the above code with:

var preview = $('<img />').attr({"src" : 'data:image/jpeg;base64,' + file, "class":'previewImage'})

I saw the light: everything is working again!

Thank you Apple!

Îți vine să crezi sau nu, ce vezi mai jos este un… language picker:

Uite o idee la care să te gândești: în momentul în care faci un site multilimbi, ca să zic așa, acest feature îl adaugi pentru cei ce nu cunosc altă limbă decât cea maternă (și care, evident, este diferită de limba în care ai gândit tu site-ul).

Prin urmare, dacă pui un language picker pe un site, pune textul în limba targetată:

• Română
• English
• etc..

Nu de alta, dar dacă englezul poate alege limba engleză, nu english, s-ar putea să… nu știe că înseamnă fix același lucru!

Am scris toată povestea asta când am văzut pe site-ul eventim.de că stau în „Rumänien”.

Just a quick note: if you have any troubles with Phonegap after you used:

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=0.5, maximum-scale=0.5" />

in your app (that is, you don’t see the page like it should, instead you see everything zoomed in), you may want to add this into your PhoneGap.plist:

EnableViewportScale : YES

That’s all. Enjoy!