Entries with the tag “javascript”

Showing and hiding AlpineJS elements on click or other actions are pretty easy. But what if you just wanted to show the element after a little bit of a delay with no user interaction? We can do that easily!

There’s a common design pattern on a lot of websites to alter the header when the user scrolls down. A lot of times this is simply some sort of handler that adds a class (or removes it). (There are other complex, arguably ‘better’ solutions with IntersectionObserver - but that’s not the point of this article.) Let’s take a look at a very simple version of a script that watches for scroll and adds/removes a class on the body. Then, let’s make it better - and learn while we do it.

I love the idea of web components for using more native and vanilla javascript instead of heavy client libraries. But if you’re not already on this train, it can be difficult to get started. But, I think I found a nice way to bridge the gap - using web components as decorators. Let me show you how.

Let’s say you have a domain you’re not going to use anymore that has to do with web development. What should you do with it? Obviously write some JS to redirect that domain to a random Github user’s profile, right? Let me show you how.

You’ve created a nice Hugo-based theme which uses Node dependencies. Time to deploy on Cloudflare pages, but it won’t recognize you need to do an NPM Install. What do you do?

You’ve got a great idea, there’s a free API, and you’ve got free hosting on Netlify. You’re ready to begin. You request your first bit of data and you hit that infamous CORS error: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://some-url-here.

This article will break down how I use Github Actions and Github Pages to retrieve data from an API, commit the new data to my repo, and have Github pages rebuild and use that data - all on a schedule with no hands-on interaction.

If you want to track errors in your production Javascript (which you should), you should use a fully-baked service like BugSnag. If you can’t, there’s at least one other thing you could try: a poor man’s javascript error reporter.

For some analytic tools, an interstitial page may be required to load javascript and then redirect the user again. Normally these page switches happen pretty fast and the user doesn’t really notice or care. Some have a link to ‘continue’ the redirect just in case the Javascript fails. But, what if we only wanted to show that link after a certain amount of time has elapsed, regardless of if the Javascript has failed or not?

When talking to junior developers, I hear the same question over and over: “how can I demonstrate what I know, or show experience, if I haven’t had any gigs yet?” Old-timers tell you to build a portfolio, but how do you do that? Where do you get ideas? How do you choose a project that’s not overwhelming? Let me explain my rationale as well as demonstrate how I might make my first portfolio project.

I’ve been trying to balance automation with interaction with my social media broadcasting. I want to automatically tweet new blog entries, yet I want to target hashtag trends. Luckily IFTTT Pro has launched and can help us do this.

These Javascript methods sound confusingly similar, but they’re not the same. Let’s see what each does and why you’d use it.

For the most part, I’ve containerized all of my dependencies inside of my Laravel projects. But, one thing was missing: npm.

When you’re trying to demo your work in progress to a client, it can be difficult to know where to draw the line between working and non-working features. On one hand, you want to show them some context so they can understand the current feature. But, then what happens when they invariably try to explore the context (which may not be done)? Let me put that in a more concrete example.

The average webpage seems to contain tons of bloat and increase in size - and this is no good. I decided that I wanted to create a proof-of-concept website that would act like a single page application that didn’t require a framework like Vue or React. I only need to support the latest evergreen browsers.

I was calibrating my speakers the other day, so I searched and found a Bass Test YouTube video. Later on, I was thinking about the presentation I saw where some guys made a DJ system with Tone.js and I wondered if it made sense to make a bass test website and/or app.

When people suggest books to you, it’s common that they’ll send you a link to Amazon. If it’s a good book, I want to add it to my Goodreads list so I remember to read it later. This has been a pretty manual process, and that bothered me. I looked and found some Google Chrome extensions, but those didn’t seem to work for me anymore. So, I created my own bookmarklet.

When you’re creating cookies on your server side application, it’s good security practice to flag the cookie as HTTP Only. This way, it instructs the browser that it should sandbox this cookie from the client side scripts. It still will send it between client and server on each subsequent request, but javascript can’t access it directly.

tldr; Remember to use rel="noopener" on target="_blank" links where you do not control the destination.

During a code review, a coworker showed me a piece of code for a stateless React component that was similar to this:

How often have you heard this phrase?

I’ve used the anonymous self-executing paradigm a few times in JavaScript over the years. Something like this:

Today, while trying to think of a clever way to create a “hire Aaron” page (yup, resume is right here), I came up with an idea to animate a Google Street View page. My initial goal was to animate a rotation and some travel down a road, but I’ve been unable to find a more seamless way of doing the horizontal travel. It looks like there is just going to be jumps in their photography - which of course makes sense. I wasn’t expecting a perfect seamless set of photography, but the current version of it jumps too much and is just too unsettling to see animated.

Javascript objects have a built-in function called toString() which pretty much does what you think it does - it renders a string representation of that object.

I have been making a number pad on a webpage for mobile browsers - and one problem I kept running into is double tap to zoom’ing when I didn’t want it.

The other day I was faced with an issue that I need to be able to keep the scroll position of a user in a overflow-y scrollable div. Turns out - with a combination of javascript and local storage, this is pretty easy.

Well - I really couldn’t think of a good title - it’s really not catchy at all.

So I decided that I wanted to challenge the concepts I know about online photo booths. What are those?

Someone from Packt reached out to me the other day to ask if I’d do a review of a newly published book called Learning JavascriptMVC. I said sure. So, they gave me a free e-book to read. Let me give my honest review:

MooTools, a common Javascript framework, is responsible for extending an array in Javascript. It adds a number of useful features to each array that is created.

In part 1, I discussed the various arguments I run into about wanting to be overly security conscious with our sites in regard to third party javascript. In this entry, we’ll run through a few scenarios.

I have the argument a lot with product managers about allowing custom HTML and Javascript into our projects. I don’t want to do it. I want to only put in predefined, sanitized information. But more about my reasons after this… let’s look at the arguments I get first…

Recently, someone mentioned to me Conway’s Game of Life was a programming challenge at a code retreat they attended. I had never heard of it so I went to take a look at the concept. It seemed like a cool idea. So, I decided to use Canvas and Javascript to create my own instance of it. This is just my first draft of it - so take a look. And, if I’ve done anything incorrectly, please please please! let me know.

One debate that the guys on my team have been having revolves around the combination of Javascript and CSS files. There are two schools of thought. The keep them separate and the BFF - Big Fun File system. There are pro’s and cons to both… but as with everything, one particular way may not always be the best - we don’t always have to stay in extremes-land. Here are some thoughts. Feel free to weigh in.

If you use the jQuery Validation plugin, and of course, you follow an amazing PHP Programmer and now have twitter boxes on all your forms, you might need to validate it some day. I wrote this method for it.

It drives me nuts that the best practices with javascript that is not required for the initial rendering of your application is to be placed at the bottom of the document, yet frameworks (like Zend Framework) do not support that out of the box. (I recently found out that Joomla also shares this problem.)

The javascript function setTimeout can be used to execute a function after a specified amount of delay. It uses the javascript callback pattern. Its important to use the callback pattern correctly, however, or you may get different results than you expect. One example of this is the immediate execution of a function versus the callback execution. Note this example:

I’ve been lucky so far. I’ve used variable names and functions in my bookmarklet’s that weren’t that common. Then, one day, I chose a variable named something very common (x, counter, etc). I noticed that my bookmarklet accidentally overwrote some properties in the current page. Now, that could be benefit - you could want your bookmarklet to update/manage variables in the current page. However, most times I believe we don’t want that scope overlap.

I was thinking about how difficult it is to create custom links for our campaigns at “the big L” - so I decided to create my own function to build these. To top it off, I’ll make it a bookmarklet. The best thing about it is that it will bring in the current page and put that inside of the bookmarklet in the case you want to build the link right from the page you’re viewing.

… in Google Chrome. Yep.

I was creating a page with two forms on it. I ran into an issue where I would fill out one form, and it would fail validation. Then, I tried to do the other form with passing fields, and it would keep invalidating the previous form on the same page.

More and more people are requesting that their passwords not be masked - or that they have the option to toggle them. If the visitor is using Firefox, this has been a relatively easy feat. Simply add a checkbox and change the input type on click. However, in “secure” browsers like IE, yes the security of Internet Explorer, won’t allow you to do this.

Google Charts is my hero yet again. This time, I happened to notice that they have a chart in their API for QR Codes. Considering I was just searching google for a PHP class to do this, I was pretty ecstatic.

First off, let me just remind you to not be an idiot like I was. I simply found the documentation here and here and went to town. After hours of trying to figure out exactly what was going on, I stumbled across some very interesting comments in the news group: The @anywhere api is not in chirp_preview anymore - but it’s not done either. So some of the stuff won’t work - and that wasn’t my fault! Dang!

If you’ve checked out BitLy Pro, you’re probably pretty excited like I am. I saw it and immediately registered saray.me for a short URL. When I went to sign up, I found it was still in a queue system where you had to wait to get an invite. In the mean time, I still want to start using my domain.

With Twitter’s new @anywhere features, it’s now possible to brand your tweets from your own web page. While I still like using Tweetdeck or Seesmic for my actual interaction on twitter, I have started tweeting a bit from my own web page as well.

The other day I ran across an issue with the FileStyle jquery plugin. Whenever a new file was chosen, windows and Internet Explorer would put c:\fakepath\ before the filename. Turns out its not FileStyle’s issue - but a security feature of Internet Explorer.

I’ve been researching caching and compression techniques for my external resources for some time. My first design of JEMDiary was very greedy with HTTP connections. Couple that with having a less-than-perfect host (Dreamhost bleh…), users could feel the burn. I didn’t like it because it would even take ME forever to use my own website. I went on to discover many different key points I use when creating sites now - the Steps to Optimize Assets.

The more I look at my code I wrote in my earlier posts about the unknown _popupControl() function and the Javascript Error Handler, I see opportunities to leverage these errors into useful user interactions.

I came across the following link on google’s code pages:

When reviewing some javascript security ideas, I came across the document.URL property. Turns out that my normal way of retrieving the location (document.location.href) is both a getter and a setter. The document.URL is just a getter.

Mr. Skowron (his business) was working on a flash animation for a client that had a snow fall. What really irked me about the end result, was two things.

Using my javascript error reporter code helps me get a better understanding of what my clients are experiencing when visiting my website. One thing I did notice was the failures from time to time of Google’s CDN based jQuery.

Using Yahoo’s Grid Tools, I created a pretty decent page layout. After all this was complete, I needed to generate a printable version of only a portion of the site. This was a particular set of instructions. I decided to tackle this with JQuery.

I’ve been using the wp-codebox plugin for a while… and an upgrade came today!

I find myself wanting to document various different attributes mid development on my jquery code. I have created the following function to help use FireBug’s console access code effectively in the jQuery fashion.

I decided it would be kind of cool to make a page that combined a bunch of twitter hash tags or just tweets in general. Here are the details…

In my Javascript Error Handler post, I discussed how I track user and client side errors. Recently, my error logs became inundated with tons of javascript errors. The function _popupControl() is undefined. After a little googling, I found out that the CA Personal Firewall is responsible for inserting the following code into every page:

A while ago, I saw a website that provided a javascript error reporting service. You implemented some code and then they would send you reports on javascript errors on your site. I thought, this can’t be that hard. So I went to work to create my own. (It’s now used on this website as well as some political website I’ve worked on recently.)

A lot of the time I give quotes including taxes. Every once in a while, someone is curious about what the tax is on a service.

While reading the blog post about Enabling Javascript specific CSS and the comments, I started thinking about my own ways to implement this. And how to do it validly.

I just ran into this a bunch - works fine in FireFox … of course.

So I’ve heard of the Flash of Unstyled Content before - but never really had this problem. I always use a link tag for my stylesheets.

I just want to make a micro blog here. Just a tiny lil blog.

Just saw this really cool example get submitted on one of my websites testing for CSRF:

After reviewing the Google Javascript API project, I am torn. Pro’s and cons below… What do YOU think?

While searching for employment, I realize I can’t be super picky - but my household does have needs! Because of this, I’ve developed a quick calculator / bookmarklet for the browser that I thought I’d share. It allows you to enter a yearly or hourly amount, and it shows the corresponding amounts. This tells you if that salary posting fits within your needs.

Now you can start accessing some of FireBug’s great features in other browsers, like Internet Explorer. Check out FireBug Lite.

I hate filling out login forms to discover that half of my password is in the username box. Let’s talk about why - and then a solution.

If you’ve ever worked with a customer’s CMS pages and heard the term “Oh but I want some images underneath the links” - you need this script. Whether your using old style tables or the coolest CSS tricks, filling in space to the bottom of the page can be useful.

So, I got stuck on this bug for an hour - so I thought I’d write it down.

JSTool was a trial run of combining many different scripts from the open source community into a security and auditing script.

So much of my time is spent worrying over the src or href tags on images and links - that I sometimes forget about the other attributes.

In regards to the Data in URL scheme (RFC here), I’ve found an interesting issue with the way firefox handles it which could lead to some XSS I think.

So after searching the Internet for some cross domain AJAX stuff, I noticed two interesting articles. The first was the specifics of writing these queries (located here). Then, the next gave a breakdown of how this might be useful in a mash-up collaborative sense (here).

The “security guys” have been talking about the problems with FireFox’s password manager and I got curious. It turns out that javascript can access saved passwords in your password manager simply by creating a login form and capturing the input field’s contents.

On one of the sites at (“the triangle”), one of the programmers on my team had this strange attachment to the Yahoo User Interface libraries - but I guess that was a good thing as it taught him a good lesson - use unobtrusive javascript.