Last year, the M-A Chronicle didn’t exist. It was still the mabearnews, the site was built on an antiquated WordPress theme which no one knew how to change, and generally it lacked in web design aesthetic. However, this year, the M-A Chronicle was born as a relaunch of the M-A Bear News website– a relaunch that included a custom built theme, a newer WordPress implementation, and a server one could actually access. The following shows the evolution of the website, how it developed, the technology that was used and how many idiotic mistakes I made along the way.

The Technology

One of the challenges involved in building the website was, of course, working with WordPress. Much of the development for WordPress includes using php and interfacing with the arcane functionality of any CMS built more for the consumer than the developer. Initially, this was a daunting challenge, and to start off WordPress theme development, I used underscores barebones theme, and stuck with what was familiar, CSS.

To implement that CSS, I used sass as a preprocessor; this quickly became essential to maintain consistent colors and constraints across the site. Later on, I adopted much of the sass-guidelines in the theme, in hopes of making it more maintainable. One thing I almost immediately realized was that, if you are not willing to rewrite much of your code, you need to document it.

Of course, with any website in the twenty-first century, you need to use javascript. Originally, in an attempt to avoid having to write a mess of query client side spaghetti, I used CoffeeScript, but it soon became just as convoluted as standard javascript. In the end, I ended up with plain old javascript, sometimes the most obvious solution is the easiest.

One of the most useful things I discovered on this project was gulp. With the help of my co-conspirator, Jack Beasley, the build system for CSS and javascript where all that’s required to compile projects is “gulp”.

The Challenges

One of the largest challenges was fighting against WordPress. In order to make a more dynamically loaded front page, I had to create a rest API for posts. This was aided by server-side rendering of the post information, though occasionally this was replaced by react.js rendering.

Perhaps the most trying moment was when yuzu related posts were styled to look like something that could be a part of the project. This implementation involved much yelling, and in the end, a javascript removal of all styles of posts.

The Results

Below follows the evolution of the website, from its current state, as of this post, until the first post I made for a version log. Don’t expect great literary merit, these comments are mostly the depraved rantings of someone who just overcame a really annoying bug in his code, but do enjoy the pictures.

Version 1.0.0

Yes, it’s finally here, 1.0. I got really tired of writing a bunch of numbers with prefixing zeroes — that’s the change that led to this update, it’s really just a mental, we finally got their thing.

Alright, so moving on, getting to some interesting additions. A pull quote of class ‘pull-left’ or ‘pull-right’ will give a pull quote result. More details on how to add a class to a block quote coming much later.

NEW THINGS

• Sidebar — it’s there, and it’s pretty nice
• Standard photos, you no longer have to play around with cropping because that’s annoying
• Pretty much minor

Version 0.10.16 — slider

As many of you have probably noticed, or not, the top stories slider on mobile was difficult to use, hard to see and annoying in all other senses. That’s now been fixed, it’s exactly the same for desktop, but, on mobile, you can swipe left and right to change stories. The slider is done with a js plugin Swipe.js so it’s nice.

Version 0.10.16

Alright, this is a really minor version, it’s just some fixes of loading times and some minor bugs with the social media bar and things like that. Version 1.0 is coming, be prepared.

New Stuff:

• Navigation bar on mobile (and on regular)
  • You can now do cool things like have the sideways navigation bar on your phone. Also, I struck out the maroon — sorry about that, but really, it clashed with the rest of the site. It may come back with a better color scheme, but for now, it’s black or white or image, nothing else.
• Loading times
  • One of the great things about our website is the images. They’re incredibly high definition, incredibly, how incredibly? Like 20 megabytes (MB).
  • Now they’re not 20MB — Most images have been cropped by WordPress (as of last check 55.3%) — this lets you upload a 4-kilobyte image, but lets the site display whatever size it needs, without destroying the loading time of the page. You’re welcome people on cellular.
• Minor bug fixes and improvements
  • It’s just a cryptic way of saying I’m tired of typing about things that are really just the occasional line of javascript.

Screenshots

In case you can’t read, don’t fear:

Version 0.10.15

Are you tired of having to do monthly screenshots and likes? Would you rather have an easier way to share news about the M-A Chronicle? Do you hate constantly having to go to facebook.com? Would you rather I stop talking like someone from an infomercial? The new version can help you with three of the four issues listed above.

Included is:

• The ability to share a post on:
• Twitter
• Facebook
• Google+
• Reddit

If you have any more social media you’d like to add just tell me. For now, though, rest assured that social media has become even more prevalent on our site.

Also, minor bug fix, clicking on features shows all titles the same size now.

Version 0.10.14

First off, let me say that some day soon we will upgrade to version 1.0 — once all these tiny fixes are made, I’ll up the version, but for now it’ll stay with the zero.

Front page Clicking

You can now click on the images of stories on the front page in order to get to the stories.

Top STORIES Slider

There are now some arrows for easier navigation between posts on the front page.

Version 0.10.13

Tags got in the way of some things (no longer!) — also make sure posts aren’t categorized as uncategorized, that’s just ridiculous.

Version 0.10.12

Our old search functionality was a bit clunky and difficult to use, so this allows for some updated searching techniques. It’s also a bit faster (no ajax image loads) and the search bar is much quicker and easier to access. This update overrides any previous “progress made” for search in versions <0.10.12.

Version 0.10.11

Here is an URL as well, found a shorter one: http://eepurl.com/bSQGcX

Here is a QR code to the subscribe link if we want it on a poster or something of that nature…

SUBSCRIBE! Go to the footer, which now looks quality.

Version 0.10.10

Multiple related posts will now show properly (personally I don’t think we should have that many but ehh, now we can). Also, I made the images pull from full size so they show nicely on mobile.

Version 0.10.8

The related postfix now displays properly on mobile.

Version 0.10.7

NOTE: If you don’t want to listen to me complain about related posts, don’t read paragraph two.

So related posts finally look nice, no thanks to Yuzo (sorry, that’s the second paragraph), and categories show up as pretty little tags at the bottom. I think this really gives our site a more polished look.

Yuzo related posts hate styling. What do I mean by hates? I mean that I had to use a recursive javascript function to eliminate styles that override CSS styling, remove (via javascript) a stylesheet that overwrote all other stylesheets and of course disable a jQuery plugin that was only documented in some weird one-time tutorial. Yeah, it took longer to get rid of Yuzo’s default styling than it did to apply my own, but luckily that’s done now and those who follow can copy and paste some javascript to get it to work.

Also, it’s no longer called ‘Related Post’ — grammar much?

Version 0.10.6

One word: PARALLAX. Yes, it’s here.

Our posts can now look positively amazing, in WordPress simply set the post format to image and the title will be shown with parallax.

A note on how this is possible: CSS. This entire parallax effect is done using CSS, not a hint of javascript. This really may not sound like something of much importance to people who don’t design websites in their free time, but I just want to say, it’s pretty cool.

Version 0.10.5

I finished some migration from greyed out areas towards more white areas. I also fixed a bug where the navigation bar had severely deficient padding and was not working properly. Search was also somewhat improved. Finally there’s the added benefit that if a post is displayed as format ‘image’ the images will really look nice. However, the featured image has not yet been implemented to reflect the true niceness of that appearance.

Version 0.10.3

I added a new look for the front page that makes it a bit cleaner, and began migration from black text to white text!

Version 0.10.1

I fixed a problem with infinite scroll on categories. Credit to Wellington on this one, it turns out you couldn’t scroll past around 10 posts for any different category, which is an obvious problem. The solution was that the ajax method retrieving the post content was in fact using ‘numberposts’ as the query rather than ‘posts_per_page’, which meant it was trying to paginate the results. Nonetheless, all that is fixed and the site is updated. Since this was a php error, there is no caching that takes place, so the results are immediate.

Version 0.10.0

Well the first thing to note is that this isn’t version one. Sadly versions follow achievement and, in this case, achievement hasn’t really been met. Truth be told this version would be a minor update to 0.9 but I’ve added it as its own because there are now comments. Let me explain, there can be comments, all the code is there, wether we use them is still very much up for discussion (maybe we could do this discussion on some kind of forum since we haven’t decided on comments yet).

Features NOT Implemented

• Social media at the sides of posts
  • This has been moved from social media to the side of the page, for a variety of reasons, including the fact that this doesn’t work on the front page.
  • What do we want these social media links to do: post a tweet about the story, or show recent tweets about it?
  • Most importantly, should these replace the social media icons in the navigation bar or be an addition to it?
• Logo
  • The logo is brilliant, and it’s in an SVG — very nice. What’s not nice is Adobe Illustrator which inserts a lot of whitespace around your SVG that is incredibly difficult to trim. This logo will come shortly once I’ve been able to do just that.
• Front page section title changes
  • Currently the site is black and white, all of it:
    • Navbar, text, borders, frames, shadows
  • If we want really colorful things everywhere we have to make some stylistic reconsiderations of the site wide colors because on their own these changes look, at least to my eye, quite out of place.
  • I know this is not school spirited, but our school colors suck for web design.
  • I mocked this up and below is what it looks like. If this isn’t that much a problem for other people than we can keep it, but I have a few ideas why we shouldn’t.

 

Things I did manage to change

• Background
  • Background of the site is now maroon.
• Search
  • This finally shows up when one searches for something that can’t be found, like a system where entropy tends to decrease, or an A in Florio’s class.
  • Picutre Below:
  • Search not found

• Search Immediately
  • Now when you hit the search icon, you can immediately search. No more delayed actions stemming from having to actually click, it’s actually quite useful and credit to Lexi for suggesting it.
  • Picture Below:
    
    • Comments
      • Ok, I’m going to brag here; I’m quite proud of this. I reinvented a bit of how WordPress does comments and kept them off to the sides. Most of the inspiration comes from comments from the New York Times.
      • Picture below (Hey, the Matrix has the best quotes)

Version 0.9.3

• Sports are now on the front page.
• Background colors are now muted darkish.
• MOBILE FIXES!
  • Post content is on the right side.
  • Blog name and search results are the proper size.
• Search bar no longer covers navigation bar.
• I added basis of comments if we ever want those.
  • Please don’t use comments yet, in fact, you can’t but still. I said basis!

Version 0.9.2

People have noted things, myself included, that could make the front page layout a bit clearer and a bit nicer. Most of those have been implemented (again, pending WordPress cache clear).

Things OtherS NOTED:

• That the category section was rather lame
  • Okay, I can grant that, the code for it remains, but it itself is no longer there.
• The categories displayed were featured and top stories; we have more categories than that.
  • Yeah, that’s an issue, I just added every category in our navigation bar with a few posts underneath of the recent variety.
  • There are also WAY more popular post sections.
• The navigation bar was kinda hard to see in the middle of the screen and then moving around, too much for the eye to track.
  • That’s fixed, nav top, featured still spans entire site but is now below it, looks around the same.
• The blue/purple tint of all the featured images makes those images hard to see.
  • Well, I kinda suck at gradients, the goal of this is to make the text on those images stand out. We can think of something better later, I have some ideas, and also some doable ones.

Things I noticed

• I MESSED UP THE NAV BAR!
  • For all you people having viewed the website on chrome I am terribly sorry about the lack of quality of the navigation bar. I just checked safari and called it a day, both WebKit and all, but no! So anyway, the navigation bar now looks consistent throughout the site; it’s also missing those annoying two pixel offsets that so bugged me.
  • I also messed up the mobile and front page transitions and ability to exit submenus; well that’s fixed now. Actually I should give some credit where credit is due. The reason that’s fixed is because I no longer put the navigation bar in a fixed container, aka, the middle of the page.
• Chrome hates overflow hidden.
  • Those cool little title section things I built– don’t judge me, I think they’re cool– actually had a bit of a problem with some doubled up text.
  • Theoretically, I fixed this by removing blackface visibility from the primary and secondary title components. If that made no sense to you non-CSS geeks, I used the force and my programming wizard powers to do good.
• Recent posts aren’t ajax.
  • Well here’s the thing, I think I actually added so many posts on the front page that there are no more posts– at least with images– to get using recent posts. The query kind of came up short, but I imagine, after the next spread, this will change rather quickly.

Version 0.9.1

I fixed some issues with front page on mobile, and also reduced the number of popular posts shown to two.

Version 0.9.0

Installation

Implementing this update was a nightmare of buggy annoyances. As an example, when first pulled, the white screen of death was presented. In order to solve this, the theme was reverted to a previous version, deleted, then reinstalled. Then php errors were shown, apache restarted, a patch applied, the theme reinstalled — no new styling was present — gulp-compass encompassed an error and js files were being cached. I fixed compass, reinstalled sass, and finally just left the cache to cron check itself sometime at night. I just wanted to point out how very not fun that was.

New Features

• Navigation Bar
  • Removed the sidebar, I know, “we had a sidebar” is the most common reaction to that, well, nobody seemed to use it for anything other than searching so it’s out of there.
  • Added a search to the nav (where the sidebar used to be), its really simple click type and enter… done
  • Updated the sizes of the navigation bar on both mobile and on the big screen, who needs all that extra stuff.
  • Made mobile version contain the search functionality.
  • Fixed an issue with absolute positioning due to CSS being weird… still, needs some tweaks on the front page
• Front Page
  • First off, it’s completely new.
  • The featured section now displays all your posts at once and very prominently, above the navigation bar prominently.
  • Categories:
    • Categories are now actually important, I was going to do tags too, but no one seems to use those
    • Anywhere everywhere you look on the front page you should see categories staring at you from their little red boxes.
  • Top Stories
    • I know, were not using these that much, I found this out when I went to M-A Chronicle this morning and those stories were all old, whatever, its time to start using them once more!
    • How do we do this? Simple — we just do. Tag some posts occasionally, that’s good enough.
  • Popular Posts
    • You may notice some really big images with no excerpt.
    • I implemented some WordPress magic so I can tell, from WordPress how many views a post has. The post with the most views that’s not on the front page and is no older that 40days go there. It’s kinda a legacy tribute.
    • We can change how important these are later on, it could be a featured post might go here for further recognition if it was very popular.
  • Category List
    • Its a list of categories that all have random heights, cause I got tired of the same size boxes.
    • The colors are somewhat reminiscent of MA colors
  • Section Titles
    • Those strange split black things thought it lent us some distinction, you know, wow — those are pretty weird.
  • Recent Posts
    • For the moment, there just six posts of the recent variety, or however many show up, some amount of recentish posts.
  • Featured Images
    • These are now required if you want your post on the front page. No featured image, no dice.
• Ajax Loading Spinner
  • Looks new — kinda more modern style design, in favor of some increased flatness that’s been going around.

Version 0.6.5

Added some improvements to the layout of the front grid as well as some ken burns’ goodness. Minor bug fixes. All credit to Mr. Wellington for the Ken Burns effect idea.

Updated 1:44 PM November 7 2015.

Version 0.6.4

Minor bug fixes.

Featured posts no longer on the front page below featured post section and the colors of the navigation bar have been changed. — theoretically.

Updated 9:54 PM November 6 2015.

Version 0.6.3

Fixed minor bugs relating to post images in search results.

Also created some leeway as far the size of the images on single post pages. You probobably won’t notice much of a difference but they should scale better as well as being more suited to their respective sizes. The problem that arizes is no one crops to longer images, which is fine and it centers the image, both verticaly and laterally, that isn’t fixed, also it shouldn’t really be fixed, its what allows their display. Anyway, enjoy slightly less cut off images on that front.

Version 0.6.2

Well, you know how on version 0.6.1 there was some confusion as to the nature of that staff thing I added. That seemed complicated so I did two things. I removed the People type and replaced it with a plugin that adds a featured image to an author. So, let me talk you through it. I’m activating this at 6:06 PM Wednesday November 4th, in case anyone is not seeing the immediate change.

How to add some staff info…

1. Upload the person’s picture to media.
2. Go to Users and select the appropriate user.
3. Add some biographical info, this should already be written… except if your me and forgot to do that 🙂
4. Click the last option above update, Upload New Profile Picture
5. Click the third tab to the right, the most rightmost tab – ‘Media Library’
6. Select your appropriate photo by clicking show
7. Chose the size thats closest to 600 x 600
   1. Preferred no alignment or center
   2. No other descriptions or things necessary
8. Click ‘Make this my profile Picture’
9. Click Update on user

Now there is as of yet no staff page, I’m working on that but for now, if you click on an author, you should see information about them on the right hand side with a photo and bio if you have entered one. Cool right? If you said no to that last than you have no shame.

Version 0.6.1

Fixed issues with the navigation, the navigation bar no longer opens weirdly when clicking nonsubmenu’d links. Also when opening up the menu through the burger icon, clicking on a submenu will change content to that submenu as you would expect.

Preparation for a staff page is there, but it should be noted, has not been themes yet, and should not be published. In fact, there not completely set in their manners so should not be dealt with at the moment. If you would still like to try, I can’t promise the entries will remain, the title should be the position of the person, the author, the person themselves, the content a bio and the featured image their description.

Also, uses increased utility from underscore js through the navigation bar code.

New issue – to note, the theme may not refresh for 20-40minutes due to browser caching.

Version 0.6.0

As of November 1st, 5:15 PM Version 0.6.0 of the site has gone active

What does this mean?

In short, the site has received updates built over the past several weeks and now is fully active. Yay!

Features

Ajax Loading

For those of you to whom this title doesn’t register a 200 in understanding ( Programmer humor, deal with it ), that means that, instead of loading all of the posts and pictures and all that for a page all at once, it loads it only as you need it.

But Sequoia, I don’t care about performance, it loads, I read it, big whoop, whats the deal?

Well to answer that self posed question this allows for infinite scroll, what do I mean by infinite scroll, scroll ad inifinitum, thats what I mean. As you scroll down on any page that has multiple posts, like a search, or a category, or an authors posts, it will load more and more till its done. So I suppose I lied, its only infinite in a sense, eventually you will run out of posts. Still thought, pretty cool.

News Ticker

Yes, after months of asking for this, its delivered. You may not see it yet, but its there, in wordpress admin you should see a new type of thing called Breaking News – bingo, add in you content, the title is just for your own reference, and it goes on the front page as a breaking news item. It even has a cool, old school style typewriter effect.

Navigation – Improvement Much?

You know how all those times you were like, “Sequoia, where are all the other things I put in the menu?” and I’d be like “Ehh… some stuff about a lack of space… hit the burger menu button” then you’d say “Please fix this” and I’d say “Will do, but need to do this other stuff first, and college aps, and my life is way to busy… [exasperated sigh]”. Well I decided to fix this now, took like an hour, not that bad. Well, I should clarify, I rewrote all of the navigation code so it took more like 3 hours, but still, my rather rambling point is, you can now see everything on the navigation bar. Also, my point is you should allow less excuses from me.

New Background

Yeah it’s minor, but hey, it’s cool. You’ll notice a bit more definition sitewide between your background and your posts. Also your article is now separated into three distinct portions: title + author, content, and categories. I mean it was already seperated into that but now it’s, you know, even more seperated into that. It’s like a sandwich that got expanded into ….some other kind of looser sandwich.

New Front Page Grid

Not gonna lie, not much of an improvement here, It looks cool but… eh. Anyway, I had to do it to make my life easier with ajax loading, which turned out to make my life infinitely harder; anyway, it’s done.

Colors

I think at this point I just want to make the new features list a bit longer, ehh still I’ll mention it. The sidebar background is red, the nav background gold – colors ring a bell. No they don’t— they are abstract assignments of names to visual interpretations of physical objects transmitted through electromagnetic waves. But they are commonly associated with a place that rings bells, namely a high school, namely your high school.

Behind the Scene Features

Ajax loading, Grid systems, Navigation Bar are all implemented as jQuery plugins.

Moving away from Coffeescript

Coffeescript, you were always a cool idea. It’s just, well you know, es6. I understand we’ve been together for a long time, but es6 just offers me something new that you can’t. I know you’re similar, that’s part of the reason I like you both, and I know it’s cliche running off with the younger one, but I can’t help what I feel. It’s just so hard to understand what you’re saying to me, and it’s not that you’re not popular, you are. But, well, you just don’t have what it takes anymore, I’m sorry.

Moving towards gulp

Since the dawn of time— Thursday, January 1, 1970— mankind has looked at his computer terminal and wondered, what if I could put all these commands into one? Well along came a bunch of operating systems and the digital revolution and along the way someone came up with tools like grunt, gulp and whatever else is there. So I decided to use gulp, because it’s easy. Now all you have to do to watch for and update changes is ‘gulp watch’ and to compile ‘gulp.’ Pretty cool huh?

New release implementation

Site downtime is under 20 seconds, not to shabby. How do you do this? I’ll tell you, it’s simple.

( Yeah the IP address is fake, security is an issue people )

ssh [email protected]
cd /var/www/html/wp-content/themes/snowproblem
sudo git pull
sudo gulp

And you’re done. It takes literally three commands to update the server. How cool is that?

Well, of course, to deploy to git you first must do the following; I assume you’re on dev.

git checkout master
git pull
git merge dev
git push origin master
git checkout dev

And then you’re done.

Note:
I understand that maybe only Jack and I will care about or understand that, but I like to have it here as a reference to actions.

jQuery Inview

We now have the jQuery inview plugin doing things. It’s a really simple plugin, no not mine, but it’s useful. Despite the measure to which I do so, I do not always intend to re-invent the wheel.

New content type

I’ve added breaking_news_ticker as a content type. One sees it simply as ‘Breaking News.’ This exposes some additional functionality, so we shall see what will occur with that, but my goal is to eventually have a parallax type with cool image effects.

Version 0.1-0.6