|
OK after the words of encouragement I did the tutorial for Webpack. It bundles the CSS with the JS and then injects the CSS inline in the head? Isn't that bad and will prevent the CSS file from being cached? Won't that be really bad when I switch it to my minified app.css that has styles for everything on the site? I'm guessing I'm missing something, but the tutorial ended there.
|
#
?
Aug 20, 2016 18:39
|
|
|
|
| # ? May 22, 2024 05:12 |
|
|
The Merkinman posted:OK after the words of encouragement I did the tutorial for Webpack. The files won't be cached individually, but your whole package will be.
|
|
#
?
Aug 20, 2016 19:10
|
|
|
The Merkinman posted:OK after the words of encouragement I did the tutorial for Webpack. This is where webpack's extensibility comes in, though. You can use the extract-text-webpack-plugin to pull your loaded styles into a separate file. You can split your app's big dependencies out into a 'vendors' bundle so your users don't need to redownload everything when you deploy a bug fix. You can even split different parts of your app up into different bundles so users only download the parts of the app they need right now. Much of which is stuff that Rollup can't do, btw. I think Rollup is a great solution for publishing libraries, but for a big app I'd pick webpack in a heartbeat.
|
|
#
?
Aug 20, 2016 19:18
|
|
|
Thermopyle posted:Just so you know, people use ES2015 modules with webpack as well. I haven't used require in a year or two. Yup, webpack does everything. Still prefer rollup whenever possible 
|
|
#
?
Aug 20, 2016 22:55
|
|
|
The Merkinman posted:OK after the words of encouragement I did the tutorial for Webpack. I posted my dev and production configs here on in the JS thread a couple days ago. In dev, you bundle everything into one blob because you are just hot reloading out of memory. In production, your CSS is pulled out into a file, your 3rd party JS is pulled into a file, and your app code is pulled into a third file. These are all named by their chunks hashes, so if an update doesn't add any new deps or change styles, those files stay the same and cached. You can get more complicated and have different bundling with more splits / files, but I haven't built anything complex enough to need it.
|
|
#
?
Aug 20, 2016 23:03
|
|
|
Anyone have experience with ionic? One of our developers mentioned it, but he has the habit of waiting to reinvent the wheel with new and shiny and a total disregard for workload and legacy. Currently, our ecommerce site has a separate "desktop" version, and a "mobile" version that I'm slowly merging codebases of to one, response, site. We do not have an app of any kind, nor any plans to do so.
|
|
#
?
Aug 22, 2016 16:42
|
|
|
The Merkinman posted:Anyone have experience with ionic? Ionic is a great framework - but it's for mobile. On Desktop it's just gonna look weird. If you don't have an app and aren't planning on it, you don't need Ionic.It's built on top of Cordova/Phonegap - so it's basically for the express purpose of compiling to an app.
|
|
#
?
Aug 22, 2016 17:22
|
|
|
HaB posted:Ionic is a great framework - but it's for mobile. On Desktop it's just gonna look weird. If you don't have an app and aren't planning on it, you don't need Ionic.It's built on top of Cordova/Phonegap - so it's basically for the express purpose of compiling to an app. This. Ionic is basically Bootstrap for Cordova.
|
|
#
?
Aug 22, 2016 20:07
|
|
|
HaB posted:Ionic is a great framework - but it's for mobile. On Desktop it's just gonna look weird. If you don't have an app and aren't planning on it, you don't need Ionic.It's built on top of Cordova/Phonegap - so it's basically for the express purpose of compiling to an app. I liked it quite a bit, for the week or so I was developing a Pokemon Go tracker for mobile. Then all the API projects went dark and I lost interest. The Ionic stuff was pretty good though. The various lab software can be a pain, and will frequently crash or do weird things while hosting up your page, so restart it often. This is a good article that touches on how one might use Ionic/Electron to have a webapp share code across Web, Mobile, and Desktop. https://medium.com/@kaumac/cross-pl...d742#.ffyy0az1s
|
|
#
?
Aug 23, 2016 15:52
|
|
|
Is there any way to set a:hover using inline styles in React, or do I just need to use onMouseEnter etc?
|
|
#
?
Sep 13, 2016 23:41
|
|
|
Nope, inline styles don't allow pseudo selectors, just rules on the specific DOM element. When I've needed a style on a particular item that goes beyond what inline styles can do, I'll give it a unique id and put the relevant styling inside a style tag in the component, which react can do with dangerouslySetInnerHtml
|
|
#
?
Sep 14, 2016 00:00
|
|
|
wouldn't it be easier to use a class than to generate unique ids for each copy of the component?
|
|
#
?
Sep 14, 2016 00:05
|
|
|
Gul Banana posted:wouldn't it be easier to use a class than to generate unique ids for each copy of the component? Then you are not self-contained.
|
|
#
?
Sep 14, 2016 01:01
|
|
|
CSS modules or just BEM naming should be able to take care of that
|
|
#
?
Sep 14, 2016 01:06
|
|
|
I've mostly given up on inline styles for React except when absolutely necessary, i.e. something that is actually dependent on component state somehow. Even then I'll sometimes just render a different className and let CSS deal with it.
|
|
#
?
Sep 14, 2016 01:33
|
|
|
Gul Banana posted:CSS modules or just BEM naming should be able to take care of that True, I prefer BEM, however if the style is truly unique to that instance and generated by JavaScript it's time to crack out the unique id.
|
|
#
?
Sep 14, 2016 05:09
|
|
|
Why would you need dangerouslySetInnerHtml though?
|
|
#
?
Sep 14, 2016 19:40
|
|
|
I thought it escaped some of the CSS characters within <style> otherwise, might be mistaken, though, been a while since I've done it.
|
|
#
?
Sep 14, 2016 23:56
|
|
|
M31 posted:Why would you need dangerouslySetInnerHtml though? CSS uses quite a lot of curly braces...
|
|
#
?
Sep 14, 2016 23:59
|
|
|
You can use a string or template literal: code:
|
|
#
?
Sep 15, 2016 12:05
|
|
|
M31 posted:You can use a string or template literal: It doesn't escape the text contents of a style tag?
|
|
#
?
Sep 15, 2016 12:12
|
|
|
No, it creates a text node. Now that you mention it, it maybe doesn't work on React < 15.0.0 as the old versions use innerHTML for the initial render.
|
|
#
?
Sep 15, 2016 12:35
|
|
|
M31 posted:You can use a string or template literal: Oh drat, had no idea that would work. Thanks.
|
|
#
?
Sep 15, 2016 12:45
|
|
|
M31 posted:No, it creates a text node. Now that you mention it, it maybe doesn't work on React < 15.0.0 as the old versions use innerHTML for the initial render. I can't really remember for sure if I tried without dangerouslySetInnerHtml when I did it myself, but it was definitely before they did the rework of the DOM interactions like span wrapping string elements and such. That certainly seems like something that could've blocked this approach being correct sub 0.15.
|
|
#
?
Sep 15, 2016 13:14
|
|
|
Okay, so it seems progressive web apps are the new hotness right now. And apparently part of that is not compiling everything into one giant monolithic file. Are there tools/frameworks that help with splitting the core elements from the elements that can be loaded on-demand? We're still using ember-cli, and the version is relatively fresh. I don't remember exactly what it was, but it's only several months old (instead of years) edit: looked at my posting history itt and it seems out app is just about to reach its 2nd anniversary  edit2: found Ember-cli-lazy-load and ember-engines Wheany fucked around with this message at 07:07 on Sep 19, 2016 |
|
#
?
Sep 19, 2016 06:48
|
|
|
Wheany posted:Okay, so it seems progressive web apps are the new hotness right now. And apparently part of that is not compiling everything into one giant monolithic file. * HTTPS * Some manner of offline functionality * Service Worker * Manifest
|
|
#
?
Sep 19, 2016 14:58
|
|
|
The Merkinman posted:Is it? I thought it was just: This is correct. Bundle-splitting is a great best-practice sort of thing but in no way required to build a PWA.
|
|
#
?
Sep 20, 2016 01:11
|
|
|
I'm working on a website and when I inspect a page in Chrome, there's two ways to resize it, one drag the window horizontally to make it smaller or use the Responsive Design Mode. The thing is, every so often, they render a page differently. Which should I trust and why would there be a difference?
|
|
#
?
Sep 20, 2016 21:34
|
|
|
I use the responsive design mode since it let's me switch between landscape and horizontal easily. Also I believe it also simulates the Device Pixel Ratio, which can mess things up if you don't have certain meta tags set, and changes the user agent. It's generally more accurate in the responsive design mode. More details on it here: https://developers.google.com/web/tools/chrome-devtools/iterate/device-mode/emulate-mobile-viewports IronDoge fucked around with this message at 22:06 on Sep 20, 2016 |
|
#
?
Sep 20, 2016 22:02
|
|
|
IronDoge posted:I use the responsive design mode since it let's me switch between landscape and horizontal easily. Also I believe it also simulates the Device Pixel Ratio, which can mess things up if you don't have certain meta tags set, and changes the user agent. It's generally more accurate in the responsive design mode. I like to watch the supercharged and live code session videos on the chrome dev YouTube channel. They do all their debugging with chrome dev tools and I'll usually see a feature I didn't even know existed. http://youtube.com/user/ChromeDevelopers/videos
|
|
#
?
Sep 21, 2016 19:38
|
|
|
huhu posted:I'm working on a website and when I inspect a page in Chrome, there's two ways to resize it, one drag the window horizontally to make it smaller or use the Responsive Design Mode. The thing is, every so often, they render a page differently. Which should I trust and why would there be a difference? Neither one will reproduce bugs/quirks in real devices accurately 
|
|
#
?
Sep 22, 2016 16:53
|
|
|
Munkeymon posted:Neither one will reproduce bugs/quirks in real devices accurately It's still a hell of a lot better than only looking at things on your 4K iMac and saying "should look fine on a small screen, right?" though.
|
|
#
?
Sep 22, 2016 17:15
|
|
|
If you really want to put effort into without buying an iPhone I suppose you could always load up xCode's emulator and try browsing from there. Can't say it's ever been worth the effort though.
|
|
#
?
Sep 22, 2016 17:22
|
|
|
Is there a way to make mobile phones show the character BLACK HEART SUIT U+2665 (♥) and also the other suits (♦♣♠) in a way that they can be colored with CSS? Coloring those characters worked fine on Windows 10 in Firefox and Chrome, but on my Android phone heart and diamond are red and club and spade are black. Because in 2016 everything is an emoji.
|
|
#
?
Sep 27, 2016 14:08
|
|
|
The easiest might be to make your own icon-font with icomoon or something like that.
|
|
#
?
Sep 27, 2016 15:13
|
|
|
Wheany posted:Is there a way to make mobile phones show the character BLACK HEART SUIT U+2665 (♥) and also the other suits (♦♣♠) in a way that they can be colored with CSS? You can try forcing the text variant with FE0E: http://mts.io/2015/04/21/unicode-symbol-render-text-emoji/
|
|
#
?
Sep 27, 2016 16:02
|
|
|
Wheany posted:Is there a way to make mobile phones show the character BLACK HEART SUIT U+2665 (♥) and also the other suits (♦♣♠) in a way that they can be colored with CSS? Cool, ipad is even worse, the graphics don't even scale with the font size
|
|
#
?
Sep 27, 2016 17:50
|
|
|
Wheany posted:Is there a way to make mobile phones show the character BLACK HEART SUIT U+2665 (♥︎) and also the other suits (♦♣♠) in a way that they can be colored with CSS? Does this work? ♥︎
|
|
#
?
Sep 27, 2016 18:09
|
|
|
YO MAMA HEAD posted:Does this work? ♥︎ Not in Awful at least
|
|
#
?
Sep 27, 2016 18:10
|
|
|
|
| # ? May 22, 2024 05:12 |
|
|
Sereri posted:The easiest might be to make your own icon-font with icomoon or something like that.
|
|
#
?
Sep 27, 2016 19:35
|
|