Twitter may make major interface changes to address the growing need to make money.

Last week Twitter underwent one of the biggest redesigns in its seven-year history, but you’d be forgiven for missing it. Embedded images and video are now displayed automatically in the updates you see, instead of requiring a click to expand and view. Buttons for “retweeting,” “replying,” and “favoriting” tweets were also brought to the surface, cutting in half the number of clicks needed to interact with a tweet.

Catonsville resident Gus Russo, a documentary filmmaker and author, has written a book and filmed a documentary chronicling the stories of American citizens and where they were when President John F. Kennedy was assassinated. The 50th anniversary of the assassination is November 22nd.

History Assistant Professor George Derek Musgrove was interviewed for an article in The Baltimore Sun about Russo’s documentary and the impact of Kennedy’s assassination on the American people. He said television played a significant role.

“Large numbers of Americans saw the motorcade and the fatal shot, his wife scrambling out of the car and much of his funeral was on TV live. That in and of itself was a remarkable departure from past political events,” he said. “There was both a national trauma, and a national attempt to come to terms with what had just happened.”

Musgrove said nothing in modern day history except the terrorist attacks of 9/11 has had a comparable impact on the American people.

“Everyone has come to understand that the event was so jarring and so important that anyone that was alive when it happened can say exactly where they were when it happened,” he said.

You can read the full article in The Baltimore Sun here.

The artwork of Vin Grabill, associate professor and chair of visual arts, was included in the October 2013 issue of The Faculty Voice. Read about his video pieces and digital prints in the article “The Art of Vin Grabill” or view one of the works discussed, Frontier, at Vimeo.

The article also mentions the work of Steve Silberg, visual arts, and Neal McDonald, visual arts, which will be exhibited with Grabill’s at the Howard County Arts Center in Ellicott City from January 10 to February 21, 2014.

The latest release of WordPress 3.7 has provided even greater tools & support for this PHP/MySQL system. Since the project launched over a decade ago it has seen various iterations on the administration panel, theme development, and plugin API(among other things). WordPress has grown into a fully-reliable CMS which pushes beyond the functionality of a simple blogging platform.

Because of the fast updates and tremendous community there are more people switching over to WordPress every month. This platform can be used for an e-commerce shop, photo gallery, production company, school webpage, online portfolio, or practically anything you can imagine. In this guide I’ve organized a number of helpful plugins you may want to use when putting together a new WordPress project.

Post Management

If you write frequent entries on your website then you may also want to save ideas for new headlines. This can work nicely as a draft, but too many random ideas will end up crowding your posts section. I like to use an ideas management plugin to keep track of budding topics for new posts while also including links to reference when it’s time to write.

Ideas is very simple and obviously free to install. This works much like a custom post type where all the posts are saved as ideas. They should only be viewable in the WordPress admin, plus there are settings you can toy around with making it easier to learn. I’d also highly recommend WP Idea Stream which has much of the same functionality. However, these 2 plugins may be a little too much for someone who needs a simpler solution like Post Ideas.

This alternate plugin will appear as a link within the Tools menu in the admin panel. You can include reference links, a small description, and other common details for any new post idea. A follow-up release called Post Ideas+ adds post widgets on the frontend to easily update new ideas. You can also create separate lists for each author to manage their own ideas. Definitely worth trying out if you have a blog/magazine to keep posts organized.

Caching

Running a WordPress site doesn’t often require intensive user interaction. You likely won’t be handling constant image uploads or frequent forum posts. And even in these scenarios, it can help to just run a simple HTML cache of all your webpages. The simplest and most integrated choice would be W3 Total Cache. It can tie into 3rd party CDN networks along with storing a local copy of your pages.

I also find myself using Quick Cache on small-scale projects. It can work fine on larger websites but I also like the speed. You have the option to clear the cache from any administration page while also adjusting the caching settings without too many convoluted choices. WP Super Cache is another popular choice with a similar background.

You should try out any caching plugins that you find interesting. There is no absolute right solution but it helps to familiarize yourself with one or two primary choices. Be sure to install them on a live website to watch for any differences in performance.

Images & Media

Website images are common within any Content Management System. Image galleries and slideshows are often easy enough to build from scratch. But using a plugin will save you a lot of time and headaches fixing bugs.

Slideshow Gallery is an excellent choice to get started and familiarize yourself with the user interface. Plugins can be designed in many different ways, and WordPress includes handy objects called hooks within places on the layout. This allows devs to customize the new post admin page in order to format galleries in an easy-to-use fashion.

I’d also recommend checking out Slideshow which is powered by jQuery. In fact, there are a number of gallery & slideshow plugins to be found in the WordPress plugin directory. Dig through and see what you can find to best suit your website.

A personal favorite is Custom Upload Dir which can reset your upload directory. Now you aren’t stuck linking to images within /wp-content/. I usually just change the default folder to /images/ and keep the following year and month dates – but you may choose to upload files based on the permalink URL, datetime, author name, or many other factors.

SEO Tools

Even if you aren’t a big proponent of detailed SEO, it helps to give your WordPress website the fundamentals. There are some great plugins completely free that will offer exceptional support for the most basic SEO requirements. I personally prefer FV All-in-One SEO because it displays a nice featured area on each post page.

At the bottom of the edit page you can see a sample of how your post would appear listed in a Google search. This includes the post title, description, and hyperlink URL. Note it is only my preference to suggest this plugin, but there are dozens of other free choices like All in One SEO Pack which is probably the most commercial choice. It is very simple to use and there are many tutorials online explaining the interface.

Yoast WordPress SEO is another very popular choice amongst mainstream WordPress users. It can be easy to first setup and then learn the controls whenever writing a new post. I would highly recommend any of these 3 choices if you prefer one over the others. All you need is a plugin that works and has a simple yet intuitive interface on the backend.

Website Feedback

User feedback is another staple across the board of any website. Contact forms are usually the simplest way to gather feedback from visitors. Simple Basic Contact Form is one of the easiest solutions without too much complexity. Any newcomer to WordPress may want to start here and learn the ropes on how to customize.

A much more detailed choice would be Contact Form 7. This has a larger administration panel that helps you add plenty of new fields and user settings. You can also generate a number of different forms which may be sent to different e-mails, and customize the design any way that you choose. If neither of these choices seem great then try searching in the online WordPress directory for another free solution.

The other simplest way to manage visitor contact is in your comments section. WordPress sites are notorious hits for spammers, and so without a plugin like Akismet you don’t want to use the default system. I have grown to like Disqus because it all ties into one system neatly packed in the WordPress dashboard.

If you’d rather build up a larger following through social media then try something like Facebook Comments. Lots of people are automatically logged into their profiles on networks such as Facebook, so it wouldn’t be uncommon for somebody to stumble onto your website and leave a bit of feedback.

WordPress Security

One of the primary reasons developers keep coming back to WordPress is that it’s secure. Bugs are quickly patched in new releases while also being pinched out during beta testing. The guys who run Automattic are pretty smart and they’ve built one truly amazing product.

But there are some alternative plugins you might enjoy to help further your website’s security. Akismet comes for free with every download and you can obtain a free API key from their website. They ask for donations but if you can’t give any money just slide the bar down to $0 and Akismet gives you a free shiny API key. However this really only protects against spam comments, which you still often need to clean manually anyways.

Let me introduce Better WP Security which is a fully-packed and unique WordPress plugin. You can change the admin login page URL, and the wp-content path along with database prefixes. Plus there are so many other features I just couldn’t list everything here. For a free download this plugin offers a tremendous amount of great functionality. The goal is to mask your HTML source as much as possible so that it doesn’t appear to be running on top of WordPress.

One other helpful plugin I’ve found is Limit Login Attempts. This can work against you during those moments when you forget your account password, but if your login page is getting an overabundance of hits you may install this plugin to lock out the activity. It’ll prevent any single IP address from logging into the site for a set period of time once they’ve reached a threshold of failed attempts.

Counting Pageviews

I’m not sure this is a hugely popular request but it does come in handy when sorting “most popular” posts. There are some basic plugins you can include to count the total pageviews like WP-PostViews. This number on the page may end up cached but it’ll still count every unique pageview. A counter plugin named Ajax the Views will fix this small bug if you run a WordPress caching plugin.

Ultimately page view counts are useful because it promotes confidence in your content. Being able to sort by most popular, even limited to a month or a year is definitely an interesting feature. I’d also recommend another plugin Ajax Hits Counter if you have the time for testing out a few choices.

Related Blog Posts

I like to bring this up because related posts and pages are a great way to draw visitors even deeper into your website. But the functionality isn’t always easy to build from scratch. A great place to start is Contextual Related Posts which can also work on any custom post type.

It’ll pull information and include post thumbnails, shortcodes, among other internal content. I was very impressed the first time when trying this out on a live website. It will include some default styles and it certainly helps to know where you should look to customize them. But if you put in the effort I bet it’ll look spectacular.

There are so many others worth mentioning but I’ll also include Yet Another Related Posts Plugin(YARPP for short). It’s great because this also includes thumbnail support and CPT support. The related posts or pages can display in your RSS feed too. Either of these plugins will not let you down with a wide array of easy-access settings to edit templates and redesign styles fitting to your layout. If you want to look for more choices I can promise there are some other gems hidden inside the WordPress plugins directory.

Custom Posts & Pages

WordPress 3.0 invented the idea of Custom Post Types. Instead of having a blog post, you might have a new book post or newsletter item. This has built an entire CMS engine around the WordPress PHP framework. If you aren’t a coder then you can instead build CPTs using a plugin like Custom Post Type UI.

This plugin can automatically include the codes into your WP theme or you may copy and paste them manually into a new file. Custom Post Types are flexible in that they can be written as a plugin or within your theme’s functions.php file. These CPTs are fairly lengthy when written in PHP, but don’t let that put you off from trying them out! Shortcodes are another cool feature where you can build unique page output using [squarebracks] in your post content.

The plugin Shortcodes Ultimate provides a large list of free shortcodes which can match any theme. You’ll also be able to look into the plugin source code and possibly duplicate your own. These shortcodes can be great when pulling out unique data based on a custom post type, or maybe some other metabox or additional field in the database.

Building new PHP files in your theme folder allows you to create special types of pages. Plugins may also run this type of code like with Compact Archives. This can be used in a page to output a year/month date list that links to your post archives. Consider using a plugin like this for any blog with more than a year’s worth of content.

Closing

It is difficult to guess everyone’s needs when developing a new WordPress project. The system has grown rapidly since v3.0 and the team is determined to continue pushing forward. Many of these plugins would be useful in any typical scenario, or even just to practice for working on a side project or freelancing. If you know any similar free WordPress plugins feel free to share with us in the post discussion area.

The post Best Free WordPress Plugins for Common Website Functionality appeared first on Treehouse Blog.

Baltimore is updating its comprehensive zoning plan for the first time since 1971. The goal is to make the city more pedestrian friendly and to increase use of public transportation.

Public Policy Assistant Professor Eric Zeemering was interviewed by WYPR for a story about the new plan, which is called “Transform Baltimore.” He says increased neighborhood accessibility that integrates work, life, and entertainment should be a key part of the planning process.

“Baltimore will benefit from thinking about how to keep residents satisfied and happy within the individual neighborhoods rather than requiring them to get into their cars and drive throughout the city to meet their different daily needs,” Zeemering said.

The planning process began in 2008 and Zeemering says it will greatly benefit from creating walk-able, transit-oriented communities.

“The mayor’s goal of attracting 10,000 new families to this city can really be helped along by smart policy decisions that make the city’s downtown and various neighborhoods more attractive to potential residents.”

You can read and listen to the full story here.

Tabs are a simple design pattern in which a row of links are obviously clickable navigation and when a link is clicked, new content is shown. There are loads of variations of course, but it's one of the most ubiquitous navigation design patterns out there. When arranged in a horizontal row, it is also one of the least small-screen-friendly design patterns out there.

We can make it work though.

Without doing anything at all to help tabs on a small screen, you'll run into some kind of problem

• You let the page be "zoomed out" and the tabs are tiny tap targets
• You let the page be device-width and...
  • there isn't room for the tabs so they cut off.
  • the tabs wrap and look weird and take up too much space.

Basically: we need to do something here to make tabs better for small screens.

This Has Been Done Before

Popular solutions include:

• Brad Frost's Toggle Navigation
• "Off Canvas" navigation option like this.
• Convert the tabs into a dropdown.

I'd like to do it again with some specific goals.

Goals

Here's the plan:

• Normal "tabs" look when there is room, dropdown when there isn't.
• "Current" tab always shown and obvious.
• Works with #hash tabs where all the content is on the page and content panels are hidden/shown.
• Works with linked tabs where the tabs link to a different URL.
• The HTML is semantic.
• There is one version of the HTML that doesn't change.
• There is one version of the JavaScript that doesn't change.
• You can link to a particular tab.

So we're not just tackling the design but the functionality.

Patterns like the "off canvas" style won't work here as we're trying to show the current tab, not hide it. Converting in a <select> dropdown won't work because that's different HTML and different JavaScript.

The HTML

Tabs are navigation, so <nav>. The role should be implied by the tag, but you can't always count on that, thus we add the role. We use a class for the CSS on the outermost element (the <nav>). The navigation items themselves are in a list because that's best. Each link has either a #hash target or a valid URL.

<nav role='navigation' class="transformer-tabs">
        <ul>
          <li><a href="#tab-1">Important Tab</a></li>
          <li><a href="#tab-2" class="active">Smurfvision</a></li>
          <li><a href="#tab-3">Monster Truck Rally</a></li>
          <li><a href="http://google.com">Go To Google &rarr;</a></li>
        </ul>
    </nav>

Nothing superfluous.

The Tabbed View CSS

There is a set of specific CSS for the tabs in each "state" (tabs or dropdown). You can start "mobile first" by styling the dropdown then using min-width media query to re-arrange to look tabbed or you can start "desktop first" by styling the tabs first then using a max-width media query to re-arrange into a dropdown. They are so different I don't see any big advantage either way, but I'd match what you are doing elsewhere on the site.

Desktop first and SCSS for this demo.

.transformer-tabs {
      ul {
        list-style: none;
        padding: 0;
        margin: 0;
        border-bottom: 3px solid white;
      }
      li {
        display: inline-block;
        padding: 0;
        vertical-align: bottom;
      }
      a {
        display: inline-block;
        color: white;
        text-decoration: none;
        padding: 0.5rem;
        &.active {
          border-bottom: 3px solid black;
          position: relative;
          bottom: -3px;
        }
      }
    }

Just a row of links with a line beneath it. The anchor link with an "active" class gets a different color border that overlaps the edge-to-edge border. vertical-align keeps them all on the same baseline when the active link gets the border the others don't have.

The Dropdown View CSS

We need to find a viewport width in which the tabbed look breaks down and put a media query there. 700px for this demo.

.transformer-tabs {
      ...
      @media (max-width: 700px) {
        ul {
          border-bottom: 0;
          overflow: hidden;
          position: relative;
          background: linear-gradient(#666, #222);
          &::after {
            content: "☰"; /* "Three Line Menu Navicon" shows up */
            position: absolute;
            top: 8px;
            right: 15px;
            z-index: 2;
            pointer-events: none;
          }
        }
        li {
          display: block; /* One link per "row" */
        }
        a {
          position: absolute; /* Stack links on top of each other */
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          &.active {
            border: 0;
            z-index: 1; /* Active tab is on top */
            background: linear-gradient(#666, #222);
          }
        }
      }
    }

When the media query hits, this gets us here:

The active tab is still obvious (it's the only one shown) and a three line menu navicon is shown, which is getting universally known as a symbol to reveal more navigation.

The JavaScript Structure

The functionality we need:

• If it's a #hash link, selecting it reveals the panel with that ID and hides the currently shown one.
• Change the URL to indicate that #hash, but don't affect history (no back-button annoyances).
• Visually indicate the now-currently-active tab (toggle classes appropriately).
• If it's a linked tab, allow that link to work.
• If the page loads with a hash that matches a tab, go to that tab.
• In the dropdown state for small screens, allow the dropdown to open/close when you select it.

Some structure based on those requirements:

var Tabs = {
    
      init: function() {
        this.bindUIfunctions();
        this.pageLoadCorrectTab();
      },
    
      bindUIfunctions: function() {
      },
    
      changeTab: function(hash) {
      },
    
      pageLoadCorrectTab: function() {
      },
    
      toggleMobileMenu: function(event, el) {
      }
    
    }
    
    Tabs.init();

Changing Tabs Upon Selection

The only time we need to change a tab on selection is when the selected tab is a #hash link. Otherwise it's a linked tab and it should just follow that link. (And by "selection" I mean clicked or tapped or tabbed to and activated or whatever.) Thus our changeTab function can just accept that hash value and use it.

  changeTab: function(hash) {
        
        // find the link based on that hash
        var anchor = $("[href=" + hash + "]");
    
        // find the related content panel
        var div = $(hash);
    
        // activate correct anchor (visually)
        anchor.addClass("active").parent().siblings().find("a").removeClass("active");
    
        // activate correct div (visually)
        div.addClass("active").siblings().removeClass("active");
    
        // update URL, no history addition
        window.history.replaceState("", "", hash);
    
        // Close menu, in case in dropdown state
        anchor.closest("ul").removeClass("open");
    
      },

Handling Tab Clicks

We'll use standard event delegation here just to be efficient. Any "click" (which works fine for taps), assuming it's not the already-active tab and it's a #hash link, will just pass along that hash to the the changeTab function.

    // Delegation
        $(document)
          .on("click", ".transformer-tabs a[href^='#']:not('.active')", function(event) {
            Tabs.changeTab(this.hash);
            event.preventDefault();
          })

... and preventDefault() so the page doesn't jump down awkwardly.

Toggling the Dropdown

If the media query is in effect and thus the tabs in their dropdown state, we can toggle the dropdown "open" and "closed" when the .active tab is clicked. Because of our styling, we know the active tab covers the entire clickable area.

    $(document)
          // ... first click handler, chaining for efficiency 
          .on("click", ".transformer-tabs a.active", function(event) {
            Tabs.toggleMobileMenu(event, this);
            event.preventDefault();
          });

The toggleMobileMenu function is very simple. But I still like that we've abstract it into it's own function in case some day it needs to do more, we aren't getting all spaghetti'd up.

  toggleMobileMenu: function(event, el) {
        $(el).closest("ul").toggleClass("open");
      }

The .open class visually opens the menu via some CSS changes.

.transformer-tabs {
      ...
      @media (max-width: 700px) {
        ul {
          ...
          &.open {
            a {
              position: relative;
              display: block;
            }
          }
        }
      }
      ...
    }

Removing the absolute positioning on those tabs and making them block-level makes the menu expand down and push the content below down as well. This is what makes it a dropdown.

Load the Correct Tab When Page is Loaded with a #hash

Turns out this is super easy. Just look at the hash in the URL and pass that to the changeTab function.

  pageLoadCorrectTab: function() {
        this.changeTab(document.location.hash);
      },

This is why we abstract functionality into functions we can re-use instead of spaghetti-land.

This Isn't Just Theoretical

I'm writing this after fixing up the tabs on CodePen, where the tabs kinda sucked until I did this. We have both #hash link tabs and real linked tabs on CodePen, thus the requirements.

Wanna Make It Better?

Perhaps a version where the menu doesn't push the content below down, the expanded dropdown just sits on top of the content would be cool. Perhaps one that could handle a ton of links (more than a small screen's worth) with some kind of scrolling or pagination. Perhaps one with some animations/transitions.

One issue with the exact demo we've built here is that you can't close the dropdown unless you select a tab. You can select the current tab to close it without doing anything, but you can't just click the three-line menu to close it. That's because you can't (as far as I know) bind a click event to a pseudo element. On CodePen I just used a <span> for the three-line menu so you could toggle it that way, but that does mean additional markup.

Demo

Note: The "Go To Google →" is a linked tab just to test it. It doesn't work here on CodePen because of the sandboxed iframe. It would work under normal circumstances.

See the Pen Transformer Tabs by Chris Coyier (@chriscoyier) on CodePen

Transformer Tabs is a post from CSS-Tricks