|
This might be a bit cheeky, but could someone tell me how the effect on the post images ("On the mountains", etc.) on this page was done? I can figure out the zoom and darken stuff myself, but what I can't is the way the image pans as you move the mouse around the post listing. Unless I'm underestimating css3, I'd imagine that's a js plugin, but I can't figure out from the source which one.
|
#
?
May 7, 2014 00:24
|
|
|
|
| # ? May 9, 2024 17:04 |
|
|
sharktamer posted:This might be a bit cheeky, but could someone tell me how the effect on the post images ("On the mountains", etc.) on this page was done? I can figure out the zoom and darken stuff myself, but what I can't is the way the image pans as you move the mouse around the post listing. Unless I'm underestimating css3, I'd imagine that's a js plugin, but I can't figure out from the source which one. I think they're using jquery.panr (along with every other goddamn plugin ever made).
|
|
#
?
May 7, 2014 01:25
|
|
|
There is JavaScript modifying the inline style with a matrix based transform. The script looks like jQuery NiceScroll plugin via the fact it includes a match on "matrix".
|
|
#
?
May 7, 2014 01:45
|
|
|
Oh god I've never appreciated the rise of stylistic minimalism more. I don't have a lovely computer by any means (quad core i7 laptop, 6gb dd3 memory) and even on chrome that website was just lagging as poo poo. Makes me appreciate having a really dodgy writing laptop at home that I can test my websites on to make sure they don't look fantastic on my $50000 blood-powered macbook and catch fire on anything less.
|
|
|
#
?
May 7, 2014 09:34
|
|
|
I'm super stuck on something that should be incredibly simple. http://jsfiddle.net/PhCVW/ This is a very watered down version of what I'm trying to do. The button should add some text to the body of the page. However, I get a console error that tells me I haven't defined mypopup(). What the heck am I doing wrong???
|
|
#
?
May 7, 2014 16:35
|
|
|
TacoHavoc posted:I'm super stuck on something that should be incredibly simple. You aren't doing this: http://jsfiddle.net/PhCVW/2/
|
|
#
?
May 7, 2014 16:48
|
|
|
Ah I see. That sure does work, and I'll do it like that going forward. Can you explain why mine didn't work? It seems to match examples I found online. I'm an embedded programmer trying to learn web stuff and some of it is very confusing to me.
|
|
#
?
May 7, 2014 17:56
|
|
|
TacoHavoc posted:Ah I see. That sure does work, and I'll do it like that going forward. Can you explain why mine didn't work? It seems to match examples I found online. Yours didn't work because of a JSFiddle setting. If you look over on the left sidebar, you'll see a pulldown set to 'onLoad'. Switch that to 'nowrap - in head' (or 'nowrap - in body') and it will work. If you have the onLoad or onDomready, I think is scopes your 'mypopup' variable to inside another function (I am not up on how JS Fiddle handles it's internals that way) so it's not globally accessible. If you see what I did here: http://jsfiddle.net/PhCVW/3/ you'll see that I set window.mypopup to be that function, causing it to be global, and it works even inside the 'onLoad' wrapper. That said, you want to do it the way I did it in my other post, namely because you should not put "onclick=" (or any other event handlers) in your HTML ever. Maybe for a quick test, but get in the habit of not doing it EVER. It ties your logic to your presentation, makes changes harder, separation of concerns. blah blah blah. 
|
|
#
?
May 7, 2014 18:27
|
|
|
Lumpy posted:You aren't doing this: Why is there a button() call in there?
|
|
#
?
May 7, 2014 18:32
|
|
|
KARMA! posted:Why is there a button() call in there? Because it turns it into a button with jQuery UI. E: A fancier button!
|
|
#
?
May 7, 2014 19:06
|
|
|
Kobayashi posted:I think they're using jquery.panr (along with every other goddamn plugin ever made). Thanks a lot. Yeah the theme is a bit of a mess, I just want that one bit though.
|
|
#
?
May 7, 2014 19:10
|
|
|
I'm looking into developing a microsite to list upcoming shows on the area ideally I'd like users to be able to bring up a list and filter by date, price, tags etc and add to the list using their Facebook account. Would a CMS be the best way to go about this if I only have some html and java script experience?
|
|
#
?
May 7, 2014 20:18
|
|
|
Thanks Lumpy, that makes a lot of sense. Appreciate the help.
|
|
#
?
May 7, 2014 21:40
|
|
|
KARMA! posted:Why is there a button() call in there? Because the original fiddle had it, so I left it in there. My guess it's some jQuery UI overkill replacement for CSS. TacoHavoc posted:Thanks Lumpy, that makes a lot of sense. Appreciate the help. Glad to help!
|
|
#
?
May 7, 2014 21:55
|
|
|
Is anyone here a whiz with d3, especially the force layout? (It looks like SA's search won't let me search for d3.) I have a graph with primarily two types of connections, which we can call "right" and "down" (in fact it's essentially a tree, but there are some special back-edges too, which we can ignore here). I want to constrain the force layout in the following way: * Each node is N pixels apart * Two nodes connected by a right-edge should have the same y position * Two nodes connected by a down-edge should have the same x position These constraints can be a little fluid/loose during dragging operations, but the important part is that the nodes settle into this kind of grid. It's easy enough to get the first constraint by setting linkDistance, but that doesn't constrain on an axis. I've tried various ways of iterating over the nodes and links in my tick method, but I can't seem to come up with something that doesn't require me to impose strict exact positioning to all the nodes. I still want to be more flexible than that: I don't care exactly what x/y position each node is at, as long as they fit those constraints. I also want to be able to insert/remove nodes and edges and have the graph fix itself automatically. Or am I really going to have to do a full BFS/DFS on my graph/tree and manually compute the x/y that way starting from the root? EDIT: I finally managed to this, pretty much how I thought I'd have to. Traversed the entire graph, computing the ideal position of each node as I went down, and stored that as a "settled" position in the node. In my tick function, I have d.x and d.y trend toward the settled position based on alpha, so they can still be dragged but then pop into place. Flobbster fucked around with this message at 15:36 on May 10, 2014 |
|
#
?
May 8, 2014 07:59
|
|
|
Has anyone seen a nice calendar that can handle a good bunch of events (3-6 per day) without looking like a giant mess? My company is in retail and we have education classes at all the different stores. We've got an iPad that they want a monthly view with events on each day. and I think there's just too much data to show.
|
|
#
?
May 9, 2014 15:52
|
|
|
I've been working on a simple paint program where all you can do is draw on a small canvas and clear it. It works fine in chrome but on IOS it gets slower and slower the longer I paint even after clearing. I'll post a jsfiddle when I have time but I wanted to know if anyone had any ideas off the top of their head. And yes, I do use beginPath which seems to be a common reason for performance issues.
|
|
#
?
May 11, 2014 17:15
|
|
|
Sudden Infant Def Syndrome posted:Has anyone seen a nice calendar that can handle a good bunch of events (3-6 per day) without looking like a giant mess? http://kylestetz.github.io/CLNDR/ Is what I use for my calendar needs. It’s super customizable, can make it look however you want, and really easy to dig into. Griffith86 fucked around with this message at 21:25 on May 11, 2014 |
|
#
?
May 11, 2014 21:22
|
|
|
Is there any way to force the "account chooser" with Google OpenID? I found this thread on SO with a solution for Google OAuth2 (which works great) but I couldn't get it to work for OpenID.
|
|
#
?
May 14, 2014 01:30
|
|
|
I'd like to start by saying I've never done any web development ever, and I need help knowing what would work with what I've got the best. I've been programming in C++, console based cin cout i/o. A bunch of generators and such for roleplaying games. Someone said I should port them to a website, using some language as a go between for the C++ code on the server, and the website itself. What programming language would be best for that? PHP? I have lots of C++ coding experience, but none for anything web based, so I'm lost here. I just need something that will look nice in a window that can use my C++ code serverside to print out stuff on the website. Thanks a ton for any help!
|
|
#
?
May 14, 2014 04:50
|
|
|
Ravendas posted:I'd like to start by saying I've never done any web development ever, and I need help knowing what would work with what I've got the best. Honestly, unless your C++ is a substantial amount of work - you may wish to discard it and port to a more suitable language. I can't think of a less suitable environment for the web outside of assembly. I'm not sure what the goto recommendation is here - but I always suggest Ruby (with Rails or Sinatra).
|
|
#
?
May 14, 2014 07:53
|
|
|
Ravendas posted:I'd like to start by saying I've never done any web development ever, and I need help knowing what would work with what I've got the best. Very easy to get off the ground here. Get started with Sinatra. Once that's working, here's a hilariously simple Sinatra app that might start you off (replace the example code in that readme with this code): Ruby code:Fiddle with stuff, see how far you get, and come on back.
|
|
#
?
May 14, 2014 09:03
|
|
|
Has anybody had to handle accented character-insertion using EN keyboards? I spent a few hours last night working with Mousetrap.js and jQuery to replicate Microsoft Word's hotkeys (e.g. ctrl + shift + ~ then a vowel for accent grave) and got it 90% working in Chrome except for the caret (^) accent for some bizarre reason. Then I tested it in Firefox and absolutely none of it worked, so I said gently caress it. It was already falling prey to the non-standardisation of keyboard key placement and combos for special characters, so it was already limited in that sense. Now I'm working on a simple graphical solution where you hit enter on a specific class of form input, it pops up an overlay that you toggle through by hitting the appropriate vowel key (i.e. hit 'e' a bunch of types to cycle through the different accented E's) and then hit enter again to select and insert it at your current position. Think similar to how phones do it nowadays, where you hold down the letter and it pops up the different accented options. But for obvious reasons that's still not perfect or elegant. I've seen other websites (university language quizzes for e.g.) just have an always-visible list of accents expected on that page and you have to click with the button to insert it at your current selection point. Which I think is ugly as hell and I don't want the user to require a mouse, and I don't want to clutter the UI until the user actually wants to insert an accented character. Has anybody encountered this before and come up with, or at least seen, an interesting solution? I'm a bit hesitant to lay claim to hotkey combos in case they conflict with the system or the browser, but in this use case the entire page is used only for inputting form data with a high rate of accents, so I'm not overly concerned. I just want everything to be doable with the keyboard, in an intuitive and clean fashion. Anybody got any ideas? Sulla Faex fucked around with this message at 09:49 on May 14, 2014 |
|
|
#
?
May 14, 2014 09:47
|
|
|
If the person having to input a lot of accented characters, wouldn't it be easier to just select a different input language in the os? Why do you need to implement this functionality in a browser?
|
|
#
?
May 14, 2014 12:24
|
|
|
KARMA! posted:If the person having to input a lot of accented characters, wouldn't it be easier to just select a different input language in the os? Why do you need to implement this functionality in a browser? Pretty much this. US-International is the layout you're looking for.
|
|
#
?
May 14, 2014 13:13
|
|
|
Can someone tell me what the deal is with ETags? I'd never heard of them until I used Yahoo Yslow on our site. Any Google results are either documentation for YSlow, or people like myself asking what the hell ETags are. The site I'm working on is Java based and I'm probably the worst person on our team to research this since I'm front-end.
|
|
#
?
May 14, 2014 13:42
|
|
KARMA! posted:If the person having to input a lot of accented characters, wouldn't it be easier to just select a different input language in the os? Why do you need to implement this functionality in a browser? I want to create this functionality for users who don't have it installed or can't install it (through group policy restrictions or rotating workspaces or whatever). Normally I'd say gently caress it, let them deal with it, but one of the core ideas behind this page is to streamline user interaction with the process, and saying "Okay just install this language pack and switch to that" is a bit frustrating. I'm just going with the simple popup widget that they'll be able to activate/deactivate as they want. I've got it working entirely now, the sole remaining obstacle is styling the loving jquery UI dialog box, which for some reason is just being unnecessarily annoying.
|
|
|
#
?
May 14, 2014 13:48
|
|
|
The Merkinman posted:Can someone tell me what the deal is with ETags? I'd never heard of them until I used Yahoo Yslow on our site. Any Google results are either documentation for YSlow, or people like myself asking what the hell ETags are. The site I'm working on is Java based and I'm probably the worst person on our team to research this since I'm front-end. You mean http://en.wikipedia.org/wiki/HTTP_ETag It basically allows you to get a unique hash for a resource(such as an html page). The server stores the latest etag for each resource. If the browser has visited a URL before it saves the response it got back in it's cache. When it makes an HTTP request, for the same url, the request includes that resource's etag. The server then checks the etag it got in the request with the current stored etag for that resource. If they match it sends a 304 response to the client and the browser uses the cached response it had received previously. It's basically a way to prevent sending the same html to the same browser more than once. Here's a blog post explaining etags as they interact with a Rails server. Mind you Rails generates ETags automatically, but I'm sure there must be Java libraries that can be plugged in for the same effect. Or your framework already does that.
|
|
#
?
May 14, 2014 14:07
|
|
|
Lexicon posted:Honestly, unless your C++ is a substantial amount of work - you may wish to discard it and port to a more suitable language. I can't think of a less suitable environment for the web outside of assembly. I've written a dozen console based programs, and have tens of thousands of lines of code I've been working on for a few years. Here's the dropbox of my exe's: https://www.dropbox.com/sh/ifeo68p5u7y2ils/AADaY3Wpy7lopN4SXivhjBZga They're made to run in windows. So yeah, I really need something that can use that code I've written. A guy online said it would be 'relatively easy' to do, but then disappeared before saying how to do it! Thanks Lexicon and Pokeyman, I'll be looking up Ruby and Sinatra and see how I could use it. Edit: pokeyman posted:
I haven't installed ruby/sinatra and such yet, but looking at this, that 'path/to/rpg' bit would literally be a path to the exe, like "c:/progrs/chargen.exe"? And if there's no args it takes, could I drop that part or what would I put there? I've been googling this for the past hour, and the best info so far is what you said and linked to. Ravendas fucked around with this message at 15:12 on May 14, 2014 |
|
#
?
May 14, 2014 14:30
|
|
|
Ravendas posted:I haven't installed ruby/sinatra and such yet, but looking at this, that 'path/to/rpg' bit would literally be a path to the exe, like "c:/progrs/chargen.exe"? And if there's no args it takes, could I drop that part or what would I put there? Right about the path. As for no arguments required, you can drop it down to this: Ruby code:I banged this together reading the Sinatra docs and the Ruby IO class docs, if you're curious about what else you can do.
|
|
#
?
May 14, 2014 16:15
|
|
|
Sulla-Marius 88 posted:I'm just going with the simple popup widget that they'll be able to activate/deactivate as they want. I've got it working entirely now, the sole remaining obstacle is styling the loving jquery UI dialog box, which for some reason is just being unnecessarily annoying. Glad you found a way, because the one time I tried adding in that kind of ui stuff it ended in tears.
|
|
#
?
May 14, 2014 17:23
|
|
|
We released our JS testing framework today. It honestly makes writing JS tests about 10x better, IME. http://facebook.github.io/jest/index.html
|
|
#
?
May 14, 2014 18:13
|
|
|
Sil posted:You mean http://en.wikipedia.org/wiki/HTTP_ETag It basically allows you to get a unique hash for a resource(such as an html page). The server stores the latest etag for each resource. If the browser has visited a URL before it saves the response it got back in it's cache. When it makes an HTTP request, for the same url, the request includes that resource's etag. The server then checks the etag it got in the request with the current stored etag for that resource. If they match it sends a 304 response to the client and the browser uses the cached response it had received previously. When are they good to use and when are they bad? For example, how come nytimes.com or news.google.com doesn't use them?
|
|
#
?
May 14, 2014 18:46
|
|
|
fletcher posted:When are they good to use and when are they bad? For example, how come nytimes.com or news.google.com doesn't use them? tldr: etag static content such as CSS and JS files that only changes rarely. Think about dynamic stuff the same way you analyze whether any caching strategy is worth doing(chance of hitting vs missing the cache, costs of serving cached vs uncached content, cost of maintaining the cache etc etc). The NYT home page seems to make some pretty poor decisions, at least as far as Chrome Pagespeed is telling me. Part of why they don't do browser caching might be because the front page changes a lot and their users don't visit it more than once between changes. Mind you I am not in any way an expert, see this google article for more advice. Here's some potential downsides to doing etags in a naive way. tldr2: if you tag your files by their last updated parameter, but have multiple servers that can serve that file, that parameter will vary depending on when the file was propagated to each server, though the file content is the same. Keep in mind you can md5 hash files and use that as your etag, but that takes more processing power. It might be the case that the cost of getting a hash key for their static files, for Google, is greater than the bandwidth it would save.
|
|
#
?
May 14, 2014 19:21
|
|
|
I use ETags extensively. I md5 hash the output, and store the etag in memcache. I then have a fast path check for the key in memcache, which returns a 304 if valid. I then handle cache invalidation of ETags the same way as content etc.
|
|
#
?
May 14, 2014 21:33
|
|
|
Is there any way to make dropzone use the whole page as a dropzone but still have it use an existing <form> on the page for submitting the data?
|
|
#
?
May 15, 2014 00:16
|
|
|
Speaking of dropzone, how do I get backbone to listen to its events? I've tried the normal way of specifying the element and the event but no luck. Is there any way to see which events get fired? Chrome has a monitor but you get drowned in the normal page events.
|
|
#
?
May 15, 2014 20:50
|
|
|
Cross-posted in Coupons forum: do any of you guys have a Google Apps Reseller account? I'm looking for a promo code - be happy to be your referral.
|
|
#
?
May 15, 2014 21:05
|
|
|
A friend and I were discussing the merits of using an SVG as a logo image on a personal project website. He argued that I should keep the SVG and use it to render PNGs of the logo when I need new ones in different sizes. Now, I completely respect his advice, and he is always leagues ahead of me with anything regarding graphics, but I like the SVG for the scalable part. I wanted the logo to be a single file that works on every (modern) device and not have to worry about rendering a new PNG when device resolutions rise or whatever. SVGs are supported on a variety of browsers, with only relatively old devices lacking support. I'm sure there are ways to have a backup PNG image for those devices that don't support SVG (which I plan to implement on the site in question eventually). And the size savings were completely negligible. The PNG rendered at 960x117 (IIRC) was something like 44.6kb while the SVG was only 42.4kb! I'm just curious what anybody else thinks about this since I get a tingling feeling that I'm wrong when I go against my friend's normally sage wisdom. Is there something I'm missing?
|
|
#
?
May 16, 2014 16:03
|
|
|
|
| # ? May 9, 2024 17:04 |
|
|
We're changing our (custom code, no framework PHP) web-based customer service software to let our users upload (and crop) a picture to be associated with their account. I know how to upload and link files, etc, but what's the easiest way to achieve a minimal level of control for the user to manipulate the image and then save it? e: Not opposed to using a third party service if it comes to that.
|
|
#
?
May 16, 2014 16:12
|
|
