Storybook with React

Braden Niswonger JavaScript, React, Technology Snapshot Leave a Comment

In most React applications, there are many components working closely together to share and pass data between them. This can sometimes make it difficult to test components individually. Maybe you want to see how a component will react when given invalid data, or you want to test your component visually in different states. Storybook gives you a great way to do this in isolation, without worrying about the app-specific dependencies or requirements.

Storybook is an open-source tool for developing user interface components in isolation. In other words, it’s a playground for UI components. In this blog, we will dive into the basics of Storybook, write a Storybook for Material UI’s button component, and look at a couple of its add-ons.

A Look at Styled-Components

Nick Brown JavaScript, React, Technology Snapshot Leave a Comment

The React framework’s component-based approach makes managing large projects simpler. By making it easier to break functionality down into logical pieces that are encapsulated, the framework makes it easier for developers to manage. With that in mind, there have been a lot of choices when it comes to styling your React application. One approach is styled-components. This is a really …

A Reactrospective: A React Retrospective

James Bradley Angular, HTML5, JavaScript, React, Technology Snapshot Leave a Comment

Most, if not all, of my experience has been with .NET and .NET Core. I’ve also worked with most of the front-ends throughout history including Classic ASP, Code Behind, Model View Presenter, MVC, Backbone, and, over the last few years, Angular 1… Angular 6… not Angular 2…AngularJS. To me, AngularJS is that old t-shirt that you put on to sleep in; comfortable.

At first, most of us on the team were a bit apprehensive about moving to React. AngularJS was very familiar and Angular 2 seemed like the natural next step. I could learn TypeScript, and as primarily C#-based developer, I really liked the idea of a little typing. I like shiny new things, and I’m always game to learn, so challenge accepted. Since then I’ve had a hand in writing three applications in React and have learned more than a few lessons. These are their stories… dun dun.

Mockups with MockOla

Joe Sciara JavaScript, Keyhole Creations, Technology Snapshot, Tutorial, Web Design Leave a Comment

MockOla is a simple and diverse tool that has many use cases. In this post, we created a blog mockup by dragging and dropping widgets, customizing those widgets through the property pop-up, importing an image, and using the draw function to request feedback.  Finally, we saved and downloaded the image as a .png file.  

This mockup was finished in a couple of minutes. The best part of MockOla is it allows the user to have the ease of a lo-fi mockup, but the end result of a polished, professional-looking product.

Placing React in Timeout with Material-UI

Peter Le JavaScript, React, Technology Snapshot, Tutorial Leave a Comment

As your application complexity increases, you may start thinking about implementing a session timeout in instances when there is no activity for a period of time. Whether you want a session timeout to increase your web app securities or to avoid unnecessary automatic API calls, it’s good to have some sort of idle check and log out built into your application.