Time to publish my small but also heavily curated collection of useful links for JavaScript.

MDN JavaScript – this is the best thing going for JS language reference. I wish we could backfill a decade of useful programmer comments like in the PHP manual, and you should search it with Google rather than its internal search function (just add MDN to your search term), but it is quite clear and includes browser support data.

jQuery Documentation – if you use jQuery, this is the place to see not only syntax and examples for its commands but whether they are current, present but deprecated, or absent from your version of jQuery.

MDN Web APIs – if your JavaScript is doing anything deep, you’ll find need for these. I would highlight DOM (especially Window) and Storage (as in localStorage and sessionStorage) in particular. Same caveat as before, though: MDN is far easier to search via Google.

Esprima Syntax Validator – a useful syntax checker! It won’t give you twenty spacing errors and then quit; it only worries about things that actually affect the validity of your code. This is the only JS syntax checker that has successfully improved my code, by finding missing or stray braces and similar.

Google Closure Compiler – this will concatenate and minify your JavaScript, which you can enter by directly pasting it in or by link.

CodePen and JSfiddle – these are both easy ways to share small programs and allow people to edit them.

Lynda.com – There are a lot of JS classes on Lynda.com, of variable type and quality, so I’ll just highlight a few. If you’ve programmed before, even if long ago and far away (and mostly in C++, which was my condition), Joe Chellman’s Introducing the JavaScript Language will be helpful. It’s a syntax course that highlights some potential gotchas where JS differs from other common languages. Joe also has project-based “for designers” courses in JavaScript and jQuery. Of course none of these courses is comprehensive, but I like Joe as an instructor because a) he warns you when there’s more complexity than he’s covering or when the value he’s using is design-specific or arbitrary, and b) his project courses have exercises. They are quick but they force you to immediately use what you just learned, which immensely improves the takeaway.

You can consider this the JavaScript follow-up to my posts about learning HTML, CSS, and PHP online. After doing the Lynda classes mentioned and other tutorials there and elsewhere that are less recommendable, I learned “episodically” – my initial use for JS was for small, self-contained programs that did one or two things, and I built up from there. It suited my learning style nicely but didn’t lend itself to a list of helpful tutorial links for others.

Library photo by jenikmichal on Pixabay.

The post Helpful Links for JavaScript appeared first on rweber.net.

With a solid grounding in HTML and CSS, I needed a little bit of JavaScript and a little bit of PHP. I found PHP more difficult to get into than JavaScript, at least in part because my need for JavaScript was mostly in the form of small, self-contained programs. My use for PHP was for code that would pervade the page, and to modify larger-scale programs written by others. On top of that, I had a lot of trouble finding PHP tutorials online – it would be nice if you could tell Google that file extensions shouldn’t qualify as hits. I got better results when I typed “best way to learn PHP” (with the quotation marks) into the search bar, and later by looking for PHP game tutorials. As a consequence I actually have more to say about learning PHP than JS at this point.

If I were to start fresh but knowing the resources I do now, I would begin with the Codecademy PHP track. Although it feels like you’re invading a seventh grade computing class with a teacher who’s trying too hard to be hip, it is interactive and gets you actually typing commands right away. After that, well, it depends on your best learning style, but I would turn to PHP Exercises for structure and fill in the necessary knowledge to solve the exercises from a variety of sources. The tutorial series at Home and Learn also has exercises, but a possibility of out of date material (its age is given away by the all-caps HTML). Either way, to learn how to solve the exercises there are tutorial series at IBM developerWorks and tizag.com, plus the online book Practical PHP Programming. You’ll find a long series of short PHP tutorial videos at Bucky’s Room (I know, the name does not inspire confidence, but the ones I’ve watched have been quite good).

Once you have a firm foundation and a project, you can start looking up specific things you need. For me this included Lynda.com courses like Validating and Processing Forms with JavaScript and PHP and Accessing Databases with Object-Oriented PHP. PHP Freaks seems to be dead, but has a lot of good tutorials in its archives, and you’ll find PHP among the CSS-Tricks code snippets.

I was not ready to use it right away, but now I am a big fan of the official PHP documentation. Of course it’s very useful for looking up specific functions and so forth, but it’s more than that: the up- and down-voted comment section is regularly a helpful supplement and occasionally the best part of the page. For example, there’s a comment giving a regex cheat sheet on the preg_match page, and comments giving functions for searching multidimensional arrays on the array_search page. At some point I would like to go through the manual, find the pages that read more like tutorials, and create a directory for them.

Stack Overflow is of course a good place to look for specific questions. PHP Developers Network also has an active forum. There’s also a page called PHP: The Right Way, which is sometimes given in replies to requests for PHP tutorials. It’s a master class if it’s a tutorial at all, but can be good reading for best practices.

Finally, for completeness: though the organization is (so far) unintuitive to me – e.g., INSERT is in Data Manipulation instead of Data Creation – if your uses for PHP are like mine, you will at some point want the online MySQL documentation, for whatever version of MySQL your server stack uses (found in phpInfo).

Studious dog from JanDix on Pixabay.

The post Learning PHP Online appeared first on rweber.net.

I find myself doing work I was never officially trained for. Even if I had been, with changing standards and growing technological capabilities I would have to continue learning throughout my career. As a result I read a lot online (and in books, though less so for computing topics than design and business) and treasure the truly good resources that I sift out from the hundreds or thousands of tutorials and code snippets online.

I had an advantage with HTML in that I started using it in the late 90s, when expectations for how websites looked were not terribly high. I’ve been able to grow with it since then and tack on CSS (albeit a good while after it became available). If I had to start from scratch today my first stop would probably be Codecademy, because it’s interactive. Skilled Up has a list of free beginner HTML tutorials that has several sites I’m already familiar with and approve of, as well as a smaller list of CSS tutorials. After that, well, nowadays I do mostly searches for specific topics. I learn best when I immediately use the information for my own purposes, and I’m also generally not starting completely from scratch. However, I’ll highlight CSS-Tricks, which in addition to the blog has forums and a directory of code snippets for HTML, CSS, and five other languages or libraries that are relevant to my interests. I’m spending too much learning time on my own development challenges to read much on other peoples’, but between my CSS being stronger than a lot of my other skills and CSS-Tricks posts being written so that I can get something out of them even if the situation is completely irrelevant to me at the moment, CSS-Tricks is the one non-WordPress blog in my short list of development blogs (the fact that it is also WordPress-oriented doesn’t hurt). It just about rises to the level of “reference.”

On that note, for HTML and CSS reference, my current go to is the Mozilla Developer Network. They also have a directory of tutorials, some theirs, some elsewhere. I’ve also started diving into the web standards, sometimes to fill in picky details and sometimes to compare HTML5 and CSS3 with their predecessors to answer browser support questions. A few specific links: HTML 5.1, HTML 4.01, CSS3 media queries, CSS3 selectors, CSS 2.1.

The specifications themselves actually point to Web Platform Docs, a wiki for developer documentation that is still coming together. A quick look through the CSS materials, though, has led me to put this site second on my list of references already.

Look for more posts on self-education from time to time. I hope they will be useful.

Studious cactus from klimkin on Pixabay.

The post Learning HTML and CSS Online appeared first on rweber.net.

I frequently find myself in need of text and images to fill in spots in webpage mockups, and I’ve started trying to use images in every craft blog and local blog post I make so they will look more appealing in feed readers and when shared on Facebook. Most of the time for the craft blog there are already photos to go with the post, but not always, and frequently for the local blog there are no images.

Since you never know what you might want the image for later, especially if it’s in a page mockup, I try to use only freely licensed images regardless of the situation – ideally not only with commercial use allowed, but also without the requirement of attribution. My first stop for those is always Pixabay. Huge database, everything freely licensed with no attribution required, many terrific photos and illustrations including vector graphics. You’ll have to sift through a lot of photos but you can find some real gems.

My second stop is either Google Images, which has some capability of filtering by license, or Wikimedia Commons, which as a rule requires at most attribution of the images to be used.

For icons in particular, Iconfinder is a good site to look because it has a filter on the search function for licensing. The same is true of Fontspace, though we’re not really speaking of fonts here.

Text comes from some version of Lorem Ipsum. There are dozens of options here, but my favorite is Veggie Ipsum. It’s just a catalog of vegetable names with occasional punctuation.

And, as long as we’re at it, how about a color picker? I’ve switched from W3Schools’ color picker to Hex Color Tool by Denis Leblanc, essentially for one reason: subsequent color choices don’t overwrite previous ones, they stack up, so you can see how different colors look together. The Hex Color Tool also gives you a larger swatch to look at, and allows you to pick the percentage by which each shade will be lighter or darker than the previous.

Finally, related to colors, I find myself using this calculator on a regular basis for decimal/hexadecimal conversions.

Image: Screenshot of part of the search results for “library” on Pixabay.

The post Assets for blog posts and page mockups appeared first on rweber.net.

And yet, here I was, with an understanding of regular expressions generously described as “rudimentary.” I decided to fix that recently with the help of Kevin Skoglund, Regular-Expressions.info, and Regular Expressions 101. That last site lets you input an expression and text and not only shows you matches, but takes apart your expression and describes what it’s doing, and shows you the content of any captures that were made. Learning regex felt like being given a secret decoder ring, and it didn’t take long at all to learn (the Lynda course, which I recommend, is a bit over 5.5 hours, but the last two are examples).

I also used single pages found via Google searches and on Stack Overflow, and the Perl documentation, though unfortunately the Perl site is nigh unnavigable. Finally, though it’s flagged with multiple issues, Wikipedia has a comparison of regular expression engines that includes which additions to ERE are and are not supported by different regex flavors.

I’ve typed up my notes from all these sites, and should I decide to make them pretty you’ll probably see them here.

The post Regular Expressions appeared first on rweber.net.

In this entry, a few references I’ve found useful.

Mozilla Developer Network. My go-to for syntax checks, though I tend to use Google to search, e.g., “html margin mdn” instead of going to MDN’s site to search. They have both references and tutorials.

CSS-Tricks has provided me with a number of useful techniques.

W3C specifications for HTML5. Like looking things up in the encyclopedia. Also see their validator.

PHP Manual. When necessary; most of my PHP is WordPress-specific and so it is better to go to the WordPress Codex.

Stack Overflow. Can be a little hard to search. I actually found one answer by starting a question of my own, having decided no, the question hadn’t already been asked, and finding the suggested related questions included one I hadn’t found but was exactly what I needed.

And typically just for fun or curiosity, BuiltWith will tell you all about a page’s structure.

The post Useful web-bits appeared first on rweber.net.