Build a Website with Modern Tooling and No Frameworks

In this tutorial we will be building a website without a front-end framework but making use of Webpack to support writing modern JavaScript (ES6+), including ES Modules and Sass.

We all love React, Vue, Angular, [front-end framework]. But, it might be overkill to use them if you just need to build a simple website.

Continue reading

Compile Sass Files in Visual Studio and Webpack

Sass is a very popular CSS pre-processors and the intent of the tutorial is to show you how to compile Sass files within Visual Studio using Webpack, this will include minification and autoprefixing for production.

Sure, there are some plug-ins on the Visual Studio Marketplace, and is nice to just install a plug-in and forget about configuration. However, what will happen if the plug-in is not supported anymore and stops working with newer Visual Studio versions? Well, too bad. As in the case with one of the most popular compiler plug-ins in the market.

By configuring the compilation yourself, you will have total control on the output plus the vendor prefixes will be added automatically for your CSS rules. How cool is that?

Continue reading

React OAuth Authentication with Firebase – Tutorial

Build a secure React app that provides takes advantage of Firebase simplicity to consume OAuth Authentication with GitHub, Twitter and Facebook.

For an app to be secure, we usually need to implement some kind of authentication, whether it is the basic username/password combo or a two-factor authentication. In this post we’ll learn how to leverage Firebase to make our app secure and give our users the choice to log in with their preferred social account.

Continue reading

Getting Started with Vue.js in .NET Core using Visual Studio

You have heard a lot about Vue.js and how awesome it is, and now you want to use it with your next .NET Core app. Well, it is far easier than you might think.

In this tutorial, besides getting started with Vue.js, we will cover the following:

  • SASS compilation
  • ES6+ JavaScript transpilation to ES5 with Babel
  • CSS Autoprefixing with PostCSS
  • Minification of our CSS and JS assets
Continue reading

Profile Updater – A React App to Update Your Social Media Profiles: Twitter, GitHub & Facebook

If you are anything like me when it comes to keeping your social media profiles in sync, then you could benefit from this app. The purpose is to type your profile information once, and then send the updates to your profile in Twitter, GitHub & Facebook.

Just to note, this project is still in development and not ready for production usage, however it is up to a point where I feel comfortable to make it public. As of the time of this writing, you can already send updates to Twitter and GitHub.

Also, once the project is complete, I will create a series of blog posts tutorials on building this app, including Webpack configuration for development and production.

Continue reading