Introducing Syte, An open sourced personal site that has social integrations

http://rigoneri.com/post/24927306958

by rigoneri • 14 years ago

322 75 14 years ago

rigoneri.com

chriswesallen• 14 years ago

This is very cool

citricsquid• 14 years ago

The coolness is enhanced by the fantastic setup instructions and documentation. Excellent work rigoneri!

jtchang• 14 years ago

Thank you. I've been thinking about putting up a personal site for a while but never got around to it. I tend to be one of those "consumers of content" rather than producers (especially when it comes to blogposts). Hopefully this will change but this looks totally in line with what I am looking for!

damncabbage• 14 years ago

{"meta":{"status":200,"msg":"OK"},"response":{"blog":{"title":"rigoneri's blog","posts":11,"name":"rigoneri","url":"http:\/\/blog.rigoneri.com\/","updated":1339467147,"description":"","ask":false,"likes":0},"posts":[ ... ]}

How does Google take to this? As far as I can tell it has to evaluate the JS before it can crawl the site; I got a few seconds of "Loading..." after the page had finished loading while it was pulling in the JSON.

patrickaljord• 14 years ago

https://www.google.com/search?q=google+bot+is+chrome

edit: when I click on an external link and then click the back button, I get the JSON too even with chrome. This is bad.

intelekshual• 14 years ago

This is a known issue with Chrome. See: http://code.google.com/p/chromium/issues/detail?id=94369

The best way to circumvent the issue is to prevent the browser from caching the request (ex. cache busting via random querystring parameters), or to use different URLs for the HTML and JSON response (ex. appending '.json' to the end of the path).

willieavendano• 14 years ago

THANK YOU SO MUCH! I've been thinking about how to go about setting up my personal site, and this is a perfect combination of producing and consuming/aggregating from my other services. Definitely going to start playing around with this.

rurounijones• 14 years ago

JavaScript required to view the blog postings is a slight turn-off. What is the reasoning for it?

rigoneri8• 14 years ago

Good point. The reason was so I can swap from Django to Node easily if I wanted to without to much work and so the page can load faster on first request... I can probably change that eventually or just wait for a pull request :)

bawllz• 14 years ago

Woah thats a fantastic idea you have put together there. Well done sir!

lylejohnson• 14 years ago

The author's web site (http://rigoneri.com/) is cited as an example "Syte", but when I view that page on my iPad the right-hand side of the page is chopped off. Doesn't seem to be all that responsive (despite the author's claims).

jmathai• 14 years ago

It's at specific widths. I've seen other responsive sites behave like this and I presume it's just something with the media queries in the style sheet. If you continue to narrow your browser you'll see that it does respond correctly.

rigoneri8• 14 years ago

I fixed this issue just haven't pushed to rigoneri.com yet.. Thanks!!

shortformblog2• 14 years ago

Spotted a bug on this. If you go back or forward in your browser to a blog post, it just shows a bunch of JSON code. You have to reload to get the site to properly show.

patrickod• 14 years ago

Also noticed this bug and wanted to mention it in case it wasn't just myself.

ebzlo• 14 years ago

Noticed this as well. Throw this in your JS file somewhere:

$.ajaxSetup({ cache: false });

rigoneri8• 14 years ago

Great catch, I'll fix it... The reason is that it uses the same URL for a regular HTTP request and a XMLHttpRequest...

MichaelApproved• 14 years ago

Why did you build it that way instead of having a specific API path?

samrat• 14 years ago

Also, middle-clicking a link opens it in the same tab/window. Is that intentional?

DHowett• 14 years ago

I abhor things like this. Certain types of navigation completely override browser behaviour in this regard and it is somewhat maddening.

shadowfiend2• 14 years ago

That and command-clicking on Mac both need to be controlled for when capturing the click event for links for sure.

rcsorensen• 14 years ago

It's set up like that in https://github.com/rigoneri/syte/blob/21ed38790bbfab3e7a7321... .

Could be changed to only preventDefault/stopPropagation if it doesn't match one of the specially tagged links, or by setting up a different selector for the specially handled links.

aseemk• 14 years ago

Came here to mention this exact issue. (And related, e.g. cmd+clicking.)

Mislav wrote a great post on how to do this robustly: http://mislav.uniqpath.com/2011/03/click-hijack/

Hope that helps!

rigoneri8• 14 years ago

Issue fixed. Please let me know if you find any more issues, or create an issue in github. Thanks!!

shortformblog2• 14 years ago

Thanks for taking care of this! I like what you're doing with this. As a Tumblr-head, I think you should also consider adding follow, like and reblog functionality. The API also has functions for this.

But either way, I'll be keeping an eye on this!

est• 14 years ago

Anyone remember Friendfeed?

lancefisher• 14 years ago

This looks really cool, the world needs more stuff like this.

One minor complaint is with the scrollable slide-outs. When you scroll down through a slide-out like the Instagram one, and reach the bottom, the page behind starts scrolling.

This is a common problem, and why I dislike using scrollable areas on web pages in the first place. There must be a good way to fix this. I just don't want the outside area to scroll when my context is inside the small scrollable area.

dmragone• 14 years ago

Had the same issue. Would love to not have the outside area scroll if I'm trying to scroll the slide-out.

shadowfiend2• 14 years ago

Seems like one possible way would be to overflow: hidden the background scrollable area while a popover is open, assuming that doesn't screw up its scroll position. Big problem with that is that it makes scrollbars go away :/

emehrkay• 14 years ago

Good work. I was thinking of something along the lines of Diaspora, but on a smaller scale. You kinda nailed it.

pssdbt• 14 years ago

This is pretty cool, good work.

If you're a web developer+designer, it's probably not as useful, but for everyone else it rocks - and I hope to see people use/customize it to their liking. I love how it pulls so many services together. It seems like there's still some desire for some basic template for blogging after Dustin Curtis' last ordeal and now this, although it kind of seems like Twitter's Bootstrap has solved all of those basic problems for a lot of people.

martindale• 14 years ago

This is pretty cool, I've been wanting to build something almost identical to this using node.js. Inspiration, this is!

rigoneri8• 14 years ago

Maybe you should make a Node.js fork... I was thinking about doing one myself!

asselinpaul• 14 years ago

Wintersmith and Blacksmith are both Node alternatives.

troels2• 14 years ago

Clicking on twitter en the menu just takes me to the twitter account. I guess I'm missing something?

rigoneri8• 14 years ago

Due to the unexpected number of hits... Twitter is rate limiting the requests per hour... So instead of doing nothing it redirects to twitter...

troels2• 14 years ago

Aha .. smart default!

redslazer• 14 years ago

Thats really smart. Maybe edit that into the blog post for now, otherwise people are going to be confused and submit bug reports (like i was going to).

zerostar072• 14 years ago

I guess caching is in order

vu0tran• 14 years ago

Alright. I'll bite. I'll deploy it tomorrow and give it a whirl and see how it stands up :)

johanbrook• 14 years ago

Another site with responsive design and doesn't fix the sidebar with "position: fixed" in narrow viewports. Filed issue here: https://github.com/rigoneri/syte/issues/7

graue• 14 years ago

This is very, very cool. One request: would you consider making the color thing not part of the license but just a "polite request"? I understand where you're coming from and have no problem complying, but it's a little confusing and unclear what the legal implications of the rule might be. For example, what if someone forks it and changes the design, getting rid of the border around the pic entirely? I think your rule is very reasonable, but would be better enforced through the honor system, not the law. (Or edit it to make it clear it's not part of the license.)

Also, I personally found it surprising that a second click on one of the social links (e.g. Github) opens the full page on Github. I expected it to be a toggle where the second click would make the Github tab disappear. Not sure if that's just me, but maybe a separate "pull out" or "full window" icon you can click would be more intuitive.

rigoneri8• 14 years ago

Agreed! Will do! Thanks for the suggestion!

justindocanto• 14 years ago

I really wanted to hate this, but this is actually really well done. Great integration while making it feel native to the site. I love this.

JohannL• 14 years ago

Same here -- I'm not a fan of anything but self-hosting, but I LOVE the simplicity of this thing, it's very sexy. I just wish it would support OStatus, for example. There's depending on third parties, and there's depending on third parties :P But that's what open source is for, right?

pashamur• 14 years ago

Wow, this is totally awesome! I'm going to give it a whirl tomorrow. I just switched from Django to Ruby on Rails and fell in love with the framework, so maybe I'll try porting Syte to Rails someday.

f4stjack• 14 years ago

Hell, yes. This is one of the kickass ideas I've ever seen in a while. Simple, matter of fact and very usable. Thanks!

yaix• 14 years ago

The design has a problem on my eeepc, because I can only see half of the menu items on the left. I know that "position:fixed" is the "chic" thing to use currently, but still: don't. It almost always causes some problem.

Zikes• 14 years ago

I'm seeing the same thing on my 1366x768 display. I think screen height is often overlooked in responsive designs.

holic• 14 years ago

I love the idea, design, and choice of frameworks/libraries, but I have one beef: I really, really dislike sites that prevent me from clicking with my middle mouse button. I open almost all links in new tabs using my middle mouse button and, currently, I can't do this on Syte.

dain• 14 years ago

Horrible border around the image. And no mention of your inspiration? Come on man, you even use the same spelling type. We can't change the border? Seriously...that's ridiculous.

kalmsy• 14 years ago

Very good job. And props for setting it loose! Love the git integration :)

edwinyzh• 14 years ago

I really like the looking of it. And good to know is written in Python (Python is my choice for server-side development, so I customize it).

arihant• 14 years ago

I don't see the Contact and Fork Me on Github links on left when accessing from my Macbook. There should be a scrollbar.

fakhrazeyev• 14 years ago

What's different from posterous, Wordpress, tumblr, et al?

nichodges• 14 years ago

Brilliant. This is one of those things I've always had in the back of my mind but never got around to doing. Especially love the responsive design. However the slide out twitter/GitHub etc. don't scroll on the iPad.

zerostar072• 14 years ago

Very nice, but consider smaller screens. There is no way to scroll the left sidebar

rgrieselhuber• 14 years ago

The idea reminds me of Sweetcron, from a few years back.

ckluis• 14 years ago

This is ridiculously beautiful personal site them. My only complaint is that it requires a separate site for the posting of content.

If I was a talented dev, I think I would have potentially taken the Svbtle style wordpress backend and used wordpress as the blogging engine so the site and posts came from the same controlled source. A theme that integrates with Twitter, GitHub, Dribble as well as this one would do insanely well on Themeforest.

millerfung• 14 years ago

One more thing, when I am browsing your site on the iPad, the social integration is not working perfectly, e.g. Can't scroll your tweets..etc

nchlswu• 14 years ago

I love the concept.

Design-wise, I see a lot of things that remind me of svbtle (not trying to imply anything, just thought it was interesting)

dsmithn• 14 years ago

From the post, "Syte’s design is pretty simple and was inspired by the Svbtle Network."

jeremya• 14 years ago

As mentioned by others, syte currently requires javascript to view blog posts.

For my projects, I have a little trouble deciding when it is ok to require javascript be enabled. What is the general consensus? Is progressive enhancement no longer a concern? How do you start new web projects, with javascript added after basic functionality is established or with it at the core?

simonbrown• 14 years ago

When I click a link that goes to another page and then click back, my scroll position isn't preserved.

bhashkarsharma• 14 years ago

Thanks for building it :) I loved the part about having responsive design baked in and it being on top of django (since that's one framework I know the best). Myself have been thinking of building something similar for a while.

SkyMarshal3• 14 years ago

Very nice work. One suggestion: since it's obviously aimed at programmers, you should add programmer-oriented blog options besides Tumblr, especially the static blogs running from Github pages like Octopress, Jekyll, etc.

My prior blog was on Posterous, which was acquired by Twitter and all development work halted. It was truly a pain in the ass the get my blog posts and pictures out of it (they have an API, but no single API call get the entire blog in one tar/zip bundle, you have to script the whole thing).

Having experienced that I'll never use a 3rd party blog service again. I recently got everything back up and running in Octopress, and even if Tumblr or Blogspot embrace 'data liberation' and create an easy way to export your content, I don't care, it's just one thing I don't ever want to have to think about again.

Pretty sure I'm not the only programmer that feels that way, and who would otherwise love to use Syte but for its limitation to Tumblr.

adambyrtek• 14 years ago

Good point, but good support for RSS feeds would be more useful than trying to cover every possible blogging platform.

filmgirlcw• 14 years ago

Agreed -- support for an RSS feed would even let me use this with my Svbtle account and be my ultimate personal destination!

SkyMarshal3• 14 years ago

Even better, good call.

atestu• 14 years ago

Great idea and above all great execution.

One suggestion to improve the UX: rename "contact" to "email me", it's not obvious this tab will act differently than others and a lot of people don't use the email client installed on their computer.

Flam• 14 years ago

You know, this is one step towards creating the "next" facebook. Well done, keep it up.

Introducing Syte, An open sourced personal site that has social integrations

Related Stories