News Every time

For expert-led online Angular training courses, you can't go past Ultimate Angular by Todd Motto. Try his courses here , and use the code SITEPOINT to get 25% off and to help support SitePoint. In this tutorial, we’re going to look at managing user authentication in the MEAN stack. We’ll use the most common MEAN architecture of having an Angular single-page app using a REST API built with Node, Express and MongoDB. When thinking about user authentication, we need to tackle the following things: let a user register save user data, but never directly store passwords let a returning user log in keep a logged in user’s session alive between page visits have some pages that can only been seen by logged in users change output to the screen depending on logged in status (for example, a “login” button or a “my profile” button). Before we dive into the code, let’s take a few minutes for a high-level look at how authentication is going to work in the MEAN stack. The MEAN Stack Au

As Aaron Osteraas can tell you, the path between discovering what you want to do for a living and actually doing it is rarely linear. Now a Software Engineer at Tigerspike, a digital services company headquartered in Sydney, Aaron’s journey toward becoming a developer began when he was in high school, yet it wasn’t until his early 30s that he obtained his first full-time development job. The years in between were filled with starts and stops, challenges and successes, and a whole lot of tinkering. “I was always tinkering with the family computer, which was mostly, ‘oh god I've broken it how do I fix it before I get in trouble,’" Aaron said of his technical beginnings. He had an appetite for building and modifying hardware, which he attributes to the joy that comes from doing something with your hands. He’d collect spare hardware, buy and sell parts, and at times resort to scrounging and trading. “There were computer parts strewn everywhere,” he said. But by the time he grad

Building a modern project requires splitting the logic into front-end and back-end code. The reason behind this move is to promote code re-usability. For example, we may need to build a native mobile application that accesses the back-end API. Or we may be developing a module that will be part of a large modular platform. The popular way of building a server-side API is to use Node.js with a library like Express or Restify. These libraries make creating RESTful routes easy. The problem with these libraries is that we'll find ourselves writing a ton of repetitive code . We'll also need to write code for authorization and other middleware logic. To escape this dilemma, we can use a framework like Feathers to help us generate an API in just a few commands. What makes Feathers amazing is its simplicity. The entire framework is modular and we only need to install the features we need. Feathers itself is a thin wrapper built on top of Express, where they've added new featur

Software development is complex and, at some point, your Node.js application will fail. If you’re lucky , your code will crash with an obvious error message. If you’re unlucky, your application will carry on regardless but not generate the results you expect. If you’re really unlucky, everything will work fine until the first user discovers a catastrophic disk-wiping bug. What is Debugging? Debugging is the black art of fixing software defects. Fixing a bug is often easy — a corrected character or additional line of code solves the problem. Finding that bug is another matter, and developers can spend many unhappy hours trying to locate the source of an issue. Fortunately, Node.js has some great tools to help trace errors. Terminology Debugging has its own selection of obscure jargon, including the following: Term Explanation breakpoint the point at which a debugger stops a program so its state can be inspected debugger a tool which offers debugging facilities such a

In a non-trivial application, the architecture is as important as the quality of the code itself. We can have well-written pieces of code, but if we don’t have good organization, we’ll have a hard time as the complexity increases. There’s no need to wait until the project is half-way done to start thinking about the architecture; the best time is before starting, using our goals as beacons for our choices. Node.js doesn’t have a de facto framework with strong opinions on architecture and code organization in the same way that Ruby has the Rails framework, for example. As such, it can be difficult to get started with building full web applications with Node. In this tutorial, we’re going to build the basic functionality of a note-taking app using the MVC architecture. To accomplish this, we’re going to employ the Hapi.js framework for Node.js and SQLite as a database, using Sequelize.js , plus other small utilities, to speed up our development. We’re going to build the views using

The most popular way to handle shared application state in React is using a framework such as Redux. Quite recently, the React team introduced several new features which include React Hooks and the Context API. These two features effectively eliminated a lot of challenges that developers of large React projects have been facing. One of the biggest problems was ‘prop drilling’ which was common with nested components. The solution was to use a state management library like Redux. This, unfortunately, came with the expense of writing boilerplate code — but now, it’s possible to replace Redux with React Hooks and the Context API. In this article, you are going to learn a new way of handling state in your React projects, without writing excessive code or installing a bunch of libraries — as is the case with Redux. React hooks allow you to use local state inside of function components, while the Context API allows you to share state with other components. Prerequisites In order to follow

The React ecosystem has evolved into a growing list of dev tools and libraries. The plethora of tools is a true testament to its popularity. For devs, it can be a dizzying exercise to navigate this maze that changes at neck-breaking speed. To help navigate your course, below is a list of essential React tools for 2020. Hooks website: reactjs.org/docs/hooks-intro.html repository: github.com/facebook/react GitHub stars: 140,000+ developer: Facebook version: 16.8 contributors: 1,300+ Hooks are a new addition to React as of version 16.8. They unlock useful features in classless components. With Hooks, React no longer needs lifecycle methods such as componentDidMount to manage state. This encourages separation of concerns because components are not managing their own state. Putting a lot of state management inside class components blows up complexity. This makes stateful components harder to maintain. Hooks attempt to alleviate this problem by providing key features. The followi

In the internet age, technological innovation has largely been driven by a community of software engineers, web developers, and hardware hackers. Until recently, acclaimed startup accelerator Y Combinator only accepted founding teams with technical backgrounds. Furthermore, the most valuable companies of today are tech-enabled, so there’s been a focus on tech talent for future-proofing economies. Coding education provider Lambda School has raised close to $50M to close this skills gap and there are many other courses teaching the next generation to code. But what if coding was no longer vital to success in tech? Enter the world of no-code development platforms (NCDPs). Over the past couple of years, the rise of the no-code movement has started to change the landscape of tech. Ironically, Lamdba School itself is a product of the no-code movement, building its MVP (that has served 3,000 students) using a combination of tools such as Typeform, Airtable, and Retool. The no-code movement

Working with dates and times has always been a bit cumbersome. I've always thought that a JavaScript library for manipulating dates would be quite helpful. It was only recently that I was introduced to Moment.js , the awesome JavaScript library for validating, parsing, and manipulating dates and times. Getting Started with Moment.js Moment.js is freely available for download from the project's home page . Moment.js can be run from the browser as well as from within a Node.js application. In order to use it with Node, install the module using the following command. [code] npm install moment [/code] Then, simply require() and use it in your application as shown below. [js] var moment = require('moment'); moment().format(); [/js] In order to run Moment from the browser, download the script and include it using a script tag, as shown in the following example. Moment.js creates a global moment object which can be used to access all the date and time parsing an

When I first started learning TypeScript, one of the suggestions I often heard was, "convert one of your existing projects! It's the best way to learn!" Soon after, a friend from Twitter offered to do just that — show me how to migrate a React app to TypeScript. The purpose of this article is to be that friend for you and help you migrate your own project to TypeScript. For context, I will be using pieces from a personal project which I migrated while going through this process myself. The Plan To make this process feel less daunting, we'll break this down into steps so that you can execute the migration in individual chunks. I always find this helpful when taking on a large task. Here are all the steps we'll take to migrate our project: Add TypeScript Add tsconfig.json Start simple Convert all files Increase strictness Clean it up Celebrate NOTE: the most important step in this whole process is number 9. Although we can only get there by working thr