< Back
Weekend Web Development
Return to Top Top ▼ Newest First

Category: development

Week 6, Day 2: UI Development

posted Wednesday, July 27 2016 @ 6:01 am EST

Day two, here's where we are now:
• Separate layouts optimized for desktop and mobile.
• Fully responsive to all screen sizes. (Though I'll recommend 640px width.)
• Working modals for bottom navigation.


The full end-game UI on desktop. Mobile displays in two halves for readability. Mobile layout part two. 'About' modal. 'Save' modal. 'Share' modal. 'Restart' modal.

Tomorrow: continuing implementation.

(Click to read more)

Week 5: 'MetaFeed' Project Shelved

posted Friday, July 22 2016 @ 11:05 am EST

Long story short, I am putting this project indefinitely on-hold, and will revisit it sometime in the future only if Facebook decides to make their API worthwhile and usable again.

As frustrating as it is to admit after spending nearly two weeks on it, this project is going nowhere fast. It was supposed to be about learning more AngularJS and working with various site integrations, but what happened instead is the whole thing got hijacked by just how long it takes to do a properly implemented, best-practice, and fully "Angular way" Facebook API integration.

Even then, if you survive the odyssey and come out the other side with your product intact, the end-result isn't all that worth it. Facebook has discontinued actual support for full feed integration; all you can embed now is your own posts and content, not the full news feed or anything posted by your friends / liked pages.

This, I suspect, is why most of the "social network aggregators" on the market all-but-omit Facebook integration nowadays. It's just not worth the trouble. Most of the ones I've tried let you put in the name of one or more pages, but then all they do is give you a link to it on Facebook. They're not offering anything your browser's bookmarks list can't already do.

Next week: Entirely new AngularJS project planned, which should be a lot more fun to do and far more compelling as a portfolio demo.

(Click to read more)

Week 5, Day ???: Miscellaneous Delays

posted Sunday, July 17 2016 @ 7:23 pm EST

So, due to various circumstances and a whole lot of unforeseen delays (mostly concerning the time and complexity involved with creating a Facebook API integration from scratch in AngularJS), it's looking like this project definitely isn't going to be done tonight.

Rather than continuing to rush this, and consequently rushing the next project as well, I'm just going to give it another week and take the time to really do it right. As it stands now, this one is nowhere near where I want it to be.

Blog posts will probably be on hold until done, and I'll post the finished implementation whenever it's ready. I'll also have another updated calendar at that time. For organization's sake, I will continue to refer to this as the "week 5" project, even though it's of course spanning more than a week now.

(Click to read more)

Week 5, Day 2: UI Development

posted Wednesday, July 13 2016 @ 7:09 pm EST

Since I'm creating a social network feed, Bootstrap seems sensible. After all, it was originally developed at Twitter for exactly this sort of thing. That said, we need to do a little bit of extra setup to get it playing nicely with AngularJS.

To this end, I'll be using AngularStrap, which provides "a set of native directives that enables seamless integration of Bootstrap 3.0+ into AngularJS 1.2+".


This took a lot longer than I would have liked. First, I got caught up in playing with AngularStrap, which is fine because I need to know how to use it. Then I ended up sending close to an entire day on functionality that I decided not to use, which is less than ideal.

Mockups are done now at any rate:

Login message. Settings modal. News feed.

Next post: completed implementation, hopefully.

(Click to read more)

Freelance Project: Wisdom of Astrology

posted Tuesday, July 12 2016 @ 2:00 pm EST

This took quite a bit longer than I would have liked, and I didn't have time to add every little thing I wanted to, but overall I'm happy with how it came out. So, with permission from my client, here's a look at what I've been working on for the last couple days.

Live URL: http://www.cathypagano.com/

Key Features:
• Bolt CMS for content management.
• Theme built from scratch in Zurb Foundation.
• Imported all content from client's old website, overhauled layout.
    • 61 newsletter pages, which were brought over automatically using JSON, Selenium, and PHP myAdmin.
    • Custom interface uses Blogger API to pull down content from three different blogs.
    • Integration with PayPal for service charges and donations.
    • YouTube embeds (both single video and playlist).
• Filters for imported content:
    • Change all "Comic Sans MS" to significantly better "Comic Neue".
    • Enforce a minimum font size to correct unreadably small text.
    • Change broken links on images to nice Magnific links (where applicable) or otherwise remove them.

The homepage, with main navigation and sidebar. Astrology is the largest section on the site. One of the three Blogger blogs included, in list view. The books section is fairly straightforward. The Services page, with PayPal integration. The Astrology Videos page, with YouTube integration.

Later tonight: Week 5 research, spec, flowchart, and wireframes!

(Click to read more)

Week 4, Day 3: UI Development (cont.)

posted Thursday, June 23 2016 @ 7:37 pm EST

It took a long time, but things are starting to look a lot more complete now. The site is currently using placeholder images, as Sam only just recently got his photos over to me, but all the layouts are complete at this point.

Front page, contact form, sample gallery. List of project galleries. Gallery with placeholders. List of blog posts. Single blog post view. Multiple comments to demonstrate nesting. The archive view displays both projects and blogposts. Projects display their gallery thumbnail. Download page.

Next time: finished implementation!

(Click to read more)

Week 4, Day 2: UI Development

posted Tuesday, June 21 2016 @ 7:56 pm EST

I didn't get very far into implementing this mockup before hitting my first snag: Neocities does not support the uploading of PHP files for free accounts. This is a problem because most of WordPress consists of PHP files! As such, it was necessary to find a different hosting solution, which can be challenging because most free WordPress hosts won't let you use custom themes or layouts for free. I ended up settling on Byethost, which allows you to manually install WordPress, add custom themes, and even run a MySQL database, all for free.

The next sticking point was getting custom JQuery scripts set up with WordPress Enqueue, which would have taken much less time if I hadn't been missing a simple typo and pulling my hair out over every technical solution I could think of.

Overall, far less progress than I would have liked, but here's where we are:
• Set up hosting with Byethost, including FTP and MySQL.
• Installed WordPress 4.5.3
• Installed and began configuring a custom theme using Bootstrap 2.3.2.
• Got custom JQuery scripts working, after much trial and error.
• CSS fix for WordPress admin bar overlapping theme's top navigation.

Not going to bother with screenshots tonight, because the site currently just looks like any default Bootstrap demo. I'll be AFK for a large chunk of tomorrow, but I should hopefully have some time to work on this in the afternoon and evening. Next post will most likely be Thursday evening.

Next time: finished mockups!

(Click to read more)

Week 3, Day 4: UI Development (cont.)

posted Thursday, June 16 2016 @ 7:39 pm EST

Live URL: http://havinsurance.neocities.org/

As mentioned previously, this project uses Zurb Foundation 6 for its responsive layouts.

Home Layout

Quote Layout

Account Layout

Tomorrow: finished implementation!

(Click to read more)

Week 3, Day 3: UI Development

posted Wednesday, June 15 2016 @ 7:17 pm EST

Still working on this, got caught up in fussing with Equalize, so this has all taken much longer than I would have liked. Here's what I have so far:

Update: The home layout is mostly done now, but the other two will have to wait until later.

(Click to read more)

Week 2, Day 5: UI Development (cont.)

posted Friday, June 10 2016 @ 1:52 pm EST

More UI work today, it's looking like I'll be ready to finish implementation tomorrow as previously expected.

Cats Layout (new lightbox)

Now includes a section for the calendar. More responsive than before.

News Layout

Random article text for demonstration purposes.

Reservations Layout

This calendar will be replaced in implementation. Desktop lightbox. Mobile lightbox.

Tomorrow: finished implementation!

(Click to read more)