Web Development - WAYWO - #8

[Silentfood]

I've been working on my video hosting project site. It's taught me a lot on how to work with ffmpeg to create thumbnails and basic user management and rewards.

[url]http://nlan.org/video/[/url]

[TerabyteS_]

I love the stuff I do when I'm tired.

I just wrote [URL="https://github.com/gabrielecirulli/hn-special/blob/master/visual_theme.js#L121-145"]this code[/URL]:

// Make sure each stray piece (stuff that is not in a paragraph) gets grouped in paragraphs
var stops = ["p", "pre"]; // Elements that should not be joined in the same paragraph
var current = elem.childNodes[0]; // Start from the first node
while (current) {
  if (stops.indexOf(current.nodeName.toLowerCase()) !== -1) { // Jump to the next stray node
    current = current.nextSibling;
    continue;
  }

  var group = [current]; // Elements to be grouped in the same paragraph
  var sibling = current.nextSibling;

  while (sibling && stops.indexOf(sibling.nodeName.toLowerCase()) === -1) {
    group.push(sibling);
    sibling = sibling.nextSibling;
  }

  var paragraph = _.createElement("p");
  elem.insertBefore(paragraph, current); 
  group.forEach(function (element) {
    paragraph.appendChild(element);
  });

  current = paragraph;
}

The HTML code of comments on Hacker News is messed up. The first paragraph of a comment is never wrapped in a <p> tag, and for some reason HN likes to wrap <font> tags around a few paragraph of the comment.

The code I posted is the third or fourth rewrite of a piece of logic that I wrote at the start, which has been rewritten multiple times to account for more cases. The code tries to address the case of stray pieces of text (elements that aren't paragraphs or code blocks and aren't wrapped in their own paragraph). The latest rewrite was triggered by the fact that I discovered that not only the first paragraph is never wrapped in a <p> but also other elements throughout the comment, seemingly almost at random.

I was extremely tired (and still am) when I wrote the code. I wrote it in 5 minutes and saw it was working great, and the code seemed nice and elegant, too.
Then I went back to the editor and stared at the code for more than a minute thinking "how the fuck does this work?". I literally had no idea how the code I wrote worked and had to explain the code to myself line by line. My brain is fucked up :v:

[andersonmat]

[QUOTE=KaLam1ty;41558209]Started working on a new version of a website and would love some CnC
on the current mockup.

It's still very WIP and the bottom half needs a lot of work, but I'd appreciate it
if you guys could inspire me a bit.

Also, anyone else have problems with photoshop aliasing font-icons? It's driving me nuts.[/QUOTE]

The type is [i]soooooooo[/i] small.

That and the gray-on-blue text doesn't strike my fancy in the bottom portion.

[Shadow801]

[QUOTE=KaLam1ty;41558209]Started working on a new version of a website and would love some CnC
on the current mockup.

It's still very WIP and the bottom half needs a lot of work, but I'd appreciate it
if you guys could inspire me a bit.

-image-

Also, anyone else have problems with photoshop aliasing font-icons? It's driving me nuts.[/QUOTE]

I'm of the opinion that body text in this day and age should be no less than 16px.

[TerabyteS_]

There, I just posted my extension to Hacker News: [url]https://news.ycombinator.com/item?id=6089782[/url]

I hope it goes well.

[Shadow801]

[QUOTE=Shadow801;41564351]I'm of the opinion that body text in this day and age should be no less than 16px.[/QUOTE]

Andersonmat, care to explain your reasons for disagreeing?

[andersonmat]

[QUOTE=Shadow801;41565371]andersonmat, care to explain your reasons for disagreeing?[/QUOTE]

Sure!

I think it is largely contextual. For example, in a web application that I am developing for my company, it makes sense that we wouldn't use large type because it takes away from other content that we are displaying. When you have a page full of analytics displayed in a variety of formats (graphs, tables, charts) you don't necessarily need large type.

However, if we are talking about something that is mainly text based (like a blog), then by all means, follow every single suggestion you can to make it readable (max width, appropriate line height, larger type).

[Epiclulz762]

[QUOTE=Epiclulz762;41533008][QUOTE][T]http://s2.postimg.org/6nq4m4dh5/frontpage.png[/T][/QUOTE]
Could someone tear this up or offer any suggestions?[/QUOTE]
Decided for a new approach with a new design, same client though.

[T]http://s24.postimg.org/866yhltwz/my_Company.png[/T]

Going to fill the top menu with some miscellaneous/other pages.

[TerabyteS_]

Woah, got front page on Hacker News! [url]https://news.ycombinator.com/item?id=6089782[/url]

[Shadow801]

[QUOTE=andersonmat;41565524]Sure!

I think it is largely contextual. For example, in a web application that I am developing for my company, it makes sense that we wouldn't use large type because it takes away from other content that we are displaying. When you have a page full of analytics displayed in a variety of formats (graphs, tables, charts) you don't necessarily need large type.

However, if we are talking about something that is mainly text based (like a blog), then by all means, follow every single suggestion you can to make it readable (max width, appropriate line height, larger type).[/QUOTE]

Well of course, if you're going to be doing compact data (which, I would still avoid using small type as much as you can) then use a smaller font size, like 14px. Although what I mentioned in my post was body text, which should be at least 16px.

There is the alternative of using EMs and scaling your font size between device, but I actually believe it not only looks far better but reads far better to have bigger type on the desktop as well.

[andersonmat]

[QUOTE=Shadow801;41565908]Well of course, if you're going to be doing compact data (which, I would still avoid using small type as much as you can) then use a smaller font size, like 14px. Although what I mentioned in my post was body text, which should be at least 16px. [/QUOTE]

Yes, I wouldn't recommend going below 14px because you're reaching eye-strain territory.

[QUOTE=Shadow801;41565908]
There is the alternative of using EMs and scaling your font size between device, but I actually believe it not only looks far better but reads far better to have bigger type on the desktop as well.
[/QUOTE]

Yes, but likely hard to perfect.

[Killervalon]

[QUOTE=Giraffen93;41549162]Some guy who made [url=http://dampe.net/frankerz/]http://dampe.net[/url] stole my website design from [url]http://dongers.net[/url]

time for payback[/QUOTE]

[IMG]http://i.imgur.com/sQpPmad.png[/IMG]
?

[KmartSqrl]

[QUOTE=Shadow801;41565371]Andersonmat, care to explain your reasons for disagreeing?[/QUOTE]

I disagree with this as well, 16px can look a little clunky a lot of the time.

[Cronos]

I have this casual website that doesn't deserve its own thread

[URL]http://cronosdage.x10.mx/[/URL]

Please give any feedback or ideas that don't mention the amateur autoplaying music which will be removed in the future as well as the immense amount of copyrighted images and useless imagelinks

[Contend]

[QUOTE=TerabyteS_;41565588]Woah, got front page on Hacker News! [url]https://news.ycombinator.com/item?id=6089782[/url][/QUOTE]

I recognized your name on HackerNews and thought I'd seen you on FP before. Cool stuff. Once you hit the front page, you'll usually stay there for a few hours. I had a post that was #1 on HN for about 2 hours and I got 45,000 hits that day. Keep checking google analytics.

[TerabyteS_]

[QUOTE=atl101;41567426]I recognized your name on HackerNews and thought I'd seen you on FP before. Cool stuff. Once you hit the front page, you'll usually stay there for a few hours. I had a post that was #1 on HN for about 2 hours and I got 45,000 hits that day. Keep checking google analytics.[/QUOTE]

Sadly it got off the front page in about an hour, but it was a good run nonetheless.

[editline]23rd July 2013[/editline]

800 people have installed the extension, give or take.

[Flashcat]

[QUOTE=TerabyteS_;41567569]Sadly it got off the front page in about an hour, but it was a good run nonetheless.

[editline]23rd July 2013[/editline]

800 people have installed the extension, give or take.[/QUOTE]

You're still on the frontpage for me, #29.

All the way at the bottom though.

[Contend]

[QUOTE=TerabyteS_;41567569]Sadly it got off the front page in about an hour, but it was a good run nonetheless.
[editline]23rd July 2013[/editline]
800 people have installed the extension, give or take.[/QUOTE]

Ah, well congrats either way

[KmartSqrl]

HOLY SHIT: [url]http://macaw.co/[/url]

Yes, it's a WYSIWYG web design tool that looks like it actually generates code I would use in a real project. Can't wait to try this out, check out the preview video: [url]http://macaw.co/peek[/url] (that page links to sample code as well)

I've always thought the design->HTML/CSS step could be automated a lot better than it has been and it looks like someone might be finally pulling it off.

[Cronos]

holy shit I almost destroyed my entire website using one line of iframe code

[QUOTE=KmartSqrl;41567676]HOLY SHIT: [URL]http://macaw.co/[/URL]

Yes, it's a WYSIWYG web design tool that looks like it actually generates code I would use in a real project. Can't wait to try this out, check out the preview video: [URL]http://macaw.co/peek[/URL] (that page links to sample code as well)

I've always thought the design->HTML/CSS step could be automated a lot better than it has been and it looks like someone might be finally pulling it off.[/QUOTE]

For those who felt down about the App Store only part...

"windows version is already in the works, but we'll be launching on mac"

[URL]https://twitter.com/macawco/status/359711727195140096[/URL]

[Flashcat]

[QUOTE=KmartSqrl;41567676]HOLY SHIT: [url]http://macaw.co/[/url]

Yes, it's a WYSIWYG web design tool that looks like it actually generates code I would use in a real project. Can't wait to try this out, check out the preview video: [url]http://macaw.co/peek[/url] (that page links to sample code as well)

I've always thought the design->HTML/CSS step could be automated a lot better than it has been and it looks like someone might be finally pulling it off.[/QUOTE]

Wow are you serious I've been looking for something like this seeing as I'm more into the design of a website rather than the actual coding. Thanks!

When I asked my webdesign teacher for a program that could help me with this, she just referred me to Dreamweaver's Design view. Needless to say I just walked away.

[KmartSqrl]

I'm not going to trust it until I can actually play with it, but it looks good so far. I love design and I love development, but I fucking hate doing the initial HTML/CSS grunt work stuff.

[TerabyteS_]

[IMG]http://pictures.gabrielecirulli.com/Hacker_News-20130723-204617.png[/IMG]

I think I need some sleep.

[Flashcat]

[QUOTE=KmartSqrl;41568211]I'm not going to trust it until I can actually play with it, but it looks good so far. I love design and I love development, but I fucking hate doing the initial HTML/CSS grunt work stuff.[/QUOTE]

The features in the preview are very promising though. Is there an estimated release date already?

[KmartSqrl]

Sadly, not yet.

[TerabyteS_]

Aaaaand I just switched a git branch and I lost an entire afternoon's worth of work. Great.

[KmartSqrl]

[QUOTE=TerabyteS_;41569058]Aaaaand I just switched a git branch and I lost an entire afternoon's worth of work. Great.[/QUOTE]

Commit as granularly as you can!

[TerabyteS_]

[QUOTE=KmartSqrl;41569063]Commit as granularly as you can![/QUOTE]

I usually do, though sometimes I prefer to commit all the stuff in small bits when I'm done.

[Giraffen93]

Is the best way of getting an absolute sized element [I]larger than the screen[/I] to position itself at the center of the screen with position:absolute?
Seems kinda hacky.

[TerabyteS_]

I now have settings that can depend on each other, on a chain of settings or on multiple settings.

[vid]http://pictures.gabrielecirulli.com/v/settings.webm[/vid]