Entries with the tag “javascript”

These entries have all been tagged with “javascript” and are likely more about web-based Javascript and not server-side. If you’re looking for only server-side Javascript, you should check out the NodeJS tag.

Show Alpine Element After Delay

Mar 27, 2024 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!

Web Components as Decorators

Jan 24, 2024 javascript

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.

Using Github Public Api for Random User Retrieval

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.

NPM Install for Hugo Theme on Cloudflare Pages

Feb 6, 2023 hugo javascript

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?

Use Netlify functions to proxy an API without CORS

Aug 21, 2022 javascript

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.

Using Github Actions & Pages to Publish Static Pages Based on Dynamic Data

Oct 2, 2021 github html javascript

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.

Poor Man's Javascript Error Reporter

Aug 13, 2021 javascript

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.

CSS fallback for failed Javascript redirect

May 14, 2021 css javascript

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?

Coming Up With Your First Portfolio Project (with coding walkthrough)

Dec 23, 2020 business css html javascript

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.

Tweeting Blogs with Hashtags Automatically with IFTTT Pro

Nov 10, 2020 javascript twitter

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.

When to use stopPropagation vs preventDefault

Nov 4, 2020 javascript

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

Run NPM in Docker

Dec 30, 2019 docker javascript nodejs

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

Mark WIP Features for Better UX/Customer Acceptance

Aug 22, 2019 javascript misc-web testing

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.

SPA No Framework, API No Database

Jun 3, 2019 javascript jekyll php

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.

Bass Test App/Website

Apr 15, 2019 business ideas javascript

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.

Search Goodreads Bookmarklet

Feb 4, 2019 javascript

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.

HTTP Only Cookies Aren't Perfectly Secure

Dec 10, 2018 javascript php security

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.

Reminder That Target Blank Links Are Not Safe

Sep 4, 2018 html javascript security

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

Be Explicit with Your JS Function Parameters

Aug 4, 2018 javascript nodejs react

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

Understand the Tech Before Getting a Package

Jun 13, 2018 javascript php programming

How often have you heard this phrase?

Anonymous Self-Executing Functions in JavaScript and PHP

Nov 14, 2017 javascript php

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

Google Street View Animation

Sep 18, 2016 css google javascript

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.

Making the most of the toString method in Javascript

Feb 6, 2016 javascript

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.

Stop fast taps acting like double-tap-to-zoom

Jul 21, 2015 javascript jquery mobile

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.

Keep user's scroll position in scrollable div

Jun 23, 2015 javascript jquery

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.

PHP PDF Viewer - Convert to Images and use HTML/JS

May 4, 2015 javascript jquery php

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

HTML5, CSS3, Javascript ONLY Photobooth with Image Download

Jun 11, 2013 css html javascript

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

Review: Learning JavaScriptMVC by Packt

Jun 7, 2013 javascript

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:

Beware of Javascript frameworks extending the Array

Apr 23, 2013 javascript

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.

The Very Bad Things That Javascript Can Do: Part 2

Apr 16, 2013 html javascript security

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.

The Very Bad Things That Javascript Can Do: Part 1

Apr 9, 2013 javascript security

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…

Conway's Game of Life - In Javascript

Jan 22, 2013 javascript programming

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.

Intelligently combining Javascript

Oct 2, 2012 javascript performance

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.

jQuery Validator: Twitter username validator

Aug 7, 2012 javascript jquery

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.

Creating a custom Zend Framework Body Script helper

Jan 31, 2012 javascript zend-framework

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.)

setTimeout proper syntax

May 3, 2011 javascript

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:

Scoping your Bookmarklet Correctly

Mar 22, 2011 javascript

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.

Google Analytics Campaign Link Builder Bookmarklet

Mar 15, 2011 javascript

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.

jQuery form plugin does not submit submit buttons named submit

Feb 22, 2011 javascript jquery

… in Google Chrome. Yep.

jQuery Validation - greedy on your forms?

Dec 28, 2010 javascript jquery

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.

jQuery show password toggle

Oct 19, 2010 javascript jquery

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.

Using Google Charts to make QR Codes

Jul 13, 2010 javascript jquery misc-web

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.

Twitter @anywhere proof of concepts

May 13, 2010 javascript twitter

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!

Use Your Own Short Domain While Waiting for BitLy Pro

May 11, 2010 javascript misc-web

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.

Branding your Tweets using @anywhere tweetbox

May 4, 2010 javascript twitter

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.

Fixing c:\fakepath in filestyle jquery plugin

Mar 26, 2010 javascript jquery

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.

Javascript and CSS Compression and Cache

Feb 25, 2010 css javascript misc-web

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.

Making Friendly Javascript Errors - Client and Server

Jan 14, 2010 javascript

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.

Using Google Analytics Asynchronously

Jan 12, 2010 google javascript

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

document.URL vs document.location.href

Dec 18, 2009 javascript

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.

Javascript Snow Fall with buildup

Dec 6, 2009 javascript

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.

Auto Failover for CDN based Javascript

Dec 1, 2009 javascript jquery misc-web

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.

Printing a small segment of the page using JQuery

Nov 23, 2009 css javascript

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.

How I fixed the Javascript error with wp-codebox

Nov 16, 2009 javascript wordpress

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

JfbConsole - chainable Firebug Console jQuery plugin

Nov 13, 2009 javascript jquery

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.

Twitter Live Search Updates Page

Nov 9, 2009 javascript twitter

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…

Unknown function _popupControl()

Sep 29, 2009 javascript

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:

Javascript error handler

Sep 23, 2009 javascript php

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.)

Figuring out Price Before Tax

Jul 22, 2009 javascript

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.

Enabling Javascript Specific CSS

May 11, 2009 css javascript

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.

IE JS Error: Expected identifier, string or number

Apr 30, 2009 javascript

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

Flash of Unstyled Content - in FireFox 3

Apr 28, 2009 css html javascript

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.

Form Submit: Internet Explorer behaving badly

Apr 14, 2009 html javascript jquery

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

Another example of CSRF - in CSS

Mar 5, 2009 css javascript security

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

Rely on Google for your Javascript?

Feb 26, 2009 javascript misc-web

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

Bookmarklet: Wage Calculator

Jan 28, 2009 javascript

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.

Firebug for IE?

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

Don't focus me, bro!

Sep 21, 2008 javascript misc-web

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.

Does your design leave an unknown size gap? navigationFiller.js!

Sep 2, 2008 javascript misc-web

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.

Prototype JS - form elements need names, not just IDs

Jun 6, 2008 javascript

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

JS Tool - Security Auditing in Javascript

Apr 24, 2008 javascript security

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

XSS with Img OnError attribute

Mar 20, 2008 javascript php security

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.

Update your URL filtering: possible XSS from "Data" URL scheme - Firefox

Mar 18, 2008 html javascript security

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.

Cross Domain AJAX - A quick anatomy of a mashup

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).

Demonstrating Password Manager Almost Vulnerability in FireFox

Jul 28, 2007 javascript security

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.

Unobtrusive JS to stop form submission

Jul 5, 2007 javascript

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.