The developers are going to have to explain to the business owners that the huge spike in traffic is from other developers and not customers for nuts and bolts
@@rubyrubenstahl827 This, they have no idea but they stumbled on the AWS of the industrial world. McMaster ain't going to be impressed by your puny devs asses. Also I used to spend my day on that website downloading 3D models for free, the amount of work behind this product goes WAY beyond the actual website.
I mean this is typical of what you had to do in the early 2000s just to get pages to load in reasonable time. Without these optimizations, these would be 15 second page loads back then. Modern pages would take minutes to load if we still had the same internet speeds.
@@redneckcoder exactly. Imagine living in a world where this was uncommon enough that it deserved its own video so that the youngsters could point and stare at this "deep dive" into "optimization". Oh, wait... We actually are living in that world. Remember what they took from us.
Seeing some of my favorite creators comments under random videos like this reminds me that they are humans just like us and not some omega mighty gods or something
hahaha no way that happens. Bloated, useless frameworks, libraries and UX design tools are all the rage. Oh and toss in massive json files cause the cool kids can't be bothered with optimized SQL and a proper database.
What you DON"T see on this website has something to do with the speed as well. It's not constantly throwing intrusive ads, invitiations to join their email list, promo popups, and, most importantly, it's not actively interfering in the user's search process. Best of all, you don't need to create an account for the privelege of simply viewing the content.
They are very in touch with their clientele. I work in tech, but had close (manufacturing/engineering) industry contacts at a previous job. These are very intelligent engineers, they have great math skills and can visualize drawings in dimensions we dream about, but also frequently solve problems with the phrase "don't use force, get a bigger hammer", not the kind of person who tolerates frustration. Most of them also _despise_ technology, mainly because of the reason you gave, the Enshittification of electronics because programmers keep adding nonsense. Somehow, McMaster Carr avoided this trend, they sell parts, they make parts easy to find, they sell more parts. Another phrase from the industry, "don't fix what ain't broke". Another site that does this is Mouser electronics. Their products are more expensive than aliexpress, but comparing the search between the two sites is night and day.
Their site looks old, but once you've used it a couple times to find some specific parts for your very specific application, you'll find that their site is the absolute gold standard for UX design, you can so quickly dive in and find the exact part you need. They have done a fantastic job with it and run a fantastic service. Parts do cost more, but they're in your shop the next morning.
No, it's not the "gold standard" for UX. It's pretty good though. If this was the gold standard than way, way more websites would look and behave like this. This is the gold standard for engineers and those no nonsense people. Unfortunately most people wouldn't particularly like this website and years of research and A/B testing would confirm this. And when you make a product you make it for "most people". I wish this were the gold standard though.
@@wayland7150 Apple designer bs works well for what it is. There are very different use cases and one isn't better than the other, they're serving different purposes. This is a digitzed catalog which has it's own set of problems.
As an industrial designer, i use their site religiously for grabbing CAD files to test fit standardized parts for designs. Never EVER had a hiccup. Its fantastic!
I was amazed when I visited their website and saw that basically everything had downloadable cad files for most softwares, definitely bookmarking their website just for that. /fellow engineer (albeit mechanical engineer).
@@8u88letea I did a mech design co-op years back and my entire internship was pulling fastener files from McMaster-Carr and adding it to the large assembly. Very useful tool
I've found a couple incorrect models before (used a 300 vs a 150 class pipe fitting) and they had it fixed in like 45 mins after I called and informed them lmao
I have a suspicion that the people who made this websites are those veteran folks from C era where speed and lightweight is crucial. That image sprite technique is a dead giveaway, huge respect to that team/pal!
This was a somewhat common technique just ~15 years ago. It was right around the time we started to use Javascript for everything (knockout, backbone, etc).
@@roodoodnot just somewhat common, literally everyone was using it. Dialup was extremely punishing for each connect, but once you got it going you were fine. It was gradually losing relevance but was still the default way to use graphics
It is insane that I have gigabit internet, 16 cores at 5ghz, 64gb of RAM a graphics card that can render photorealistic images in a fraction of a second and what brings my computer to its knees is the weather channel website. Kudos to McMaster Carr for giving us a website that works so well we don’t even notice it is doing things no other website does, and at the same time shame on the developers who make the rest of the internet crap.
True for bandwidth, but web (JS ) is single threaded, so you effectively use just single core. With exception of Web Workers and Promises which don't mess with main thread. Web is losing battle very much, On mobile is almost over :(
I use them a lot, so much that they reached out to me for a UX feedback session which I was happy to do. The UX designers and devs I talked with were SHARP and DETAILED. They asked really good questions. At the end I told them that whatever they’re doing to resist the suck of other websites, keep resisting!
As someone who does a lot of engineering and CAD design work, I fucking LOVE McMaster-Carr. Nearly every single object on there has true to life accurate 3d models in like 10 different formats so you can accurately import them into your cad package and have perfect, to scale parts for your model in seconds. The program that I use, Autodesk Fusion, literally has a version of this site integrated into the software so you can pop components into your design without ever having to leave... It's magical, I will never be able to go back! Kudos to everyone at McMaster, you honest to god make the world go round!
yeah, I am astounded by the level of information they provide. And they basically sell everything one can think of. And 3d models for everything, detailed description, correct sized, sometimes even a little info button and a whole new picture appears in the table, showing the threading. This is just brilliant
It appears that there's no penny pinching, bean countering, or half-assing anything. They do a thing properly with a lot of thought put into it and they don't nickel and dime users' attention and / or tell the user what to do. It seems their aim is to give you what you need and get out of your way immediately - something google used to do till say 2007-08, when their publicly traded nature started corrupting the tech backbone. Before google, search engines wanted people to stay on their page and click shiny things, much like websites do today with popups, effects, animations, colourful design and what not. They want users to engage and spend time on the site. But it's far better to adopt the McMaster/Google philosophy. It also scales so much better.
They have a plug-in for solidworks as well. It's good business, if they make it easy for you to put into your cad/design, you're likely just going to get it from them instead of trying to find it somewhere else and hope it's the same.
You should order from McMaster Car and then your question will instantly shift from "how is their website so fast?!" to "how the hell do they ship so fast??!!"
@@SMorrisRose Go try! And report back. They have an insane collection I'm sure you'll find something useful. You can even see the shipping on the site. Almost everything for me says "Delivers tomorrow" but some things take a day or two more.
Their returns are crazy awesome too, you just ship them a box of stuff you bought. They figure out who it's from and what the items are inside the box and from what orders they came from. It's crazy. No RMAs just ship it in a box back to them, get a refund.
My son lost both his legs in an auto pedestrian accident. His new donated wheelchair arrived the day before he was set to be released from the hospital But it came in missing a few bolts and nuts, McMaster was the only place that carried it, and my neighbor told me about the website and he ordered the pieces online himself. They arrived one hour before my son was released, and the chair was fully assembled and ready to go for my son when he came out that day. Thank You for being a good company McMaster-carr!!
After my daughter was involved in a severe fall, she needed a custom wheelchair urgently. We found that McMaster-carr was the only supplier with the specific parts we required. Despite the delay, they delivered the missing screws and brackets just in time for her discharge. The wheelchair was perfectly assembled and ready to use the moment she left the hospital. Grateful for your exceptional service, McMaster-carr!
After my father was involved in a waterskiing accident and sadly passed away, he needed a custom bolt for his coffin since the hinge had broken. Thanks to McMaster-carr we were able to get the bolt. Arrived within 10 seconds after ordering it online thanks to the super quick website preloading the bolts to the funeral home right on time. Grateful for your fantastic service McMaster-carr!
You can still call these guys on the phone, 24-7, and you'll get a human right away that'll answer any question you have, or take your order. THAT is good business. Source: I used to own my own business, and I would make calls at 3am, and I'd get someone to place an order for me, or look up an item I had a question about. Superb customer service
Customer service is excellent, they'll even take an order for something not in the catalog if it's from a manufacturer they have a relationship with. They get me weird unlisted product data pretty fast too.
Absolutely phenomenal experience with them, even when I had an immensely annoying payment problem due to working via a university. They are life savers.
At one point we emailed them to get the weight of an item that wasn't listed, and they replied less than 10 minutes later. To this day we suspect they had someone run out to the warehouse with a scale and weigh it.
See, this is why people find things like this to be so unusual. Business-to-business is always more efficient like this. Consumers, meanwhile, get shafted.
@@tristan7588i would be disappointed if that wasnt what they did. Every interaction with them has been like that, get the hmm thats weird, will do that immediately, and get an answer at most a few hours later. The only company that even comes close to that level of service has been aircraft spruce (aircraft specific hardware and tooling, up to and including entire aircraft kits to build your own).
McMaster-Carr was a model for efficient web UX design 12-15 years ago, I recall them being held up as an example in some web design book or blog. Good to see that they've not wanted to do a rebuild in potentially less performant newer technologies. That sort of UI cleanness and snappy performance will never go out of style. (I should note that this is literally a catalog site and involves less complexity than logged-in sites with dynamically-updating user-generated content, so we can't always expect the same sort of performance from other sites.)
It would be really interesting to see a timeline on when they introduced things. ServiceWorkers are relatively new, and I kinda wonder when the implemented hyperloading. Their online ordering system is old enough that some of the tricks they used today didn't exist in its initial iterations. They also seem to be getting some real value out of the CDN and Cache.
The exact same no, but websites can be a lot better than are right now, there too much garbage from ads and JS on them, there are room for improvement and optimization for sure, but no one want to take that route nowadays and invest in it.
the audience matters. glittery ui bs has its place and use just like this utilitarian approach has its place and use. this is a website that i'd bet is mostly visited by men that know exactly what they want and want to skip all the bs. if it were an online storefront for a women's clothing company they'd go out of business in no time with a design like this.
"It is fast because the server returns HTML and the browser is good at rendering HTML" What?! They didn't just send a giant package of JS? Who would have thought to make a website in such a logical manner.
Hehe tbh it relies on quite a bit of JS, our internal apps of similar style have about the same amount, but we use React as a frontend. If it was a popular site SSR would be good though, but the speed seen here is honestly not too interesting tbh
This video is a masterclass in explaining the "why" behind things even while covering so many different topics rapid fire. So much good stuff packed into 13 minutes!
From a DBA's point of view (as far removed from webdev as possible), this was awesome to watch and very educational. Props to the devs at McMaster Carr for actually caring about performance and resource usage. Some devs just build code that runs ok in their specific test environment and make it every one else's problem when performance is crap in prod. This was a breath of fresh air.
*page source. "Page source" and "source code" often refer to different aspects of web development, though they are related. source code means it also include server side scripts.
You can do it too! On any website, just press ctrl+shift+i and your web dev tools will open on the right side of your screen. It’s a little daunting at first, seeing all the tabs and options, but you’ll figure out how to find the things you’re interested in after poking around for a few minutes.
I think there is a really important factor here, which is that this site has a very clear and specific purpose: there's this huge catalog of parts that needs to be easy and fast to navigate. Without the feature creep and tacked on bells-and-whistles that so many other websites gather as they diversify and try different new features, the people developing this site can just focus all their attention on making it faster or easier. Having a very focused product helps tremendously at making a very high quality product.
@mike200017 @babel_fishing I think you both have a fair point, but your arguments don't really intersect. It helps to have a focused product, *and* the techniques could be applied more generally.
@@babel_fishing There is, which is that those websites are too complicated for no good reason and that makes it difficult to accommodate these optimizations while still providing the business need with adequate cost. When you have to, say, integrate ads, analytics, third-party scripts, etc you literally can't do this preloading. Those are now "requirements" for most sites.
Their products aren't that focused. I can order coffee beans, a new drill press, a 3d printer, some bolts, and glue in the same order. Drill down and see how far their catalogue goes.
@@mtnbikeman85 By focused "product", I was referring to the website itself, not the products they sell in their catalog. What I meant is that the website doesn't have the sort of random features like subscriptions, ads, reviews, suggested products, live-chat help desk, and all the other random things you find in many online store or social media websites. These are often the features that bog down a website because they pull in a lot of complexity, they're a constant moving target, they require a lot of maintenance, and they ultimately distract from optimizing the core of the experience, in this case, being able to navigate the catalog. BTW, I'm pretty familiar with their catalog, I used to have the print version sitting on my desk for years. ;)
20 years ago when waiting for slow software to load i imagined in the future everything will just be fast, since the hardware gets better and better. Turns out everything today is just as slow and the need to optimize is just a prevalent as in the past. It's very refreshing to find stuff like this!
McMaster Carr is one of the most legendary private companies in the USA. They are famous for hiring STEM new grads and paying them $120k+ to pack UPS trucks. They also have their own dedicated UPS distribution center in their main warehouse. Crazy business.
Allegedly they have entire floors dedicated to servicing DOD contracts with secret and top secret clearance requirements. Heard this from someone who worked there on their catalog.
Lots of people join out of college because their comp, benefits and bonus packages rival big tech companies and then never leave because of the golden handcuffs. Lots of really smart people going deep on the tiniest little details. Whole business is greased from top to bottom by some of the smartest people in the country
So many times I’ve ordered something from them at 10PM, it’s on an UPS truck by 12AM and halfway across the country and out for delivery the next day at 4PM. Their integration with the logistics companies is on a whole other level.
Also their website and catalog is so good that it’s standard for engineers and machinists to use it for an engineering reference even if they don’t plan to purchase anything. Second only to the legendary Machineries Handbook
Hiring a STEM new grad just to pack trucks seems like a complete waste of talent, I'd rather make less somewhere else if it means I'm learning new skills - packing trucks is not something a young STEM grad should be doing with a degree in science/technology/engineering/mathematics - they should be doing something that involves STEM. They're a great company, but that just doesn't make much sense to me. It doesn't surprise if they had areas dedicated to secret DOD contracts, I would expect McMasterCarr to be no different as the military's gotta get their nuts and bolts from somebody.
To be fair, the devs are not doing anything special, just following good practices (AJAX, caching, sprites, inlining). So all those "optimizations" are not optimizations, just doing it the right way. Optimizations would be getting rid of the frameworks and squeeze out the remaining few percent while sacrificing maintainability, a cost often not worth it.
I LOVE Mc-Master Carr. High quality parts, for everything, and CAD drawings for everything. Fast shipping, no BS.. just all around so happy with their service. A little pricy sometimes, but well worth it.
McMaster has the best website period. It’s not only the first place i look for things but an indispensable resource for designing. As an engineer I use their site every day. one time i ordered a bucket of distilled water from McMaster because I knew it would be there the next morning, and I wouldn’t have to drive to the grocery store. I’ve purchased hundreds maybe thousands of different items from McMaster and they do not sell anything that isn’t the best of the best. Even down to a dust pan and brush, they find the brands that still make high quality tools and parts and shy from the import garbage.
As someone who isnt much into backend developing but just appreciate a great website and love tinkering with tools, this site also has a great UI for finding products, its exactly like an engineer or mechanic designed it to be as fast and easy to find stuff you need, 10/10
Business owners often underestimate how important a responsiveness of a website is. Hat off for devs wprking on that project and to their PM or whoever got a funding to make it happens.
They also understand they don't need to change things for the sake of changing it. Ive been using it for nearly 10 years, and it hasn't changed much. It makes it nice for the customer when everything is exactly where they expect it to be. It takes some level of restraint to just leave things alone.
This site is awesome in so many levels, they even show the all the specification and metrics for all the parts of the product on the side, I've actually never seen that. Whoever developed this must be very good and like what he does.
Every hardware startup in the US knows what time they need to submit the McMaster order to have it show up the next morning. Any companies not within overnight shipping of a McMaster warehouse is at a real disadvantage. At one company our monthly McMaster spend was over $100k.
I know nothing about web design but as an engineering student I had to click on this because I love McMaster Carr; it is so helpful to have Solidworks part files for every conceivable fastener imaginable. It is a godsend.
@@TheKeule33 I bet that the lead developer behind this has many years of experience and made a lot of mistakes before and figured out how to write optimal code from the start now.
Wow, image sprites! I remember that was the only practical way to get :hover effects on buttons and menus back in the day. Now if you'll excuse me I need to go pick out my gravesite.
I remember it as well, didn’t IE6 have a limit on 2 concurrent requests happening at the same time or something, so this also made sure you didn’t waste requests? I don’t like that IE6 stuff is still living in my head. But if this site is really that old, it makes sense that all these old techniques are still used (only the prefetch/preload seemed like a recent technique).
THIS is what I need when browsing a stores Catalog, not just the speed, but simplicity in UX and ease of use, no intrusive ads, or tons of hover to open panels, just have everything laid out and easily viewable at an instant
It's also just a very pleasant website. It's calm on the eyes and very organized. And they have CAD files of everything they sell in any file format you might need.
wow, this was fun to watch, I didn't really think about the mcmaster site being so well made on the backend, but always loved their detailed content along with CAD files
@@BGravesstl is a more universal accepted format that nearly every 3D/CAD program can load without any need of format conversion that could possible break something.
@@BGraves Imagine if amazon provided the ability to download models in 3d before you purchased it. Or if you have the ability to machine components yourself. It's not the file. Its the ability to model the component yourself. Or test it in various environments. .stl, obj. I could give a hoot Not many companies are providing this capability.
This website blew my mind. I had a massive paradigm shift. I will never see any website the same again. I love thse way that website works, how fast you can get the exact information you need. Crazy how much better this is than even using windows to look at my own files. Simply incredible
I use this site almost daily for work and its honestly just so freaking easy to use. Literally nothing is confusing about what I'm ordering. The search function works great even if you don't know what you need. And they do one day shipping to my company.. I could order at 4pm and the shipments will be at the office the next day at 9am
this is the comment I was looking for, how come no one points out how little dependencies are there? This is what makes the majority of cs and js code and heavy weight to fetch on star. But to get rid of it you must either hire great UX designers or accept your page looks like sh*t :)
@@mkres frameworks do not help anything ever. Frameworks do nothing but make developing mor convoluted and the server do more work. Frameworks do not make things look good either they actually make things look worse as they often force the hand of the script kid who is using them.
@@Dead_Goat you're free to think so and free to not use them in your projects, in the meantime... the world goes on using frameworks and benefiting from them, for UI and for everything else
Im not sure why I was recommended this, but I am extremely happy that I was. That website is beautiful, who ever works/ed on it should be proud. First time seeing you as well Wes, very well put together video, liked and sub'd!
Haha. So happy to see this site getting so much traction in the dev community. I've been pitching McMaster as the perfect website for years. Thanks for the rundown.
True. "you can do this with 15 year old tech" well that's just about when facebook crowd started to enlighten us with their awesome engineering practices soooo
this is the most technical looking website I've ever seen, nothing screams more than efficiency(design/UI wise or performance wise) than from this site
Automation Engineer here. I love this website. The UI “looks” old but in reality it’s just basic. It’s a purely functional website that’s super easy to navigate. Really easy to find what I need and most components I need have 3D cad.
Absolutely insane engineering. That many products with sizes and descriptions and that accuracy is impressive!! Currently Striving to get to their level
is server-side-rendering a new term? I mean, this is how it worked all those years (before the advent of js frameworks). And now i often hear the term "ssr" if it is something new...
Once you've been in the field for a while you'll realize it's not the developers that don't want good performance. It's the prioritization and budgetting of managers and clients that is more focused on functional requirements or what makes the most $$$. So if S tier performance is a bad investment and A, B or even C tier performance is "good enough" - then it won't be prioritized. It's a business after all.
I feel like this is hard to explain to people that don't spec parts and use McMaster religiously, but they have made it brilliantly easy to navigate a huuuuuge veriaty of parts to find exactly what you need. You can even buy swedish fish
pretty confident that the people in other businesses whose job it is to order parts from mcmaster are in direct contact with the sites operation manager and taking input on a weekly basis if not a daily basis on how the site is running, what needs to be changed, etc... the website, in this situation, is as much a "part" in their business as the parts themselves. imagine you have a site and a business couldn't order a part in time to ship to you when needed because the site was slow, imagine the frustration on both ends. and to see a site like this meeting expectations on both fronts is nice to see
These websites are often used by customers in a repair shop, which 99% of the time have the worst possible pc possible. Making it run as fast and smoothly as possible is gods work. Order something and watch how fast it shows up. McMaster Carr is AMAZING
I’ve been listening to the podcast forever. I love it. Today is the first time I’ve ever seen a video. Wes, I don’t mean this in any bad way, but you don’t look anything like my brain pictured lol
This is one of my favorite sites that I used when I worked in Architectural Engineering and MEP Contracting Glad you are doing the deep dive, I always use it as the standard for filtering and drill down mechanisms on the web.
It's great to see a website built by people who actually care and are good at their job. It's kind of ridiculous how long the vast majority of sites take to load, even though servers and networks are blazing fast these days.
many websites spam you with 100-200MB + size downloads because of stupid large photos (unoptimized) videos to run and a gazillion ADS... the amount of useless data being blasted around the internet is ridiculous... if we went back to the "good ole days" of optimizing and trimming the fat internet traffic would fall to 1/1000th of what it is now...
As an aspiring front-end developer, this completely changes my perception of what matters and how to make things show up efficiently on a website. 🤯 Subbed.
Their service is insanely good as well. Order anything by 6PM CST and it's in our dock by 9am the next morning. I can order something Saturday afternoon and will get an email telling me what day it will arrive--usually Monday. Forget to add something to the order, and all you have to do is mention it over their chat--they'll pull the order and correct in minutes. Honestly kind of nuts how good they are.
Nothing like seeing a team that clearly has an interest in keeping a decent performance on their site. Old looking site which is actually running React 17.0.2 under the hood (March '21). Lots of techniques that are really a part of the platform. The sprites were an interesting pic seeing that new protocols (H2/H3) make it unnecessary if not an actual anti pattern. Great video Wes! We love to see it! 🙃
unnecessary? how? never knew about the "sprite" for websites... I know it was used in games but never knew it was used on websites, was kinda interested in that part... so there is something else just as fast/easy to use? what is that? now I am even more curious to dive into that.
@@LiLBitsDK Way back it was the only way to add hover effects to buttons and such. I was very young back then but started programming not so long after. But anyone correct me if Im wrong.
@@LiLBitsDK With HTTP/2 and HTTP/3, multiple image requests can be sent concurrently over a single connection, reducing the latency issues that sprite sheets were meant to solve. This means it’s just as fast to load separate images, plus you get better caching and flexibility without combining everything into one file.
@@GabrielSoldani hmm interesting... didn't know of those two but I haven't fiddled with HTTP stuff for like 20 years :D well 24... used to handcode everything back then but have begun pondering on fooling around with my own site again and then I might as well learn the new stuff... am a bit behind :D
Initially ordered from them because they were the only website in the world that sold a metric bolt that snapped on my electric bike then began ordering from them for business purposes. Impressed with shipping times I later stopped and began to think how is this website so well built? UI is so intuitive and the organization is beyond graceful. Not once did I ever question how to navigate in or out of a page. Home Depot, take notes!
This tells me something about the company. They've had the same lead engineer for decades and he's paid well and well taken care of. They use tech built back in the days when speeds and computers were slower. They've used the same stack (jQuery, ASP) all this time, never having the need to adopt some brand new JS meta framework, just perfecting what they have. I'd guess this is a tight-knit duo or trio engineering team, if not a lone obsessive.
They are the absolute gold standard for "I need this weird fastener and I need it ASAP". Nearly every engineer has ordered prototype parts from them. If you've bought any product that was designed in the USA, I guarantee it was prototyped with parts from McMaster. They also provide CAD for nearly all of their parts, right in the part details page. They make it so much easier on engineers to use their parts than any other supplier.
@@WesBos Maybe an unintentional bonus then! And as most of them are just sliver tone metal you can’t even tell on a bunch of them XD Kinda makes me want a css gradient-map function so you could make palette swaps of an image like a classic game sprite…
@@WesBos Nah, those are typical modern CAD 3D renderings (probably SolidWorks). Their print catalog had much older AutoCAD line-drawing renders. BTW, all their parts can also be downloaded in various CAD model formats, which is fantastic for engineering work. They probably have "preview" generation scripts on the backend that can take any CAD model, load it up, put it in standard orthogonal projection, and render a simple grayscale image at any desired resolution. So, if they want to tweak the sizes of those images or sprites, I bet they can just regenerate all those preview pictures. They only look like plain old grayscale images because everything in the mechanical engineering world looks plain and gray, no superfluous nonsense needed.
i was always very impressed with mcmaster's website. it's not flashy but it is incredibly functional and fast. I wish more companies put in the same level of care
Great vid! my last job was at Edgio where we sold a performance application, integrated to a CDN, I had to explain how we could do all those to customers and it blew their mind!
The developers are going to have to explain to the business owners that the huge spike in traffic is from other developers and not customers for nuts and bolts
yo hello didn't expect you to see here. I guess a new shorts topic?
Starting the get 429 for HTML Prefetch
McMaster Carr is used by so many people in the industrial world that a bunch of developers chicking it out will barely be a blip in their stats.
@@rubyrubenstahl827 This, they have no idea but they stumbled on the AWS of the industrial world. McMaster ain't going to be impressed by your puny devs asses. Also I used to spend my day on that website downloading 3D models for free, the amount of work behind this product goes WAY beyond the actual website.
@@checksum00 that actually started rate limiting a few minutes ago. I guess all the devs made a blip!
Props to the business owners who let the developers dive deep in performance.
I mean this is typical of what you had to do in the early 2000s just to get pages to load in reasonable time. Without these optimizations, these would be 15 second page loads back then. Modern pages would take minutes to load if we still had the same internet speeds.
yeah I think this is more like they could only find the old school dev to hire, and he didn't know any other way
@@redneckcoder exactly. Imagine living in a world where this was uncommon enough that it deserved its own video so that the youngsters could point and stare at this "deep dive" into "optimization".
Oh, wait... We actually are living in that world. Remember what they took from us.
@@redneckcoder Coming from someone who used to have DSL internet, I can confirm this is true. Modern pages did take minutes to load.
Props? Reducing friction to the parts reduces friction to profit. This isn't developer altruism
crazy that an efficient site is turning into a free ad campaign for them.
and they need to open "optimization courses" branch in company business
That website is trash. Lookup database is fycked. What are you talking about?
I doubt we’re going to be buying anything. Just using their resources.
@@ATX_Engineer Are you sure? The searches feel snappier than what I've seen most ORM fans pull off.
@@ATX_Engineerlooks like you missed the point of the video.
Please let this be a turning point for website design
Seeing some of my favorite creators comments under random videos like this reminds me that they are humans just like us and not some omega mighty gods or something
hahaha no way that happens.
Bloated, useless frameworks, libraries and UX design tools are all the rage. Oh and toss in massive json files cause the cool kids can't be bothered with optimized SQL and a proper database.
more like a u-turning point.
It’s purpose built. Every site should cater towards its goals. Not standardised across the board.
Seems like Next.jx handles a lot of this for you if you configure it properly..
What you DON"T see on this website has something to do with the speed as well. It's not constantly throwing intrusive ads, invitiations to join their email list, promo popups, and, most importantly, it's not actively interfering in the user's search process. Best of all, you don't need to create an account for the privelege of simply viewing the content.
While you can browse category listings, you do need an account to view any product detail page - "Log in to view Product Detail"
They don't even pester you with printer media unless they deem you worthy enough®. 10/10 would shop with them again.
@@hyundaihd440 People beg for their printed media. They turn their nose at ya, won't even send one by request.
They are very in touch with their clientele. I work in tech, but had close (manufacturing/engineering) industry contacts at a previous job. These are very intelligent engineers, they have great math skills and can visualize drawings in dimensions we dream about, but also frequently solve problems with the phrase "don't use force, get a bigger hammer", not the kind of person who tolerates frustration. Most of them also _despise_ technology, mainly because of the reason you gave, the Enshittification of electronics because programmers keep adding nonsense. Somehow, McMaster Carr avoided this trend, they sell parts, they make parts easy to find, they sell more parts. Another phrase from the industry, "don't fix what ain't broke".
Another site that does this is Mouser electronics. Their products are more expensive than aliexpress, but comparing the search between the two sites is night and day.
Most people will experience blazing fast websites if they just use a competent adblock. Websites try to load all their ads first before anything else
Their site looks old, but once you've used it a couple times to find some specific parts for your very specific application, you'll find that their site is the absolute gold standard for UX design, you can so quickly dive in and find the exact part you need. They have done a fantastic job with it and run a fantastic service. Parts do cost more, but they're in your shop the next morning.
Engineers hate Apple designer BS. This site seems correct.
MOST of the time.
Occasionally you can find yourself stuck when looking for a specific part that you don't quite know the name of...
its not old but already peaked, this is what peak perfomance of look like
No, it's not the "gold standard" for UX. It's pretty good though. If this was the gold standard than way, way more websites would look and behave like this. This is the gold standard for engineers and those no nonsense people. Unfortunately most people wouldn't particularly like this website and years of research and A/B testing would confirm this. And when you make a product you make it for "most people".
I wish this were the gold standard though.
@@wayland7150 Apple designer bs works well for what it is. There are very different use cases and one isn't better than the other, they're serving different purposes. This is a digitzed catalog which has it's own set of problems.
As an industrial designer, i use their site religiously for grabbing CAD files to test fit standardized parts for designs. Never EVER had a hiccup. Its fantastic!
I was amazed when I visited their website and saw that basically everything had downloadable cad files for most softwares, definitely bookmarking their website just for that.
/fellow engineer (albeit mechanical engineer).
mech desg here came across this video and thinking same thing would be good site to get files lol
@@8u88letea I did a mech design co-op years back and my entire internship was pulling fastener files from McMaster-Carr and adding it to the large assembly. Very useful tool
I've found a couple incorrect models before (used a 300 vs a 150 class pipe fitting) and they had it fixed in like 45 mins after I called and informed them lmao
Are you trying to say it’s easier than thumbing through the ol’ 9,000 page McMaster Carr bible?! Outrageous
I have a suspicion that the people who made this websites are those veteran folks from C era where speed and lightweight is crucial.
That image sprite technique is a dead giveaway, huge respect to that team/pal!
Offscreen buffers ftw
This was a somewhat common technique just ~15 years ago. It was right around the time we started to use Javascript for everything (knockout, backbone, etc).
@@roodoodnot just somewhat common, literally everyone was using it. Dialup was extremely punishing for each connect, but once you got it going you were fine. It was gradually losing relevance but was still the default way to use graphics
@@roodood and the YUI framework was from that time as well.
@@roodood for some that sound like from ancient times. for us oldies (first website 95) its still a proper technique to fasten things up.
It is insane that I have gigabit internet, 16 cores at 5ghz, 64gb of RAM a graphics card that can render photorealistic images in a fraction of a second and what brings my computer to its knees is the weather channel website.
Kudos to McMaster Carr for giving us a website that works so well we don’t even notice it is doing things no other website does, and at the same time shame on the developers who make the rest of the internet crap.
a suboptimized program can make any system slow. Nowadays, a suboptimal website can slow your computer
True for bandwidth, but web (JS ) is single threaded, so you effectively use just single core. With exception of Web Workers and Promises which don't mess with main thread. Web is losing battle very much, On mobile is almost over :(
Their shit was peak in 2015/16. It's unusable now
If you see how much they charge for a nail, their speed is not a surprise.
no, it's the server which is slow in giving you a response
I use them a lot, so much that they reached out to me for a UX feedback session which I was happy to do. The UX designers and devs I talked with were SHARP and DETAILED. They asked really good questions. At the end I told them that whatever they’re doing to resist the suck of other websites, keep resisting!
As someone who does a lot of engineering and CAD design work, I fucking LOVE McMaster-Carr. Nearly every single object on there has true to life accurate 3d models in like 10 different formats so you can accurately import them into your cad package and have perfect, to scale parts for your model in seconds. The program that I use, Autodesk Fusion, literally has a version of this site integrated into the software so you can pop components into your design without ever having to leave... It's magical, I will never be able to go back!
Kudos to everyone at McMaster, you honest to god make the world go round!
yeah, I am astounded by the level of information they provide. And they basically sell everything one can think of. And 3d models for everything, detailed description, correct sized, sometimes even a little info button and a whole new picture appears in the table, showing the threading. This is just brilliant
It appears that there's no penny pinching, bean countering, or half-assing anything. They do a thing properly with a lot of thought put into it and they don't nickel and dime users' attention and / or tell the user what to do. It seems their aim is to give you what you need and get out of your way immediately - something google used to do till say 2007-08, when their publicly traded nature started corrupting the tech backbone.
Before google, search engines wanted people to stay on their page and click shiny things, much like websites do today with popups, effects, animations, colourful design and what not. They want users to engage and spend time on the site. But it's far better to adopt the McMaster/Google philosophy. It also scales so much better.
They have a plug-in for solidworks as well. It's good business, if they make it easy for you to put into your cad/design, you're likely just going to get it from them instead of trying to find it somewhere else and hope it's the same.
@@jsc230Even better, if you download their Solidworks models they come with the feature tree, so they are not just imported ‘dead’ files!
lol they may start charging for these after reading 😂
Try reaching out to the developers of this site for a round two, where they talk about there thoughts that could be really interesting.
1
Agreed
That would be eye-opening!!
+1
Yes!
You should order from McMaster Car and then your question will instantly shift from "how is their website so fast?!" to "how the hell do they ship so fast??!!"
Unlikely with Canada Post involved.
@@SMorrisRose Go try! And report back. They have an insane collection I'm sure you'll find something useful. You can even see the shipping on the site. Almost everything for me says "Delivers tomorrow" but some things take a day or two more.
yeah they dont ship to Canada unless you are a business. You gotta use Fastenal in Canada, which hates it's customers
Right? Near every time I've ordered from them, I've received my order the next day.
Their returns are crazy awesome too, you just ship them a box of stuff you bought. They figure out who it's from and what the items are inside the box and from what orders they came from. It's crazy. No RMAs just ship it in a box back to them, get a refund.
My son lost both his legs in an auto pedestrian accident. His new donated wheelchair arrived the day before he was set to be released from the hospital But it came in missing a few bolts and nuts, McMaster was the only place that carried it, and my neighbor told me about the website and he ordered the pieces online himself. They arrived one hour before my son was released, and the chair was fully assembled and ready to go for my son when he came out that day. Thank You for being a good company McMaster-carr!!
very sad to hear that. how long this has been
After my daughter was involved in a severe fall, she needed a custom wheelchair urgently. We found that McMaster-carr was the only supplier with the specific parts we required. Despite the delay, they delivered the missing screws and brackets just in time for her discharge. The wheelchair was perfectly assembled and ready to use the moment she left the hospital. Grateful for your exceptional service, McMaster-carr!
@@058w. I hope she is doing alright.
@@058w.This is suspiciously similar to the op comment.....kind of suspicions
After my father was involved in a waterskiing accident and sadly passed away, he needed a custom bolt for his coffin since the hinge had broken. Thanks to McMaster-carr we were able to get the bolt. Arrived within 10 seconds after ordering it online thanks to the super quick website preloading the bolts to the funeral home right on time. Grateful for your fantastic service McMaster-carr!
You can still call these guys on the phone, 24-7, and you'll get a human right away that'll answer any question you have, or take your order. THAT is good business.
Source: I used to own my own business, and I would make calls at 3am, and I'd get someone to place an order for me, or look up an item I had a question about. Superb customer service
Customer service is excellent, they'll even take an order for something not in the catalog if it's from a manufacturer they have a relationship with. They get me weird unlisted product data pretty fast too.
Absolutely phenomenal experience with them, even when I had an immensely annoying payment problem due to working via a university.
They are life savers.
At one point we emailed them to get the weight of an item that wasn't listed, and they replied less than 10 minutes later. To this day we suspect they had someone run out to the warehouse with a scale and weigh it.
See, this is why people find things like this to be so unusual. Business-to-business is always more efficient like this. Consumers, meanwhile, get shafted.
@@tristan7588i would be disappointed if that wasnt what they did. Every interaction with them has been like that, get the hmm thats weird, will do that immediately, and get an answer at most a few hours later.
The only company that even comes close to that level of service has been aircraft spruce (aircraft specific hardware and tooling, up to and including entire aircraft kits to build your own).
McMaster-Carr was a model for efficient web UX design 12-15 years ago, I recall them being held up as an example in some web design book or blog. Good to see that they've not wanted to do a rebuild in potentially less performant newer technologies. That sort of UI cleanness and snappy performance will never go out of style. (I should note that this is literally a catalog site and involves less complexity than logged-in sites with dynamically-updating user-generated content, so we can't always expect the same sort of performance from other sites.)
It would be really interesting to see a timeline on when they introduced things. ServiceWorkers are relatively new, and I kinda wonder when the implemented hyperloading. Their online ordering system is old enough that some of the tricks they used today didn't exist in its initial iterations. They also seem to be getting some real value out of the CDN and Cache.
The exact same no, but websites can be a lot better than are right now, there too much garbage from ads and JS on them, there are room for improvement and optimization for sure, but no one want to take that route nowadays and invest in it.
That's the kind of web app we need!! No glittery ui bs just performance and efficiency
Motherfuckingwebsite tier
GAUCHO TCHE?
It's the kind that's needed but not wanted by the average person.
@@marcuswagner8987 isso aí kkk
the audience matters. glittery ui bs has its place and use just like this utilitarian approach has its place and use. this is a website that i'd bet is mostly visited by men that know exactly what they want and want to skip all the bs. if it were an online storefront for a women's clothing company they'd go out of business in no time with a design like this.
"It is fast because the server returns HTML and the browser is good at rendering HTML"
What?! They didn't just send a giant package of JS? Who would have thought to make a website in such a logical manner.
*htmx intensifies*
Hehe tbh it relies on quite a bit of JS, our internal apps of similar style have about the same amount, but we use React as a frontend. If it was a popular site SSR would be good though, but the speed seen here is honestly not too interesting tbh
Lol like the 90s internet but not on dialup
@@StrongdocoteurBut it works!!! Not super interesting, but this is the kind of design people want more of
@@arenomusic not really, users don’t care as long as it works and looks pretty. The average user wouldn’t like this site because it “looks old”.
This video is a masterclass in explaining the "why" behind things even while covering so many different topics rapid fire. So much good stuff packed into 13 minutes!
Yo your laravel course is awesome, can you make php 2024 full course making mvc
You should create a course on it.
From a DBA's point of view (as far removed from webdev as possible), this was awesome to watch and very educational. Props to the devs at McMaster Carr for actually caring about performance and resource usage. Some devs just build code that runs ok in their specific test environment and make it every one else's problem when performance is crap in prod. This was a breath of fresh air.
Devs build software to the requirements they are given. Performance, at least to this level, is usually unnecessary and imposes a significant cost.
Yeah it's not really my problem that the ping to the sql server sucks
Inspecting source code like this is super cool to watch
yea, imagine seeing that if you started working with react and only knew about bundled crap. must be surreal xD
*page source.
"Page source" and "source code" often refer to different aspects of web development, though they are related.
source code means it also include server side scripts.
Remember that this (looking at website source code) is hacking according to Governor Mike Parson from Missouri
You can do it too! On any website, just press ctrl+shift+i and your web dev tools will open on the right side of your screen. It’s a little daunting at first, seeing all the tabs and options, but you’ll figure out how to find the things you’re interested in after poking around for a few minutes.
is there any other way to do it???
this type of stuff needs its own course. like backend for webpage optimizations like these. i am a sucker for these. great video!
Just throttle your internet connection to that of a 14.4k modem and start problem solving. =)
as long as you dont hire react devs, you will have fast performance and good devs.. hire react devs and the soy boys show up and spoil everything
@@nonefvnfvnjnjnjevjenjvonej3384 🤣🤣
@@reznek3099the throttling feature in the web dev tools is excellent for this
Do you hhave beef with react Devs or something😂@@nonefvnfvnjnjnjevjenjvonej3384
I think there is a really important factor here, which is that this site has a very clear and specific purpose: there's this huge catalog of parts that needs to be easy and fast to navigate. Without the feature creep and tacked on bells-and-whistles that so many other websites gather as they diversify and try different new features, the people developing this site can just focus all their attention on making it faster or easier. Having a very focused product helps tremendously at making a very high quality product.
This sounds like cope. There’s no reason other devs/sites couldn’t apply some of these principles.
@mike200017 @babel_fishing I think you both have a fair point, but your arguments don't really intersect.
It helps to have a focused product, *and* the techniques could be applied more generally.
@@babel_fishing There is, which is that those websites are too complicated for no good reason and that makes it difficult to accommodate these optimizations while still providing the business need with adequate cost. When you have to, say, integrate ads, analytics, third-party scripts, etc you literally can't do this preloading. Those are now "requirements" for most sites.
Their products aren't that focused. I can order coffee beans, a new drill press, a 3d printer, some bolts, and glue in the same order. Drill down and see how far their catalogue goes.
@@mtnbikeman85 By focused "product", I was referring to the website itself, not the products they sell in their catalog. What I meant is that the website doesn't have the sort of random features like subscriptions, ads, reviews, suggested products, live-chat help desk, and all the other random things you find in many online store or social media websites. These are often the features that bog down a website because they pull in a lot of complexity, they're a constant moving target, they require a lot of maintenance, and they ultimately distract from optimizing the core of the experience, in this case, being able to navigate the catalog.
BTW, I'm pretty familiar with their catalog, I used to have the print version sitting on my desk for years. ;)
Love this company - they don't do any formal advertising. They let their experience speak for itself....and behold - it does.
20 years ago when waiting for slow software to load i imagined in the future everything will just be fast, since the hardware gets better and better.
Turns out everything today is just as slow and the need to optimize is just a prevalent as in the past.
It's very refreshing to find stuff like this!
McMaster Carr is one of the most legendary private companies in the USA. They are famous for hiring STEM new grads and paying them $120k+ to pack UPS trucks. They also have their own dedicated UPS distribution center in their main warehouse. Crazy business.
Allegedly they have entire floors dedicated to servicing DOD contracts with secret and top secret clearance requirements. Heard this from someone who worked there on their catalog.
Lots of people join out of college because their comp, benefits and bonus packages rival big tech companies and then never leave because of the golden handcuffs. Lots of really smart people going deep on the tiniest little details. Whole business is greased from top to bottom by some of the smartest people in the country
So many times I’ve ordered something from them at 10PM, it’s on an UPS truck by 12AM and halfway across the country and out for delivery the next day at 4PM. Their integration with the logistics companies is on a whole other level.
Also their website and catalog is so good that it’s standard for engineers and machinists to use it for an engineering reference even if they don’t plan to purchase anything. Second only to the legendary Machineries Handbook
Hiring a STEM new grad just to pack trucks seems like a complete waste of talent, I'd rather make less somewhere else if it means I'm learning new skills - packing trucks is not something a young STEM grad should be doing with a degree in science/technology/engineering/mathematics - they should be doing something that involves STEM. They're a great company, but that just doesn't make much sense to me. It doesn't surprise if they had areas dedicated to secret DOD contracts, I would expect McMasterCarr to be no different as the military's gotta get their nuts and bolts from somebody.
Yep. They have some great devs working for them. This site is the Gold Standard of how things should be done.
as long as you dont hire react devs, you will have fast performance and good devs.. hire react devs and the soy boys show up and spoil everything
@@nonefvnfvnjnjnjevjenjvonej3384 you really hate react huh
I told Festo that once, many years ago, make your site like McMaster. They didn’t listen, of course.
@@nonefvnfvnjnjnjevjenjvonej3384 Youre about tho receive a harshy email from soyboy master theo
To be fair, the devs are not doing anything special, just following good practices (AJAX, caching, sprites, inlining). So all those "optimizations" are not optimizations, just doing it the right way. Optimizations would be getting rid of the frameworks and squeeze out the remaining few percent while sacrificing maintainability, a cost often not worth it.
I LOVE Mc-Master Carr. High quality parts, for everything, and CAD drawings for everything. Fast shipping, no BS.. just all around so happy with their service. A little pricy sometimes, but well worth it.
McMaster has the best website period. It’s not only the first place i look for things but an indispensable resource for designing. As an engineer I use their site every day. one time i ordered a bucket of distilled water from McMaster because I knew it would be there the next morning, and I wouldn’t have to drive to the grocery store.
I’ve purchased hundreds maybe thousands of different items from McMaster and they do not sell anything that isn’t the best of the best. Even down to a dust pan and brush, they find the brands that still make high quality tools and parts and shy from the import garbage.
As someone who isnt much into backend developing but just appreciate a great website and love tinkering with tools, this site also has a great UI for finding products, its exactly like an engineer or mechanic designed it to be as fast and easy to find stuff you need, 10/10
McMaster is the GOAT for industrial operations. Hands down, legendary.
I guess they wanted their website as fast as their services.
Business owners often underestimate how important a responsiveness of a website is. Hat off for devs wprking on that project and to their PM or whoever got a funding to make it happens.
They also understand they don't need to change things for the sake of changing it. Ive been using it for nearly 10 years, and it hasn't changed much. It makes it nice for the customer when everything is exactly where they expect it to be. It takes some level of restraint to just leave things alone.
@@BeanDipPip I think Apple's operating systems also have had a similar consistency over the years. If it ain't broke...
This site is awesome in so many levels, they even show the all the specification and metrics for all the parts of the product on the side, I've actually never seen that. Whoever developed this must be very good and like what he does.
An absolute awesome experience to navigate that site ! Not only is it fast , but the structure and all that is amazing ! Well done !
Every hardware startup in the US knows what time they need to submit the McMaster order to have it show up the next morning. Any companies not within overnight shipping of a McMaster warehouse is at a real disadvantage. At one company our monthly McMaster spend was over $100k.
Nice to see that there still are some people who actually cares about pageload speed.
rare breed indeed
McMaster catalogs have always been fantastic. I'm really not surprised that their website is designed with the same attitude as the catalog.
Would love to see more videos like this!
only if you subscribe
@@WesBos I do
@@WesBos subscribed after watching this video! we need more! 😂
@@WesBos subscribed
@@WesBos Damn bro! Shut up and take my money! Subscribed! MOAR of this kind of vids please!
I know nothing about web design but as an engineering student I had to click on this because I love McMaster Carr; it is so helpful to have Solidworks part files for every conceivable fastener imaginable. It is a godsend.
I got to work with a technical PM that left McMaster Carr and she was by far the best product manager I ever worked with.
They have gathered some pretty good know-how in there. Props to the engineers and the management that understood how important that is!
as long as you dont hire react devs, you will have fast performance and good devs.. hire react devs and the soy boys show up and spoil everything
@@nonefvnfvnjnjnjevjenjvonej3384 not to mention with bazillion library that have breaking changes every few weeks
I bet it's some nerdy dude who does most of the optimization in his free time.
@@TheKeule33 I bet that the lead developer behind this has many years of experience and made a lot of mistakes before and figured out how to write optimal code from the start now.
mmmmm i love soy milk, man, that shit tastes so good
Wow, image sprites! I remember that was the only practical way to get :hover effects on buttons and menus back in the day. Now if you'll excuse me I need to go pick out my gravesite.
I remember it as well, didn’t IE6 have a limit on 2 concurrent requests happening at the same time or something, so this also made sure you didn’t waste requests?
I don’t like that IE6 stuff is still living in my head. But if this site is really that old, it makes sense that all these old techniques are still used (only the prefetch/preload seemed like a recent technique).
So happy you're covering this site!!! one of my favorites as both a tinkerer looking for hardware and an engineer 🤓
This sites actually clean af. The filters and diagrams in the left hand column as you drill down are just 😘👌🏽
THIS is what I need when browsing a stores Catalog, not just the speed, but simplicity in UX and ease of use, no intrusive ads, or tons of hover to open panels, just have everything laid out and easily viewable at an instant
It's also just a very pleasant website. It's calm on the eyes and very organized. And they have CAD files of everything they sell in any file format you might need.
This site is amazing. I used to be a mechanical engineer and I loved this site so much
i'd love to see more videos of you deconstructing websites, this was an interesting watch
Been a McMaster-Carr customer for over 35 years, they are the best, hands down.
wow, this was fun to watch, I didn't really think about the mcmaster site being so well made on the backend, but always loved their detailed content along with CAD files
I've admired this site before, as they even offer the
Stl files of every screw they sell.
Lol STL. Faceted models over a nurb?
@@BGravesstl is a more universal accepted format that nearly every 3D/CAD program can load without any need of format conversion that could possible break something.
@@BGravesthey also have STEP, IGES, Solidworks, PDF, DXF, DWG, and a bunch of other formats i'd never heard of before
@@AngryApple nah, that's.STEP
@@BGraves Imagine if amazon provided the ability to download models in 3d before you purchased it. Or if you have the ability to machine components yourself. It's not the file. Its the ability to model the component yourself. Or test it in various environments. .stl, obj. I could give a hoot Not many companies are providing this capability.
McMaster car is not only fast, but simple and intuitive.
yeah most "modern" websites are shite... this one just works... simple... get stuff DONE... and looks perfectly fine too
With a search that takes you to what you want rather than taking you to every piece of crap that could be tagged as such.
As someone who makes custom motorcycles, I absolutely love McMaster Carr! Everything I order shows up next day!
This website blew my mind. I had a massive paradigm shift. I will never see any website the same again. I love thse way that website works, how fast you can get the exact information you need. Crazy how much better this is than even using windows to look at my own files. Simply incredible
Shoutout McMaster Carr. Spent thousands on here during my mechanical engineering degree
I use this site almost daily for work and its honestly just so freaking easy to use. Literally nothing is confusing about what I'm ordering. The search function works great even if you don't know what you need. And they do one day shipping to my company.. I could order at 4pm and the shipments will be at the office the next day at 9am
I can imagine not having to download 30 megs of javascript garbage first would make the page feel snappy 😅
Good job, developers!
But how do you check if a number is odd or even, if you don't load a buch of frameworks to do this? 😂
@@FelixSFD 😂😂
this is the comment I was looking for, how come no one points out how little dependencies are there? This is what makes the majority of cs and js code and heavy weight to fetch on star. But to get rid of it you must either hire great UX designers or accept your page looks like sh*t :)
@@mkres frameworks do not help anything ever. Frameworks do nothing but make developing mor convoluted and the server do more work. Frameworks do not make things look good either they actually make things look worse as they often force the hand of the script kid who is using them.
@@Dead_Goat you're free to think so and free to not use them in your projects, in the meantime... the world goes on using frameworks and benefiting from them, for UI and for everything else
Im not sure why I was recommended this, but I am extremely happy that I was. That website is beautiful, who ever works/ed on it should be proud. First time seeing you as well Wes, very well put together video, liked and sub'd!
Someone at this century old company DEMANDED that the engineer do this. And they damn well delivered. Made different.
Haha. So happy to see this site getting so much traction in the dev community. I've been pitching McMaster as the perfect website for years. Thanks for the rundown.
Webdevs when they discover not using 7 different frameworks and 368 "left-pad" libraries makes a website fast: 🤯
LMAO
True. "you can do this with 15 year old tech" well that's just about when facebook crowd started to enlighten us with their awesome engineering practices soooo
But how else will I make 368 different types of left pad? By HAND?!
nah, we need a morbillion more implementations of `is-even`, preferably using AI-generated regexes
@@Telhiasyes
this is the most technical looking website I've ever seen, nothing screams more than efficiency(design/UI wise or performance wise) than from this site
Great breakdown on their site. Calling it always "hot and ready" is definitely accurate.
Automation Engineer here. I love this website. The UI “looks” old but in reality it’s just basic. It’s a purely functional website that’s super easy to navigate.
Really easy to find what I need and most components I need have 3D cad.
Absolutely insane engineering. That many products with sizes and descriptions and that accuracy is impressive!! Currently Striving to get to their level
I used to order from McMaster Carr years ago, haven't thought about them in a long time! Cool video Wes.
Server-side rendering.... what a surprise (for js folks :D).
😂
2008 called. It wants its web application back ;)
is server-side-rendering a new term? I mean, this is how it worked all those years (before the advent of js frameworks). And now i often hear the term "ssr" if it is something new...
as long as you dont hire react devs, you will have fast performance and good devs.. hire react devs and the soy boys show up and spoil everything
This is literally client side rendered tho
Some developers are way ahead of the competition. These are the people you want to know.
It's easy, just don't hire JS devs.
Once you've been in the field for a while you'll realize it's not the developers that don't want good performance. It's the prioritization and budgetting of managers and clients that is more focused on functional requirements or what makes the most $$$. So if S tier performance is a bad investment and A, B or even C tier performance is "good enough" - then it won't be prioritized. It's a business after all.
I feel like this is hard to explain to people that don't spec parts and use McMaster religiously, but they have made it brilliantly easy to navigate a huuuuuge veriaty of parts to find exactly what you need. You can even buy swedish fish
Do they have a CAD file for the Swedish Fish?
The last 30 seconds of this video are a masterclass on their own. I'd love it if you do another one of these but focusing on the UX of McMaster Carr.
*The js devs who just learned their 3rd fe framework released this morning having existential crisis*
Is that because of this site or because that framework they learnt is now obsolete?
Other youtubers: please share and subscribe
Wes bos: let me know if you find anything else interesting about it.
What’s funny is that everyone that orders via the website dreams of the day they’ll be blessed with a physical catalog
pretty confident that the people in other businesses whose job it is to order parts from mcmaster are in direct contact with the sites operation manager and taking input on a weekly basis if not a daily basis on how the site is running, what needs to be changed, etc... the website, in this situation, is as much a "part" in their business as the parts themselves. imagine you have a site and a business couldn't order a part in time to ship to you when needed because the site was slow, imagine the frustration on both ends. and to see a site like this meeting expectations on both fronts is nice to see
the amount of wisdom in this video and in the website is insane. Thanks for sharing
This just shows that we never needed all these complicated JS frameworks to build websites that work well and just perform.
Old school look but slick UX. Great Combo
These websites are often used by customers in a repair shop, which 99% of the time have the worst possible pc possible. Making it run as fast and smoothly as possible is gods work.
Order something and watch how fast it shows up. McMaster Carr is AMAZING
its the little things ive always found myself fascinated with.... "the page loads before the url changes" .... thanks for the indepth review!
I’ve been listening to the podcast forever. I love it. Today is the first time I’ve ever seen a video. Wes, I don’t mean this in any bad way, but you don’t look anything like my brain pictured lol
This is one of my favorite sites that I used when I worked in Architectural Engineering and MEP Contracting
Glad you are doing the deep dive, I always use it as the standard for filtering and drill down mechanisms on the web.
It's great to see a website built by people who actually care and are good at their job.
It's kind of ridiculous how long the vast majority of sites take to load, even though servers and networks are blazing fast these days.
Developers got lazy and optimisation became a nice-to-have.
@@robadobdobeither that or we are not given the proper time to optimize for performance and are forced to pump out garbage by the powers that be.
many websites spam you with 100-200MB + size downloads because of stupid large photos (unoptimized) videos to run and a gazillion ADS... the amount of useless data being blasted around the internet is ridiculous... if we went back to the "good ole days" of optimizing and trimming the fat internet traffic would fall to 1/1000th of what it is now...
@@maxstrong1999 that is also true because web sites and apps are now driven by product managers who care more about features than optimisation.
As an aspiring front-end developer, this completely changes my perception of what matters and how to make things show up efficiently on a website. 🤯
Subbed.
I would genuinely enjoy a talk from one of the minds behind this website. I believe there is a lot to be learned.
Their service is insanely good as well. Order anything by 6PM CST and it's in our dock by 9am the next morning. I can order something Saturday afternoon and will get an email telling me what day it will arrive--usually Monday. Forget to add something to the order, and all you have to do is mention it over their chat--they'll pull the order and correct in minutes. Honestly kind of nuts how good they are.
11:15 - "2008 - a very very old library, a long long time ago"..... 💀💀💀💀💀💀 I'm already dead.
Nothing like seeing a team that clearly has an interest in keeping a decent performance on their site. Old looking site which is actually running React 17.0.2 under the hood (March '21). Lots of techniques that are really a part of the platform. The sprites were an interesting pic seeing that new protocols (H2/H3) make it unnecessary if not an actual anti pattern. Great video Wes! We love to see it! 🙃
unnecessary? how? never knew about the "sprite" for websites... I know it was used in games but never knew it was used on websites, was kinda interested in that part... so there is something else just as fast/easy to use? what is that? now I am even more curious to dive into that.
@@LiLBitsDK I'm old enough to remember sprites on web. You should check out image maps in html too
@@LiLBitsDK Way back it was the only way to add hover effects to buttons and such. I was very young back then but started programming not so long after. But anyone correct me if Im wrong.
@@LiLBitsDK With HTTP/2 and HTTP/3, multiple image requests can be sent concurrently over a single connection, reducing the latency issues that sprite sheets were meant to solve. This means it’s just as fast to load separate images, plus you get better caching and flexibility without combining everything into one file.
@@GabrielSoldani hmm interesting... didn't know of those two but I haven't fiddled with HTTP stuff for like 20 years :D well 24... used to handcode everything back then but have begun pondering on fooling around with my own site again and then I might as well learn the new stuff... am a bit behind :D
Now we need an analysis on craigslist 😀😆
This should seriously be a SERIES!!!
Peak web design.
Initially ordered from them because they were the only website in the world that sold a metric bolt that snapped on my electric bike then began ordering from them for business purposes. Impressed with shipping times I later stopped and began to think how is this website so well built? UI is so intuitive and the organization is beyond graceful. Not once did I ever question how to navigate in or out of a page. Home Depot, take notes!
Simply elegant!!!
How mature a site should be to attain that level of optimization..
1:30 sprites don't really make much difference now with HTTP 2.0 / 3.0
Would love a series on those source-dives!
This tells me something about the company. They've had the same lead engineer for decades and he's paid well and well taken care of. They use tech built back in the days when speeds and computers were slower. They've used the same stack (jQuery, ASP) all this time, never having the need to adopt some brand new JS meta framework, just perfecting what they have. I'd guess this is a tight-knit duo or trio engineering team, if not a lone obsessive.
really nice deep-dive and explanations, thanks!
this is sick, compared to millions of wordpress-sites that ere "top-tier" with 5 MB and 180 requests
They are the absolute gold standard for "I need this weird fastener and I need it ASAP". Nearly every engineer has ordered prototype parts from them. If you've bought any product that was designed in the USA, I guarantee it was prototyped with parts from McMaster.
They also provide CAD for nearly all of their parts, right in the part details page. They make it so much easier on engineers to use their parts than any other supplier.
That prefetch on hover is something I've seen a lot in HTMX codebases 👌
I bet the images being greyscale was a performance choice as well as it lets that sprite be even smaller from the lower colour amount.
I bet those images are still around from it being a print asset, so it had to be grayscale
@@WesBos Maybe an unintentional bonus then! And as most of them are just sliver tone metal you can’t even tell on a bunch of them XD
Kinda makes me want a css gradient-map function so you could make palette swaps of an image like a classic game sprite…
@@WesBos Nah, those are typical modern CAD 3D renderings (probably SolidWorks). Their print catalog had much older AutoCAD line-drawing renders. BTW, all their parts can also be downloaded in various CAD model formats, which is fantastic for engineering work. They probably have "preview" generation scripts on the backend that can take any CAD model, load it up, put it in standard orthogonal projection, and render a simple grayscale image at any desired resolution. So, if they want to tweak the sizes of those images or sprites, I bet they can just regenerate all those preview pictures.
They only look like plain old grayscale images because everything in the mechanical engineering world looks plain and gray, no superfluous nonsense needed.
someone who gets it >>> @@mike200017
It’s more likely that they’re grayscale because they’re also used for printed catalogs. They are optimizing for latency, not bandwidth.
I welcome a return to Web 1.0
i was always very impressed with mcmaster's website. it's not flashy but it is incredibly functional and fast. I wish more companies put in the same level of care
Great vid! my last job was at Edgio where we sold a performance application, integrated to a CDN, I had to explain how we could do all those to customers and it blew their mind!