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
fsif
Jul 18, 2003

I hope this isn't an inappropriate request here, but I'm having trouble with my simple jQuery script running on my iOS devices (both Chrome and Safari).

The script controls the behavior of a navbar (#traveler) that appears when a user begins to scroll up when they are far down the page, but disappears when a user continues to scroll down, or when the original navbar at the top of the page is visible.

code:
var previousScroll = 0;

$(window).scroll(function () {
    var currentScroll = $(this).scrollTop();
    if (currentScroll > 200 ) {
        if (currentScroll > previousScroll) {
            $('#traveler').fadeOut(100);
        } else {
            $('#traveler').fadeIn(200);
        }
    } 

 //ensure my animations finish
    setTimeout( function() { previousScroll = currentScroll}, 200);
 
 //vanish if user scrolls to top
    if (currentScroll < 200) {
        $('#traveler').slideUp(100);
    }
});
Works perfectly on desktop, but I don't know what's getting lost on mobile devices. I'm *guessing* the issue is with the selector? But I haven't seen anything about using window causing issues when I do a Google search.

(Also, I can link to my codepen if that's easier.)

Adbot
ADBOT LOVES YOU

fsif
Jul 18, 2003

God, thank you! Everything I found was talking about problems when using body as a selector, so I was on the wrong track.

fsif
Jul 18, 2003

Inacio posted:

applied for a job, they sent a HackerRank test. 5 questions, 2 hours. couldn't get 2 of them to pass (had several failing test cases).
i feel incredibly inadequate, and the usual defense of "you'd never need to use any of this in real-life front-end development" isn't helping. :saddowns:

The company is probably poorly run if that's their screening process. gently caress em.

fsif
Jul 18, 2003

Yeah I don't think there's that much value in TypeScript unless you're already proficient in JavaScript, at least right now. It's not like jumping ahead using a framework/library where you would at least get a lot of user-facing functionality immediately out of the box. You'll likely just end up confusing yourself later for potential vanilla JS projects.

There might be a time in the next several years where TS is so ubiquitous that it's almost pointless to learn JS without it, but we're not there yet and there's no guarantee we ever will be.

fsif
Jul 18, 2003

Newf posted:

Question: how much like regular HTML elements do these `circle` elements behave? How straightforward is it to, say, have one of these notes enlarge on hover or click, and pop a tooltip that lists the note name?

Very similarly, I believe. You should be able to just add a hover state to the circle element with CSS (transform: scale(1.1) or whatever) and id's to each element to target them in JS for the tooltips.

fsif
Jul 18, 2003

1. Yep.

2. Correct.

fsif
Jul 18, 2003

C-Euro posted:

Thank you both, can I write all those out as rel="nofollow noreferrer noopener"?

You only really need noopener in most use cases IMO.

norefferer will hide your site's address from the external site you linked to. I don't *think* it's a security concern unless you want your site to remain private. If you link to another site, you might as well get credit for it.

nofollow is used to tell search engines that your link should not be factored into SEO calculations. The short of it is that Google et al give higher scores to sites that are frequently linked to from external sites; nofollow removes your link from consideration. There are a lot of reasons one might wish to do this, but I doubt any that would make sense for your project. Be a good web citizen and leave nofollow off!

fsif
Jul 18, 2003

Also, yeah, I wouldn't leave big chunks of commented HTML in a template in any professional capacity, but if it's easier for you and you're not putting the site on a web dev portfolio, then you can just leave them in.

Sounds a bit like you're digging into git via GitHub, but unless you're really interested in it or taking web dev past a hobby, I don't recommend bothering with it. It's complicated and clunky at first and not at all necessary for the stuff it sounds like you want to do.

fsif
Jul 18, 2003

Cugel the Clever posted:

The MDN link points to this article which suggests otherwise: https://www.jitbit.com/alexblog/256-targetblank---the-most-underestimated-vulnerability-ever/

See also:


I don't think there's any real concern for their use case, but it's still good practice.

Yeah I think that second link sort of proves my point. It says either using noopener OR norefferer will prevent the attacks. Google Lighthouse won't flag anchor tags with target blank as long as it has at least one of those.

WordPress used to automatically add norefferer to all external links in new tabs and has since switched to just adding noopener.

https://www.forbes.com/sites/johnrampton/2017/11/06/the-difference-between-nofollow-and-noreferrer-and-why-it-matters/#2f9eaab21e06

Maybe the guy from your first link is right (caniuse says noopener isn't supported in IE11, for example), but I'm just rolling with what Google and WordPress say.

e: scratch all that, Wordpress still adds norefferer after all. Guessing a Google audit doesn't flag a noopener link because it wouldn't present a vulnerability in modern browsers.

tl;dr: yeah just add the "norefferer".

fsif fucked around with this message at 05:23 on May 6, 2020

fsif
Jul 18, 2003

Lumpy posted:

Yep. If we stopped supporting IE11two of our five biggest customers would leave and we'd go out of business.

Completely confused by this. I've never worked in an environment where anyone would tolerate forced IE.

I know you can't name names, but what are the culture of these places? How is this even possible?

fsif
Jul 18, 2003

Quick CSS grid question: I feel like there should be an easy way to do this without using JavaScript, but I haven't been able to crack it. My guess is that it's a limitation in the grid spec, but I want to confirm before I start giving spiels about this taking more dev hours.

I have two columns that need to house a variable number of items. It's pretty easy to just have things go from left to right. However, if I want items to first populate the left column and then once they reach the halfway point to begin populating the right column, is there an easy CSS way to do it?

Right now, I set `grid-auto-flow:` to `column` and I have to know the number of items ahead of time and manually set the grid-template-rows (e.g., if I have 7 items, I need to set `grid-template-rows:` to `repeat(4, 100px)`). Is there a better way, or am I just going to run some extra JS every time the number of items in my grid changes?

fsif
Jul 18, 2003

Lumpy posted:

Use flexbox instead of grid in there?

I'll run into the same problem there, though, no? I'll either need to set a fixed height (which is effectively the same issue I'm having with grid-template-rows) or I'll risk the content spilling over to more columns than just the two I want.

fsif
Jul 18, 2003

Mr. Angry posted:

CSS multi column layout would work if you don't mind different sized items not lining up. You might have to set a few more properties for blocks to play nice with the columns as they're intended for inline content.

Thanks, this is a good call.

A bit frustrating that I can't keep them on the rows' tracks, but I can probably just make sure the items are all the same height in most use cases.

fsif
Jul 18, 2003

I also wouldn't rule out WordPress over security issues, especially for a personal site. Just make sure your password is strong and avoid unpopular and outdated themes/plugins.

fsif
Jul 18, 2003

Lumpy posted:

If your art director is surprised by this, they are not qualified for their job.

Seems a bit harsh, heh.

Art directors usually work across different media and knowing the rendering capabilities of the third most popular email client is relatively arcane knowledge.

fsif
Jul 18, 2003

Look if you're just making a website that needs a hamburger menu and maybe a modal or two you can absolutely (and probably should) use vanilla JS. There's no need to overengineer every project that touches JS.

fsif
Jul 18, 2003

Violator posted:

Any suggestion for a simple animation framework? I don't need anything super complex, just the usual animate in on scroll points, etc. I don't need anything like greensock with crazy complex animations. I'm trying out Tailwind as a CSS framework and would like something a bit more than that offers out of the box.

Animating on scroll points tends to be a little trickier than one would think, but AOS is a good, dead simple library if you just want to get something rolling quickly.

If that's too basic, I think GreenSock's ScrollTrigger plugin is the gold standard for scroll animations, but yeah, I know you explicitly asked for solutions simpler than gsap. Not really aware of any libraries that split the difference in complexity, unfortunately.

fsif fucked around with this message at 04:24 on Dec 13, 2020

fsif
Jul 18, 2003

Yeah I would say a SSG is absolutely the wrong tool for that kind of job. Someone who worked at Gatsby said that even generating the documentation for their own site entailed a 30+ minute build process. There are far fewer than a million pages of Gatsby docs.

fsif
Jul 18, 2003

Yeah, in my experience "pop up" actually means "modal" now. Not certain there are a ton of good contemporary use cases for the traditional pop ups anyway. I'd do my best to talk a client out of using one.

Lesson learned, I guess?

fsif
Jul 18, 2003

Yeah, if you're planning on making a career of it, you should probably begin getting comfortable with the actual tooling you'd use on the job. Codepen is better to use a really quick sketch pad for ideas or for easily/visually sharing code snippets. You wouldn't code out a full on production site there.

Set up VS Code with the Live Server extension and you'll quickly have something set up that's easier to work with than tabbing through the Codepen views.

fsif
Jul 18, 2003

I like working for agencies. Don't really have any experience elsewhere, but I've met people from the other side that got tired of working in the same codebases all the time.

fsif
Jul 18, 2003

I feel like Svelte is beginning its ascent into the dev zeitgeist. We'll see where it is in a year.

https://twitter.com/SvelteSociety/status/1349248808585056257?s=20

fsif
Jul 18, 2003

The Fool posted:

How is SEO even a full time job and not just an aspect of a designers job.

…why would SEO be done by a designer?

fsif
Jul 18, 2003

That project rules. Think you could try to get some Svelte in there? I feel like you owe it to your predecessors to keep on building this thing up.

fsif
Jul 18, 2003

Yeah if you're looking to get into UX, you probably don't want to spend *too much* time learning a programming language.

It'll help to understand some HTML/CSS/basic basic basic JavaScript to learn how pieces of a project fit together and to establish credibility with the developers, but UX designers ordinarily don't write any code.

fsif
Jul 18, 2003

Empress Brosephine posted:

What should be used instead, span?

It should be using semantic elements (e.g., <main>, <article>, <section>, <aside>, even <h1> and <p>). There are appropriate use cases for <div>s, but you should really use them as more of a last resort. And past that, a single piece of content nested in five layers of <div>s is almost definitely a bad practice, heh.

Something like this is better for screen readers, web crawlers, etc:

pre:
<main>
  <article>
     <h1>Title</h1>
     <p>Lorem ipsum</p>
     <p>Lorem ipsum</p>
  </article>
  <aside>
    <p>Whatever</p>
  </aside>
</main>

fsif
Jul 18, 2003

lunar detritus posted:

I was looking into this recently and semantic elements are a lie that almost no client uses. They definitely do make things clearer when developing (and parsing if scraping the site) but they are more of a "nice to have" thing. For a basic webpage, as long as you have a hierarchy (h1-h6) and you're following the rules (interactive elements, what elements can be nested inside other) you're good to go. For a webapp it's time to dust off ARIA and pray.

That says there's no official spec there, but my sense is that people with screen readers still find semantic tags helpful. Most accessibility-focused developers really pound the table for them, anyway.

The reasons not to bother with them feel a bit chicken/egg to me. Like, right, if developers are using them too inconsistently to build much in the way of client features designed around them, discouraging their usage or marking them as a "nice to have" isn't going to help. There will probably always be a fair number of <div>s in any semi-complex website or web app, but I don't think there's much technical overhead in using at least <main>, <nav>, <article>, and <section> tags.

fsif
Jul 18, 2003

Can't really speak on the email template front, but nah I wouldn't say Bootstrap is recommended much these days. New CSS specs in flexbox and CSS grid have kind of rendered the old way of doing things obsolete.

But you know, if it's what you know and you're not planning on doing much more front end-y stuff in the future, it will still work.

fsif
Jul 18, 2003

I mean I see a lot of jQuery too but I wouldn't say it's generally recommended in 2021.

They're both fine if they're what you know (or even just what you like!) and you want to get something up, but each have drawbacks that have caused developers to move away from them.

fsif
Jul 18, 2003

Empress Brosephine posted:

https://campground-search-final.vercel.app/camps?city=all&campfeatures=all&region=all&camptype=all

Like this small work in progress app thing I'm working on gets all the data from wordpress to populate it within NextJS which wl then link back to wordpress. Granted it's slllooowwww but I haven't had time to figure out why yet.

It looks like you're fetching the data from WordPress with each page request. My guess is you'd be much better suited just running the request at build time. Try replacing getServerSideProps with getStaticProps.

You'll need to ensure your app on Vercel runs the build script every time someone makes an update on WordPress, but the page should be much more performant.

fsif
Jul 18, 2003

Empress Brosephine posted:

Sweeet I'm going to try that. I don't think I'm using either of the props but using apollo client to do the fetching?

Ah, okay. If you're using Next.js, you're missing out on one of its killer features by not using it for data fetching: https://nextjs.org/docs/basic-features/data-fetching

Using getStaticProps will fetch the necessary data at build time and then just hard code the data into a static page. Might take a tiny bit of elbow grease, but you should be able to just integrate your existing Apollo queries right in the getStaticProps() function.

fsif
Jul 18, 2003

Yeah if you're talking 20 hours that's not enough time to learn anything substantial. Set up a WordPress site and see if you can find a pre-existing theme you like.

fsif
Jul 18, 2003

Because that sort of tool will take our jobs. :v:

But past that, my admittedly limited experience with a designer handing me Webflow assets was that it was bloated code and challenging to optimize or inject our business logic into. It just sort of exports compiled assets, you know?

And just really, there have been so many attempts to better democratize the front end dev process with GUIs for decades now that I'm somewhat skeptical that a good one will ever exist. The Wix/Squarespace tools to build a brochure website have obviously developed to such a point that hobbyists are kind of losing their freelance gigs, but we can't even build React frameworks for seasoned developers that aren't filled with warts.

fsif
Jul 18, 2003

frogbs posted:

I guess my thought process is, if starting today Figma could export HTML as clean as your average Bootstrap site or something, would people go directly from Figma to HTML, or would it still be taboo?

The answer to the more literal interpretation of the question—where Figma would export markup "as clean as your average Bootstrap site"—is that most developers would still not use it. The average Bootstrap's markup isn't particularly clean and it's a framework that's been out of favor for several years now, heh.

But to answer more towards what I assume is the spirit of the question—would developers embrace a GUI that exports well-structured, project-ready markup?—I think the answer is yes, but we're so far from something like that existing that it might as well be science fiction.

First, in order to allow a Figma-like tool to export usable markup, you'd need a sizable paradigm shift that would shoulder designers with a greater technical burden. They could no longer treat the tool like an updated Sketch; they wouldn't be able to just draw a square and add some text on top of it. They would need to be the ones designing explicitly with CSS rules like display type, flex/grid alignments, box-sizing, margins/paddings, rules for responsive sizes, etc etc. Some very well-oiled web design teams have strict design systems where they are already accounting for these factors in their drawings, but that would probably not be enough for Figma to generate the appropriate styles on its own. You would need some mechanism for the designer to tell the program that this is in fact a <div> with display: flex, flex-flow: column nowrap, with the :last-child <p> having a margin-bottom of 0.

Once all of THAT is taken care of, you're still left with the actual HTML markup. Can the designer specify a <section> tag or an <aside>? Or even that the rounded rectangle they drew is a <button>? What if they want something that visually looks like an <h1> by the design system, but will function semantically as an <h2>? They good with aria- attributes? Even if the designer works within theirselves within this new Figma and explicitly defines CSS rulesets for every shape they draw, can they (or the Figma-like tool itself in the exports) do so in a way that avoids nesting a ton of <div>s unnecessarily?

And second, Figma would need to create a way to export the markup and style assets in many different formats. If the tool just exported a bunch of HTML and CSS files, it's not going to work with the project structure of most professional developers in 2021. You'd need to account for a person using SCSS on a WordPress theme, a person using styled-components on a Nuxt site, a person using CSS modules on a Gatsby site, etc. How would you determine what markup is inserted into what template for a WordPress site? Or which pieces of the design constitute which components for React sites?

fsif
Jul 18, 2003

I do miss being able to put together simple sites for local small businesses as a low stress side project, but I can't in good conscience recommend they drop $1000+ on them anymore when they can just get a Squarespace.

Also they all look so bad right now but a pizzeria isn't going to lose business because their site looks like a 14 year old made it.

fsif
Jul 18, 2003

Most of the sites of local restaurants here do exactly that, but what's my alternative? Order from Applebee's?

fsif
Jul 18, 2003

Steely Dad posted:

Somebody mentioned in the last page or two that Bootstrap is not so hot these days as a front-end framework.

That was probably me. If you and your team are productive with Bootstrap and it gets the job done, don't worry about what a dumb dickhead on a dead forum says, heh.

I don't really like CSS frameworks, but Tailwind CSS and Bulma are kind of the trendier ones these days. But, you know, you're fine using Bootstrap if you like it, especially if you're not a front end person by trade.

fsif
Jul 18, 2003

kedo posted:

But noooo, she wants to put a small circle next to the active item on the left and have the user drag it up and down to select other list items. Clicking is explicitly forbidden. I told her flat out this was a terrible idea, and she turned off her camera and refused to talk for the rest of the zoom.

This rules.

fsif
Jul 18, 2003

Fixins posted:

Do any of you use prismic? How do you access the data in a tabbed sheet of a custom post type

Can't actually help you with your question, but I'm curious about your experience with it overall. I've been trying fruitlessly to get us off Wordpress for our headless architecture but my boss is incredibly skeptical of any of these JAM stack centric CMS's.

Adbot
ADBOT LOVES YOU

fsif
Jul 18, 2003

I work primarily on the front end but my experiences with Docker are mostly bad. It's been a massive resource hog that crashes a lot. A client had a project they pieced together with Lando and it required I maintained an older version of Docker. Said version wasn't compatible with my M1 so I had to use an older computer.

I've run into issues with old repos where SCSS and Gulp nonsense have caused some static, but it's generally been easy enough to just switch things around with nvm or MAMP.

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