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

Category: week5

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)

Week 5, Day 1: Research and UX

posted Tuesday, July 12 2016 @ 7:53 pm EST

Going to try and keep this brief, as I haven't got a lot of time today.

Our Company: MetaFeed is our fictional company of the week. Their product will be an online data aggregator which pulls down data from a variety of social networking sites (Twitter, Facebook, Google+, etc.) to show all your important news in one convenient location.

Our Audience: Anybody using multiple social media sites will find this helpful, especially if they're using three or more.

Use Cases:
    • Catching up on a bunch of different social networking sites.
    • Keeping logins all together for easy access. (Password storage on client's browser.)
    • Sort and search aggregated content with ease.

Content Strategy:
    • Content pulls in data from various APIs.
    • Update the page live when new updates are found. (No need for user to to refresh.)
    • Passwords are handed directly from end-user to social networks, not stored by our server.
    • I want to do some more portfolio work with AngularJS, so I'll probably be using it here.

UI Spec:
This will be a lightweight one-page app.

• Top Navigation
    • Logo, product name
    • Username and logo for each signed-in social network.
    • Settings - just opens a modal.

• News
    • If no networks are logged in, show a basic message instructing user to do so in the settings.
    • Newsfeed, sorting options, search.
    • Label for network, who posted it, time posted.
    • The post content itself.
    • Reply from MetaFeed, or go to post on originating social network.

• Settings (modal)
    • List of all supported networks.
    • Click an entry in the list to log in.
    • OK / Cancel

Flowchart:

Flowchart

Wireframes:

Login message. Settings modal. News feed.

Tomorrow: mockups!

(Click to read more)