Our Workflows: Design, Development, Git, Deployment

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 49:53 - Project Folder Structure Wes: Folder Structure - 0100, 0101… Scott: API UI element -> styled components with index Startup Utilities Links BNO Train Wreck Album Atomic Design Guide Design Systems BrowserSync FontSquirrel fontplop Creative Market Delicious Brain’s WP Migrate DB Pro Ryan Dahl - 10 Things I Regret About Node.js ××× SIIIIICK ××× PIIIICKS ××× Scott: Overcooked - Nintendo Switch Wes: SkyRoam Solis Shameless Plugs Scott’s Level 2 React Course Wes’ Courses 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

Avsnitt(964)

836: Real Talk on Web Accessibility with Marcy Sutton Todd

836: Real Talk on Web Accessibility with Marcy Sutton Todd

18 Okt 20241h 6min

835: How to Pick a JavaScript Framework

835: How to Pick a JavaScript Framework

Do you really need a framework? Scott and Wes bring on CJ to break down when frameworks like Vue, Svelte, and Astro are worth it—and when they might just add complexity. They dive into everything from rendering strategies to auth solutions, deployment options, and how to choose the right tool for the job. Show Notes 00:00 Welcome to Syntax! 01:32 Brought to you by Sentry.io. 03:17 What is a framework? Syntax Meetup San Francisco. 08:21 Examples of frameworks for Vue, Svelte and Angular. 12:39 What questions do you need to answer? 12:44 What or where do you need to ship? 14:12 How do you render it? 18:22 Where are you deploying it? 24:03 How do you store data? 24:09 Existing API. 26:03 Integrated server. 26:22 Database. Supabase. 26:59 Does it have RPC or server actions? 34:27 Do you need authentication? 38:45 Auth packages. LuciaJS. Lucia announcement. Lucia preview. NPM Arctic Oauth. Auth utilities. Better-Auth. Scott’s Drop-In Auth. 42:10 Does it include email? 42:52 What does the TypeScript story look like? 43:32 How does it handle images? 44:35 How do we work with CSS? 46:02 How long has it been around? 47:37 How mature is the ecosystem? 48:35 Is there community support? 50:21 Portability. 51:18 Hiring. 52:17 Sick Pick + Shameless Plugs. Sick Picks CJ: Infinite Health. Scott: USB A to C adapters. Wes: Citric Acid. Shameless Plugs Scott: Syntax on YouTube Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

16 Okt 202458min

834: AI Will Improve Your Web Development Workflow

834: AI Will Improve Your Web Development Workflow

Scott and Wes serve up ways developers can use AI tools like Claude, GitHub Copilot, and more to boost productivity. From error tracing to refactoring code and automating mundane tasks, they break down how AI can handle the heavy lifting so you can focus on the fun stuff! Show Notes 00:00 Welcome to Syntax! 01:23 Brought to you by Sentry.io. 01:43 Using AI tools effectively. 05:29 Stack trace reading and error finding. 08:37 San Francisco Syntax Meetup! 09:19 Research and validation. 12:19 Completing mundane tasks. 14:10 Refactoring. 18:56 Simple typescript. 20:29 Summarizing docs and source code. 23:56 Quick hits. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

14 Okt 202427min

833: Next Gen Fullstack React with TanStack

833: Next Gen Fullstack React with TanStack

Scott and Wes talk with Tanner Linsley, creator of TanStack, about the React ecosystem, and the evolution and futue of TanStack’s suite of tools, including TanStack Router and TanStack Start. Show Notes 00:00 Welcome to Syntax! 02:59 What is TanStack Start? UnJS Nitro Vinxi 06:17 What is the Vite Environment API? 07:21 Was it always the plan to use Vite? 08:02 TanStack Router and client-side vs server-side 16:18 How TanStack Start will work 27:26 Moving from Create React App to TanStack 30:42 Brought to you by Sentry.io 31:15 Will TanStack Router ever support other frameworks? 33:54 How will TanStack Start handle forms? 36:13 TanStack Virtual 39:41 What is the future of TanStack? Convex 42:49 How Tanner writes documentation 47:55 Server functions and middleware 54:41 When will TanStack Start be in beta? 57:00 Sick Picks + Shameless Plugs Sick Picks Tanner: LG C4 Ultra Slim Fit TV Wall Mount Shameless Plugs Tanner: TanStack Blog @TKDodo Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

11 Okt 20241h 2min

832: Potluck: When to Use a Framework × Goodbye Webpack × Custom Events in React + More!

832: Potluck: When to Use a Framework × Goodbye Webpack × Custom Events in React + More!

Scott and Wes answer your burning questions! They cover everything from moving off create-react-app and the benefits of Next.js, to transitioning from junior to senior dev, working with QA teams, and even dive into game development with Godot. Show Notes 00:00 Welcome to Syntax! 00:31 DenverScript. 03:14 Brought to you by Sentry.io. 03:54 Question 1: Moving off create-react-app. Proposal: TC39 Import Attributes. HTML iframe srcdoc Attribute. 09:10 Question 2: Working together with QA teams. 13:46 Question 3: Benefits of React with Next.js Framework. Svelte Turnstile. Next.js Pages Router vs Next.js App Router. 17:38 Question 4: What are your real names? 19:22 Question 5: Thoughts on RTO and WFH. 27:50 Question 6: Where can I find you Sick Picks? Sick Picks. Sick Picks Scraper. 29:34 Question 7: From JR developer to SR developer. 31:41 Question 8: Godot and game development. Godot Engine. GDScript. Phind. 39:37 Question 9: Inherent advantage between Callbacks and Events. 44:44 Question 10: Transitioning to freelance with corporate experience. 49:44 Question 11: Dealing with negative feedback. 57:05 Sick Picks & Shameless Plugs. Sick Picks Scott: audiobookshelf, Plappa App. Wes: New Syntax Swag. Shameless Plugs Scott: Syntax on YouTube. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

9 Okt 20241h 2min

831: Preventing Spam and Fraud

831: Preventing Spam and Fraud

From CAPTCHAs to shadow banning, Scott and Wes break down the best strategies for keeping your app safe from spam and fraud. They cover tools like email verification, rate limiting, shadow banning, and more to protect your users and data. Show Notes 00:00 Welcome to Syntax! 00:15 The problem. 02:47 Brought to you by Sentry.io. 04:23 CAPTCHA. 06:24 Data collection. 07:11 Stripe Radar score calculation. 09:12 Rate limiting. 11:34 Shadow banning. 13:53 Email verification. 15:38 Tie to accounts. 16:23 Tied to real identity. 19:36 Manual approval. 21:19 Blocking ASN. 23:17 Honey pot field. 24:28 SMS verification. 25:05 Mechanical Turk. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

7 Okt 202426min

830: GitHub and Code Reviews with Sarah Vessels

830: GitHub and Code Reviews with Sarah Vessels

Scott and Wes talk with GitHub’s Sarah Vessels about the ins and outs of code reviews, their critical role in collaborative development, and tips for making your reviews more effective. Show Notes 00:00 Welcome to Syntax! 00:59 What is a code review? How to review code effectively: A GitHub staff engineer’s philosophy 04:18 Strategies for an effective code review processes 06:59 Should you test and fix in the same pull request? 07:57 How to ask for code reviews 12:12 Feature flags and their role in code management flipper scientist scientist - JS 20:03 Who should do code reviews? 23:34 Should you review your own code? 25:04 Brought to you by Sentry.io 25:29 Code comments vs pull requests 27:35 Dealing with egos in the code review process 30:18 What automations are essential? project-pull-mover 34:35 Underutilized tools GitHub Protips: Tips, tricks, hacks, and secrets from Sarah Vessels 36:25 Commit strategies and squash 39:30 GitHub’s branching system 41:14 Git gone wrong 42:30 What is the correct way to merge into main? 43:47 What was it like working on GitHub Sponsors? GitHub Sponsors thanks.dev 46:58 Sick Picks & Shameless Plugs Sick Picks Sarah: https://store.steampowered.com/steamdeck Shameless Plugs Sarah: https://github.com/sponsors Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

4 Okt 202451min

829: 14 Web Development Tips I Wish I Knew Sooner

829: 14 Web Development Tips I Wish I Knew Sooner

Scott and Wes share 14 game-changing tips they wish they’d known earlier in their web dev careers. From embracing tools to learning by doing, these insights will help you level up your skills faster! Show Notes 00:00 Welcome to Syntax! 02:09 Brought to you by Sentry.io. 03:45 13 Web Development Tips I Wish I Knew Sooner. 03:49 Number 1 - No one is all-knowing. 05:39 Number 2 - People with extremely strong opinions. 11:13 Number 3 - Using tools to help you isn’t a bad thing. 12:34 Number 4 - Approach new technology with a mixed dose of skepticism and open-mindedness. 16:05 Number 5 - Things make more sense the more you actually use them. 18:40 Number 6 - Willingness to change your mind is a strong skill. 20:06 Number 7 - Doing is better than reading or watching. 22:29 Number 8 - Asking questions is good. 26:45 Number 9 - Everyone doesn’t learn the same. 30:41 Number 10 - You don’t need a SAAS for everything. 35:53 Number 11 - You don’t need to worry about scale. 37:49 Number 12 - Learning the fundamentals will always pay off. 40:07 Number 13 - Working in public will make you more hireable. 42:48 Number 14 - You can interview without accepting a job offer. 45:29 Sick Picks & Shameless Plugs. Sick Picks Scott: Glasses. Wes: Oxo Whisk, Danish Whisk. Shameless Plugs Scott: Syntax on YouTube. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

2 Okt 202450min

Populärt inom Politik & nyheter

aftonbladet-krim
svenska-fall
motiv
p3-krim
flashback-forever
fordomspodden
rss-viva-fotboll
rss-krimstad
aftonbladet-daily
rss-sanning-konsekvens
rss-vad-fan-hande
spar
rss-krimreportrarna
rss-frandfors-horna
blenda-2
olyckan-inifran
dagens-eko
krimmagasinet
rss-flodet
rss-expressen-dok