Blog

The Advantages of CSS Variables

  • Yaakov Ainspan
  • css

CSS is a great language. One of the best parts of it is the fact that it now supports variables. Today, we're going to take a look at how they work, and what makes them so great.

So how do they work?

CSS variables are created using the following syntax:

#element {
--my-variable-color: #fff;
}

Variables are prefixed with two dashes, and can contain any alpha-numeric character. To later reference the variable, use this syntax:

#element {
background-color: var(--my-variable-color);
}

This references the variable that you created. It's that simple; just create the variable and use it.

The Advantages of Variables

First of ...

Read More →


How to Get Around the "Have you tried anything" ban on StackOverflow


I use Stack Overflow a lot. Sometimes I have a problem and I need a solution, but mostly I go to answer questions that other people have. However, I've noticed a new policy that must have been the work of the new moderators: you are no longer allowed to ask somebody to show what they have tried.

No, seriously. You can't comment "What have you tried?". You'll get an error telling you to say something else, or "just downvote and move on".

But wait! If we're supposed to just "downvote and move on", then why does the downvote button tell ...

Read More →


Material Design Dropdown Animations with CSS3


Continuing in the vein of Material Design, we have another bit of CSS for you: Material Design dropdowns. These do, unfortunately, require the use of Javascript, but never fear! It's still fantastic.

 

Read More →


Material Design Inputs


Material Design is the biggest thing nowadays, so I decided to put my two cents in with a CSS-only Material Design input. Most of the others I've seen have required the use of JavaScript, but this one is entirely CSS. It's actually quite simple. It uses a label element to make the placeholder, and a basic input element, all of which is wrapped in a container. Some of the funcionality is reduced; for example, the bottom border of the input does not animate outwards, as it does in Javascript-based implementations. (That's only a technicality, and it's being worked on.) In the ...

Read More →


How to Change Filetypes on Windows


Have you ever needed to change a filetype on Windows, and you just couldn't figure out how to do it?

Well, you're not alone. Thankfully, changing filetypes is as easy as pie easier than pie. Just read on!

  1. Open File Explorer. Duh.
  2. On Windows 7, go to the Organize menu, and select "Folder and Search options".

Organize menuUncheck

  1. Uncheck "hide extensions for known file types".
  2. On Windows 8 and 10, go to the "View" tab in the ribbon, and check "File name extensions".

And done!

Read More →


Wishes for Ubuntu 17.04

  • Yaakov Ainspan
  • ubuntu

Ubuntu 17.04 "Zesty Zapus" is being released in a few weeks, and I'm hoping for some improvements. I tried out Unity 8 in 16.10, and... I don't like it. It feels very hard to use on a desktop. While it might be great on a mobile device, it seems a bit off on desktop. So definitely, I'd like to see improvements to the desktop.

In that vein, here are several improvements we'd like to see come to the Unity desktop.

  1. Batch Rename. This is something that I really like about Windows. You can rename multiple files with the same name, numbered. For ...

    Read More →


Order Bootstrap Columns


It isn't easy to make a site work well on mobile devices. When you're using Bootstrap, it can be a bit frustrating when the columns don't work out exactly how you want them to. Especially on mobile devices. For example, let's say you have this layout:

Simple two-column layout

Pretty simple, right? Just two columns; two .col-md-6s.

But then it gets complicated. When the viewport is small, as on a mobile device, you get problems. If those two columns are still each taking up half the width, the content in them is going to be a bit squashed. So the ...

Read More →


Our First Design


No, we're not still talking about our design of Rapid Door & Trim's site. We're over that. (Sort of).

What we're talking about is our first-ever design (if you can call it that), from some three years ago. Way back when we started doing web design. In some ways, it just shows how far we've come, looking at the absolutely horrifyingly bad design, layout, and color decisions from all those years ago, and marveling at how it's all changed.

We're planning on putting up the files as soon as possible, and they'll be featured prominently on our site. 

Read More →


jQuery Ajax File Uploads


People are uploading files more than ever nowadays. Whether it's a profile picture for Twitter, or a video to be posted on YouTube, uploaders are everywhere. And if you can make the task of uploading faster and easier, then why not?

Why not indeed? Let's get started on a Ajax file uploader using jQuery's ajax function.

First, we need our HTML:

<form action="">
<label for="#file">File:</label>
<input id="file" type="file" />
<input type="submit" value="Upload" />
</form>

Next, we'll capture the form's submit event, and block it. We'll take the files from the input, stick them into a FormData object, and ...

Read More →


Easier than an Overlay

  • Yaakov Ainspan
  • css

Overlays are a big part of the web. They're used a lot, sometimes just to let the user know that something's going on behind the scenes (stay patient!) or to dim the rest of the content so that a popup will become more prominent.

Traditionally, overlays are blocks that are fixed to the corners of the page and are generally invisible until called into use. However, there is a faster, easier, and - possibly - better way to create an overlay. You won't even need to make another element for the actual overlay, because there is no actual overlay.

Confused yet?

Okay, we'll ...

Read More →


Installing Ubuntu? Here's a Few Tips

  • Yaakov Ainspan
  • ubuntu

If you are planning on installing Ubuntu, here are a few things you should know:

  1. Use a USB drive. It's easier and cheaper, and you don't need a CD drive. Also, there are a lot of handy tools like PenDriveLinux that make it really easy to install to a USB drive.
  2. Test it first. You'll be given options to either try Ubuntu before installing, or just install it straighataway. Just in case, it's best to test it out first. Don't just go and install it immediately.
  3. Check your wifi. If you're installing on pretty much anything, your wifi might not ...

    Read More →


Our First Design - Rapid Door and Trim


Here's another first for you: our first commission! We just recently completed our first commission - a new website for a local building-supply business called Rapid Door and Trim. The design is similar to the one we employ on our own site (hey, if it works...) and we are really excited to show you it. You can view the details on our designs page. If you'd like to have us make a site for you as well, feel free to send us an email.

View the Project

Read More →


Go Viral with Tampermonkey


Have you ever put a video on Youtube, and no one wants to watch it? It's quite annoying. But what can you do about it?

Well, if you don't mind using up a bit of resources (CPU, RAM), then it is actually quite simple to artificially inflate your views. How? One word: Tampermonkey.

Tampermonkey comes as a Chrome extension with which you can manage userscripts to modify sites. To get it, just add it to Chrome, then click the Tampermonkey icon in the address bar and create a new script.

Into the code editor, paste ...

Read More →


JS-Powered Blog

  • Yaakov Ainspan
  • blog, news

Our blog has become the test case for our new navigation system, and it's working great.

What our new system does is remove the agonizingly long page loads that aren't necessary, and better yet, it keeps a cache of the posts you've viewed before so a couple of clicks of the back button — and I don't mean the browser's — will take you back to whichever post you like best.

Isn't that incredible?

Tell us what you think!

Read More →


New Project - Chat App


It seems like we just got started rebuilding our site, and already we're releasing our first project! Wow!

This new project is a small, fast chat app that runs entirely on PHP and mySQL. We've set it up to be lightweight (the entire program weighs less than your average picture. The exact weight is 18.5 kilobytes.)

It is very simple to use, and includes some handy features, including notifications for new posts. Later versions are planned to include image and video addons, as well as a modified theme.

Just so we're clear, this is not an app as in an app on your phone. ...

Read More →


Load Your Page Right


It can be really frustrating when this happens.

Have you ever been working on some project, and when you refresh the page, the changes that you made don't appear? This has happened to me quite often. It can be a real pain in the neck. Thankfully, it's pretty easy to fix.

The Fast Way

Press Ctrl+Shift+R. Done.

The Slow Way (AKA The Explanation)

The reason this is happening is because the browser is caching big chunks of your website's content, like stylesheets, scripts, and images. When you reload the page, instead of going to your server and getting the page all over again, the browser ...

Read More →


How to Grab Other Users' Files on Windows


Have you ever needed to get a file that happens to be on someone else's account? If you're a standard user on Windows, you might find it impossible to do that. Technically, if you are a standard user, and you haven't got an administrator password, then you can't get at another users' files.

Or can you?

Well, actually, you can. 

First, go to C:/Users and search for the file you want. If it doesn't show up, then you're out of luck. If it does, try opening it. You'll get an error dialog like this:

Error Dialog

Awww.

Now, open a browser (preferably Chrome) and ...

Read More →


Mobile-First or Mobile-Last?


Mobile design is a huge deal nowadays. Since everyone and their cousin is now using their smartphones for practically everything, it's become the nerdy cliche to use your laptop to check your email. So....

What does that mean for us in the web design profession?

It means that you can either go all mobile and design everything from a mobile point of view, and then expand outwards as the screen gets larger. This is what a lot of people propose, but there are several flaws in this idea.

First, you are going from a little to a lot. On a mobile device, the ...

Read More →


SVG Color on the Fly


Demo

Let's say you've got some SVG icons, let's say from a fantastic site like flaticon.com, like the ones we've got on our homepage. However, they're all black and white. You can get the color flaticons, but generally they're not free, and even when they are, they don't always fit with your theme. So what to do?

Just go and recolor every single icon individually? No!

Just use this little PHP snippet that messes around with black-and-white lineal icons (NOTE: Only lineal icons work for this) and recolors them. It's fast, it's easy, and best of all, you ...

Read More →


Welcome to Our New Blog

  • Yaakov Ainspan
  • news, blog

Hi, and welcome to our new blog!

We just finished setting up the new administrator module - okay, strike that, we're nowhere near finished. But we will be. And in the meantime, we intend to publish as many posts as possible. As we've repeated over and over, our site was trashed, so we are going to have to start over again. We hope to bring you lots of stuff as soon as is humanly possible.

We have plenty of new stuff planned, including our PFM File Manager, a bunch of CSS animation tutorials, and a remaking of our jQuery plugins tutorial.

As of ...

Read More →