|
prom candy posted:Lots of greys is pretty common. I used to give my designer poo poo and call him "50 Shades of Grey." The product I work on now has 10 total from almost-black to #fff. I put it together from what he initially designed. We also had a styleguide created by an artist which was bright and colorful and he basically rejected it and picked only 3 colors out of it and everything else went greyscale. The 3 colors are a dark navy blue. Slightly less dark blue. And a pink. The pink is not our CTA color. This is an app with a user base of 99.9% women. This palette is a crime.
|
#
?
May 10, 2020 05:05
|
|
|
|
| # ? Apr 19, 2024 10:31 |
|
|
Gildiss posted:I am working with a designer now who is basically fresh out of college and just drat his designs are painful. Does your company have brand, design, or style guidelines? Edit: just saw your other post. If there are existing guidelines then encourage him to stay within that system but explore the full space therein. Assuming you're a frontend dev you are well within your rights to give design feedback. Good visual and UX design does not begin and end at the "designer's" fingertips. Framing your feedback constructively can definitely be a challenge though. The #1 thing that leaps to mind is to force him to back up every design choice with a reason. "Why did you pick this color palette?" "Why are you using five different whites instead of one or two?" "Why is there no color being used here?" "Why did you organize the filter options this way?" Ask lots of of "why" questions, it will either, ease your mind to know the rationale behind decisions, and/or force him to re-evaluate those decisions, and/or reveal that there wasn't any kind of thought put into it at all and he's just throwing poo poo at the wall to see what sticks. One of the most essential parts of design is careful, intentional decision making that you can back up with an explanation. Without that, you know nothing, Jon Snow. Anony Mouse fucked around with this message at 06:40 on May 10, 2020 |
|
#
?
May 10, 2020 06:31
|
|
|
A veteran designer at work told me new designers are being taught to avoid colors other than branding/logo colors. Apparently it helps with brand recognition, and avoids problems with ADA color concerns. Instead of colors, the focus is on usability rather than aesthetic. Brand Recognition Rules All was the big takeaway from that conversation, it was interesting though.
|
|
#
?
May 10, 2020 07:56
|
|
|
Gildiss posted:I put it together from what he initially designed. The key here is you make creation and maintenance of the style guide and and colour palette his job so that it becomes "his" style guide. Then when he does something that doesn't fit within it you say "hey can we just use (x component) from the style guide instead here" or "oh can you go back and add these new greys to the styleguide and pick some names for them?" For me this has been a pretty successful approach for reining in designers who don't constrain themselves or already work within systems. A lot of the job in FE development if you're not lucky enough to work with a really good designer is helping your not as good designer become better so that they're less of a pain in the rear end to work with. Being on the same page with a really good designer is one of the most satisfying parts of this job for me though. I don't have the ability to design good interfaces but I love working with a designer to create something cool and useful.
|
|
#
?
May 10, 2020 14:47
|
|
|
prom candy posted:The key here is you make creation and maintenance of the style guide and and colour palette his job so that it becomes "his" style guide.
|
|
#
?
May 10, 2020 14:59
|
|
|
prom candy posted:The key here is you make creation and maintenance of the style guide and and colour palette his job so that it becomes "his" style guide. Then when he does something that doesn't fit within it you say "hey can we just use (x component) from the style guide instead here" or "oh can you go back and add these new greys to the styleguide and pick some names for them?" Oh yeah I tried to schedule this sync up so we could define and setup the styleguide but now he is too busy making lovely designs so that is delayed until further notice! Agile!
|
|
#
?
May 10, 2020 15:05
|
|
|
Thank you; it's especially interesting to hear from someone with a background on both sides.
|
|
#
?
May 10, 2020 19:45
|
|
|
Are there any simple and straightforward tools that convert markdown into static html files? Preferably node-based. This is for a personal toy project so I might as well reinvent the wheel here because I need a fairly limited feature set, but if there’s an existing solution I’d rather use that. edit: I think I'll use PostHTML Obfuscation fucked around with this message at 12:47 on May 25, 2020 |
|
#
?
May 25, 2020 09:35
|
|
|
I wouldn’t be surprised if there were a dozen options.
|
|
#
?
May 25, 2020 18:10
|
|
|
I've got a pretty small app but it does need routing. Roll my own? Just use react-router? Anything else I should consider?
|
|
#
?
May 27, 2020 23:36
|
|
|
Thermopyle posted:I've got a pretty small app but it does need routing. Roll my own? Just use react-router? Anything else I should consider? I haven’t used it yet, but I’ve heard good things about Reach Router. I guess it’s supposed to be a lighter-weight, accessibility-focused alternative. Otherwise react-router is probably fine, trivially easy to setup simple routes.
|
|
#
?
May 27, 2020 23:40
|
|
|
React Router is great and easy to use.
|
|
#
?
May 27, 2020 23:48
|
|
|
react router is good
|
|
#
?
May 27, 2020 23:53
|
|
|
To clarify: I've used react router a lot, I'm just wondering if maybe there's something newer or more focused on small apps or something.
|
|
#
?
May 28, 2020 00:00
|
|
|
The Fool posted:I haven’t used it yet, but I’ve heard good things about Reach Router. https://reacttraining.com/blog/reach-react-router-future/ In fact, React Router v6 is now in alpha and will include a guide on migrating from Reach Router: https://github.com/ReactTraining/react-router/blob/7d4a5c5ee5651fc7a796c6cec8b980de2695f5f5/docs/advanced-guides/migrating-reach-to-6.md I'd say invest in React Router now (v5 has been smooth for me on a couple of projects at work) and keep an eye on the v6 release.
|
|
#
?
May 28, 2020 00:06
|
|
|
I believe the developer of both is merging the best of each library into just react router, but probably doesn't make a huge difference which one you choose for a small project.
|
|
#
?
May 28, 2020 00:06
|
|
|
Thermopyle posted:To clarify: I've used react router a lot, I'm just wondering if maybe there's something newer or more focused on small apps or something. If you are using Redux, use redux-first-router. Otherwise, Reach is great, but as noted above, is likely going away into a new React-Router. I have never ever really liked React Router for various reasons.
|
|
#
?
May 28, 2020 17:26
|
|
|
Lumpy posted:I have never ever really liked React Router for various reasons. i'd be curious to hear some. react router is so widely used that it feels like it's a standard now. i never really gave it much thought
|
|
#
?
May 28, 2020 17:52
|
|
|
Inacio posted:i'd be curious to hear some. react router is so widely used that it feels like it's a standard now. i never really gave it much thought Most of these are from way back, I haven't used it in years, so they may be invalid now, but for a long time, it just wasn't very... "React-like". It was relatively simple to use, but handling URL params and state and so on was not congruent with how the rest of React worked. Then came the breaking changes to fix that, and the bloat, and so on, and thankfully by then I had found alternatives I much preferred. I also was just bummed at some non-code specific things about the project, but that's not unique to React Router, so I'll not say much about them other than when someone well-placed in a community makes A Thing™, that thing can become "the standard" and sometimes that's not great.
|
|
#
?
May 29, 2020 14:28
|
|
|
Double post topic change! I volunteer with a non-profit who sadly found out that I am a computer-toucher. So now I have to ask this question: What is a sane / secure way of doing a site that has static pages and the ability to add new pages with attachments (meeting minutes) by non-me non super computer savvy people. I don't mind up-front work to set things up, but want to be as hands off as possible after that (lol, I know....) Is there some magic thing for Gatsby that allows other to create content? Wordpress is right out, FYI for a number of reasons (namely them saying "NOT WORDPRESS", which made me very happy) but I haven't done anything in that space in years.
|
|
#
?
May 29, 2020 14:33
|
|
|
Why are they against using WordPress? A CMS seems just about perfect. Gatsby or 11ty would be good if you can teach the secretary to write Markdown syntax or another template language. Either create your own web form to input the data into (at this point why not use WordPress or Drupal), or set up the secretary's computer directory to automatically sync with the file server that your SSG is pulling content from. Or from Google Docs. barkbell fucked around with this message at 15:07 on May 29, 2020 |
|
#
?
May 29, 2020 15:03
|
|
|
Forestry.io or Netlify CMS (“headless cms” and/or “jamstack” are good search keywords) are all worth looking into. They enable the use of a WordPress-like editing experience to manage content, then trigger static site builds to get the content live. Some of these even handle file uploads by committing the files directly into the repo.
|
|
#
?
May 29, 2020 15:10
|
|
|
Gatsby + netlify would be my choice. https://www.netlifycms.org/docs/gatsby/
|
|
#
?
May 29, 2020 15:14
|
|
|
barkbell posted:Why are they against using WordPress? A CMS seems just about perfect. Bad experiences getting hacked I do believe.
|
|
#
?
May 29, 2020 16:11
|
|
|
Gatsby plus some kind of headless CMS is the way to go
|
|
#
?
May 29, 2020 17:46
|
|
|
Lumpy posted:Double post topic change! Ghost is a nodejs CMS i used setting up for my in-law. The control panel is dead simple. Doesn’t have as much functionality as Wordpress but does the job
|
|
#
?
May 29, 2020 19:03
|
|
|
Google is failing me - I've got a series of portfolio pages that I can navigate through with forwards/backwards buttons. If the given project in my portfolio has enough content to scroll, the scrollbar causes everything to shift slightly left causing an annoying shift left and ride as the scrollbar appears/disappears between projects. Is there a good method to fix this?
|
|
#
?
Jun 8, 2020 01:44
|
|
|
huhu posted:Google is failing me - I've got a series of portfolio pages that I can navigate through with forwards/backwards buttons. If the given project in my portfolio has enough content to scroll, the scrollbar causes everything to shift slightly left causing an annoying shift left and ride as the scrollbar appears/disappears between projects. Is there a good method to fix this? code:
|
|
#
?
Jun 8, 2020 08:36
|
|
|
Hey I made a code generator for React and Vue and Angular (etc) https://springload.github.io/metacomponent/ It's an interactive REPL so you can type code and it show you the generated template, kinda like codepen. The reason I made it is because I was making a pattern library for my government and every government department has different front-end tech, but they all wanted tooling in their language of choice, so I made this thing. it's up on npm too if you want a package.
|
|
#
?
Jun 15, 2020 06:52
|
|
|
I want to create a simple dialog box in React. I've seen a few different implementations of how to do it, so there's a few details where I'm unsure of the best practices. My initial thought was to have a boolean in the containing object determinining if it would show or not ({showDialog && <Dialog />}), but I see MaterialUI passes the boolean to the dialog itself instead (<Dialog show={showDialog} />). Is there some benefit to this I'm not seeing? Also, in interest of making it fairly responsive, this is my approach: The dialog needs an outer div that takes up the entire size of the viewport. This is dimmed and has overflow set to hidden to hinder scrolling. The dialog is a child element of this, with a max and min height and with to work on both large and small devices. This is centered by making the parent a flex object. The dialog gets passed a string to display, and a callback function to call if the user clicks "Yes" (it's a confirm dialog). Anything here you would do different?
|
|
#
?
Jun 15, 2020 11:34
|
|
|
uncle blog posted:I want to create a simple dialog box in React. I've seen a few different implementations of how to do it, so there's a few details where I'm unsure of the best practices. window.confirm("your message")
|
|
#
?
Jun 15, 2020 19:53
|
|
|
Lumpy posted:window.confirm("your message") works on every browser, responsive, mature api, super fast and hardware accelerated rendering (when available) out of the box? yes please!
|
|
#
?
Jun 15, 2020 19:55
|
|
|
But that’s... what I already have. Thought I’d make something a little spicier. 😐
|
|
#
?
Jun 15, 2020 20:06
|
|
|
window.confirm("your message") blocks the entire application, and is limited to a single string. Your approach sounds pretty reasonable so far. I assume you're doing this as an exercise. You're going to need a second button and/or an X for the user to click on to cancel - and maybe wire up the dimmed backdrop so clicking on it also causes cancellation. And a second callback for that scenario, of course. A good step after this would be to think about accessibility. Can the whole thing be done using a keyboard alone? Where does focus jump to when the dialog opens? When you press Tab in the dialog? When the dialog closes? How about aria-labels? How about being able to press Enter to accept or Escape to cancel? After that, a good edge case might be what happens if the string provided is insanely long.
|
|
#
?
Jun 15, 2020 20:36
|
|
|
uncle blog posted:But that’s... what I already have. Thought I’d make something a little spicier. 😐 if it's a user-facing (or even worse, it's for a client!) then yeah, you might want to make a modal. jokes aside, your approach sounds solid. i wouldnt make the blackout div position the modal, though - i'd make the modal be position fixed. i also tend to pass a closeFn that you can attach to the blackout div (so tapping outside the modal closes it, as expected) and to a close button on the modal. quote:I see MaterialUI passes the boolean to the dialog itself instead (<Dialog show={showDialog} />). Is there some benefit to this I'm not seeing? if you do that you reduce/eliminate the need to have "code" in your "template". Doom Mathematic posted:Your approach sounds pretty reasonable so far. I assume you're doing this as an exercise. You're going to need a second button and/or an X for the user to click on to cancel - and maybe wire up the dimmed backdrop so clicking on it also causes cancellation. And a second callback for that scenario, of course. ^^^ good stuff here also
|
|
#
?
Jun 15, 2020 20:36
|
|
|
If you pass isOpen and onClose as props then the modal is capable of delaying the close callback and animating itself out. If the containing component just unmounts it you can't animate the close. I build all my modals on top of the react-modal package. I dunno if there's something better it's just the one I started using in 2015.
|
|
#
?
Jun 15, 2020 21:04
|
|
|
Thanks guys!
|
|
#
?
Jun 15, 2020 21:16
|
|
|
I'm going to be working on a modal/dialog thing too, but in Angular. Any way I should go about doing it? A lot of times it has forms that require a OK/Cancel kind of thing. IDK if I make a component, that uses ng-content to make the content dynamic.. but then how would the ok/cancel work? Wouldn't it NOT be the last thing in the DOM make it difficult to block the user from interacting with everything else? Should it be like a single component, that some service injects all of its content into? Then how would validation work? I've tried researching, but al the results are like "here's how to make one with Angular Material" or "here's a basic one that doesn't have a form"
|
|
#
?
Jun 16, 2020 16:39
|
|
|
The Merkinman posted:I'm going to be working on a modal/dialog thing too, but in Angular. Are you looking for something like this? Or this? Volguus fucked around with this message at 16:51 on Jun 16, 2020 |
|
#
?
Jun 16, 2020 16:49
|
|
|
|
| # ? Apr 19, 2024 10:31 |
|
|
The Merkinman posted:I'm going to be working on a modal/dialog thing too, but in Angular. If it's a confirmation modal, then I'd re-use it. If it's anything complex, then I make a new component for each form. But I'm using @ng-bootstrap/ng-bootstrap too so it's trivial to implement. Usually my dismiss/close returns some value so that my parent component can subscribe / pipe the result using from().pipe().subscribe(); If you need to do something like this yourself, you need a component resolver service using ComponentFactoryResolver to create the component instance. The resolver uses a ViewContainerRef passed to it by whatever the parent component.
|
|
#
?
Jun 16, 2020 17:25
|
|
