COMPRESSEDfm

In this episode, Amy and James talk about the best methods and tools for starting a new design project. Topics include asking the right questions, doing visual research, creating mood boards and wireframes, and getting all the pieces in place.SPONSORSPathwire / Mailgun / MailjetPathwire is a powerful email API and intuitive email marketing solution that delivers over 250 billion emails a year for 400,000 companies around the world.You can sign up now and try Mailgun or Mailjet for free today. Mailjet offers a trial that allows you to send 6,000 emails per month for free, forever. Mailgun offers a 3 month trial for 5,000 emails per month after which you only pay for what you send.For more information, simply visit Pathwire.comVercelVercel combines the best developer experience with an obsessive focus on end-user performance. Their platform enables frontend teams to do their best work. It is the best place to deploy any frontend app. Start by deploying with zero configuration to their global edge network. Scale dynamically to millions of pages without breaking a sweat.For more information, visit Vercel.comZEAL is hiring!Zeal is a computer software agency that delivers “the world’s most zealous” and custom solutions. The company plans and develops web and mobile applications that consistently help clients draw in customers, foster engagement, scale technologies, and ensure delivery.Zeal believes that a business is “only as strong as” its team and cares about culture, values, a transparent process, leveling up, giving back, and providing excellent equipment. The company has staffers distributed throughout the United States, and as it continues to grow, Coding Zeal looks for collaborative, object-oriented, and organized individuals to apply for open roles.For more information visit their site.Show Notes0:00 Introduction2:18 Ask a lot of questionsDesign can be a self-diagnosed solutionWhat's the true problem?3:47 Creating a Mood BoardGives visual languageCollect pictures of everything6:49 Surround yourself with good design"You are the average of the five people you spend the most time with."8:58 Moving away from detrimental phrases10:10 Sponsor: Vercel10:55 Tools within DesignFigmaSketchAdobe XD13:39 Framer as a prototyping tool15:56 Sponsor: Pathwire16:51 Tools are a poor man's excuseLook at something with an opportunity mindsetIt's better to start than to waste too much time debating about which tool to use.19:00 Starting a New ProjectMis en Place - Getting everything in its placeGive yourself a better starting pointMedium post about starting the Compressed.fm design21:10 User TestingCollect as much information as possible within the design phaseIteration is King23:26 Sponsor: ZEAL24:16 Grab Bag Question 1: How do you get started with wireframes?Pen and PaperInvision AppBalsamic25:24 Grab Bag Question 2: How do I learn the standards of web design as a whole or best practices in web design?Design CodeShift NudgeDesigning UI26:26 Grab Bag Question 3: What are your thoughts on Using TailwindCSS for help with design?Important thing is to make it your ownBeginner Tailwind - Course by Chris SevRefactoring UI28:24 Amy's Pick - CleanShot App X29:39 Amy's Plug - SelfTeach.me YouTube Channel30:03 James's Pick - Rocket30:38 James's Plug - James Q Quick on YouTube30:46 Glyphfinder

James and Amy discuss different categories of sites and the best tools and tech stacks to reach for. Categories include brochure and marketing sites, eCommerce, Applications, and Membership sites.SPONSORSPathwire / Mailgun / MailjetPathwire is a powerful email API and intuitive email marketing solution that delivers over 250 billion emails a year for 400,000 companies around the world.You can sign up now and try Mailgun or Mailjet for free today. Mailjet offers a trial that allows you to send 6,000 emails per month for free, forever. Mailgun offers a 3 month trial for 5,000 emails per month after which you only pay for what you send.For more information, simply visit Pathwire.comVercelVercel combines the best developer experience with an obsessive focus on end-user performance. Their platform enables frontend teams to do their best work. It is the best place to deploy any frontend app. Start by deploying with zero configuration to their global edge network. Scale dynamically to millions of pages without breaking a sweat.For more information, visit Vercel.comZEAL is hiring!Zeal is a computer software agency that delivers “the world’s most zealous” and custom solutions. The company plans and develops web and mobile applications that consistently help clients draw in customers, foster engagement, scale technologies, and ensure delivery.Zeal believes that a business is “only as strong as” its team and cares about culture, values, a transparent process, leveling up, giving back, and providing excellent equipment. The company has staffers distributed throughout the United States, and as it continues to grow, Coding Zeal looks for collaborative, object-oriented, and organized individuals to apply for open roles.https://www.codingzeal.com/hiringShow Notes0:00 Introduction2:42 Asking a lot of questionsWhat does this thing need to do? - Determine the hopes and dreams for the app o the app will be able to grow as the site grows.Working on an MVPWho's going to update it?5:36 Jot things down on paperWhat's it going to look like?7:23 Holotypes - fancy word for categoryA holotype gives a framework for being able to ask the right questions and know what tech to reach for.8:34 Brochure or Marketing SitesMostly informationalExamples: restaurants, stores, moving company9:39 eCommerce SitesCollecting credit card information10:11 Membership SitesManaging usersAbility to Log inDetermining what a user can do once they've logged inCollecting information on your users10:49 Difference between authentication and authorization11:40 Difference between a web site and a web applicationInteractivity13:00 Sponsor: Vercel13:17 YouTube video: I don't use Create React App anymore13:42 Technologies for Brochure and Marketing Sites13:57 WordPressPowers 1/3 of the InternetPowers 14.7% of the top 100 websites16:39 Webflow* No Code Solution* Writes and exports clean code19:40 James's personal site is on Gatsby* Can be difficult if you don't know GraphQL21:01 Other options, apart from ReactNuxt.js is the Next.js Vue equivalentScully for Angular21:26 Platforms eCommerce sitesEasy Digital DownloadsStripePayPalShopifyGravity FormsSnip CartPodiaGumRoad26:14 - Refactoring UI27:17 Sponsor: Pathwire / Mailgun / Mailjet28:58 Membership SitesCompressed.fm is using Auth0 and the API folderMembership plugins within WordPressPodia has a membership component30:05 Grab Bag Question #1: When is a good time to start freelancing?What is your tolerance for risk?Do you have a partner that can help contribute additional income or provide health benefits?Talk to your employer. They may be willing to negotiate.Talk to local stores, build a networkCan start right away, not all or nothing.33:15 Grab Bag Question #2: What are your thoughts on not code tools for developers?No code tools will not put developers out of work. They will just enable developers to focus on more interesting problems.Conversation around no code should be a safe space.35:53 Sponsor: ZEAL36:46 Amy's Pick: Roost StandPerfect laptop stand for mobile or remote working.37:23 Amy's Plug: SelfTeach.me on YouTube channelSeries on SVGsGetting ready to release a series on building the custom audio player, used on the Compressed.fm site.37:42 James's Pick: BenQ LightHelps with eye fatigue38:20 James's Plug #1: The Learn Build Teach Discord Community (free)38:42 James's Pick: James Q Quick on YouTube Channel

Amy and James walk through the tech behind Compressed.fm and some of the unique challenges they faced when building the site.SPONSORSPathwire / Mailgun / MailjetPathwire is a powerful email API and intuitive email marketing solution that delivers over 250 billion emails a year for 400,000 companies around the world.You can sign up now and try Mailgun or Mailjet for free today. Mailjet offers a trial that allows you to send 6,000 emails per month for free, forever. Mailgun offers a 3 month trial for 5,000 emails per month after which you only pay for what you send.For more information, simply visit Pathwire.comVercelVercel combines the best developer experience with an obsessive focus on end-user performance. Their platform enables frontend teams to do their best work. It is the best place to deploy any frontend app. Start by deploying with zero configuration to their global edge network. Scale dynamically to millions of pages without breaking a sweat.For more information, visit Vercel.comZEAL is hiring!Zeal is a computer software agency that delivers “the world’s most zealous” and custom solutions. The company plans and develops web and mobile applications that consistently help clients draw in customers, foster engagement, scale technologies, and ensure delivery.Zeal believes that a business is “only as strong as” its team and cares about culture, values, a transparent process, leveling up, giving back, and providing excellent equipment. The company has staffers distributed throughout the United States, and as it continues to grow, Coding Zeal looks for collaborative, object-oriented, and organized individuals to apply for open roles.For more information visit their site.Show Notes0:00 Introduction2:53 Powering the backend: Sanity.io3:22 The difference between client-side and server-side rendering5:50 Sanity's differentiator: Portable Text8:35 Sponsor: Vercel9:13 Finding a challenge in every project11:14 Working with Framer Motion13:26 Animating a hamburger menu with 2 CSS Properties13:33 YouTube video explaining animating the hamburger animation14:29 Josh Comeau14:43 Authentication with Auth017:59 Experience with Next-Auth18:54 Sponsor: Pathwire / Mailgun / Mailjet20:00 Custom Audio Player22:45 CSS Tricks article: Let’s Create a Custom Audio Player24:31 Big Automation Kick25:03 Sponsor: ZEAL25:55 James's Discord: Learn Build Teach26:06 Grab Bag Question #1: What's the best way to set up SEO metadata in Next.js?26:40 React Helmet27:02 Compressed.fm Source Code on GitHub27:47 Grab Bag Question #2: Have you ever had an issue with Tailwind normalizing or overriding the text coming from Sanity?29:05 SelfTeach.me Source Code on GitHub29:36 Grab Bag Question #3: Where are you storing access tokens in Next.js apps?31:00 James's Pick: [Webcam Swivel Arm ($20 on Amazon)](https://amzn.to/3tlY0EW31:51 James's Plug: Learn Build Teach Discord Server32:01 James's Plug: His YouTube Channel32:17 Amy's Pick - Gravel Gravel Blanket33:20 Big Blanket Co34:00 Amy's Plug - SelfTeach.me on YouTube

Amy Dutton shares how she got started in tech by building the original Giphy over 20 years ago. She talks about how she navigated some of her career decisions, ultimately landing a full-time job after seven years of doing freelance full-time.SPONSORSPathwire / Mailgun / MailjetPathwire is a powerful email API and intuitive email marketing solution that delivers over 250 billion emails a year for 400,000 companies around the world.You can sign up now and try Mailgun or Mailjet for free today. Mailjet offers a trial that allows you to send 6,000 emails per month for free, forever. Mailgun offers a 3 month trial for 5,000 emails per month after which you only pay for what you send.For more information, simply visit Pathwire.comVercelVercel combines the best developer experience with an obsessive focus on end-user performance. Their platform enables frontend teams to do their best work. It is the best place to deploy any frontend app. Start by deploying with zero configuration to their global edge network. Scale dynamically to millions of pages without breaking a sweat.For more information, visit Vercel.comZEAL is hiring!Zeal is a computer software agency that delivers “the world’s most zealous” and custom solutions. The company plans and develops web and mobile applications that consistently help clients draw in customers, foster engagement, scale technologies, and ensure delivery.Zeal believes that a business is “only as strong as” its team and cares about culture, values, a transparent process, leveling up, giving back, and providing excellent equipment. The company has staffers distributed throughout the United States, and as it continues to grow, Coding Zeal looks for collaborative, object-oriented, and organized individuals to apply for open roles.For more information visit their site.Show Notes0:00 Introduction0:57 Family of Early Adopters1:34 Building My First Website in Netscape Navigator Tools2:49 First Real Job Updating a Website4:23 Finding a Mentor6:00 Teaching my High School Computer Class7:05 Sponsor: Pathwire, Mailgun, and Mailjet8:14 Working as a Production Artist10:34 Studying in college12:08 Getting a degree? Going to a Bootcamp? Teaching yourself?13:12 Your background and experiences mean something13:56 Working summer camp as a video producer15:21 Brief experience with Animation Mentor16:31 Sponsor: Vercel17:12 Taking a job on Music Row18:21 Moving into a Design Role19:20 Going freelance full-time20:33 Transitioning back into a full-time job21:20 Sponsor: ZEAL22:01 Amy Guesting on James's Twitch Stream22:12 The Pros and Cons of Freelancing23:06 Advice for making Job transitions23:21 Grab Bag Questions #1: What is you favorite design for web apps and why?27:27 Grab Bag Question #2: Is there a moment when you almost quit? What made you push through?28:53 Amy's Pick: Tile29:43 Amy's Plug: SelfTeach.me on YouTube31:02 Simon Høiberg on Twitter31:04 James's Pick: FeedHive31:59 James's Plug: James Q Quick on YouTube32:15 Conclusion

James Q Quick shares how he got his start in tech and how a couple of job interview rejections turned into a bigger opportunity and ultimately a career path as an evangelist, speaker, and teacher.SPONSORSPathwire / Mailgun / MailjetPathwire is a powerful email API and intuitive email marketing solution that delivers over 250 billion emails a year for 400,000 companies around the world.You can sign up now and try Mailgun or Mailjet for free today. Mailjet offers a trial that allows you to send 6,000 emails per month for free, forever. Mailgun offers a 3 month trial for 5,000 emails per month after which you only pay for what you send.For more information, simply visit Pathwire.comVercelVercel combines the best developer experience with an obsessive focus on end-user performance. Their platform enables frontend teams to do their best work. It is the best place to deploy any frontend app. Start by deploying with zero configuration to their global edge network. Scale dynamically to millions of pages without breaking a sweat.For more information, visit Vercel.comZEAL is hiring!Zeal is a computer software agency that delivers “the world’s most zealous” and custom solutions. The company plans and develops web and mobile applications that consistently help clients draw in customers, foster engagement, scale technologies, and ensure delivery.Zeal believes that a business is “only as strong as” its team and cares about culture, values, a transparent process, leveling up, giving back, and providing excellent equipment. The company has staffers distributed throughout the United States, and as it continues to grow, Coding Zeal looks for collaborative, object-oriented, and organized individuals to apply for open roles.For more information visit their site.Show Notes0:00 Introduction0:54 Missed Opportunity in High School1:24 Majoring in Computer Science1:59 Building your First Mobile Application5:42 First Technical Interview7:55 Sponsor: Vercel / Next.js8:58 Getting into JavaScript9:14 Applying for Jobs9:53 Technical Evangelist at Microsoft10:41 Moving back to Memphis10:57 Developer Bootcamp by Colt Steele on uDemy11:42 Decisions and Setting the Trajectory of Your Life14:07 Getting into Content Creation16:23 Working at FedEx17:27 Transitioning into Auth017:53 The Easiest Part about Content Creation19:09 Learning Right Now20:22 Automating Everything21:45 Sponsor: Pathwire / Mailgun / Mailjet22:37 Grab Bag, Question #1: How do you start a career in tech?24:57 Grab Bag, Question #2: Is there a moment where you almost quit? What made you push through?27:35 Sponsor: ZEAL28:22 James's Picks: Testimonial.to29:33 James's Plug: [James's YouTube Channel(http://youtube.com/c/jamesqquick)29:38 James's Weekly newsletter29:58 Amy's Pick: Descript31:08 Amy's Plugin: SelfTeach.me YouTube Channel31:56 Conclusion

Get ready! We're launching a new podcast on web design and development with a little zest.