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
Queen Victorian
Feb 21, 2018

Building a working app from scratch is in the disrespectful waste of time category, in my opinion.

I did a take-home thing while applying for my current job. I was to take an already made but broken toy app, make it not broken, and implement some minor improvement (I fixed some styling/layout inconsistencies or something). I found it to be a good test because I didn't have to waste my time building something from nothing and I was able to demonstrate my skills in a focused manner.

The thing about that sort of assessment is that it's on the company that's hiring to build the app in the assessment and also carefully design the exercise so that it tests what you need it to test within a given time frame. It's a lot of engineering hours to develop that sort of test. My thought is that when the take-home involves a requirement list and zero foundation/scaffold, it possibly means that they didn't have the time/resources/wherewithal to build something for you that tests for what they need it to test while respecting your time because writing a list of requirements is super easy and quick, while building you a scaffold/something to fix/improve and coming up with the accompanying exercises/objectives is not.

Adbot
ADBOT LOVES YOU

worms butthole guy
Jan 29, 2021

by Fluffdaddy
Are you put in the spot and watched while doing these? Do you have access to Google? The tests are why I haven't applied to anything. Like I usually need Google to start and then I'm golden but there's no way I could poo poo out something on the tip of my head

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice

Fixins posted:

Are you put in the spot and watched while doing these? Do you have access to Google? The tests are why I haven't applied to anything. Like I usually need Google to start and then I'm golden but there's no way I could poo poo out something on the tip of my head

So you're saying you aren't a 100x Rockstar Ninja Unicorn?

teen phone cutie
Jun 18, 2012

last year i rewrote something awful from scratch because i hate myself

marumaru posted:

i've never once been offered compensation for the multiple-hour take-homes i've done.

actually this is a great point. Most of my jobs I've taken were quick code challenges, not ones that gave me long hour challenges

marumaru
May 20, 2013



Grump posted:

actually this is a great point. Most of my jobs I've taken were quick code challenges, not ones that gave me long hour challenges

Is it possible to learn this power?

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice

marumaru posted:

Is it possible to learn this power?

Yes. If the company you are going to interview with mentions a multiple hour exercise, you decline the interview.

That said, our second round of interviews are three ~30-40 minute things in different areas of competence, done live. Someone with "mad skills" can bang them out in 10-20 minutes, and we honestly don't care if you finish, and we make it very clear you can google, stack overflow, whatever you need. We just want you see how you think.

Splinter
Jul 4, 2003
Cowabunga!

minato posted:

Did they qualify what "from scratch" meant? What libraries could you use? Because that list is basically the Django 101 tutorial. Slap in Bootstrap and Django Rest Framework and you could speedrun that in a couple of hours. If you couldn't use something like Django then fuuuuuck that.

Using a backend MVC framework to get around their "no frontend framework" requirement and essentially doing the whole assignment in something like Spring, Rails, Django, Symfony etc rather than writing any JS would be a kinda hilarious response to that test. I know with Spring for instance you can handle most of that list with a few config class annotations and short, basic implementations of a config interface method or two. Then just use your choice of CSS UI library with whatever templating language the MVC framework uses to spit out the dashboard. "You said no frontend framework so I used a backend framework...because I'm a professional and wouldn't waste time building something like this from scratch."

novamute
Jul 5, 2006

o o o
The other question to ask yourself is "Do I want my co-workers to be the kind of people that agreed to go through this same bullshit?"

Jadeilyn
Nov 21, 2004

I did a code challenge recently when I got a new job. They created the challenge, rather than using something pre-built or asking me to build them something from scratch. The position is front end, so the challenge had a simple Angular app built out that talks to a public API, where I needed to add a page and show that I knew how to use NgRx (basically redux for Angular wrapped in observables) to handle data for that page. I thought this was reasonable since they use NgRx all over the place and the app is large enough to justify it. They designed it to take around two hours. It also gave me a good opportunity to get an idea of their code style and some ideas of code organization. Getting paid to do the work would have been nice, but I nearly doubled my total compensation with the job so I'm happy with the end result.

It helps that they reached out to me and I wasn't actively looking, so it was the least stressful interview process I've ever done.

prom candy
Dec 16, 2005

Only I may dance

Jadeilyn posted:

The position is front end, so the challenge had a simple Angular app

Red flag

barkbell
Apr 14, 2006

woof
new job is angular with ngrx everywhere it sucks

Jadeilyn
Nov 21, 2004


I like Angular. :colbert: I knew that the job used it and it has been a nice step up from my previous job at a web agency that has a lot of leadership issues. If I’m going to do a code challenge for a job, it’s nice for it to use the same stack as the job and have some of the same sensibilities.

NgRx doesn’t make sense for smaller apps, but I think it does for the product I’m working on now. At the agency where I worked previously, I managed state with RxJS BehaviorSubjects and it worked fine. It was also a lot easier to teach to juniors. My previous job had an attached bootcamp-style internship program, so there were a larger than normal percentage of juniors.

Macichne Leainig
Jul 26, 2012

by VG
Someone at work commented about the new internal tool I released recently, and said it looks really nice :unsmith:

LifeLynx
Feb 27, 2001

Dang so this is like looking over his shoulder in real-time
Grimey Drawer
Next/Image is so annoying. I really don't need to use it for 3 KB SVG files, stop yelling at me, ESLint. I also don't need it for logos and whatever; it's not necessary for it to have to generate two divs with more inline styles than your average Tailwind button.

prom candy
Dec 16, 2005

Only I may dance

LifeLynx posted:

Next/Image is so annoying. I really don't need to use it for 3 KB SVG files, stop yelling at me, ESLint. I also don't need it for logos and whatever; it's not necessary for it to have to generate two divs with more inline styles than your average Tailwind button.

Extremely same. Not to mention on netlify it makes images take like 4s to load because it's spinning up a serverless function to apply the 0 transformations i asked for.


Jadeilyn posted:

I like Angular. :colbert:

I'm just joshin

neurotech
Apr 22, 2004

Deep in my dreams and I still hear her callin'
If you're alone, I'll come home.

I'm looking for suggestions on ways to keep on top of what's happening in the front end space in terms of new tools, industry news, interesting articles, that sort of thing.

How do you all keep your finger on the pulse of this stuff?

The Fool
Oct 16, 2003


Twitter

teen phone cutie
Jun 18, 2012

last year i rewrote something awful from scratch because i hate myself
i dunno if this is a hot take or not, but I hate typescript enums. They don't work with intellisense and they feel pointless:



novamute
Jul 5, 2006

o o o
Nah that is normal. Union types are better in every way.

Cugel the Clever
Apr 5, 2009
I LOVE AMERICA AND CAPITALISM DESPITE BEING POOR AS FUCK. I WILL NEVER RETIRE BUT HERE'S ANOTHER 200$ FOR UKRAINE, SLAVA

teen phone cutie posted:

i dunno if this is a hot take or not, but I hate typescript enums. They don't work with intellisense and they feel pointless:


You're expected to just use the enum directly. It's transpiled down to an object, in any case.

TypeScript code:
export enum DISPLAY {
  BOTTOM = "bottom",
}

const doThing = (display: DISPLAY) => {
  if (display === DISPLAY.BOTTOM) {
    // do thing
  }
};
But yeah, string literal types are more succinct and still have mass-rename functionality (at least in the latest TypeScript).

fsif
Jul 18, 2003

neurotech posted:

I'm looking for suggestions on ways to keep on top of what's happening in the front end space in terms of new tools, industry news, interesting articles, that sort of thing.

How do you all keep your finger on the pulse of this stuff?

I mostly just listen to podcasts. Syntax.fm and Shop Talk in particular.

Obfuscation
Jan 1, 2008
Good luck to you, I know you believe in hell
You can iterate through the values of a string enum but not union types, so that's one thing that they have going for them

novamute
Jul 5, 2006

o o o
If that's a thing you need to do there is a slightly hacky workaround https://twitter.com/housecor/status/1387083288989380610

Cugel the Clever
Apr 5, 2009
I LOVE AMERICA AND CAPITALISM DESPITE BEING POOR AS FUCK. I WILL NEVER RETIRE BUT HERE'S ANOTHER 200$ FOR UKRAINE, SLAVA
I've got a meddlesome problem that I'd love to solve with pure CSS to avoid the need for a janky JS implementation that would have to account for page resize, but a solution eludes me. Basically, I want an image to "fill" the height of a container that gets its height from the other items in it, plus have a specific aspect ratio (1:1; 3:2; etc.)

HTML code:
<div class="container">
  <div class="item item--image">
    <img class="image" src="imageUrl" />
  </div>
  <div class="item">
    <p>Blah</p>
  </div>
</div>
If we lived in a perfect world, I could just specify height: 100% on the .item--image and .image, discarding the image's inherent dimensions and everything would just work. Unfortunately, that doesn't seem to be the world we live in and the img will only accept a height override with an explicit unit value. The only exception I've found is if the .container is display: grid, where .item--image is set to height: 100% and .image set to height: 0 to prevent its inherent sizing and min-height: 100% to take up the container's height. Of course, this doesn't work correctly in at least Firefox, so quite possibly doesn't work in any of the other circumstances. The aspect ratio could be achieved with the new aspect ratio property, but that doesn't work with our browser requirements.

The padding top/bottom trick doesn't work as it defines the height by the width, which is the opposite of what I need.

Cugel the Clever fucked around with this message at 03:48 on Oct 17, 2021

dupersaurus
Aug 1, 2012

Futurism was an art movement where dudes were all 'CARS ARE COOL AND THE PAST IS FOR CHUMPS. LET'S DRAW SOME CARS.'

Cugel the Clever posted:

I've got a meddlesome problem that I'd love to solve with pure CSS to avoid the need for a janky JS implementation that would have to account for page resize, but a solution eludes me. Basically, I want an image to "fill" the height of a container that gets its height from the other items in it, plus have a specific aspect ratio (1:1; 3:2; etc.)

HTML code:
<div class="container">
  <div class="item item--image">
    <img class="image" src="imageUrl" />
  </div>
  <div class="item">
    <p>Blah</p>
  </div>
</div>
If we lived in a perfect world, I could just specify height: 100% on the .item--image and .image, discarding the image's inherent dimensions and everything would just work. Unfortunately, that doesn't seem to be the world we live in and the img will only accept a height override with an explicit unit value. The only exception I've found is if the .container is display: grid, where .item--image is set to height: 100% and .image set to height: 0 to prevent its inherent sizing and min-height: 100% to take up the container's height. Of course, this doesn't work correctly in at least Firefox, so quite possibly doesn't work in any of the other circumstances. The aspect ratio could be achieved with the new aspect ratio property, but that doesn't work with our browser requirements.

The padding top/bottom trick doesn't work as it defines the height by the width, which is the opposite of what I need.

I’m not in a place to test it but that sounds like it might be a flexbox problem. flex-direction: column then something like .item—image { flex: 0 0 auto } and width: 100% on the actual image. You might need to stretch items but I forget which property that is.

(Who am I kidding, everything is a flexbox problem)

LifeLynx
Feb 27, 2001

Dang so this is like looking over his shoulder in real-time
Grimey Drawer
Sometimes align-self: center on the image fixes whatever flexbox problem is bugging you.

barkbell
Apr 14, 2006

woof

Cugel the Clever posted:

I've got a meddlesome problem that I'd love to solve with pure CSS to avoid the need for a janky JS implementation that would have to account for page resize, but a solution eludes me. Basically, I want an image to "fill" the height of a container that gets its height from the other items in it, plus have a specific aspect ratio (1:1; 3:2; etc.)

HTML code:
<div class="container">
  <div class="item item--image">
    <img class="image" src="imageUrl" />
  </div>
  <div class="item">
    <p>Blah</p>
  </div>
</div>
If we lived in a perfect world, I could just specify height: 100% on the .item--image and .image, discarding the image's inherent dimensions and everything would just work. Unfortunately, that doesn't seem to be the world we live in and the img will only accept a height override with an explicit unit value. The only exception I've found is if the .container is display: grid, where .item--image is set to height: 100% and .image set to height: 0 to prevent its inherent sizing and min-height: 100% to take up the container's height. Of course, this doesn't work correctly in at least Firefox, so quite possibly doesn't work in any of the other circumstances. The aspect ratio could be achieved with the new aspect ratio property, but that doesn't work with our browser requirements.

The padding top/bottom trick doesn't work as it defines the height by the width, which is the opposite of what I need.

https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
https://developer.mozilla.org/en-US/docs/Web/CSS/object-position
https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio

Not sure I understand exactly what you are looking for, but these properties should be helpful to you.

Cugel the Clever
Apr 5, 2009
I LOVE AMERICA AND CAPITALISM DESPITE BEING POOR AS FUCK. I WILL NEVER RETIRE BUT HERE'S ANOTHER 200$ FOR UKRAINE, SLAVA
So I've solved at least the "fill" part of the equation with flex, but it's non-viable as it's treated as having no width, despite visually appearing to, resulting in the other items in the container potentially overlapping the image div...

And it still doesn't work without aspect-ratio, regardless.

Glitch sandbox and screenshot, if anyone's interested in a brain teaser and loving wonky browser flex/grid behavior:

Leshy
Jun 21, 2004

Cugel the Clever posted:

Basically, I want an image to "fill" the height of a container that gets its height from the other items in it, plus have a specific aspect ratio (1:1; 3:2; etc.)
Your requirements are contradictory. What should happen when the aspect ratio of the image no longer fits into the aspect ratio of the container?

Say that the container becomes higher than wide, for example in a narrow layout. If the image is going to have to be the full height of the container, and it has a 1:1 aspect ratio requirement, it must now be wider than the container.

uncle blog
Nov 18, 2012

Started working on a projected that uses Redux, which I'm not super experienced with. Several pages of the app needs a piece of state that is retrieved by an API call. I'm wondering where I should trigger the action to retrieve the data. Initially I did it on each of those pages, but is it more clevererer to do it in App.tsx or some other place that' ensures it is done before the user navigates anywhere?

Edit:
Currently the dispatch is placed in the router for that subset of pages.

uncle blog fucked around with this message at 14:20 on Oct 22, 2021

prom candy
Dec 16, 2005

Only I may dance
Generally I would put it in the highest level place it can go where it can be accessed by everything that needs it while not being called unnecessarily by things that don't need it.

Roadie
Jun 30, 2013

uncle blog posted:

Started working on a projected that uses Redux, which I'm not super experienced with. Several pages of the app needs a piece of state that is retrieved by an API call. I'm wondering where I should trigger the action to retrieve the data. Initially I did it on each of those pages, but is it more clevererer to do it in App.tsx or some other place that' ensures it is done before the user navigates anywhere?

Edit:
Currently the dispatch is placed in the router for that subset of pages.

Alternatively: Make a hook that wraps useState and useDispatch, plus something like SWR that makes it easy to pass null to the fetch to have a fetch not happen, to trigger the data retrieval only if the needed data isn't already in the state, then include that hook in each component that needs the data.

You should be making the most of hook reusability, and that includes making stuff with basic caching (don't go overboard on optimizing it) so that instead of needing to specially arrange things you just reference whatever's needed everywhere it's needed and have the hooks do the necessary de-duplication.

Also, if you're not actually doing anything to this state it shouldn't even be in the Redux store in the first place. Just have a custom hook wrapping a fetch call with a suitable cache on it (or again, SWR because it makes cache stuff super easy) and reference that hook in every component that needs the data.

prom candy
Dec 16, 2005

Only I may dance
That's a good approach but the useState state won't be shared between components in a custom hook so you'll definitely need to either use something that uses context or write your own context.

Maybe that's what you're getting at with the SWR reco but I just wanted to clarify since you mentioned useState as well.

Macichne Leainig
Jul 26, 2012

by VG
I put SWR calls in a custom context in my React application. Just some core things like lookup values, etc that are often used on multiple screens. It's really quite nice actually.

I should probably learn Redux one of these days but context does 99% of what I need too.

prom candy
Dec 16, 2005

Only I may dance
I really like Redux still but I've also been using it since 2015 or so. I don't think it would be worth learning now unless you have an app with a lot of global state, and even that problem is generally mostly solved by the data fetching libraries that manage their own cache. Personally I like RTK Query for that since, surprise, it's built on top of redux. It also makes it really easy to hook into your own reducers, which I've done for slices where I want a highly normalized cache instead of the denormalized one that SWR, react-query, and RTK Query give you out of the box.

Also having used Apollo extensively for data fetching and caching, don't use Apollo.

Roadie
Jun 30, 2013

prom candy posted:

That's a good approach but the useState state won't be shared between components in a custom hook so you'll definitely need to either use something that uses context or write your own context.

Maybe that's what you're getting at with the SWR reco but I just wanted to clarify since you mentioned useState as well.

No, you're right there, I had Redux too much on the brain, though there's also other no-config don't-do-it-yourself methods around, like useState-like hooks that sync automatically with LocalStorage/SessionStorage.

But in any case, if all you're doing is a one-way read of data, you should never spend the effort to specially store it, just set up whatever's doing the data retrieval for proper caching and then call it everywhere you need the data.

prom candy posted:

I really like Redux still but I've also been using it since 2015 or so. I don't think it would be worth learning now unless you have an app with a lot of global state, and even that problem is generally mostly solved by the data fetching libraries that manage their own cache. Personally I like RTK Query for that since, surprise, it's built on top of redux. It also makes it really easy to hook into your own reducers, which I've done for slices where I want a highly normalized cache instead of the denormalized one that SWR, react-query, and RTK Query give you out of the box.

Also having used Apollo extensively for data fetching and caching, don't use Apollo.

RTK Query is another good option, though I think their docs are slightly disingenuous about the comparative overhead of "just have a set of data retrieval hooks" for most web apps. I'm working on a thing with about 20 "fetchWhateverData" hooks, each one's about 10 lines (plus type definitions), and the only settings that live in each are ones that would need be individually detailed anyway (e.g. cache this thing for 1 day, cache that thing for 1 minute, etc).

prom candy
Dec 16, 2005

Only I may dance

Roadie posted:

RTK Query is another good option, though I think their docs are slightly disingenuous about the comparative overhead of "just have a set of data retrieval hooks" for most web apps. I'm working on a thing with about 20 "fetchWhateverData" hooks, each one's about 10 lines (plus type definitions), and the only settings that live in each are ones that would need be individually detailed anyway (e.g. cache this thing for 1 day, cache that thing for 1 minute, etc).

Yeah it's kind of just an opinionated library for doing what you describe, plus the integration with redux means debugging your cache is stupid easy.

teen phone cutie
Jun 18, 2012

last year i rewrote something awful from scratch because i hate myself
This might be a dumb question but is there a way to console log the source file from where something is being imported?

like I recently made a change to the "main" field in my package.json, and I want to make sure

TypeScript code:
import { blah } from '@mypackage'
import { blah } from '@mypackage/lib/blah
are coming from 2 different files. Ctrl + clicking just takes me to the type declaration files which doesn't help me much.

N.Z.'s Champion
Jun 8, 2003

Yam Slacker

teen phone cutie posted:

This might be a dumb question but is there a way to console log the source file from where something is being imported?

You can debug how Node itself resolves modules like this,

code:
NODE_DEBUG=module ts-node yourcode.ts
It will print a lot of debug like,

code:
MODULE 162331: looking for ["/home/(me)/(project)/node_modules/@aws-sdk/client-s3/dist/cjs/models"]
MODULE 162331: Module._load REQUEST ./models_1 parent: /home/(me)/(project)/node_modules/@aws-sdk/client-s3/dist/cjs/models/index.js
MODULE 162331: RELATIVE: requested: ./models_1 from parent.id /home/(me)/(project)/node_modules/@aws-sdk/client-s3/dist/cjs/models/index.js
MODULE 162331: looking for ["/home/(me)/(project)/node_modules/@aws-sdk/client-s3/dist/cjs/models"
I'd guess that bundlers like Webpack could be configured to override conventional node module resolution though (eg, for CSS imports)

Adbot
ADBOT LOVES YOU

N.Z.'s Champion
Jun 8, 2003

Yam Slacker
Oh wait you can just do

code:
console.log(require.resolve('your-import'));

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