|
Speaking of nginx, any good resources for location pathing regexs and poo poo? I am having a hell of a time bending my mind around an app where the SPA is sitting at a fixed resource blah.com/spa/ and I have various pages @ / as well which are not related to the SPA, but then the SPA needs pathing back to /api so it needs to backtrack itself or be self aware of its own sub-path. At the time time. I have this working technically, but at the same time, I have issues when it comes to routing and react router where /spa/otherpage where otherpage within the SPA is run via the history API/react router and when you want to come to the full /spa/otherpage directly in the location bar, its a location MISS and defaults me back to the / location hit. It's ugly. My horrible short term hack until I have it finalized is to copy the same React SPA base index.html to the my Django app @ / where the Django app is now also aware of the SPA @ /spa/ and then loads the index.html from itself. But this is a horrible hack because I have to manually sync index.html from the build folder of my React SPA into the Django templates folder whenever I deploy. Ahz fucked around with this message at 21:52 on Dec 22, 2017 |
#
?
Dec 22, 2017 21:49
|
|
|
|
| # ? May 10, 2024 08:41 |
|
|
Ahz posted:Speaking of nginx, any good resources for location pathing regexs and poo poo? I can't remember which of the 53378 overlapping threads we ask questions about front end stuff in it was, but I asked about this and had my nginx solution sanity checked and it worked well. I had certain paths proxied, then it would try serving a static file, and if there was none there, it would serve index.html without changing the path. When I'm at a computer, I'll post my nginx config if you think it would be helpful.
|
|
#
?
Dec 23, 2017 05:42
|
|
|
I want to have text/partial search for 1000 items on a page I'm building. Should I do it through ElasticSearch, MongoDB, Postgres text search? Is 1000 a low enough number to just do it with JS?
|
|
#
?
Dec 30, 2017 17:41
|
|
|
Just do it in js because it should take you like fifteen minutes. If you have performance problems (you shouldn't) then investigate other options.
|
|
#
?
Dec 30, 2017 18:12
|
|
|
JS should easily be able to handle executing regular expressions on hundreds of thousands of items (depending on the actual client hardware running on). I would only really worry when you get to the millions stage.
|
|
#
?
Dec 30, 2017 19:23
|
|
|
Has anyone sued an out-of-state client for delinquency? I would have to file in their state it turns out and their state requires an in person presence. Makes me wonder if a 5K cap is worth a vacation to Miami.
|
|
#
?
Jan 3, 2018 05:45
|
|
|
Golden Bee posted:Has anyone sued an out-of-state client for delinquency? I would have to file in their state it turns out and their state requires an in person presence. Makes me wonder if a 5K cap is worth a vacation to Miami. Have you tried using javascript?
|
|
#
?
Jan 3, 2018 05:53
|
|
|
Golden Bee posted:Has anyone sued an out-of-state client for delinquency? I would have to file in their state it turns out and their state requires an in person presence. Makes me wonder if a 5K cap is worth a vacation to Miami.
|
|
#
?
Jan 3, 2018 16:27
|
|
|
Stupid question from someone who isn't a designer: If you declare multiple CSS classes on a single line, are you simply defining two classes which will share a common "definition"? My company pays an Indian firm for some large scale projects and it's my job to unfuck the code they give us. In this case, they recently rewrote our super old, IE-only, table driven web application so it looks somewhat modern. Now it uses divs and tables!  I'm trying to fix some display issues, so I stripped out all of the tables on this one page but now I'm getting some really weird padding issues and I can't figure out where it's coming from. I'm basically just looking up every CSS definition and see stuff like this: code:That would be the same as declaring .facilitynews { ... } and then a separate entry for .content { ... }, right? Or does this make it so that the style only applies to content classes within a facilitynews class? Also, any recommendations for tutorials on using Chrome's Dev tools? I have a hunch that somewhere between the Element's "Styles" and "Computed" tabs I should be able to figure out where the padding is coming from, but there are just so many things and half of them are crossed out and I don't understand.
|
|
#
?
Jan 3, 2018 18:14
|
|
|
Sab669 posted:Stupid question from someone who isn't a designer: If you declare multiple CSS classes on a single line, are you simply defining two classes which will share a common "definition"? No. You declare individual classes with the same rules rules like so (note the comma): code:So your example will apply to .contnet elements that are only inside .facilitynews elements. So: HTML code:Google's docs are actually pretty good to get you started: https://developer.chrome.com/devtools A crossed out line in dev tools indicates that the rule is either invalid or it is being overridden by a rule that is more specific or has the same specificity but occurs later in the parsing. Lumpy fucked around with this message at 18:27 on Jan 3, 2018 |
|
#
?
Jan 3, 2018 18:21
|
|
|
padding: 8px 1% is shorthand for 8px on top and bottom; 1% on left and right as seen in https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties under Tricky Edge Cases #3 CSS is terrible don't feel bad for having trouble with it.
|
|
#
?
Jan 3, 2018 18:36
|
|
|
CSS is highly specificity based, hence the name Cascading Style Sheets, so the Chrome Dev Tools for Styles implement this by being the most specific at the top and less so at the bottom, down to where the "user agent stylesheet" will be just how your browser's rendering system interprets the base HTML. Things are crossed out if they're overwritten by something, so as you go up the chain, less things should be crossed out as they're replaced by more specific declarations. !important is usually a pretty clear indication of shoddy CSS work, too. It's an emergency override, which usually shouldn't be needed unless there's a pretty big structural issue in classes/ids, element nesting in html or just patchy CSS. I've fought with developers who will just toss it in every time a new client revision comes in when they don't want to actually think about code structure, since you end up building over shoddy foundations when you toss those in. It's like 1 tile holes in Tetris, pretty much. Eventually you'll try to adjust something simple and have to figure out why everything keeps breaking until you find a few of those, and will have to either toss in another !important and pretty much abandon the cascade altogether, take hours and hours trying to untangle the mess, or just throw everything out and start from scratch.
|
|
#
?
Jan 3, 2018 18:58
|
|
|
Thank guys  I read something online which said that if there is a space between periods when defining a class then it would behave as two separate ones, but that seemed to conflict with what I was seeing, so I guess it was wrong or outdated.
|
|
#
?
Jan 3, 2018 20:07
|
|
|
There's a distinction between .classA.classB (which looks for elements with both classA and classB), .classA .classB (which looks for elements with classB inside of elements with classA), and .classA, .classB (which looks for elements with either classA or classB).
|
|
#
?
Jan 3, 2018 20:46
|
|
|
CSS is great and makes perfect sense  once you've worked with it for at least a decade
|
|
#
?
Jan 3, 2018 21:37
|
|
|
CSS is not difficult to understand. Spend some time learning selectors, there's a lot but you will only ever use like 6 of them. The thing is it's really easy to write bad HTML/CSS. Maleh-Vor posted:CSS is highly specificity based, hence the name Cascading Style Sheets, so the Chrome Dev Tools for Styles implement this by being the most specific at the top and less so at the bottom, down to where the "user agent stylesheet" will be just how your browser's rendering system interprets the base HTML. Things are crossed out if they're overwritten by something, so as you go up the chain, less things should be crossed out as they're replaced by more specific declarations. Specificity is one of the more confusing aspects of CSS. To expand on this, there's a bunch of weird criteria that define a style as more or less specific, with more specific overriding less no matter where in the chain the style is declared. For example, code:code:Capri Sun Tzu fucked around with this message at 21:59 on Jan 3, 2018 |
|
#
?
Jan 3, 2018 21:51
|
|
|
Capri Sun Tzu posted:CSS is not difficult to understand. Spend some time learning selectors, there's a lot but you will only ever use like 6 of them. code:
|
|
#
?
Jan 3, 2018 22:10
|
|
|
It's easy to understand if you already know it and have worked with other web technologies before. That way at least you know the reason why some things do what they do is because, "it made sense in 1998" or "just because." It's intuitive 90% of the time, and then the other 10% of the time it makes almost no sense. Why is color not text-color? Why is an element's absolute position relative to its (relative) parent while a fixed element is not? Why does the order of classes matter in CSS but not in HTML where they're applied? Why do :before and :after pseudo elements need a content:""; to be displayed, even if they don't actually have any content? Why does a div with an auto height that contains a 100px tall floated element have a height of 0? Why do different browsers have different border box models and mess up how content is displayed? Why can't input placeholder colors be defined with one statement for all browsers instead of one statement for each browser? Why can't keyframe animations be nested? I know the answers to these questions and you probably do too, but that doesn't mean it's easy to understand.
|
|
#
?
Jan 3, 2018 22:24
|
|
|
kedo posted:Why do :before and :after pseudo elements need a content:""; to be displayed, even if they don't actually have any content? What's the answer to this one? It seems like it wouldn't break anything for the browser to just assume an empty string.
|
|
#
?
Jan 3, 2018 22:42
|
|
|
https://www.youtube.com/watch?v=iniwPUEbPUM This talk is good and also the RMS story in the beginning is choice.
|
|
#
?
Jan 3, 2018 22:47
|
|
|
Nolgthorn posted:What's the answer to this one? It seems like it wouldn't break anything for the browser to just assume an empty string. What’s the rule that determines whether to create a :before or :after in the first place? The answer is that there isn’t one, so that honour falls the content rule. Otherwise the rule would have to be ‘any styling of a :before or :after element creates the pseudo element’. For whatever reason that option was decided against, maybe because cascading is loose, you could have styling trickling down which isn’t content like * rules or what have you, so they decided being precise and specific is best. Honestly with CSS that is the best policy anyway. Despite the variety of selectors in existence, being super specific with a single unique class is still way better for avoiding the trap that is high level specificity. The answer in almost every case is to write small isolated css that targets in very specific ways. But they couldn’t have known that right at the beginning, and honestly despite its flaws it’s still one of the best methods for describing presentation ever, with a level of flexibility, code separation and yes predictability (once you’ve worked with it a while) that is honestly surprising.
|
|
#
?
Jan 3, 2018 22:56
|
|
|
Nolgthorn posted:What's the answer to this one? It seems like it wouldn't break anything for the browser to just assume an empty string. Because it's in the spec. That's the answer. I'm sure if you were to dig into all the old mailing list discussions surrounding the creation of the spec you could find a better answer, but who has time to dig through thousands of emails written by opinionated nerds twenty years ago?* They main goal of :before and :after is to provide a mechanism to insert content of some sort (text, bullets, counters, etc.) before or after an element. They require the content property, and the content property requires a string (or a counter or something else), and an empty string is still technically a string. This is all fine and dandy in theory, but practically it means that content: ""; tells the browser to create an empty DOM element which isn't at all that intuitive based on the property name. I suppose it's a bit like defining a null variable in JS before you use it – even if it's null, it's defined as opposed to undefined. * The answer is me, I have the time and I'm only slightly ashamed. https://lists.w3.org/Archives/Public/www-style/1997Aug/0157.html – One of the earliest mentions of the content property I could find and probably the most telling. This part is interesting: pre:3. It should be possible to specify the automatic content for any tag. It
should be possible to specify whether that content occurs before or after any
other content in the tag, e.g.
H1 { content-before: "@1. " }
then
<H1>Introduction</H1>
renders as
1. Introduction
or
H1 { content-before: "Chapter @1.<BR><BR>" }
renders as
Chapter 1.
Introduction
kedo fucked around with this message at 02:15 on Jan 4, 2018 |
|
#
?
Jan 4, 2018 01:16
|
|
|
The Merkinman posted:Then be more specific by just saying the same thing multiple times: IDK why this never occurred to me before. I guess it's the kind of silly thing that falls out of the rules that's obvious when you see it work, but still  kedo posted:The content was always seemingly always the focus. :before and :after are simply the way the working group ended up applying the idea, probably because it was more flexible than the sort of property described in this example. The idea of using :before and :after for making weird shapes, or to insert tracking pixels, or whatever probably never crossed their minds. This is getting close to my understanding of why CSS is how it is, which is that the people who originally designed CSS thought it'd mostly be used for making text display nicely (like LaTeX for the web?), not making multi-column layouts or full-blown UIs that attempt to replace desktop applications. It took a decade of kludgily working around that original intent until the spec and implementations caught up with real-world usage.
|
|
#
?
Jan 4, 2018 15:05
|
|
|
A friendly reminder: https://twitter.com/jyasskin/status/935376631681597441
|
|
#
?
Jan 4, 2018 16:16
|
|
|
The WebKit monoculture will not be has bad the IE6 monoculture. IE had many extensions that would only work on IE and bugs so that good code would not run in IE, you had to write it with hacks to make it work in IE. WebKit kind of try to support standards and is quickly patched to converge with standards. I mean, in the past 12 months I have probably run into 2 things that where broken in WebKit, and work elsewhere, but I don't even remember then, so they must be pretty rare. The fallout of this monoculture will be bad (but not has bad) and I hope to avoid most of it. Somebody is going to clean the mess, I pity the poor bastard.
|
|
#
?
Jan 4, 2018 17:34
|
|
|
Thermopyle posted:A friendly reminder: I'm kind of impressed you can make a site that "only works in Chrome". Well, I guess you can use ES6/7 without transpiling.
|
|
#
?
Jan 4, 2018 17:49
|
|
|
The Chrome team pretty regularly implements features using APIs that are still in the process of being proposed as web standards. Hell, google hangouts doesn't work in firefox because google implemented it using webrtc stuff that isn't standard. It's kinda rich for a google employee to be saying that.
|
|
#
?
Jan 4, 2018 17:59
|
|
|
Every 2 weeks is a new Chrome version with new features, they are slowing removing some non-standard features though, which is a good thing. Basic things like CSS Grids, Polymer, async await, ImageBitmap, are all not available everywhere but quite useful to develop with.
|
|
#
?
Jan 4, 2018 18:26
|
|
|
Can you guys point me in the direction of some good resources for learning about animations? I'm generally aware of how animations are implemented, and things like pros/cons of animating via CSS vs JS, but without using some kind of animation library like animate.css I'm an absolute idiot with this stuff. I know I need to get better, though, so I'm looking to dive into this in earnest.
|
|
#
?
Jan 4, 2018 18:36
|
|
|
Lumpy posted:I'm kind of impressed you can make a site that "only works in Chrome". Well, I guess you can use ES6/7 without transpiling. I harp on this somewhat frequently but the video API (and so probably also the sound API) had, and maybe still has, very noticeable inconsistencies between browsers for years that broke stuff I wrote against Chrome without using any fancy new JS features because it had to work in IE, too.
|
|
#
?
Jan 4, 2018 18:50
|
|
|
IAmKale posted:Can you guys point me in the direction of some good resources for learning about animations? I'm generally aware of how animations are implemented, and things like pros/cons of animating via CSS vs JS, but without using some kind of animation library like animate.css I'm an absolute idiot with this stuff. I know I need to get better, though, so I'm looking to dive into this in earnest. There are multiple flavours, 1) CSS animations. 2) JavaScript DOM animations. 3) JavaScript Canvas animations. 4) JavaScript WebGL animations. 5) WebAnimations, aka CPU controlled GPU accelerated animation. #1 is static and rather limited, #5 can be very impressive, #4 there are a tonne of libraries to make things easier, e.g. PixiJS.
|
|
#
?
Jan 4, 2018 18:54
|
|
|
Verge Editorial I saw summarized on the way to work today talking about how Chrome is becoming the new IE6 from a dominance/abuse of that dominance standpoint: https://www.theverge.com/2018/1/4/16805216/google-chrome-only-sites-internet-explorer-6-web-standards Note I do not endorse or necessarily agree with the opinions presented, but just thought of it since the idea came up.
|
|
#
?
Jan 4, 2018 18:59
|
|
|
I am trying to remember what is broken in Chrome and works everywhere else, and failing. My memory is poo poo. Perhaps is something related to the back button and onload events? like the browser not triggering onload events if the user click the back button.
|
|
#
?
Jan 4, 2018 18:59
|
|
|
I was going to say hyphens: auto but it looks like they fixed that a year ago.
|
|
#
?
Jan 4, 2018 21:10
|
|
|
Tei posted:I am trying to remember what is broken in Chrome and works everywhere else, and failing. My memory is poo poo. They're not breaks, more like changes for improved performance or operation in their environment. One was backspace being stopped firing "navigate back" and the other was passive touch events, i.e. no one really cares apart from webdevs that like to whine. https://developers.google.com/web/updates/2017/01/scrolling-intervention
|
|
#
?
Jan 4, 2018 21:18
|
|
|
I'm setting up a personal site for myself and considering using CSS Grid for layout and responsive design. I'm pretty comfortable with HTML/CSS/JS, but I'm primarily a backend developer and out-of-date with what's going on in web design right now. I'm wondering if there's another option I should be looking at. Bootstrap, maybe?
|
|
#
?
Jan 4, 2018 23:25
|
|
|
Bootstrap is fine if you want a site that looks like a Bootstrap site, but otherwise it's a bloated framework that adds lots of cruft to projects you'll probably never use.
|
|
#
?
Jan 4, 2018 23:32
|
|
|
Capri Sun Tzu posted:Can you give us more details? I had a client for a year and a half, the guy who introduced us to the client left their company, everything went to poo poo. Two months later he won’t pay the last two invoices. I tried to file suit here in LA County, they won’t serve him because he’s outside the state in Miami. The contract I have from them says it’s governed by the laws of California but I may have to sue him there. Los Angeles allows you to make a claim and not appear in court if you sent evidence, Miami requires you to appear. The next step might be to file suit in Miami but ever do a crier me to fly out there, pay a bunch of fees and not necessarily win.
|
|
#
?
Jan 5, 2018 00:39
|
|
|
kedo posted:Bootstrap is fine if you want a site that looks like a Bootstrap site, but otherwise it's a bloated framework that adds lots of cruft to projects you'll probably never use. I use Bootstrap in projects often because I'm lazy (and because the organization I do most of my freelance work for these days uses Bootstrap in the majority of its sites anyway, so might as well play along) and I mostly agree with this - for a simple site, you're not going to use 90% of the stuff it offers. If you do want more complex stuff like modals, carousels, prebuilt dropdown menus, etc. then it's worth taking a look at Bootstrap; if you're not into front-end designing then it's rather tedious to create all of that yourself - you can always look for a lighter framework that offers those components too. I'm also a big fan of the utility classes that were introduced in Bootstrap 4, they offer lots of...utility. ChadSexington posted:I'm setting up a personal site for myself and considering using CSS Grid for layout and responsive design. I'm pretty comfortable with HTML/CSS/JS, but I'm primarily a backend developer and out-of-date with what's going on in web design right now. I'm wondering if there's another option I should be looking at. Bootstrap, maybe? CSS Grid is definitely the new hotness and it has pretty good browser support by now. Bootstrap 4, and a lot of other modern frameworks, uses a Flexbox grid system, which was the new hotness until CSS Grid came out. Either a CSS Grid or Flexbox layout will probably serve your needs well.
|
|
#
?
Jan 5, 2018 01:47
|
|
|
|
| # ? May 10, 2024 08:41 |
|
|
Bootstrap is worth learning if only because a whole bunch of unrelated third-party JS tools are built on Bootstrap and bring it along for the ride, like jQuery. These tools will work without Bootstrap, but only with a bunch more effort on your part.
|
|
#
?
Jan 5, 2018 01:52
|
|
