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

Category: frontend

Week 6, Days 3 - 5: Frontend

posted Wednesday, August 3 2016 @ 7:17 pm EST

It's actually been a week since my last post, but since several days were lost to job-search-related tasks and paperwork, I am hesitant to say more than three or four of that was actually working on this project. At any rate, this isn't going to be content-complete for a long while (because this kind of game takes a long time to write), but I'm happy to call it mostly-feature-complete and release the following in a demo capacity:

Live URL: http://adarkroad.byethost24.com/

Screenshots below. Not including the modals again, as those look almost entirely the same. Really though, screenshots can't do this kind of game justice. If you have 10 minutes, give it a try at the above link!

An unfolding game starts in the most minimal fashion possible. The long opening sets readers up to be surprised by expansion of scope. Simple name entry form. The office. Each button has been clicked once. Searching the crime scene. Second conversation with the client.

From the looks of it I'll be starting a new job pretty soon, so the "Website a Week" Challenge will be undergoing a re-brand as I switch from weekly projects to developing mostly on the weekends (when I have time). More about that in my next blog post, sometime tomorrow probably.

(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)

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 4: Front End

posted Friday, June 24 2016 @ 7:50 pm EST

There's still a few things left to do here, but finally the website is pretty much done. Nothing like feature creep to keep you working.

Live URL: http://sstilesphotography.com/

Key Features:
• Templates, plugins, and content managed via WordPress 4.5.3.
• Heavily customized theme built from the ground up in Bootstrap 2.3.2.
• Photo galleries:
    • Offload image hosting to Google Drive to reduce load on site.
    • Accommodate one large preview image.
    • Up to 7 smaller thumbnails at once.
    • Any number of additional images as well.
    • In "Project Gallery" mode, List View shows all images in gallery.
    • Click the large preview image to see modal popup with full image.
    • Click any other thumbnail to jump directly to that image.
• Social sharing toolbar supporting Twitter, Google+, and Facebook.
• Page embed integration with Sam's Facebook page.
• Custom plug-in to provide PHP contact form in Home view.
• For ease of use, Project galleries and Blog posts are created the same way
    • Just make a post in WordPress, write some text.
    • If it's for the Blog, that's it, just publish!
    • If it's a gallery, add images, a thumbnail, check 'project' category.
• Project list: attractive thumbnail view using 'featured image' from each post
• Blogs and galleries both have well-formatted comments sections supporting nested reply threads.
• Archive view, accessible from the sidebar, shows all the posts from a given month, both project galleries and blogs.
• Download view automatically pulls in a specified archive from Google Drive to provide downloads of commissioned works.
• Scheduled backups via Gmail run automatically three times a week.
    • Google Analytics for traffic monitoring.

What's left to do:
• Write usage guide for Sam.
• Set Sam up as an additional admin on the WordPress site.
• Associate Sam's domain name with the site.

//www.youtube.com/embed/cNp65uFfxK0?html5=1&autoplay=1&showinfo=0&modestbranding=1&rel=0 Home view. A list of Project galleries, shown as thumbnails. A project gallery. The list of blog posts, but there's only one here at present. A blog post. Archive view shows both galleries and blog posts. The download page.
(Click to read more)

Week 3, Day 5: Front End

posted Friday, June 17 2016 @ 7:12 pm EST

Everything should be just about nailed down now. See screenshots and video demo below.

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

Key features:
• Signup and login process.
• Modals on Home page for each insurance type.
• Modals on Quote page to add policies to account.
• Fix for page content horizontal shift resulting from modal's removal of the scrollbar.
• Account page data from XML for selected policies.
• In lieu of having an actual database, browser cookies are used for temporary account info and policies selections.

//www.youtube.com/embed/KK7keK_UIgo?html5=1&autoplay=1&showinfo=0&modestbranding=1&rel=0 Home view, top. Home view, with lightbox. Policy quotes view. Policy quotes view, with lightbox. Account management view.
(Click to read more)

Week 2, revisited: Polish

posted Wednesday, June 15 2016 @ 1:33 pm EST

Technically I'm supposed to be done with the Kūsō Neko Pāku site, but after getting some feedback from a friend, I wanted to go back and polish up the color scheme a little bit. I'm a lot happier with it now:

• Harsh whites softened.
• Use of accent colors made more consistent.


I'll still be doing the week 3 mockups today, but it's looking like this will be another late night.

(Click to read more)

Week 2, Day 6: Front End

posted Saturday, June 11 2016 @ 6:19 pm EST

Today is implementation day, so step one is to get the site running online somewhere. I want it to be its own little website, and not a sub-directory of my portfolio. Additionally, I'd rather not start adding a bunch of new apps to the Heroku account, because that might cause it to run out of Free Dyno hours and have everything go down near the end of the month. (It's not incredibly likely that will happen, but I'm not fond of the possibility existing.) Long story short, I need to find a totally separate web host for this.

My requirements:
• Free indefinitely, no subscriptions or anything like that.
• Stable and low maintenance.
• Raw HTML/CSS/JS, so that any content management system I may decide to add is strictly optional.
• Decent storage and bandwidth, but it doesn't need much.

After searching for a while, my best option overall appears to be NeoCities. In just a couple minutes of drag-and-drop upload, my mockup from yesterday is running no problem: http://nekopaku.neocities.org/

The following features have now been added, as well as a plethora of other small functions I wouldn't be able to list off the top of my head..

Key features:
• galleries for each cat
    • images offloaded to Google Drive to keep NeoCities bandwidth use down
    • load cat image URLs and info from a directory of XML files
    • pictures can be flipped through using thumbnails
    • support for embedding video from YouTube
    • links internally to 'Reservations'
• pull news posts from a directory of XML files
• functioning calendar page for reservations
    • info popup for each date
    • lists "cats available" and hours

//www.youtube.com/embed/5JONKljgfPI?html5=1&autoplay=1&showinfo=0&modestbranding=1&rel=0

(Click to read more)