Register a SA Forums Account here!
JOINING THE SA FORUMS WILL REMOVE THIS BIG AD, THE ANNOYING UNDERLINED ADS, AND STUPID INTERSTITIAL ADS!!!

You can: log in, read the tech support FAQ, or request your lost password. This dumb message (and those ads) will appear on every screen until you register! Get rid of this crap by registering your own SA Forums Account and joining roughly 150,000 Goons, for the one-time price of $9.95! We charge money because it costs us money per month for bills, and since we don't believe in showing ads to our users, we try to make the money back through forum registrations.
 
  • Post
  • Reply
kedo
Nov 27, 2007

N.Z.'s Champion posted:

Is there a mobile framework/library with nice looking page transition effects? All the ones I've found look like crap, or don't support swiping, or are too slow on mobile

I made this demo of the kind of thing I'm looking for

http://static.holloway.co.nz/catalyst/swipe-pages/

http://demos.jquerymobile.com/1.2.0/docs/pages/page-transitions.html Best I've been able to find.

Adbot
ADBOT LOVES YOU

kedo
Nov 27, 2007

Kobayashi posted:

Not really sure how to Google for this, but for modern Javascript, what kind of style recommendations are there for quotes vs. double quotes? Sometimes people seem to use double quotes extensively. Others use single quotes. I cut my teeth on C-like languages and Perl, so by habit I tend to only use double quotes for interpolation or escaped characters, but I wondered if modern JS has other conventions?

Pretty sure it doesn't matter 99% of the time, although I believe double quotes are technically part of the JSON spec. Otherwise you can use either and it depends more on your own conventions than anything.

I like using single quotes in JS because I've always used double quotes in HTML. When I need to construct some markup in JS it means I don't have to constantly escape every single double quote.

kedo
Nov 27, 2007

I need to render a simple React app (built using create-react-app) as a small component of a greater non-React page. In the past when I ran npm run build I'd get a single main.[hash].js file, which allowed me to easily drop the app into pages like this:

HTML code:
<div>some stuff</div>

<div id="app"></div>
<script src="main.[hash].js"></script>

<div>some other stuff</div>
But now it's splitting it into a slew of different chunked files:

code:
  87.85 KB        build/static/js/1.60250296.chunk.js
  2.23 KB (+1 B)  build/static/js/main.19d0a489.chunk.js
  766 B (-16 B)   build/static/js/runtime~main.2436a5b6.js
  511 B           build/static/css/main.9d027b99.chunk.css
and it's a pain in the rear end to add to pages. How can I disable this chunking? I've been googling for awhile and I feel like I'm going in circles here.

e: Oh, looks like it's a feature of create-react-app v2, and I can't seem to get the workaround to work... any ideas? :(

kedo fucked around with this message at 21:25 on Nov 29, 2018

kedo
Nov 27, 2007

Dominoes posted:

You could try abandoning CRA; it turns into a mess (via ejecting) if you need to do anything non-standard. Webpack 4 makes doing this easy; let me know if you'd like an example config.

Definitely. Right now my options appear to be ejecting, or maybe moving everything onto an earlier version of CRA or some combination thereof. So I'm open to options.

kedo fucked around with this message at 22:05 on Nov 29, 2018

kedo
Nov 27, 2007

Thank you very much, that's super helpful!

A semi-related question: is it feasible to include the same app more than once on a page, and if so what's the right way to do it? My actual use case is fetching and displaying posts based on data attributes passed to the application container, for example:

code:
<div id="app" data-post-types="post" data-posts-with-terms="foo"></div>

<div id="app" data-post-types="post" data-posts-with-terms="bar"></div>

<script src="main.7a3cc682.js"></script>
I know this exact code won't work, but I'm wondering what will. Anyone point me in the right direction?

kedo
Nov 27, 2007

IAmKale posted:

Hmm, how about instead assigning an array of terms on, say, window.postTerms, and then processing those values from within React when you're initializing your app? That way you don't have to worry about initializing your app twice, and you can let React handle displaying multiple components for the number of terms you pass in.

That's the approach I chose to encourage use of when building a library to help use React components in server-rendered views: https://github.com/MasterKale/django-cra-helper#accessing-react-components-via-django-template-contexts

My issue is that I need to scatter an undefined number of app instances across various locations in a page/site. The actual use case is a "load more" button for related posts, but the designer has specced up to a half dozen of these per-page and the client wants to have ultra-granular control over which filters are applied on each individual button. So I need to be able to just drop one or two of these into an existing non-React sidebar (or wherever) if and when they're needed.

e: I was able to solve this using this method: https://stackoverflow.com/questions/43464780/render-a-react-app-in-a-non-react-web-page

kedo fucked around with this message at 21:58 on Nov 30, 2018

kedo
Nov 27, 2007

If you can ssh into the server how do you not have access to the CLI? On most VPSs I’ve used in the past the two are synonymous.

kedo
Nov 27, 2007

Reading comprehension is apparently not my greatest strength. Time to remove that line from the ol' resume...

kedo
Nov 27, 2007

Webpack is magic when it works. It works when you don't look at it, or change it, or do anything other than running a build script you cobbled together three years ago and haven't touched since, mainly out of fear.

kedo
Nov 27, 2007

Two questions for the thread at large:

First, does anyone have opinions/suggestions for a headless CMS targeted towards building ecommerce sites? There seem to be a bunch out there, but I haven't used any of them before so I'm looking for a bit of help narrowing down the field to a few reliable options.

Second (and not actually related though it seems related), I'm starting to work with KeystoneJS as the backend on a personal project – this is the first time I've worked with a headless CMS to create a backend like this and so far it's going fairly well. My previous backend experience is mostly in Drupal and WP, so this is dramatically different and overall a very pleasant experience so far. I'm thinking about using Vue for the frontend because I'm first and foremost a lazy frontend dev, and Vue seems to be easier to wrap my brain around than React which I've worked with but haven't really enjoyed in the past.

Ultimately when I need to host this thing somewhere, what's the standard/right way for the two to communicate? Would I have Keystone running on one server (say a DO droplet), and my Vue client running on another and sending queries to the first? Keystone has some documentation about how to embed it into a Next.js app, but I'm new enough at this that I'm not sure how/if this would translate to Vue.

My experience here is somewhat limited, so I'm interested in any advice about how to approach this in an intelligent manner.

kedo
Nov 27, 2007

prom candy posted:

Are you looking to actually run your store through the CMS? https://www.shopify.ca/plus/solutions/headless-commerce?

Yeah probably! Thanks, this could be a great option.

kedo
Nov 27, 2007

lunar detritus posted:

They keep adding click events to divs :argh:

I'm working with a junior dev right now who never uses anchors for anything. Everything is a div with an onclick and it drives me crazy. I just do not understand it.

e: regarding Tailwind – it's hilarious how much energy some developers spend creating convoluted abstractions to avoid writing a couple lines of CSS. Like, I understand why some folks might find it appealing, but it (and frameworks like it) always feel like solutions in search of a problem.

kedo fucked around with this message at 15:03 on May 23, 2022

kedo
Nov 27, 2007

HaB posted:

Please tell me you are calling this out on PRs every single time until he stops. If you can't think of any reasons he will listen to - accessibility is a big one. Screenreaders and such get actual semantic information from the markup, not just the content. But really - he shouldn't do it because it's the literal definition of reinventing the wheel. We already have an element that does that. He should use it.

Oh, I absolutely am. I (think?) the problem he was trying to solve was that anchors aren't block elements by default, so using onclick on a div was a way to make an entire block-level container clickable. There are like a thousand other ways to solve that problem while still using anchors, but div onclick was apparently just easier? Practically nothing he codes is keyboard accessible by default. :doh:


HaB posted:

Tailwind is not a framework. And while it might looks suspiciously like inline styles, it is definitely not, and you are entirely missing what it does.

Just use it. Everyone here who is complaining about it sounds just like me before I actually used it on something. I mean really used it. At least write a Todo app in whatever framework is your daily driver, styling only with Tailwind. For bonus points: do mobile and desktop versions. And watch as doing that magically becomes the easiest it has EVER been. Watch as you style your entire app without writing a single line in a css file, or even in a component style block.

Now I will never use anything else, if I have anything to say about it. It was such a gamechanger I wonder why we ever did it any other way.

Yeah I understand it in theory, at least. I've done a fair amount of research into it and considered it on a few projects. I have admittedly not used it, but I'm an old curmudgeon who is working on far too many projects at once and I am resistant to trying the new hot thing because I don't have time to experiment and have been burned far too many times in the past. I do have a personal project I could try it on I suppose, but let me have my dumb opinion and don't argue with me! :P

My main thing is that I've been writing CSS/LESS/SCSS for so long that I simply don't find it difficult or time consuming to style things. I like the level of control and code separation CSS provides, and I like being able to see and edit the code I'm writing directly whenever possible. I've watched a fair number of videos about it and eventually it seems the person in the video will always say something like, "and then if you need to do [complicated one-off styles Tailwind can't support] you can always just write some traditional CSS" and then they end up creating a CSS file of some flavor to support their element, and I'm like, "I'm sorry, what? If you're going to write traditional CSS anyway then what is the point of scattering your styles across HTML and CSS?" Hence my "solution in search of a problem" comment.

kedo
Nov 27, 2007

Digital Ocean droplets are a good option and can be very cheap.

kedo
Nov 27, 2007

I’m going to be jumping into react soon and haven’t used it in years, many versions ago. Does anyone have a recommendation for some good training/courses to get me back up to speed? I’d like something that starts from the ground up so I can unlearn all my old bad habits and get a handle for the right way to use it these days.

kedo
Nov 27, 2007

I'm in the position of picking a framework for our devs to focus on learning over the next few months and I'm torn between React and Vue and, now, Svelte. I think I'm leaning towards Vue since it seems easier to pick up than React and has been around longer so in theory it has a more developed ecosystem than Svelte, but I am having an impossible time choosing.

kedo
Nov 27, 2007

prom candy posted:

React is the major player here, in my opinion if you're going to go with something else you should have a pretty great reason for it. Not only does React have the larger community, it will also make you and your devs more employable down the road. Learning React also enables learning React Native if you ever wanted to go down that road. React also plays nicer with Typescript than Vue does from what I understand, and if you're not already using Typescript you should strongly consider it.

Yeah, this is basically my thought process. I'm only torn because all of the devs will need to train before they can start actually producing project code in whatever we end up using, and React is a pretty meaty ecosystem to dive into whereas I've heard Vue's learning curve isn't as steep. The benefits of React are probably greater, but it'll be a lot slower getting everyone up to speed.

kedo
Nov 27, 2007

HaB posted:

React and Vue are BOTH major players. And as of Vue 3, Vue itself is written in Typescript and has really great first-class Typescript support.

Svelte, to me, isn't enough to a player yet to bother with.

Vue's learning curve is much flatter than React's, and assuming you use the Composition API (and you 100% should), has FAR less boilerplate than React.

But it's no secret that I am the thread's Vue advocate and can't stand React, so - read my opinion with that in mind. ;)

And this is why I'm torn! Vue being a bit easier to learn and being (seemingly) on the upswing in terms of market share are both in its favor.

I guess I'll just go stew on this a bit longer. :argh:

kedo
Nov 27, 2007

I used cheerio to handle some server-side DOM parsing for a node project recently and it did a great job. I realize you can do 99% of this stuff with vanilla JS these days, but the jQuery syntax and helpers make things a bit quicker.

e: I finished reading the full first question and saw that OP is trying to avoid npm/JS, so :shrug:

kedo
Nov 27, 2007

"The new hotness" is not worth pursuing, ye be warned.

kedo
Nov 27, 2007

prom candy posted:

Yes it is doing the same poo poo all the time is boring. Or do you mean from a business point of view? Because in that case yeah but that's not my problem

Eh... in my job I'm working on new, different projects all the time. The project/functional requirements vary wildly from project to project, and that's enough to keep me from getting bored.

But I also have to go back and make edits on sites that are anywhere from 0 to 5+ years old, and if I were to pick up every new, hot framework/build tool/package manager/deployment process as soon as they were released it would be a massive pain in the rear end to keep track of how each site is built and what nuanced, dumbass command line rituals must be performed to appease the beast before I can make simple changes.

kedo
Nov 27, 2007

KillHour posted:

I'm doing a personal next/react project and I'm realizing that I'm loving atrocious at CSS. Obviously, front end design is a whole thing that people spend their entire careers on, but does anyone have good resources on basic modern rules / standards for making things look cohesive and not like poo poo? Even stuff like color guides / accessibility standards are good, but I'm mostly interested in understanding how to organize the code so it's reusable and consistent. And also a cheat sheet for flex / grid / whatever layout definition because holy poo poo none of it makes any sense and I'm just changing things at random to align anything :psyduck:

I'm already using Radix for some basic components and it's... Fine I guess. Kind of fiddly and I don't really like the documentation but it works.

This is a pretty complex app with lots of compositing/dynamic elements and tons of backend state that is in flux while I figure out how it's going to work, so I'm really emphasizing reusability.


Edit: this is a weird ask, but just to highlight how complex the design is, it would be very useful if I could find a clean way to get some kind of per-item sorting that lets me do stuff like A renders on top of B, B renders on top of C, C renders on top of A. I know that could lead to problems if they all end up in the same place.

Designer but mostly front-end dev here, and you're a perfect use case for something like Bootstrap. Unless you really want to dive deep into UX, visual design and S/CSS, you can save yourself a lot of effort by offloading that portion of the project to a framework. I wouldn't recommend that for anything other than a personal project. The more backend I do the more I realize that front-end dev is loving weird and dumb and unless you really need to learn it you should just stay the hell away from it if you can.

Otherwise if you really DO want to learn it, I'd suggest taking a few Treehouse courses on CSS and Sass. A UX course wouldn't go astray, but the gist of UX is don't try to reinvent the wheel, put things where people expect them, and give your layouts a bit of thought about how users will interact with them before you just start slapping things on the page. The rest of UX is testing your theories to see if they're right or not.

Visual design is a whole 'nother ball of wax and uses a completely different part of your brain and I'm not aware of a good, quick resource to pick up design experience because, as it's taught in school, it's applied art with a background in art history/theory. It's nice to be able to do both and I spent the first half of my career doing so, but I eventually came to the conclusion that it was a good way to be mediocre at both design and dev. Dev pays more, so now I mainly focus on dev and only dabble in design when necessary.

dupersaurus posted:

I haven’t really thrown hands with grid yet but I’ve made whole pages with flexbox so don’t count it out

If you use flexbox to make grids, you will find grid a thousand times simpler to work with. Flexbox is great when you need things to flex, but when you need things to display in a grid, grid is brainlessly easy to pick up and work with.

kedo fucked around with this message at 03:13 on Feb 1, 2023

kedo
Nov 27, 2007

Anyone have a recommendation for an accessibility testing consultancy/freelancer/etc? In my freelancing days I worked with a couple of firms who had dedicated accessibility testers on staff and their knowledge and attention to detail when QAing sites was super helpful. I'm looking to achieve something similar with the company I'm at currently, but we don't have the budget to hire someone full-time in that role, so I'd like to shop it out if possible. Any suggestions? US based is preferable, but I'm not too picky.

Feel free to PM me if you have a freelancer and don't want to share their info publicly.

kedo
Nov 27, 2007

Thanks! I'll take a look at that. :)

kedo
Nov 27, 2007

duck monster posted:

EVERYTHING is overkill in 2023 web development.

What are you talking about?! To render HTML on a page I need 500 dependencies and a compiler that only works when you compliment it nicely before it runs.

kedo
Nov 27, 2007

IT has opinions about everything when it comes to web dev, and they are mostly misinformed and wrong and should be ignored.

kedo
Nov 27, 2007

There was a phase in UX when various idiots thought it was extremely critical for users to be able to perform every action within the viewport, so back buttons/links within designs became a frequent request from designers. I want to say this was the mid 2000s when UX was becoming a hot topic in web design but no one really knew wtf they were doing.

However once generalized analytics became more readily available it became clear that users readily used the back button or an alternative navigational approach. My own anecdotal experience is that in-site back buttons never achieve higher than single digit use percentages.

Now the only people requesting back buttons are clients who took a seminar at a conference ten years ago where someone told them that sites without back buttons have a [negligible percent] higher bounce rate, and now Ever Page Must Have A Back Button, Forever.

kedo
Nov 27, 2007

HTMX feels like CSS utility classes in that they both seem like they were designed by people who have a paralyzing fear of doing anything outside of markup.

Me? Open up a javascript file? When building a WEBSITE? No thank you.

kedo
Nov 27, 2007

Oysters Autobio posted:

Unironically yes. This is the sole reason I'm interested in HTMX.

I do python and mainly data analysis / data science stuff, there is zero reason for me to touch javascript and I'd rather continue improving my python before jumping over to learn a new language. At the same time though, I actually really love front-end design and UX design, but there's no UI frameworks in Python that seem popular enough to use or get into, whereas HTMX has some sort of following (for now...).

I know once I start going deeper into front end stuff that eventually I'll be forced to move over to a JS framework, but it's not my current or immediate career interests so 🤷‍♀️.

See, I totally understand this perspective because I am also not always terribly interested in picking up a brand new language/framework for a one-off project, but Javascript is foundational to the web these days.

To me HTMX feels a lot like someone said, "I'm a construction worker but I only know how to use hammers. I use hammers to hit things, and I don't want to have to learn how to saw things, or drill things, or glue things, so I made this hammer that can saw and drill and glue. It doesn't do any of them well, and it was a convoluted process to make it and actually required that I shoehorn a saw and drill and glue bottle onto my hammer, but at least now I can (poorly!) saw and drill and glue things by simply whacking them with my hammer!"

If you're being inexorably drawn towards front-end dev (escape now!), you don't have to go the full npm/framework route to start. In fact you shouldn't. This is still a perfectly acceptable way to build a simple site:

code:
/project-dir
  index.html
  styles.css
  main.js

kedo
Nov 27, 2007

Totally off topic from this current conversation, but can anyone recommend tools to add issue size/weight to Github issues and/or projects? I'm hesitantly open to non-Github tools, but Github is so deeply ingrained in our existing process that I'd really rather not have to reinvent the wheel if I don't have to.

kedo
Nov 27, 2007

pentium166 posted:

It looks like some of the GitHub Projects templates have a size field. Do you want to add that to an existing project or issues or something?

You're totally right, and I just somehow missed that entirely. Thank you for pointing it out! :cheers:

kedo
Nov 27, 2007

Ugh... I have a project that was built in Tailwind which now needs to be in Bootstrap. Has anyone converted a project between these two one way or the other, and if so do you have any wisdom to share?

I've done some cursory Googling this morning and it appears there are a few AI-based converters that claim they can do this sort of thing, but I am highly skeptical. My current assumption is that this basically requires more or less a full rewrite of the front-end of the site, and that we might be able to speed the process up slightly with some AI tool, if we can find one that isn't snake oil.

Any tips or ideas? D:

kedo
Nov 27, 2007

Osmosisch posted:

I believe the most common and reliable solution is to change your name and move to Belize.

I am strongly considering this.

abraham linksys posted:

what on earth is the product requirement here

It's a case of project mismanagement making GBS threads all over dev. The original project requirements from the client specified the site must be built in Bootstrap because they have in-house devs who will take over once we're done, and they have components they share across multiple Bootstrap sites. We said we could do this, but when it came time to actually develop the site none of our internal devs were available so we had to shop it out. The third-party firm we used did an excellent job overall, but they asked if they could use Tailwind (they, of course, were not in any of the early meetings where Bootstrap was discussed), and since we didn't have any internal devs on the project the two people who should have been keeping track of this (the project manager and the UX designer who was acting as technical lead) simply forgot about it and said yes. :doh:

So now the site is 100% complete and launched and the client is like, "cool, but where is Bootstrap," and we're like, "gently caress," and now myself and the other folks on the internal dev team get to deal with this poo poo.

Adbot
ADBOT LOVES YOU

kedo
Nov 27, 2007

Thanks for the commiseration, this is just about the worst type of project I could possibly imagine so it's nice to know I'm not the only one who thinks so? :smith:

Nolgthorn posted:

e: Like, does this work?
https://www.docuwriter.ai/tailwindcss-to-bootstrap-code-converter

I doubt it - you might whip up a sweet demo to show why this is hard.

I also found that and passed it a few pieces of markup that included Tailwind helper classes as an experiment. It changed a few classes, but then also just straight up deleted pieces of the markup that it didn't recognize (eg. data attributes that tie into JS), so it's semi-helpful at best. I appreciate it tho.

Nolgthorn posted:

That is not possible these are two completely incompatible systems I hope everyone is aware that the lead and UX wasted a lot of money. This isn't something you can "just fix" easily, a new timeline and budget needs to be planned.

smackfu posted:

Rip out all the styling and start over?

Yeah, I mean this is basically what I've been thinking as I've been digging into this over the last few days and I'm pulling no punches when I'm sharing estimates with the team. It's a mess.

It seems like we might be able to get by without a complete rewrite – changing out all the helper classes and creating new helper classes (that don't exist in Bootstrap) based on what the external devs included the Tailwind config is my current thinking. However all of the site's JS functionality runs through Alpine, so if I need to remove that and move everything into Bootstrap components then it really IS a complete rewrite and I just can't even begin to deal with that.

  • 1
  • 2
  • 3
  • 4
  • 5
  • Post
  • Reply