You've got a new web development project to build, but how to begin. Here's a few tips and tricks that I use which are the best ways to get your web design projects started quickly. We'll examine them from the easiest to the hardest ending up with the one I like the most. #webdevelopment #webdesign #tooling #developers Tools Reviewed on this video Emmet: https://www.emmet.io Emmet is a toolkit for coding faster through quick shortcuts. It comes preinstalled in Visual Studio Code, but is also available and can be installed in many other editors. HTML Boilerplates: https://htmlboilerplates.com/ Another way to get started quickly on your page if you want a little some more flexibility is to use this website called HTML Boilerplates. It gives you the structure for different component that might need to go on your HTML page. It's not a ton of options, but it has a lot of the things that you'll need to have in your boilerplates to get going. Github Templates: https://github.com/new/ Another way you can start a new project is based on an old project. If you have a Github Repo, you can easily switch it to a template. Just go to the settings tab in your project. You can even use a special URL called github.new to quickly create a project based on one of your templates. Degit: https://github.com/Rich-Harris/degit What if you want to create a project based on someone else's Github Repo, but you don't want to fork...or maybe you forgot to create a template based on the repo. You might even be looking to clone a specific branch and you definitely want to start off with a clean history. This is where Degit has some advanced features that makes this easy. It is a CLI that you'll need to install globally. Create App: https://createapp.dev/ For more advanced projects need more choices, you can try Create App. It lets you choose different libraries like React, Svelte or vanilla JavaScript, build tools like WebPack, Parcel or Snowpack, UI Libraries like Bootstrap or Tailwind CSS. Vite: https://vitejs.dev/ Vite is a no muss, no fuss tool that is very opinionated but also has a lot of features. They include a live preview server, native javascript import commands, hot module replacement, support for CSS, JSX and typescript. Vite doesn't let you choose, it just uses Rollup, ESbuild and template support for React, Vue, VanillaJS and Lit-Element. My Blog: https://raybo.org My Courses: https://go.raybo.org/3Fp7 LinkedIn: https://www.linkedin.com/in/planetoftheweb ... https://www.youtube.com/watch?v=UQkhm_fQnOU

In this special Github Late edition of the Toolbox, I'll talk about my favorite Universe announcements, then, I'll share a new exciting Tailwind CSS 3.0 Alpha feature and one more tip in searching through your terminal history. It's Wednesday, October 27 and this is episode 10. Show Index 00:00 Intro 2:33 Github Universe 6:06 Configuring CodeSpaces with devcontainer.json 9:28 GitHub Issues Public Beta 14:04 Command Palette Shortcut 15:53 Copy RAW code 17:10 Tailwind CSS Alpha 3 Release 19:55 Tailwind CSS CDN CodeSwing Demo 31:59 Hyper Update for M1 Macs 33:18 Terminal Search Control-R/Control-S 34:40 Markdown-it Markdown-It with Attributes URLs: Blog: https://raybo.org DevContainers: https://docs.github.com/en/codespaces/customizing-your-codespace/configuring-codespaces-for-your-project Issues: https://github.com/features/issues TailwindCSS Alpha 3: https://github.com/tailwindlabs/tailwindcss/releases/tag/v3.0.0-alpha.1 Markdonw-it Attributes: https://github.com/arve0/markdown-it-attrs DevContainer.json A configurable devcontainer.json file can help you set up your codespaces a lot easier. This wasn't so much a new feature, but an excellent demo about a little known way to configure your codespaces. CodeSpaces is huge and this allows you to preconfigure a codespace so that it can do things like: - Modify your settings - Preload Extensions - Run an install script - Run a start script Got Issues? It's not just me anymore, now everyone's got issues…That's GitHub Issues. This is a fantastic new way to track your projects with more of a table view as opposed to the traditional Kanban Board. With the new table views, you get everything that you'd expect in a table that's more than just a pretty view, So for example, you can sort tables by columns, look at labels, assignments, etc. Command Palette The Biggest little feature announced at Github Universe has got to be the addition of the command palette. If you blinked, you missed it, so just go into anywhere on Github and just like in VSCode, you can hit command K (control-k). Check out how quickly you can get to repos, projects, popular repos, issues. etc. Copy Raw Button I caught another awesome small, but big feature. Now, if you want to copy the raw version of some code block, you can simply hit the copy button and get the raw contents of the file. Tailwinds CSS JIT CDN Tailwind CSS is getting close to launching a version 3 of their platform, which includes support for the JIT compiler in their CDN. All you need to do is add a script tag. Terminal Search Last week, I showed you how to find old commands using History and that was a pretty popular tip. Someone mentioned in the comments the seach feature, so I looked it up and it's pretty awesome. Just hit control-r, then type in the comm ... https://www.youtube.com/watch?v=YZL5_v-vz98