|
kedo posted:Yeah I have it bookmarked but I'm several thousand posts behind since on the whole I haven't really been giving much attention to modern frameworks, let alone threads about them. Don't overthink it, components are just components, no matter how small or big. You can organise them in folders however you like. The standard boilerplate I've used for building many a full site in React is: atoms molecules templates Sort of like atomic design, but I've also had a decent experience building with features as the point of organisation, coupled with a shared folder for all the small atom like components that get used near everywhere. The thing to recognise is where you're relying on jsx to build out a complex Dom structure, when you probably should've been breaking out clearly reusable components. Have a good template for new components in your editor of choice so when you want a new component it's quick and easy to do, that way you won't resist building new components due to boilerplate friction. This is an old blog post but a good one: http://shripadk.github.io/react/docs/thinking-in-react.html
|
#
?
Oct 18, 2017 22:14
|
|
|
|
| # ? May 16, 2024 23:04 |
|
|
I prefer to structure my components into areas of functionality and pages. Directories such as 'page-messages', 'page-accounts', and subdirectories within those. I feel like there's too much emphasis made on component re-usability. When in 90% of cases I've experienced, they are never re-used anywhere.
|
|
#
?
Oct 18, 2017 22:24
|
|
|
Maluco Marinero posted:Don't overthink it, components are just components, no matter how small or big. You can organise them in folders however you like. This is all good advice, and that article is a good read. However I guess what I'm looking for are some opinionated, practical guides on how to organize the actual file and directory hierarchy. For example, if my application has two main functions, searching for widgets and displaying full widget details, should the components for these two items be broken out into... individual files? Directories? Applications? What's the smartest/best way to link them together? Straight up imports? In the past most of my JS has lived in a single file (main.js) and was organized using a module pattern along the lines of what's discussed here. But now that I'm putting a lot more code in JS, I feel like using one file simply won't work in the long term. For the sake of comparison, when I'm writing SCSS I have three main sub-directories in my scss directory: base, modules, and components. Base has code for basic html elements, modules contain mixins and tools and things that don't output CSS, and components contains individual SCSS files for the building blocks of the site (eg. search might be one file, _search.scss, or maybe two at most, _search-form.scss and _search-results.scss) and vendor files. I then have a main.scss file where I import everything. Right now my structure is from create-react-app, so it's really just two JS files – App.js and index.js in the /src/ directory.
|
|
#
?
Oct 18, 2017 22:49
|
|
|
Nolgthorn posted:I prefer to structure my components into areas of functionality and pages. Directories such as 'page-messages', 'page-accounts', and subdirectories within those. I feel like there's too much emphasis made on component re-usability. When in 90% of cases I've experienced, they are never re-used anywhere. The purpose of writing components for re-usability is not actually re-usability. It's so you develop a clear contract for the components external interface which helps you reason about your system bettererrer.
|
|
#
?
Oct 18, 2017 22:52
|
|
|
fletcher posted:Words about commit process. Ok so that is all well and good for application code with well written tests. I agree that your approach makes sense. Maybe this is the wrong thread, but how do you guys handle versioning databases, if at all? This has always been a pain point and I've never found a good way. Approaches I've seen using Version Control (VC): - VC scripts that represent the structure of the database. This is stuff like create scripts for tables, stored procedures, views. It also sometimes includes insert scripts for enum data in definition tables. Where this falls short is migration - nothing about these scripts helps you apply changes from dev to testing to production, or to revert a change that was made. - VC migration scripts that change the state of the database. When you run the script it applies changes. Often times these are paired with the inverse operation to reverse a change. Where this falls short is that it doesn't allow reverting destructive changes to data (for instance, restoring a dropped column doesn't bring its data back). It's also often the Wild West for coding syntax and style as migration scripts are really really hard to auto generate for all weird edge cases. - VC a god forsaken mix of the two above. For instance, a script might contain a table definition with a bunch of IF NOT EXISTS (select column) ALTER TABLE garbage. Enough of these changes and it's spaghetti. Falls short on a mix of the above issues. I would really love to hear how other large companies handle versioning databases in a robust, testable, trackable, clean way. Or even how you write good test scripts for database operations.
|
|
#
?
Oct 19, 2017 03:04
|
|
|
Kedo, lemme talk about how we do components, obviously not the only way, but it's served us well. Typically we break everything out, one folder per publicly used component, by publicly used I mean, other classes can make use of the component. For example we'd have a Button component, we'd do this: front-end/ui/atoms/Button index.js (entry point JavaScript) index.less (entry point CSS) Button.react.js (React component) Button.client.js (client running code if this is a server side rendering component, exposed to index.js) Button.less (style sheet) A more complex component might be: front-end/ui/molecules/FeaturedProduct index.js (entry point JavaScript) index.less (entry point css) FeaturedProduct.react.js (Main component exposed in index.js) DisplayMeta.react.js (sub component that is NOT exposed to the index.js) FeaturedProduct.less DisplayMeta.less The whole point here is you encapsulate whatever you want in the component folders, and then things that depend on it have a standard require path, namely the index.js or index.less. This makes it real simple to contain your shame rather than letting it bleed into other stuff. This is complemented with an approach to CSS that's fairly strict BEM. With a modern CSS transpire language like less, sass or stylus you can require as many times as you like but only render the CSS once, which is great for making the CSS require dependencies just like the JavaScript does. Either way, this is all contingent on good tooling, so learn you some webpack and have a play around if you haven't already.
|
|
#
?
Oct 19, 2017 04:18
|
|
|
Ruggan posted:I would really love to hear how other large companies handle versioning databases in a robust, testable, trackable, clean way. Or even how you write good test scripts for database operations. Not a large company, but a few jobs ago, we kept database schema changes as plain old regular SQL text files on disk, included with the application source. We had a specific naming format to avoid collisions, grouped in directories by release number. They'd get reviewed and merged along with the rest of the code with any change, and rolled out at the same time as new code. Once the file is "run" successfully, the success would be noted in the database itself, and that file would be skipped on the next run. The tool could also actually run scripts in the language of the project that followed the same naming format, a feature we ended up using often to tie together complex changes that couldn't be condensed into static SQL. We were able to have each dev environment updated every day with last night's live database backup, and had scripts available to the dev that would reimport the backup, in whole or in part, as needed. This is basically the killer feature, especially if you're doing data manipulation as part of the update instead of (just) schema migrations. We were using MySQL, so we couldn't rely on transactions alone. MySQL doesn't let you wrap schema changes in transactions and makes each schema change an implicit commit. The main problem we had with this setup was having developers accidentally allow their dev instance to have local database changes that weren't merged upstream, or, worse, when they aren't merging in changes from upstream. This can result in changes that are logically and syntactically correct (thus passing initial review) but that ended up bombing when run on a pristine copy of trunk with a fresh database. This is, in reality, more of a version control and procedural problem than a problem with the actual database migration feature, but it's really the only thing that we ever really had trouble with. All of this was accomplished through a few simple scripts, less than a thousand lines of code total, some in shell, some in the main language of the project. It was developed in-house at a time when the language we used simply had no migration tooling at all, and was In the modern era, we'd be using an ORM and so we'd end up basically being forced to use whatever migration tool the ORM provides. This would be best practice, and it's what you should be looking at doing if you're able. That said, don't apply an ORM to an existing codebase, you will find yourself in hell with no escape. McGlockenshire fucked around with this message at 04:23 on Oct 19, 2017 |
|
#
?
Oct 19, 2017 04:18
|
|
|
The problem with database migrations isn't the migrations, it's different migrations in different branches.
|
|
#
?
Oct 19, 2017 05:14
|
|
|
Scaramouche posted:I don't know about "right" necessarily but pre-edge IE was relatively picky about headers compared to the others. Maybe that is right really, one of our suppliers sites will serve up every non-html file as a jpg. Zip file? jpg. PNG? jpg. PDF? jpg. Chrome seemed smart enough to figure it out but maybe that's not something the browser should be assuming. https://fetch.spec.whatwg.org/#should-response-to-request-be-blocked-due-to-nosniff?
|
|
#
?
Oct 19, 2017 11:52
|
|
|
kedo posted:Question for you React-savvy folks. How dumb is it to build only part of a site with React, and is that even possible/recommended? I'm not what I would call react savvy, but I can tell you this is absolutely fine and if a) you're working on something legacy or b) you are new to react, there's absolutely nothing wrong with taking things one component at a time. One thing I'm not sure on, and maybe others can offer suggestions, is how this works in terms of filesystem structure. Where do the client side source files go, vs. client side distribution files? I'm thinking in terms of an ASP.NET MVC project for example. Where do you situate your npm pipeline poo poo? putin is a cunt fucked around with this message at 12:24 on Oct 19, 2017 |
|
#
?
Oct 19, 2017 12:21
|
|
|
kedo posted:Yeah I have it bookmarked but I'm several thousand posts behind since on the whole I haven't really been giving much attention to modern frameworks, let alone threads about them. Others have made good suggestions on organization, but I'll post mine too! The important thing is that whatever you pick, it works for you! Mine is evolving, but I think I'm getting pretty close... I do something along the lines of: code:
|
|
#
?
Oct 19, 2017 18:01
|
|
|
Thanks all! Maluco Marinero and Lumpy – those structures both look solid to me. I think my biggest issue for awhile is that I'm not going to be making purely React applications: most of my business is referral and I've done a lot of static or WordPress work, so I'll likely keep getting a more of that. I suppose eventually I could dive into the WP REST API and start making my WP sites entirely in React, but that's a ways down the road I think. But for the time being I feel like there's going to necessarily be come cross contamination between, say, my WP theme CSS and my React CSS, which is unfortunate. But regardless, I can at least use one of these styles for my search app. Thank you both again for the super helpful posts. I probably need to start looking into Redux as well.
|
|
#
?
Oct 19, 2017 18:28
|
|
|
kedo posted:Thanks all! Maluco Marinero and Lumpy – those structures both look solid to me. I think my biggest issue for awhile is that I'm not going to be making purely React applications: most of my business is referral and I've done a lot of static or WordPress work, so I'll likely keep getting a more of that. I suppose eventually I could dive into the WP REST API and start making my WP sites entirely in React, but that's a ways down the road I think. But for the time being I feel like there's going to necessarily be come cross contamination between, say, my WP theme CSS and my React CSS, which is unfortunate. Look at Redux, but don't use it until you hit a wall with "normal" React. It's something good to be familiar with both conceptually and practically, but until things get "big" it can add complexity where you don't need it. And when you do start using it, make some good macros; Redux-based code is pretty verbose. That is actually one of the things like like about it, but all my snipmate shortcuts save me a lot of time.
|
|
#
?
Oct 19, 2017 20:20
|
|
|
How the hell do i make a select form required, but have a disabled default value at the same time? Couldn’t figure out the React way to do it
|
|
#
?
Oct 19, 2017 23:37
|
|
|
Thermopyle posted:The purpose of writing components for re-usability is not actually re-usability. This. We've been trying to implement a pattern library to make sure that everyone uses what they should use for it. The caveat: Product decides: Yes! But it must also do or look like X!'' kedo posted:Question for you React-savvy folks. How dumb is it to build only part of a site with React, and is that even possible/recommended? Recommended to me in the Agilefall thread: The Strangler Pattern I'm not react-savvy (working on it), but we are introducing React to our framework right now. I don't find it dumb at all. It's once piece of stateless, unactionable data. It is simply a view with a handful of toggles. I think it's a perfect gateway into something new (regardless of framework). How I've demonstrated it to the rest of our team is two-fold: I took a highly complex and over-engineered page and simplified it using React. I reconstructed our permission-based navigation into React and also simplified it moving from JSP to React. I did a side-by-side breakdown with my boss and boss' boss and nobody raised an objection. Granted these changes are not in production or have been through QA, but it's there. If we had regressive functional tests in place this nav update could be dropped in within a sprint or two. Adding react to other random pieces - why not? It's just a view controller. If I wanted to do Component X in react without interrupted anything else I could. Maybe some legacy code needs a small change to call React's api to work but I think that's okay.
|
|
#
?
Oct 20, 2017 03:23
|
|
|
Grump posted:How the hell do i make a select form required, but have a disabled default value at the same time? Same way you do it regular like? JavaScript code:
|
|
#
?
Oct 20, 2017 04:55
|
|
|
Lumpy posted:Same way you do it regular like? Wouldn't you have to gate the selected on your default value to allow something else to be selected ever? code:
|
|
#
?
Oct 20, 2017 14:30
|
|
|
Munkeymon posted:Wouldn't you have to gate the selected on your default value to allow something else to be selected ever? Nope, React will take care of it. On my phone, but I did a code pen before I posted that to make sure it still worked.
|
|
#
?
Oct 20, 2017 15:56
|
|
|
React 16 (and maybe 15, I have no idea!) throws a warning if you use the "selected" attribute on an option, it wants you to do it via defaultProps.
|
|
#
?
Oct 20, 2017 15:59
|
|
|
kedo posted:React 16 (and maybe 15, I have no idea!) throws a warning if you use the "selected" attribute on an option, it wants you to do it via defaultProps. Warnings schmorinings! Worked on 15 fine. If it bugs you, just make it not disabled, but have your changed handler not update if they pick that option so they can never select it again.
|
|
#
?
Oct 20, 2017 16:09
|
|
|
Lumpy posted:Warnings schmorinings! Worked on 15 fine. If it bugs you, just make it not disabled, but have your changed handler not update if they pick that option so they can never select it again. selected+disabled is a common recommendation for usability because it's screen reader friendly
|
|
#
?
Oct 20, 2017 17:12
|
|
|
I hope this is the right place to ask. I'm working off of this HTML 5 template. All I'm trying to do is replace that diamond icon with the company's .PNG logo, but can't for the life of me get their PNG logo to stay centred and responsive, properly. The diamond isn't a locally-stored image, so I can't just replace its filepath with the proper image. Any thoughts on what I might be doing wrong? Not sure if I'm giving you guys enough info to work off of- let me know if I'm not.
melon cat fucked around with this message at 03:40 on Jan 16, 2024 |
|
#
?
Oct 21, 2017 18:03
|
|
|
At 736px they opted to put hard heights and widths on their logo div. Get rid of that or change it to closely match what you want your logo size to be. https://gyazo.com/5039002531262f0c1e425fcbc22c3ebb Also, ID based CSS selectors. Shameful.
|
|
#
?
Oct 21, 2017 18:18
|
|
|
Giga Gaia posted:At 736px they opted to put hard heights and widths on their logo div. Get rid of that or change it to closely match what you want your logo size to be. Thanks a lot for the pointers. I made your suggested edits to the best of my (admittedly very limited) capabilities. Seems to be working, from what I can see? But I have noticed a bit of a jitter in the logo + background graphic when it loads in a non-maximized browser window. It kind of "bumps" to the left upon appearing before settling in the centre. Maybe I have to mess with the margin values, or something. EDIT: I think I fixed the jitter. The .PNG logo's dimensions were too large. Shrunk it down. Seems to work. melon cat fucked around with this message at 20:26 on Feb 4, 2024 |
|
#
?
Oct 21, 2017 20:10
|
|
|
You're still gonna run into responsive problems my dude. You gotta fix that CSS in the 736px media query for #header .logo or your stuff is always gonna go out of whack when that query hits. I'd just remove it entirely for now. All of it was there to control the diamond's size. You also don't need that span around the img tag. They were just using a span because the demo had an icon font to make that diamond happen. Images have their own height and widths so all the css being applied to control those is irrelevant in this case. There's reasons to use width: 100% (though for me max-width: 100% and appropriately sized images is always better) height: auto on images, just not in this case. div.logo is already pos: relative so you're not gaining anything from that being on the span either. This template has some strange choices being made under the CSS hood. Giga Gaia fucked around with this message at 00:56 on Oct 22, 2017 |
|
#
?
Oct 22, 2017 00:50
|
|
|
Ruggan posted:Ok so that is all well and good for application code with well written tests. I agree that your approach makes sense. This may be a useless answer depending on your ecosystem, but at work we use SQL Server, and Visual Studio allows you to define your database in a project and generate migration scripts against a given database or just create a new one. It's great because the step of compiling helps you find bad references and you can migrate from any existing schema to your latest. Everything's just flat files so it's easy to put in version control and the diffs are useful, too. I'm not aware of any other solutions that are as good.
|
|
#
?
Oct 22, 2017 01:15
|
|
|
Chenghiz posted:This may be a useless answer depending on your ecosystem, but at work we use SQL Server, and Visual Studio allows you to define your database in a project and generate migration scripts against a given database or just create a new one. It's great because the step of compiling helps you find bad references and you can migrate from any existing schema to your latest. Everything's just flat files so it's easy to put in version control and the diffs are useful, too. I'm not aware of any other solutions that are as good. SQL Server and Visual Studio too. So I need to do more research on that. Thanks.
|
|
#
?
Oct 22, 2017 17:38
|
|
|
Ruggan posted:SQL Server and Visual Studio too. So I need to do more research on that. Thanks. The place I started at ~six months ago is the first Microsoft shop I've been in that has a database project and it's so loving nice I never want to go back. Only issue is that it's an extra step when going from checkout to running a local copy but it makes database changes so much less annoying that I can't be bothered to be mad about it.
|
|
#
?
Oct 23, 2017 15:27
|
|
|
Giga Gaia posted:You're still gonna run into responsive problems my dude. You gotta fix that CSS in the 736px media query for #header .logo or your stuff is always gonna go out of whack when that query hits. I'd just remove it entirely for now. All of it was there to control the diamond's size. Next step is to find a way to add in a responsive video portfolio gallery. So glad to have got that logo issue sorted out. 
|
|
#
?
Oct 23, 2017 16:11
|
|
|
Munkeymon posted:The place I started at ~six months ago is the first Microsoft shop I've been in that has a database project and it's so loving nice I never want to go back. Only issue is that it's an extra step when going from checkout to running a local copy but it makes database changes so much less annoying that I can't be bothered to be mad about it. Yeah when it works, MSSQL has some great stuff for portability like this. That said, I still remember tearing my hear out in the past over trimming log files and posting stuck transactions, but it does seem better now. That's more an administrator concern than a developer one anyway.
|
|
#
?
Oct 23, 2017 17:46
|
|
|
melon cat posted:Thanks for the pointers. I implemented everything you suggested and it all seems to be working great. No problem. I don't know of any out of the box responsive video galleries, but there's lots of techniques out there for responsive videos. Take a look at CSS Trick's "fun with viewport units" article for an example.
|
|
#
?
Oct 23, 2017 19:27
|
|
|
I am using react-bootstrap's tool tips. I have a table and sometimes the data for a cell is way too long so I ellipsis it and allow a user ot hover to read it all. The problem is, if using the center placement of the tooltip things get wonky when there is any overflow. Because I am wrapping my content in a span so the overflow trigger will center over the content of the cell and not just the entire cell (otherwise it looks weird), when there is an overflow it still tries to center over the span, even though the span is much much wider than the actual visibile content, so the "centered" tooltip ends up being very far outside the cell to its right. How can I fix this? Wrapping the span in a div andusing that as the overlay trigger means that the tooltip is always centered with regards to the cell and not the content of the cell meaning on smaller content that doesn't fill out the cell, the tooltip is now hovering over empty space.
|
|
#
?
Oct 23, 2017 20:42
|
|
|
One of my sites wants to do more ecommerce and has probably outgrown the hosting plan it's on, which is a basic VPS. It's a WordPress site using WooCommerce. The main concern is that the current hosting can't handle very many concurrent users, and they expect to get 500 - 1000 people trying to hit products at the same time when new items are launched. Any suggestions for hosting solutions that can handle that kind of simultaneous traffic? Is AWS something I should look into here? Thanks fellas.
|
|
#
?
Oct 23, 2017 22:43
|
|
|
Knifegrab posted:I am using react-bootstrap's tool tips. I have a table and sometimes the data for a cell is way too long so I ellipsis it and allow a user ot hover to read it all. If you don't care about it being pretty, put it all in a title attribute.
|
|
#
?
Oct 24, 2017 02:25
|
|
|
Lumpy posted:If you don't care about it being pretty, put it all in a title attribute. I do care about it being pretty but yeah this has crossed my mind.
|
|
#
?
Oct 24, 2017 02:28
|
|
|
On the topic of responsive video players- I'm trying to make embedded videos viewable on my site's 'Video' section. A weird thing's happening, though. If I play the video, then 'X' out the window while the video's playing, the audio still plays even though the window is closed. Any thoughts on what I can do to fix this? Here's the code for that window + embedded iframe: code:melon cat fucked around with this message at 20:29 on Feb 4, 2024 |
|
#
?
Oct 24, 2017 02:45
|
|
|
The X appears to be closing the modal window by changing its display style and class, but not doing anything to the video itself. So you need to tell the close button to also turn off the video. The quick and dirty way to do it is by making the close button set the video src to blank, which may not work for you since you'll have to then reset the src via another event if you want to go back to the video without reloading the page. The other way is to use the Youtube JS api commands to properly stop it; to do this you will have to add ?enablejsapi=1 to the end of the video URL. Here's both methods demonstrated: https://jsfiddle.net/z99oudkg/1/
|
|
#
?
Oct 24, 2017 03:27
|
|
|
my bony fealty posted:The X appears to be closing the modal window by changing its display style and class, but not doing anything to the video itself. So you need to tell the close button to also turn off the video.  quote:The other way is to use the Youtube JS api commands to properly stop it; to do this you will have to add ?enablejsapi=1 to the end of the video URL. ? I added that snippet the URL, but it had no effect at all. Maybe I didn't follow your instructions properly. In either case, it's starting to sound like an embed link may not be best-suited for modal windows. Maybe I'll just add in a thumbnail image and hyperlink it to the actual YouTube video. 
melon cat fucked around with this message at 20:30 on Feb 4, 2024 |
|
#
?
Oct 24, 2017 04:38
|
|
|
melon cat posted:I added that snippet the URL, but it had no effect at all. Maybe I didn't follow your instructions properly. That snippet just gives you the ability to control the video by triggering the YouTube API. You still need to add the actual Javascript to invoke the YT API to tell the video to stop; go look at Youtube's documentation for what exactly to do there. Basically, just hiding the container the video is in doesn't make the video stop. The video is hidden, but it doesn't actually know it's hidden, so it won't stop automatically - it's up to you to use Javascript to either stop the video or remove the video.
|
|
#
?
Oct 24, 2017 05:20
|
|
|
|
| # ? May 16, 2024 23:04 |
|
|
my bony fealty posted:One of my sites wants to do more ecommerce and has probably outgrown the hosting plan it's on, which is a basic VPS. It's a WordPress site using WooCommerce. The main concern is that the current hosting can't handle very many concurrent users, and they expect to get 500 - 1000 people trying to hit products at the same time when new items are launched. Any suggestions for hosting solutions that can handle that kind of simultaneous traffic? Is AWS something I should look into here? Thanks fellas. if you're only expecting some vague form of traffic, it's time to measure everything that you can. Make sure you can monitor and log performance on the server at the application level, at the web server daemon level, at the PHP level, at the MySQL level, at the disk I/O level, at the CPU level, at the network connection level. If you're getting slammed, you should be able to easily tell where the bottleneck is by monitoring the server, so you can figure out what exactly to take action on. Do not simply throw more hardware resources at the site without knowing that it'll help a specific problem. If performance is normally not a concern and they're sending out newsletters or somesuch and they expect an immediate burst of traffic, your priority becomes doing as much as you can to stop users from hitting CPU-heavy application pages. One way to do this would be adding a caching proxy server in front. You can do this yourself (pain in the rear end) or use Cloudflare's higher level paid plans (quick, easy, and probably a NSA front  ). Alternatively, see if it would be possible to direct as much incoming traffic as possible to regular plain old static HTML pages. I know there are static site generators for Wordpress, but I don't know that any of them work with woocommerce pages. Look at WP Super Cache if you have to.
|
|
#
?
Oct 24, 2017 08:02
|
|