JavaScript

I've been working on a single page app in React for the past several months, currently in alpha testing. It uses React Router to handle its routing, and is bootstrapped with Create React App, which makes getting started as easy as they tell you.

Categories: 
Tags: 

Two of my courses on lynda.com were updated recently, and next week, with a free LinkedIn account, you'll be able to watch them, and the rest of the lynda.com training library, for free! They're running the Week of Learning promotion next week, from October 24 - 30, to promote LinkedIn Learning, which is the entire lynda.com catalog geared toward the LinkedIn audience.

Categories: 
Tags: 

A debugger is essential for helping understand how code works. In my lynda.com course Debugging The Web: JavaScript, I go over the essential parts of learning how to use one. These concepts are the same across pretty much all debuggers in common use, but there are also different helpful options available in each one that can be helpful.

Tags: 

This Wednesday, June 11, I'll be speaking at the downtown meetup of jQuery LA. I'll be showing a relatively simple jQuery filter that does something useful with images, and show how it can be converted into a plugin without a whole lot of hassle. Then you can take that plugin and reuse it on other projects more easily, and even distribute it through the jQuery plugins registry, your GitHub account, or wherever you like.

Categories: 
Tags: 

When you change themes on a Drupal 7 site, you often need to reset the placement of your blocks. If you're using the core block module to place them, you may end up with a bunch of blocks in unexpected places on your new theme. If you want to reset everything and start from scratch, you could edit the {blocks} table in your database, but you can also do it with JavaScript. While viewing the blocks admin page (admin/structure/blocks), paste this line into your JavaScript console:

jQuery('#blocks').find('select').val(-1);

lynda.com - online training videos I'm delighted to announce that my new course, JavaScript for Web Designers, is now available in the lynda.com online training library.

If you're a web designer comfortable with HTML and CSS, and want to learn how to add interactivity to your projects, this course will help you do that. You're not going to master the entire language and everything it can do in three hours, but it will get you rolling in a hurry, developing your intuition and understanding of using JavaScript on the web. Using this course as a foundation, you can move further into the world of writing code for web browsers, and making all kinds of cool stuff on the web.

There are many free videos available, so you can listen to the melodious sound of my voice and get a feel for the examples and teaching style. Check it out!

Categories: 

Introducing the JavaScript Language cover If my training library were a treasure chest, it would be splitting its sides and busting its lock. Two courses on JavaScript are now available: Introducting the JavaScript Language and Getting Started with JavaScript Programming. If you've ever wondered what the deal is with JavaScript, these siblings will get you on the path to understanding.

The goal of these courses is to allow designers and other beginning programmers to understand the syntax of JavaScript, and how to start using it in real web projects. I treat it kind of like learning a foreign language, giving you to tools to read and write the language at a basic level (to start you off), and then getting into things like interacting with third-party jQuery plugins to add fun interactivity to a website. Becoming a competent programmer takes a fair amount of effort and time, as does becoming fluent in a foreign language (even if you're Tim Ferriss), but these courses should allow you to become, as the subtitle says, "a dangerous front end designer".

Try one, try both, just try them and let me know what you think! They're on sale at 20% off through late January and early February respectively.

Tags: 

I'm using the jQuery plugin Smooth Div Scroll on a site right now, and it's filling my needs nicely. The site is built on Drupal 6, and SDS requires jQuery 1.5, so some jiggery-pokery is needed to get all the right libraries in the right places. Drupal 6 includes jQuery 1.2, and the Drupal 6 version of jQuery Update only takes that up to jQuery 1.3. I had to mess with my theme's phptemplate_preprocess_page() function to make it all work. I don't think this is a common enough problem to bother posting about my specific solution, but here's the code I started with.

Once I was able to get it working on the pages of interest, Smooth Div Scroll has done a fine job.

The goal is a gallery with a smooth, horizontally scrolling image carousel, with thumbnails below for jumping directly to certain images. Smooth Div Scroll does this very well using its "moveToElement" method. The only problem is a distinct lack of smoothness — it just jumps straight to the image instead of animating.

I was pretty sure this wouldn't be difficult to fix. On line 384 of the non-minimized jquery.smoothDivScroll file, there's this line:

el.data("scrollWrapper").scrollLeft(el.data("scrollXPos"));

Just like it says, it sets the scrollable area's left position to whatever it's supposed to be directly, with no animation. To make it animate, replace that line with this:

el.data("scrollWrapper").animate({'scrollLeft', el.data("scrollXPos")}, 'slow');

Same thing, but with a "slow" animation. Nice!

Subscribe to RSS - JavaScript