parcel

Explore "parcel" with insightful episodes like "Hasty Treat - Vite + Parcel 2", "Potluck - Beating Procrastination × Rollup vs Webpack × Leadership × Code Planning × Styled Components × More!" and "Our Workflows: Design, Development, Git, Deployment" from podcasts like ""Syntax - Tasty Web Development Treats", "Syntax - Tasty Web Development Treats" and "Syntax - Tasty Web Development Treats"" and more!

Episodes (3)

Hasty Treat - Vite + Parcel 2

In this Hasty Treat, Scott and Wes talk about modern build tools, comparisons between them, and makes them modern and next-level.

Prismic - Sponsor

Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.

LogRocket - Sponsor

LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.

Show Notes

03:08 - Next Gen Bundlers are here!

They are easy
They are fast
They are bundlers
They are code splitters
They are dev environments
HMR / Fast Refresh

07:13 - What do they use under the hood?

Parcel uses SWC (Rust)
Vite uses esbuild (Go)

10:29 - How do you use them?

Usually point your app at an HTML file
Your HTML file has an ES module
It then goes and loads everything from there
They have adaptors for different types of files
- CSS
- Images
- Etc.

You can also point it directly at files

14:59 - Common use-cases

React / JSX
- OOTB
Vue
Svelte
TypeScript
- Both just work
Custom Babel config
- Plugins for both
Sass
- Vite: Detects it, asks to install it
- Parcel: Detects it, installs it for you
PostCSS Processors

20:29 - Custom API

Both have a custom API or “plugins”, which you can integrate into your app or tooling if needed.
Example use-case: a really nice WordPress dev package.

20:57 - Which one?

Both are really good!
Parcel 2 has been in dev for 2+ years - unsure when it will launch.
Wes: In my experience Vite “just works” a bit better. Might be a side effect of Parcel being in dev.
Both are wicked fast. (Wes: I literally screen recorded JS and CSS updates ~ 10 ms difference either way.)
Life is good!

Tweet us your tasty treats!

Scott’s Instagram
LevelUpTutorials Instagram
Wes’ Instagram
Wes’ Twitter
Wes’ Facebook
Scott’s Twitter
Make sure to include @SyntaxFM in your tweets

Syntax - Tasty Web Development Treats

enJuly 12, 2021

Potluck - Beating Procrastination × Rollup vs Webpack × Leadership × Code Planning × Styled Components × More!

It’s another potluck! In this episode, Scott and Wes answer your questions about transitioning to backend dev, tips for beating procrastination, Rollup vs Webpack, code planning, growing as a leader and more!

LogRocket - Sponsor

Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.

Show Notes

02:33 - I am a junior dev, coming up on two years at my current agency. I have been primarily on the frontend using Angular and templating with Handlebars and other HTML and CSS. I have been asked if I would be interested in moving more into backend, with a focus on Node.js. Outside of creating APIs, what else should I do to learn “backend”?

06:08 - I work as a web master and would like to be a frontend developer someday. Currently I am working on a MERN stack app on my own to enhance my skills, but have problems focusing and tend to procrastinate a lot. How do you tackle distractions and get things done? I would appreciate some tips.

11:00 - Rollup or Webpack? Webpack 5 still doesn’t seem to support ES6 module output, as described by Philip Walton, so instead of upgrading to Webpack 5, this might be a good time to think about switching to Rollup (or Parcel).

13:46 - I have been learning web development (HTML, CSS and JS) and am at a place where I can build simple websites for small businesses, but I feel like a beginner and am wondering if you have any recommendations on courses to get to a more intermediate/advanced level?

18:01 - Why should you choose Styled Components over other ways of writing CSS?

22:56 - What are your thoughts on companies that make senior developer roles require leadership responsibilities? A great technical person does not always make a great leader or visa versa.

26:36 - I am often not good at planning out code from the start. I find that it’s easier to start coding, write a few lines, run it to see where I’m at, and carry on. This technique doesn’t work when I need to wait for a deploy to finish before I can view the result, as it greatly increases dev time. Do you have any advice for what I can do better?

31:43 - I have a very random question. for context I’m a Mac and Linux user myself. However, recently while building our company application I’ve noticed that Windows does extremely weird things with font sizes. Since we have a pretty decent Windows user base, obviously this is something my partner and I want to solve. However I’m very unsure of the best way to handle it. It seems entirely different from user to user. How in the world do we as developers account for these inconsistencies? We have tried vertical media queries that more or less kick them to tablet mode. Obviously this is less than optimal.

37:50 - Are side projects common among developers? I recently mentioned to my boss that I have a few side projects - nothing serious, just for learning mostly - and he said he would rather I didn’t, and instead focus on my work. He said he hadn’t really heard of developers doing side projects, and that if I want to work on things that aren’t our work he has other things I can do.

××× SIIIIICK ××× PIIIICKS ×××

Scott: Malicious Life Podcast
Wes: LaCie Rugged USB-C External HDD

Shameless Plugs

Scott: Modern CSS Design Systems - Sign up for the year and save 25%!
Wes: Beginner Javascript - Use the coupon code ‘Syntax’ for $10 off!

Tweet us your tasty treats!

Scott’s Instagram
LevelUpTutorials Instagram
Wes’ Instagram
Wes’ Twitter
Wes’ Facebook
Scott’s Twitter
Make sure to include @SyntaxFM in your tweets

Syntax - Tasty Web Development Treats

enJuly 22, 2020

parcel

productivity apps

error handling

full stack development

back end development

Our Workflows: Design, Development, Git, Deployment

It’s a workflow extravaganza! Scott and Wes talk about their development workflows, covering everything from design to deployment.

Coffeecup’s CSS Grid Builder Tool

Check out Coffeecup’s CSS Grid.cc builder tool and resources to learn, prototype and build next gen layouts with CSS Grid!

VueSchool.io's Vue.js Masterclass

Check out VueSchool.io’s new Vue.js Masterclass taught by Alex Kyriakidis. Learn Vue.js along with best practices, modern Javascript, and other exciting technologies, by building a real-world application - a forum. The first 50 people to visit VueSchool.io/syntax to get 25% off.

Show Notes

4:00 - Design Workflow

Wes:
- Screenshots of look + feels
- Sketch layouts out in pencil
- Mock up layout in Sketch
- Once rough layout is done, I refine
- Once I have: colors, type, patterns, textures and overall layout, I move to code.
- A design program is important to vs designing in code
Scott
- Mirrored component structure in Figma
- Using Ideas from Atomic design and React components
- Goal is for Figma components to be 100% mapped to styled components
- Flexible and testable in different layouts
- My design philosophy is refinement through iteration
- Light theft
  - Footer from Pitchfork
  - New card animation idea from Patagonia

15:55 - Design to Dev Workflow

Wes:
- Happy with design so far
- Setup tooling - styled components, stylus, sass…
- Setup type, variables, partials, resets…
- Do as much HTML as possible before styling
- CSS it up for layouts, then go section by section
- Broad first, then zoom in on finesse
- Browsersync / Hot Reload
- Test across browsers / Devices
Scott:
- Define parameters in Figma
- Styled components in React, hand write that CSS bruh
- Move aspects of styled components lib like breakpoints, colors, functions, helpers, base components

32:06 - Git Workflow

Wes:
- Tear off a branch - name after issue - DEV113
- Do your work
- Rebase
- Squash
- Pull Request
- Rinse + Repeat
Scott
- Master branch is 1-1 with live
- Develop is where work is done (but not really because I make a feature branch for each feature and merge in)
- Contributors issue pull requests into develop

42:34 - Deployment Workflow

Scott:
- Hosted on Meteor Galaxy, container based hosting
- Develop is merged into master, all tests run, if everything passes tests and manual check, I deploy to Galaxy via NPM script.
- Soon I’ll be adding in automated test running & auto deploy to galaxy on push to master.
- Secrets are kept in a settings.json file that’s used during deployment.
Wes:
- Codeship
- DeployHQ
- Git
- Rsync
- Dealing with secrets