« first day (602 days earlier)      last day (3186 days later) » 

5:00 PM
Thanks. :)
 
Good talk from Bret Victor, as always
 
posted on December 23, 2014 by kbironneau

/* by LedSeb */

 
5:21 PM
@mikedidthis sup! it's xmas and i (nohomo) <3 u. will you stay? :P
 
@Mario I am drunk, so sure.
@Mario also happy xmas! :D
 
lol
also to you and your kids. bet they can't wait for presents :D
 
arent you guys a day early?
 
yeah, the energy they have is... trying.
 
@cimmanon the wait for presents starts since november i guess
 
5:25 PM
november sounds a bit late to be wishing for christmas when youre a kid :p
try more like... august
 
it can easily be :D
today i met about 20 family members i didn't even remember. i hate xmas
 
i have a solution to that problem: move to another country
 
i moved 900km away from my family
it worked
but at least once every two years i'm forced to come here for xmas
dammit. :P
@cimmanon ever watched the sopranos?
9 hours ago, by Mario
@Mr.Alien i asked my mother some months before to send me some "my home land" hot peppers. i think she shipped me like 10kg of them. i should have predicted that. now she just asked me if i will need more
@rlemon pong
 
hey guys I have a question, that may lead to a debate, but I'm looking to get good advice from you guys.
 
> Don't ask to ask, just ask, and ask once!
 
5:38 PM
say you decided to work on a personal project: this website will be clean, responsive, (all of that good stuff), and will be unique in the way the site is structured. For a, for example, for a website that is complex, is it better to use jquery / javascript to achieve everything I would like to do, or is it worth the trouble and the struggle to achieve everything through CSS3 but be a learning experience
 
@Mario nope. dont watch much tv
@kenhimself if what you want can be solved via css, then it is going to be faster than javascript. vanilla javascript is going to perform faster than jquery
 
As far as I know jquery / javascript / or any js for that matter slows down performance, but having the advantage of achieving crazy functions, but CSS3 is faster, allows developers to explore more platforms, but incredibly complex and occasionally complicated.
 
why do you think css is more complicated?
if you want responsive, doing it all in css is going to be better for the user than trying to use javascript. with js, you will have to recalculate everything if the user adjusts the size of their viewport or rotates their device
 
in some cases js is faster than css animations
 
well personally, CSS has been really difficult for me lately. It just seems like i've been spending hours and hours achieving functions that seems to easy to do. Lets say you want to build a function where when you hover over a text, it swaps it with a different text, or when you click a button, it lowers the opacity for specified elements, regardless of their location. in javascript (if I'm correct), you just have to look at their page that lists all the commands and apply..
.. it to the class / tags
but in css it seems like it takes forever to achieve those kind of things.
because there are so many ways of doing it
 
5:47 PM
@kenhimself that's because CSS is not meant to do those things.
 
behavior belongs to js, appearance belongs to css
 
but CSS3 is great for responsive design and compatibility
 
CSS is a UI language, not a logic one.
 
ah I see
 
The best way to achieve the first is with JavaScript, the latter is to use JavaScript to apply appropriate HTML class names to the elements you want, and have CSS work on those class names.
 
5:48 PM
but seeing all the cool stuff that's coming out of CSS3, it seems like it's beginning to have, well, stuff that can make behaviors possible. I mean, not the super complex ones, but enough to get a point across
oh I see @SecondRikudo
hmm...
 
posted on December 23, 2014 by Chris Coyier

If you need to position a background-image in CSS 20px from the left and 10px from the top, that's easy. You can do background-position: 20px 10px;. But what if you wanted to position it 20px from the right and 10px from the bottom? Let's also assume we don't know the exact width and height of the element, which is likely, because fluid layouts and dynamic content. If we did, we could just do

 
so tell me, how do you go by finding the right Javascript files to use for your websites? is it okay to store multiple files in your js folder? do you go through the script yourselves and put them all in a single .js document? do you stick with using jquery?
 
@kenhimself You use a library when you need one.
I (and many others) have a build step where you take all of the JavaScript files and squish them into one file
 
like, solving one problem through javascript / css is not a big deal, but once 1 feature turns into 10 other features, things get really overwhelmning
 
Because one file is cheaper to transfer over HTTP
 
5:52 PM
oh woah
crap..
wow, coding is hard haha
 
Not really :)
 
@kenhimself can you tell us about your experience? If I am not being rude.
 
it's so strange. because its not so bad to think about functions, ideas, and behaviors theoretically, but once I begin tapping away and write some code, I frequently think "crap. well this doesn't work at all"
 
@kenhimself Have you tried coding a project?
 
5:54 PM
i have
 
Like an actual thing, and not just a theoretical sandbox kind of stuff.
 
I mean, i built my portfolio site
from scratch and all
 
Link?
 
but even that was so difficult.
 
@mikedidthis still waiting for your theme for my blog!
 
5:55 PM
sorry the links are messed up.
I mean, the website is super super basic. but it took me forever to code it
and i think really the issue here is that I dont know how to THINK like a developer.
 
@SecondRikudo working on it: i.imgur.com/bdKJMpt.png
 
@kenhimself That comes with experience.
@mikedidthis STAHP giving me teasers and give me ze theme! :P
 
yeah..
but I do enjoy it though.
its a very frustrating enjoyable experience.
 
@kenhimself That's good
 
@SecondRikudo I will, I am hoping to start coding this evening :D
 
5:58 PM
@kenhimself if you ever have code that works where you would like a second opinion on, you can try posting it on CR (codereview.stackexchange.com)
 
but it's just really difficult to have to sit down for hours on end trying to solve one problem
 
@kenhimself Well, on most cases, Google is your friend
On other cases, we are your friends
 
haha
I can't top that
 
5:59 PM
bows
Alright, shower time
 
Google is a good friend when it comes to finding stuff, but its also the kind of friend that excessively the word "BUT" while proving 500 ways to solve the problem
and based on my "google it" experience, it's been really helpful but really unhelpful at the same time.
 
@kenhimself welcome to coding. As a designer, that was the hardest thing to learn. There is no one way to do something.
 
exactly
 
@kenhimself I found that sticking in chat rooms and answering questions (yes, answering) on Stack Overflow is the best way to become a better coder.
 
and that is just really hard to deal with
totally. I gotta say, the stackoverflow community is really amazing
but I also dont want to be that annoying guy who keeps asking questions that literally make developers sigh... or am I over analyzing this
 
6:02 PM
CR is a pretty good resource, too. i follow the css tag, but there is usually a lot of overlap with html and javascript. so its interesting for me to see the answers that focus on the js part.
 
@kenhimself Oh don't worry about that.
Whatever you throw at us, we've seen worse.
Guaranteed.
 
thanks @SecondRikudo it's good to know that
 
@cimmanon Code Review is the most amazing community I've seen on Stack Exchange.
 
I bet!
 
It's filled with helpful people who vote a lot and edit a lot and constructively.
(Sorry for the triple ping XD)
 
6:04 PM
which brings me to a question for you guys: what is the best way to code a function that swaps text (fade in/out) upon hoverover?
 
@kenhimself there isn't one.
 
I'm asking the wrong question: is it better do use javascript or css3 for that?
 
depends on your knowledge, browser support etc.
 
if so, which commands / scripts should I use?
 
I will make this easier. Use CSS3.
 
6:07 PM
so I've been actually working on solving this problem for a day noe
and I think I'm pretty close, but I'm not sure if I've coded it right
mind if you guys take a look?
(please dont laugh :)
 
it can also depend on what other techniques are used on the page :p
 
well
this is more like a... nav
 
http://www.commitstrip.com/en/2014/12/23/6-bad-christmas-gift-ideas-for-coders/?utm_source=rss&utm_medium=rss&utm_campaign=6-bad-christmas-gift-ideas-for-coders
CommitStrip - Blog relating the daily life of web agencies developers
6 bad christmas gift ideas for coders
CommitStrip
1419357798
 
so there is a project title on the top left corner. when a person hovers over the text, information text fades in while the project title fades out. when the cursor hovers out, it goes fades back to the project title.
so the sequence goes like: Find 'A' -> hover over 'A' -> 'A' fades out, 'B' fades in -> hovers out of 'B' -> 'B' fades out, 'A' fades back in.
both 'A' and 'B' have the same position, treatment, etc.
 
@Feeds A iPhone
 
6:12 PM
the only difference is that 'B' width is 100%, and 'A' width is the width of the text.
so, pretty simple idea right? but when I attempted to code it, it was a nightmare, and I still haven't figured it out.
jsfiddle.net/kenhimself/vw87gj00/5 Thats the jsfiddle i've been working on, and i've managed to get the basic stuff done, but for some reason I can't get the project title's width to be just the width of the text. It's a big problem because if a person hovers over the blue area, the hover-over effect gets triggered.
solving it using display was easy, but because there is no way to apply fade transitions to those, I decided to use opacity as a method to hide and show divs upon hover-over
am I doing this right?
@cimmanon
 
hmm? busy right now :p
 
ah okay
 
@kenhimself yes opacity is usually what people recommend for fade-in/fade-out transitions
since display and visibility properties can only hold yes/no values
 
@TylerH how can div A swap with div B upon hovering over A?
 
not a fan of the markup. div and span doesnt mean anything, but it clearly looks like you have content that should use tags with semantic meaning (h1, p, etc.)
 
6:21 PM
....crap
are you talking about how the title should be h1, and the info be p?
 
@kenhimself yep, any time you have a title, you should probably be using more semantic (meaningful) elements
 
ah okay
updating now
 
a dl might be an appropriate choice, too
hm. i think returning * on this query was a bad idea ><
 
by the way, a span is an "inline" element and a p is a "block" element. I tend to use p when dealing with text that will take up multiple lines
@cimmanon returning * on a query is usually a bad idea :-P
 
6:23 PM
well i am using it for debugging purposes ><
 
ohhhhhhhhh
i didnt know that about span and p
I'm going to write that down haha
sorry, dumb question: whats the difference between inline and block, and how is that relevant with what I'm trying to achieve
like I know block maintains the elements dimensions
 
@kenhimself also some elements have built-in margins, like p
 
really?
 
so you have to account for those
 
interesting
 
6:27 PM
p and especially ul gave me headaches when I was first learning
 
so i should then set it as margin:0; padding:0;
should I avoid ul?
 
@kenhimself Well, if I were you I would play around with them first
 
or tables for that matter?
 
then you can decide how you want to approach it
 
wtf at some of the offensive flags i get asked to review. someone flagged "ketchup on pizza is nice" from another room >.>
 
6:28 PM
@kenhimself There are no elements* that should be "avoided". You simply need to use the right element for the job.
* deprecated elements should be avoided
 
oh I see
 
@cimmanon brb flagging all your benign posts in here :-)
 
!!ead
 
!!tell TylerH ead
 
@TylerH Eat a Dickâ„¢
 
6:32 PM
@kenhimself This site should become one of your best friend developer.mozilla.org/en-US/docs/Web
 
@TylerH And devdocs.io your best friend
 
@SecondRikudo yes as a reference that's true, but MDN is a bit more hand-holdy
which is useful for when you don't know something vs forgot what something's called
 
@TylerH They scrape MDN and a crapload of other sources :P
 
also, it is right to structure the html like this:
<section class="text"> (text section)
<h1 class="title">
text that will swap with info when hovered.
</h1>
<p class="info">
text that will replace title until hoverout.
</p>
<section>
 
It's the PHP manual + MDN + Underscore man + Git man + Socket.io man + whatever all in one
 
6:33 PM
19 messages moved to Trash can
 
sweet. i have been invited to join the trash can
 
Go can!
 
also, sections and article tags: when is a good time to use them?
mainly for heavy content, yeah?
 
article is for content that makes sense on its own. like, you could copy/paste it somewhere else
 
what do you mean by copy/paste it somewhere else?
 
6:36 PM
i really like these guys for describing the html5 elements: html5doctor.com
 
ooo! thanks @cimmanon !
 
@kenhimself web dev is a lot of reading, reading, testing, more reading, more testing, etc.
 
yeah...
 
specifically reading
 
but I definitely want to do it right
it's fun!
 
6:37 PM
don't lose that :-)
 
and when things work (finally) I get really stoked
like, overly
such a good feeling
(noob talk)
 
I want to be at a point where I can 1) properly think like a developer and 2) understand enough about HTML 5 and CSS3 has to offer so that I can write really simple and beautiful scripts.
 
hm. this query is taking a really long time. who wants to take bets on the percentage of my table that gets deleted! :p
 
lol
 
6:40 PM
@kenhimself first step: don't call it html5 and css3, just use html and css :)
also html ans css are not scripts
 
i hate that css3 isnt a tag synonym on SO/CR :-(
 
like the other day I found this awesome website, and when I looked at the scripts this person wrote, it was so beautiful. I don't know much about coding, but it was so clear and simple to the point where I began to connect the dots. it's really cheesy, but it was like looking at a haiku
 
@cimmanon I agree with the decision. Some things aren't possible with older versions of CSS
 
@zach
yes sir.
haha
also @ZachSaucier i saw that ira glass video! sooooo gooooood!!
I really want his ringtone that was on some show.
 
codepen.io lets you look at all sorts of smallish experiments written by others
 
6:42 PM
oh yeah codepen is cool @cimmanon
 
most are bad though :P
 
reminds me of www.openprocessing.org
(look a processing class so I was on that site uploading stuff)
 
@ZachSaucier most people that care about their pens will usually give them tags
 
so those tend not to suck as bad as the others
 
6:45 PM
but hey, we all start that way... unless you're a genius cyborg who knows everything about code
@cimmanon -- in html5doctor, what do they mean by "forms"?
 
the form element?
 
@kenhimself click on them and find out :-)
 
i did click on the listed attributes in the Forms and Forms2 category, but I dont really understand what it is
like, as a category, what does Forms and Forms2 mean?
I'm guessing it
I'm guessing it's more data-emphasised?
 
think of them as categories
 
oh okay
based on your guys opinon, is this structured correctly?
i used html5 doctor as a ref.
 
7:01 PM
are the images related to the text content?
 
like the project title and project information?
if so, no
 
ok, just checking
looks much better than before.
 
much better
@kenhimself btw, <body> tags are unneeded in JSFiddle
the whole HTML sandbox is encapsulated in <body> tags already
 
personally, i dont use h2-h6 much anymore. h1 all the way.
 
but lets say all the figcaption are invinsible. and when a person presses a button, all the figcaptions fade in. should that button be set inside a "nav", or should be inside the section class="image"?
oh interesting
 
7:05 PM
as long as you have just the 1 headline per sectioning element, h1 is all you need
 
ah I see
 
7:30 PM
markup looks good
 
7:54 PM
thanks! also, how can I get the figcaption in the middle of the image upon hoverover?
I'm having trouble...
 
Pinging @JonathanSampson if you're around
 
@cimmanon oh interesting, but should the 50% width make it worth?
*work
or does it need to be applied to a different command?
here I set multiple sizes
 
for centering horizontally?
 
and vertically
 
8:05 PM
well... you have to figure out a different way of resizing your images to get it horizontally centered
 
basically i'm looking to position the figcaption to be on top of the image, placed directly in the middle
 
though... i suppose you could do it by adjusting the right position...
 
hmm. I was thinking something like this:
figure= width:50%, (set the width)
img= width:100%; (100% within figure)
figcaption= width:100%; margin:0 auto; text-align: center; vertical-align:middle; (fig caption is set in the middle)
will that work @cimmanon ?
 
also, you should probably make sure your classes are spelled correctly. three-forth vs three-fourth :p
 
haha thanks! I'm a sleep deprived
*I'm a bit
 
8:11 PM
adjusting the figure width will also work, probably better than what i did
 
So, Web Components is the W3C's take on MVC methodology?
 
meaning applying the two-forth command to figure?
instead of figure img @cimmanon ?
 
yeah
 
ah okay
woah, I changed it but it just got really really big
does it need to be applied both to img and figure?
 
no, just 1 will do... but you need some other css to go with it: jsfiddle.net/stf00ajj/2
 
8:18 PM
ahhh yes, I see what you mean now
thanks!
 
bleh
editing a question and it gets deleted -_-
 
also, make sure you arent overqualifying your selectors. does it really matter that figure.one-forth is a descendant of section.image for styling purposes?
 
@TylerH Howdy.
 
@JonathanSampson o/ Any insight on the likelihood of <template> getting added to IE?
I ask because I'm reading about it and ShadowDOM and Web Components
 
@TylerH It's currently being considered, but it has a lot of proponents here inside :)
 
8:21 PM
I did notice you were the one to propose it :-)
 
@cimmanon now that you mention it, since I would like to use one-forth, for example, to use it for other elements like text boxes and figure sizes
 
Microsoft has a lot of proponents for a Web Component-style solution. In fact, back in 1999 (I think) we suggested something very similar to the W3C. It never caught on though. I guess it was before its time.
 
@cimmanon so if that were to be the case, how should the measuring classes be structured in a way that you can use it universally?
 
@JonathanSampson So far Web Components seem to be W3C's attempt at MVC
at least what I've read so far about <template> and ShadowDOM
 
@cimmanon like, <h1 class="one-forth">, <p class="three-forth">, <figure class="two-forth">
 
8:23 PM
Template is cool because it allows us to create inert elements that aren't touched. It's similar to what you get with <script type="text/template"> solutions, except it gives you a documentFragment IIRC.
 
@kenhimself well... i try to avoid classes like those since they dont really mean anything semantically.
 
@JonathanSampson yeah, ShadowRoot and ShadowHost
 
We're currently doing a bunch of house-cleaning on our DOM implementation right now, so that prevents us from making further decisions regarding other aspects of Shadow DOM.
 
gotcha
 
@cimmanon how do you mean? it is not a good idea to have one class that has a set width and use it on other tags?
 
8:25 PM
In fact, I came across a really bizarre DOM bug today that I had to file :)
 
make sure your approach to painting is clean too, so you can implement position: sticky and beat Chrome to the punch
 
Yeah, not sure I'm completely sold on position: sticky :)
 
Whaaaaaaaa
 
@kenhimself think of it this way: if your page is redesigned, will your class names still make sense?
 
/me ducks for cover!
 
8:25 PM
It's so awesome! Scroll a certain length and then it becomes absolute!
jsfiddle.net/TylerH/gv9ugaw9/1 <-- Open in Firefox
 
Yeah; I only say that because it's already a very easy thing to shim.
 
@cimmanon hmm, if you mean by measuring classes it would make sense becuase everything on the page is aligned within a column
 
Yeah, using JavaScript -_-
 
I would (personally) rather see the team work on things that are really hard for us to polyfill/shim.
Yeah, JavaScript all the things! :D
 
@JonathanSampson okay, well when you bring logic into the discussion... -_-
 
8:27 PM
@cimmanon like I like the idea of setting up a series of classes of different widths, and use it for all tags to maintain consistency
 
@kenhimself but what if your new design only has 2 columns instead of 3? or in a responsive design, it might be 1 for narrow viewports, 2 for medium viewports, or 3 for desktop sized viewports
 
@TylerH But then again, a lot of people thrash the window.onscroll event when they try to do it themselves. So, that may be a good reason to take the control out of their hands :)
 
@cimmanon I would structure it like this: large screen = two-forth: 50%, small screen = two-forth:100%
 
@JonathanSampson now we're talkin'
 
@TylerH Come and work for Microsoft, make it your first feature ;)
 
8:31 PM
@cimmanon that was the approach I used when I was designing my site: it is responsive, but I dont think it has reached its ful potential--but you can see it here kenwatanabe.info/works/pendulumswings.html
 
Some people undoubtedly just heard me say, "Come to the Dark Side..."
:)
 
@JonathanSampson hah, don't think I'm quite qualified there
 
...we have cookies.
 
sold
 
We'll probably have cake pretty soon too (not a lie) - Firefox has sent us cakes in the past for shipping major releases (we've returned the favor) :)
 
8:32 PM
I love that btw
anxious for the next IE release
 
It's rocking so far (remote.modern.ie). The crazy bug I came across today had already been fixed in the Windows 10 in-development IE. Nice when that happens.
I love that our preview is accessible from Mac OS X, iOS and Android too. That's freaking awesome.
 
also Shapes and Selectors Level 4 would be cool ;-)
slides plate of cookies over
 
o.O YUNOCOOKIE? We'll have some announcements soon regarding Level 4 work. Big news. Exciting news :)
 
\o/
 
Basically, we're shipping Level 12 hologram support and the <leia> element in conjunction with our new r2d2:// data protocol.
 
8:39 PM
wat
don't toy with my emotions!
Srsly though, browsers should totally ignore the W3C's recommendation on that one and implement the Complete profile
honestly implementing but not letting us use the :has() pseudo class is frankly a slap in the face
 
Wait, you're asking that IE ignore the standards? :)
 
They're only Recommendations :-)
You know, like they say in Pirates of the Caribbean
 
i dunno... is everyone else doing it?
 
The Code is more of what you'd call guidelines
@cimmanon I don't know if any browser has started implementing Selectors Level 4 yet
since it's still a draft
 
8:57 PM
@JonathanSampson Please don't say Yuno :X
!!google yuno gasai
 
@cimmanon it's so strange, even when I set the bottom two images to be 50% width, it isn't lined up next to each other. Should I apply margin:0 and padding:0 to a specific tag / class?
 
@kenhimself You can apply it to everything using * { margin: 0; padding: 0; }
Then only elements you manually apply margin/padding to later on will have it
 
9:12 PM
@TylerH hmm, I applied that but it didn't do anything noticeable
 
Your problem is whitespace
in your HTML
you can comment it out or delete the white space jsfiddle.net/TylerH/cv0jrj8t/1
 
oh yeah it works now! what part did you modify?
 
look at the markup
down at the bottom where the code for those two divs is
 
ah i see now
thanks!
 
np
 
9:50 PM
reading about the ShadowDOM makes me feel like when I was just learning about Dark Matter
 
10:42 PM
I thought the Shadow DOM was purely theoretical and remains to be actually proven?
 
11:07 PM
evening
 
im trying to rotate a polymer paper-icon with css3 but it just wont
im using this css
#goback:hover > #arrow {
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
}
is it because the icon is in the shadow dom?
nvm i got it
there was no transition on the transform so it would happen instantly
 
11:28 PM
ok now i actually dont know whats happening
i have a div that im using just for a background image
so that i can blur it on scroll
however after the page loads, the rest of the items in the div dissapear
my layout is div>(backgroundimgdiv + content)
when i change the css of the content div, it flashes in for a second and then dissapears
is this a jquery thing?
 
Dec 11 at 15:24, by rlemon
Attention people seeking help: If you have a question and you have code to go along with your question already, post that first. Don't make us ask for it please and thankyou. We are not mind readers and we do not know what you've accomplished so far. Help us help you! Pancakes.
 

« first day (602 days earlier)      last day (3186 days later) »