DiscoverCOMPRESSEDfm
COMPRESSEDfm

COMPRESSEDfm

Author: James Q. Quick, Amy Dutton

Subscribed: 23Played: 91
Share

Description

A weekly podcast about web design and development with a little zest from James Q Quick and Amy Dutton.
13 Episodes
Reverse
Amy and James talk everything productivity, from their favorite applications, workflows, and automation.SPONSORSVercelVercel 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 softwareresidency.com/careersKwesFormsKwesForms is the only complete developer-focused form service in the world. Build any type of form. Integrate it into any framework. No drag and drop, no unnecessary stylings. Set up advanced forms for clients on any platform. It works perfectly with any framework. Right out of the box.For more information, visit kwes.ioShow Notes0:00 Introduction 3:28 Default Folder X5:06 Fantastical - Calendar Replacement5:43 Better Touch ToolRearranging Windows Connecting my Air Pods Show my Desktop 6:59 Karabiner ElementsRemapping Caps Lock to a "Hyper Key" (Cmd + Alt + Cmd + Shift) to create more keyboard shortcuts Remap the right command key to escape Remap the right shift key to caps lock 8:31 Sponsor: Vercel9:43 Text Expander12:23 Alfred13:07 Copy Clip and Fly Cut16:15 Contexts - tab through individual windows16:52 Magnet for window management17:16 Stream Deck17:48 Hazel19:38 NotionMarie PoulinWilliam NuttAugust Bradley21:48 AirTableLearn with Jason23:52 Sync Inc24:40 Sponsor: KwesForms25:59 Good Notes on the iPad27:24 Notes app on Mac 28:10 Remarkable Tablet29:43 Three Most Important Things 30:20 Trello30:58 Learn Shortcuts 32:25 Extensions within VS Code GitLens ExtensionIntelliSense for TailwindCSS Classes 33:12 Learn VS Code Debugging Power Features 34:28 Templatize Things you can Repeat 35:15 Grab Bag Questions 36:07 Grab Bag Question #1: What's your workflow for creating content? 39:00 Grab Bag Question #2: How do you avoid burnout? 41:01 Sponsor: ZEAL42:37 James's Pick: Thunder Client Extension in VS CodeYouTube Video: I Don't Need Postman Anymore!! I Use VS Code Instead...43:48 James's Plug: Learn Build Teach Discord44:11 Amy's Pick: Reclaim for Calendar Syncing45:05 Amy's Plug: SelfTeach.me on YouTube
In this episode, Amy and James talk about 5 more design principles: alignment, emphasis, proportion, white space, and movement, and how they can be applied to real-life projects.SPONSORSVercelVercel 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 codingzeal.comKwesFormsKwesForms is the only complete developer-focused form service in the world. Build any type of form. Integrate it into any framework. No drag and drop, no unnecessary stylings. Set up advanced forms for clients on any platform. It works perfectly with any framework. Right out of the box.For more information, visit kwes.ioShow Notes0:00 Introduction0:50 Sponsor: ZEAL2:06 This past week...3:53 Design Principle #1: Alignment5:41 Power Tip: Using Guides6:57 Left Aligned is best8:40 Optical Alignment10:26 Working with a 12 Column Grid System11:31 Breaking the Grid12:04 Sponsor: KwesForms12:32 Design Principle #2: Emphasis15:29 Design Principle #3: Proportion18:05 Units of Measure20:16 Using srcset21:50 HTML Picture Element22:34 8 Point Grid23:06 Design Principle #4: White Space or Negative Space25:04 Proximity26:37 Sponsor: Vercel27:34 Design Principle #5: MovementClarifying what is happening for the userCreating a Mental Modal of how elements are laid out30:51 Grab Bag Question: Could you recommend any free resources for website colors?CoolorsTailwind ShadesRefactoring UI34:12 Amy's Pick - Instax Mini LiPlay Camera35:26 Amy's Plug - SelfTeach.me YouTube36:31 James's Pick - Amplication37:22 James's Plug - Learn Build Teach Discord Server
In this episode, Amy and James talk about 5 design principles: unity, contrast, balance, rhythm, and visual hierarchy and how they can be applied to an actual project, including their own.SPONSORSVercelVercel 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 codingzeal.comKwesFormsKwesForms is the only complete developer-focused form service in the world. Build any type of form. Integrate it into any framework. No drag and drop, no unnecessary stylings. Set up advanced forms for clients on any platform. It works perfectly with any framework. Right out of the box.For more information, visit kwes.ioShow Notes0:00 Introduction2:24 Art vs Design4:34 Can anyone do design?7:16 Principle #1: UnityUX EngineerCues from branding elements: typography, color palette, typographyconsistent design, equals a cleaner design, equals cleaner codeLook at the entire picture: What problem is your product trying to solve? Who are you solving this problem for? And what's the overall message that you're trying to resonate with your audience? And how should you break down that product into smaller pieces and organize it?10:59 Sponsor: KwesForms11:31 Principle #2: ContrastAccessibilityDrive focus to specific areas of the design16:04 Sponsor: ZEAL16:43 Principle #3: BalanceOne element is perceived as heavier than a smaller elementWays to achieve this:ColorSizeWhite SpaceTypes of Balance: Symmetrical, Asymmetrical, Radial, and Mosaic21:09 Principle #4: RhythmYou expect things to be laid a certain wayIf something is not in line, it creates contrast"Know the rules so that you can break them." -- Generally breaking one principle to drive another principle23:17 Principle #5: Visual HierarchyLead or pull the user through24:01 Assessing the call to action on our own personal sites26:49 Sponsor: Vercel27:39 Ways to Establish Visual HierarchyColorSizeBalanceWhite Space29:28 YouTube's red isn't accessible31:30 Above the Fold33:02 Grab Bag QuestionsCam the DeveloperMatias33:30 Grab Bag #1: What is a good resource for determining typography combinations?What Font? Bookmarklet35:59 Grab Bag #2: Hod you find your watering holes and how do you determine what to teach?40:07 James's Pick: Thermo Flask 2 Pack from Costco40:56 James's Plug: James Q Quick on YouTube41:24 Amy's Pick: Sipp App42:10 Amy's Plug: Self Teach Me on YouTube
Amy talks about tech stack (Next.js, Sanity, and Tailwind) and some of the decisions she made while building selfteach.me. James and Amy also discuss form management for static sites and some marketing tactics.SPONSORSVercelVercel 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 codingzeal.comKwesFormsKwesForms is the only complete developer-focused form service in the world. Build any type of form. Integrate it into any framework. No drag and drop, no unnecessary stylings. Set up advanced forms for clients on any platform. It works perfectly with any framework. Right out of the box.For more information, visit kwes.ioShow Notes0:00 Introduction3:31 Sponsor: ZEAL4:27 Related EpisodesEpisode 3 - Compressed.fm Tech StackEpisode 8 - JamesQQuick.com Tech Stack5:20 First iteration of the site: on WordPress6:01 Rebuilding the Site on Gatsby and MDXPros of Gatsby:Site SpeedMarkdownIncluding React ComponentsCons: Maxing build times on NetlifyLong build timesConstantly restarting Gatsby10:39 Moving to Sanity for contentPortable Text FTW!Better Developer Experience17:31 Using Tailwind CSSExplaining Utility-Based FrameworkPurgeCSS20:27 Experimenting with New Technologies20:44 Pros for using TailwindNaming things is hardSpecificityEveryone is working from a similar naming conventionRemove HTML, remove the the corresponding CSS = cleaner codebase22:57 Sponsor: Vercel25:35 Sponsor: KwesForms29:13 Using RightMessage for marketing31:55 Soft Launch vs Hard Launch33:54 Things you'd do differently34:07 Reduce the barrier to entry35:57 Move to Styled Components37:19 Grab Bag Question #1: how can you deliver rich experiences like MDX with Sanity and SvelteKit?38:50 Grab Bag Question #2: Is it easy to switch from React to Next?41:11 James's Pick: Book by Reggie Ford PTSD42:31 James's Plug: James Q Quick on YouTube42:51 Amy's Pick: RoadID44:06 Amy's Plug: SelfTeach.me on YouTube
In this episode, James and Amy discuss the tech behind jamesqquick.com. This site was built on top of Gatsby and Sanity. They discuss the decisions James made along the way and the things he might do differently.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 Intro3:05 Context in building jamesqquick.com4:46 Deciding to rebuild the site on GatsbyGatsby - https://www.gatsbyjs.com/6:29 Upgrades and improvements from moving off WordPress8:28 The Gatsby Plugin Ecosystem9:03 Sending your RSS feed to Dev.to for cross-postingTutorial: Publishing a Post Pulled in via an RSS Feed12:18 Hosting13:00 Sponsor: Vercel13:49 Moving from Markdown to Sanity21:35 Email MarketingMailChimpConvertKitPodia22:25 Serverless Functions23:14 Sponsor: PathwireMailGun - http://mailgun.comMailJet - http://mailjet.com25:18 React Ecosystem26:12 React Awesome Reveal26:37 Font Awesome for Icons27:14 For styling, using ScssDifference between Scss and Sass30:45 Sponsor: ZEAL31:19 Things you'd do differentlyStyled ComponentsTailwind CSSNext.js35:14 Grab Bag Question #1: If you are the only updating Sanity, can you host it locally or does it need to be accessible online?36:12 Grab Bag Question #2: When will you migrate your site to Next.js?36:24 Grab Bag Question #3: How do you like Sanity as an authoring experience?37:29 Picks and Plugs37:40 James's Pick: Tripod with a Selfie Light38:34 James's Plug: James Q Quick on YouTube38:55 Amy's Pick: Hunt a Killer (30% off)40:30 Amy's Plug: SelfTeach.me on YouTube
Amy and James finish their discussion on freelancing in part 2. This episode covers journey maps, project discovery, vetting clients, submitting estimates and contracts, project management, finances, and business insurance.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 Intro0:50 Sponsor: ZEAL1:40 What we've been up to this past week4:15 Creating a Customer Journey MapDesign the process so that you're truly leading a clientOutline touchpoints6:09 Sponsor: Pathwire7:14 Discovery ProcessDetermining the work that needs to be done.7:46 Scheduling initial phone call with Calendly8:42 Vetting the clientWant to make sure that the client will be good for you, too.Template Questionnaire12:20 Creating Estimates and ContractsEstimate through Harvest - https://www.getharvest.comContracts through HelloSign - https://www.hellosign.com/Accepting online payments and paying Stripe fees is part of the cost of doing business13:25 Project Management SystemBasecampAsanaTeamworkNotion13:52 Sending out a welcome documentInclude a handwritten note and a bag of [Ugly Mug coffee](http://uglymug.com15:29 Managing your Finances* Separate bank account* [QuickBooks}(https://quickbooks.intuit.com/)* Freshbooks18:39 Sponsor: Vercel19:32 Two types of expenses (1) stuff for everyday business and (2) items purchased specifically for a client21:54 Legal SideLLC and whyOther options: C Corp and S Corp25:06 Creating ContractsDan Mall's Contract from Superfriend.ly - http://agreement.superfriend.ly/28:19 Business Insurance29:46 Grab Bag Question #1 - How do you make yourself job-ready? When you're constantly preoccupied with an existing work schedule? @theBlackkSkyLearn on the jobTake advantage of free content onlineLearn in public, Twitter Hashtag #100DaysOfCodeLearn Build Teach Discord Community33:02 Grab Bag Question #2 - For maintenance, do you hand it off to someone else? have a grace period where you maintain it as part of your project or contract? Or offer a support plan with a retainer fee? Zach from LaunchCode34:45 Grab Bag Question #3 - Why do coding interviews suck? - @misterhtmlcss on Discord37:46 Amy's Pick: Shoe Dog by Phil Knight38:15 Amy's Plug: SelfTeach.me on YouTube 38:48 James's Pick: SanDisk Portable SSD 40:01 James's Plug: James Q Quick on YouTube and Learn Build Teach Discord Community
In this episode, Amy and James talk about freelancing -- finding the right clients, thoughts on Fivrr and Upwork, planning projects, scope creep, road mapping, time tracking, talking about budgets, charging, and late changes to a project.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:40 Sponsor: ZEAL3:06 Finding Clients3:24 What are some things you do to try and find opportunities?Talk about what you doWork in PublicFacebook GroupsDiscord ServersMarketing on the front end, building up to word of mouth.6:00 Thoughts on Fivrr and Upwork7:30 Bryan Harris "Pitching and Closing"7:49 Planning out a ProjectAsk lots of questionsEpisode 4 - Talked about asking lots of questions8:05 Asking what their budget isBenefit both sides by not wasting time10:04 Willing to price out in phases11:04 Ways that you can adjust the budget? What are wiggle room areas?AutomationsUnique Marketing Page TemplatesMemberships12:14 Sponsor: Vercel12:54 Creating EstimatesHarvest for time tracking - https://www.getharvest.com/Toggle - https://toggl.com/Magic Number15:53 Google Spreadsheet for Generating EstimatesJoin the Newsletter to receive this Sheet for Free17:27 How do you avoid scope creep when freelancing?RoadmappingQuick Start Road Mapping: Everything You Need to Know to Get Started18:50 Sponsor: Pathwire19:41 The importance of communicationSending out weekly project updates: what happened this past week, what I intend to accomplish the following week, any blockers or questions21:11 Including a section in the contract of things NOT included22:07 Understanding the ramifications of a change in the projectChanging the scope of the project, typically requires more time and moneyPrioritizing one section, de-prioritizes another22:51 Ways you can Charge a Client23:46 Charging by the Hour26:07 Other costs you have to take into consideration: health care, business expenses, utilities28:54 Value-Based PricingDifficulty in trying to quantify value31:26 Charging a Project-Based Rate33:46 Grab Bag Question #1: When do you set up your business?35:03 Grab Bag Question #2: Project Maintenance35:27 Picks and Plugs35:54 James's Pick: The book, Throne of Glass36:20 James's Plug: eBook, YouTube for Developers36:45 Amy's Pick: Contrast App37:15 Amy's Plug: SelfTeach.me on YouTube
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
Learn With Us

Learn With Us

2021-04-1001:16

Get ready! We're launching a new podcast on web design and development with a little zest.
Comments 
Download from Google Play
Download from App Store