Category Archives: Web

Setting the Active Navbar item with Bootstrap 4 and jQuery

Following in the footsteps of the fine answer at StackOverflow for “How to extract class from body element using jQuery?” using regular expressions, if you are adding your navbar as an include (following DRY principles), here is a nice clean way to not only automatically enable the active item in the navbar and its submenu, but also append the <span class="sr-only">(current)</span> for screenreaders, to the appropriate link text.

Now, all you need to do is on each page, add a ‘page-*‘ class to the <body> tag, which will connect with a matching class that you add on your .nav-item or .dropdown-item, like so (observe the highlighted lines):

Notice how, in the dropdown markup above, the individual dropdown items get one class each, but the nav-item containing it gets each of them appended, so that both the top level nav gets highlighted as active, as well as its entry in the submenu

Bootstrap 4 Beta navbar with active dropdowns set via jquery

Now that’s slick. Check it out on Codeply

A new look for CSS3 Sprites

It’s interesting to realize just how long ago this technique began to be used, and in terms of web technology, the fact that it still sees widespread usage is pretty telling how groundbreaking this was back then.

Now, with more and more browsers supporting CSS3 transitions, it’s now possible to add fancy fading effects to your sprites without even needing javascript, and with minimal impact to the usual css3 sprites code for rollovers, and a bit of :active for mobile devices to at least catch the fade-in on click.

Starting with a typical sprite used for social media links ;  150×100 with 40px icons centered in a 50px matrix:

typical sprite used for social media rollovers

The markup is pretty simple:

But the CSS gets interesting:

It starts off pretty typical, but around line 23, instead of repositioning the css sprite on hover we do something a bit different —  using the CSS pseudo-class :after to hold the re-positioned image in the same place as the original but with an opacity of 0 (so it’s completely transparent), we adjust the opacity on :hover/:active to 1;

The even fancier bit comes from the new transition property where we adjust it over a 0.8 second span to create the fadein/fadeout effect.

The result?  Sexy.

The CSS for this feels a tad more elegant as well. Plus since this sort of fanciness requires no additional javascript, you save a tad on your website download payload to the client browser.

What’s the difference between a domain forwarder and an alias?

(1) There are 2 typical types of multi-URL setups: the Forwarder and Alias.
(2) Both types will involve changes at the registrar; creating an alias involves some setting adjustments at the host server.

The forwarder:
There is an existing website at www.SiteA.com and you have another url www.SiteB.com. If you want people to type in www.SiteB.com and get forwarded to www.SiteA.com (and see www.SiteA.com in the address bar) this is a forwarder.

The alias:
A visitor types in www.SiteB.com and they see all the content from www.SiteA.com but the www.SiteB.com address is the one seen in the address bar. Some hosting systems call this a “parked” domain.

Years ago I liked aliases but with the changes in search engine optimization I generally recommend forwarders over aliases these days.

—   ###   —

#forwarder #dns #aliases #parked domains

#POSSE

POSSE is an acronym/abbreviation for Publish (on your) Own Site, Syndicate Elsewhere. It’s a Syndication Model where the flow involves posting your content on your own domain first, then syndicating out copies to 3rd party services with perma(short)links back to the original version.

POSSE lets your friends keep using whatever silo aggregator (Facebook, Twitter, etc.) they’ve been using to read your stuff.

It’s a key part of why and how the “IndieWeb” movement is different from just “everyone blog on their own site”, and also different from “everyone just install and run StatusNet/Diaspora” etc…”

ref. http://indiewebcamp.com/POSSE

NET NEUTRALITY, the open internet needs your support

What would you say if you Electric Company wanted to charge you more to power your TV than they charge to power your oven? What if the electricity you used for air conditioning was twice the price of the electricity used to power lighting? You would probably say electricity is electricity. You would see the notion as preposterous and you’d demand the electric company stop charging different rates based on the purpose of your electricity usage.

What would you say it the electric company wanted to charge you for your electricity and then also wanted charge Whirlpool (for the service you’ve already paid for) because refrigerators use so much power…. AND if Whirlpool didn’t want to pay they would selectively make Whirlpool appliances work badly for you.

In many ways this is exactly what Internet Service Providers like Comcast want to do. They want to charge websites to get full speed delivery to you. In fact, in many ways this is already going on. Did you know Netflix is paying Comcast for a fast connection? Consequently, my streaming from Amazon and Google is comparatively poor.

This is bad in so many ways, but the most obvious is that it will block innovation. In many ways the internet is a great equalizer. It helps even the smallest of companies compete, but those small companies will have a much tougher time if they can’t pay to get into the fast lane.

Everyone who uses the internet needs to take this time to voice their opinion and take a stand against “Cable Company F#*#kery” at
FCC.gov/comments
and don’t forget the CAPS!!!

This should be required viewing: Last Week Tonight with John Oliver (HBO): Net Neutrality

See also,  www.huffingtonpost.com

 

Moving a cPanel Hosted WordPress Website from one WHM Managed Server to Another

Simplicity itself.

On the destination server, log in to WHM at www.yourdomain.com/whm. Once logged in, on the left you will see a Find searchbox; enter ‘copy’ in the searchbox, and below that you will see both “Copy an account from another server” and “Copy an account from another server with account password”. Choose the second option.

You will then be presented with the following fields to fill out, relating to the source (original) server that you are moving away from:

  • Domain Name
  • Server to copy from (IP or FQDN): (If possible this should be the same as the domain name)
  • Username to copy:
  • User’s password:

and a checkbox for whether to give the new account an IP address from the IP address pool on the receiving server (if you don’t want it on the shared primary IP).

To use this feature, the remote server must be runing cPanel version 3.0 or later.

As of cPanel 11.24.1, this feature will use the cPanel XML-API to generate a backup of the account and transfer it to this server for restore. This is much more reliable then the old method, and will deliver the same data as a transfer as root would.

Once you’re through filling in the fields, click the Copy Account button, and wait a short bit — you can view the progress of the transfer while it occurs (the page view will periodically update itself as it goes), and very shortly the site will have completed its transfer.

This process will move everything from the old server — database, email (including forwarders), subdomains, and the entire public_html/ directory contents. All passwords related to email and database accounts will remain the same.

Note that once this stage has successfully completed, you then will need to update your DNS information to point to the new server location.

Leo Laporte discusses his website design cost and development time

On a recent episode of The Tech Guy (Show 865: http://twit.tv/show/the-tech-guy/865 at the 34:50 mark)  Leo Laporte discusses the wide range of website costs, development time and the price he’s paying for phase one of The Tech Guy Labs website’s redesign.

reference:
http://techguylabs.com
http://techguylabs.com/radio/ShowNotes/Show865#toc13

Google+ gets a +1 after first day of using it

About Google+

I’ve only had one day with it but I like it a lot better than Facebook and I trust Google with my information more than facebook. The circles feature is something that FB has needed for a long time. The easy way to have a post public or just for select circles is great. The integration with other google products like gmail, picasa, youtube works well for me since I’ve become such a google tool 🙂  It seems like I’m using just about everything they put out. 
http://www.google.com/intl/en/about/products/

http://www.google.com/intl/en_us/services/index_con.html

The drawbacks:

  • The big community is at already Facebook and most are just fine with that
  • Will google be able to get people to switch? that’ll be tough
  • How much of my internet presence do I want dependent on google

For our clients I’ll be recommending Twitter, Facebook and Google+. Many aren’t crazy about having to keep up with what online presence they have now. Hopefully products like Hootsuite will ease the pain of another social media outlet to manage. The benefit for them should make the extra work worth it. I expect google+ will end up tightly integrated with most of google’s stuff… like the google places page for businesses.