However, between the JSX syntax, component lifecycle, and state management, learning to use React effectively sometimes feels like learning a language in and of itself. 

If you’re getting your feet wet in React, here are some of DMC’s top tips for making components.

1. Make Lots of Components

React’s component-based structure allows very convenient segmentation of different portions of a user interface. However, it can often be unclear where one component should end and where another component should begin. If you were to recreate this page in React, would the Categories listing be a component or just a portion of a component for the whole page? Would each section be a component? Would each link?

Often, large components that have a lot of different functionality mixed is a sign of a newer React developer. Just as with object-oriented code, breaking down classes or functions to their essentials and handing off the specifics to helpers makes the code a lot more readable and easier to maintain. 

In our experience, if you’re asking the question, “Should this be a separate component?” the answer is probably yes.

Regarding hard and fast rules, the following guidelines have served us well. You should pull UI code into a unique component if:

• You want to use the same (or a parameterized version of the same) element elsewhere in your application
• You want each item in a list of data to have a similar display (in other words, you want to map a list of data to it)
• It forms its own functionally or visually distinct section or subsection

For example, you could implement the Categories sidebar on this site doing something similar to the following. This approach is hard to read, debug, and maintain – splitting each UI section in a map into its separate components would be better.

render() {
    return (
        <div>
            <h1>Categories</h1>
            {this.props.categories.map(category => (
                <div>
                    <h2>{category.name}</h2>
                    <ul>
                        {category.subCategories.map(subCategory => (
                            <div>
                                <li className="bullet">{subCategory.name}</li>
                                {subCategory.subSubCategories.map(subSubCategory => (
                                    <div>
                                        <li className="indented-bullet">{subSubCategory}</li>
                                    </div>
                                ))}
                            </div>
                        ))}
                    </ul>
                </div>
            ))}
        </div>
    );
}

render() {
    return (
        <div>
            <h1>Categories</h1>
            {this.props.categories.map(category => (
                <div>
                    <h2>{category.name}</h2>
                    <ul>
                        {category.subCategories.map(subCategory => (
                            <div>
                                <li className="bullet">{subCategory.name}</li>
                                {subCategory.subSubCategories.map(subSubCategory => (
                                    <div>
                                        <li className="indented-bullet">{subSubCategory}</li>
                                    </div>
                                ))}
                            </div>
                        ))}
                    </ul>
                </div>
            ))}
        </div>
    );
}

2. Make Lots of Functional Components

As you make more components, you’ll need to lift state up by lifting shared state up to the closest common ancestor. Sometimes, you’ll only need to pull one value out of a component’s state and leave it otherwise unchanged. But often, a component that doesn’t have any state remains. If this is the case, it is an excellent opportunity to convert to functional components.

We find that functional components (components which are used as a function call rather than as a class instance) are often more concise and better broken up than components that rely heavily on state. Functional components are also simple to debug. It’s clear what to render on the page based on what’s passed into the component.  

As you begin to convert your components over to functional versions, you may notice you have separate components for data management and display. Dividing components into two categories is a whole different way of thinking, best explained by Dan Abramov.

3. Consider a State Management Library

As your state begins to lift higher and higher in your application, you will flow through Container components to drive Presentational components. You may start to notice that a portion of the component state drives the display of another component nested deeply within its children components.

If the state of your application is already far from the display it drives, then it’s likely time to consider a state management library.

State management libraries allow you to interact with the (likely centrally-held) state of your application consistently and predictably. It minimizes the need to pass so many props as well as to update functions between components. Redux is probably the most popular option for managing state in React applications, but there are many options out there (including MobX and Unstated).

Integrating a state management library can simplify complex interactions between states for different components, but tends to produce more ‘boiler-plate’ code.

4. Make Some Async Components

On the other hand, if your app is comparatively small or you don’t want the overhead of a component management library, you may end up using the component lifecycle methods to give a component asynchronous functionality. The component can then interact with some external data source on its own.

Let’s say that we’re building a sidebar for a grid of houses. Whenever a user clicks on the row for the house, the sidebar fetches the data for that house from some external source and displays it. Here’s what a container component for that might look like:

interface State {
    house?: House;
}

interface Props {
    houseId: number;
}

class HouseSidebarContainer extends React.Component<Props, State> {
    constructor (props: Props) {
        super(props);
        this.state = {
        };

        this.loadHouse = this.loadHouse.bind(this);
    }

    async componentDidMount(){
        await this.loadHouse(this.props.houseId);
    }

    async componentDidUpdate(prevProps: Props){
        if (prevProps.houseId !== this.props.houseId) {
            await this.loadHouse(this.props.houseId);
        }
    }

    render () {
        return this.state.house 
            ? <HouseDisplay {...house} />
            : <LoadingSpinner />;
    }

    async loadHouse(houseId: number) {
        let houseData = await fetchHouse(houseId);
        if (houseData) {
            this.setState({house: houseData})
        }
    }
}

interface State {
    house?: House;
}

interface Props {
    houseId: number;
}

class HouseSidebarContainer extends React.Component<Props, State> {
    constructor (props: Props) {
        super(props);
        this.state = {
        };

        this.loadHouse = this.loadHouse.bind(this);
    }

    async componentDidMount(){
        await this.loadHouse(this.props.houseId);
    }

    async componentDidUpdate(prevProps: Props){
        if (prevProps.houseId !== this.props.houseId) {
            await this.loadHouse(this.props.houseId);
        }
    }

    render () {
        return this.state.house 
            ? <HouseDisplay {...house} />
            : <LoadingSpinner />;
    }

    async loadHouse(houseId: number) {
        let houseData = await fetchHouse(houseId);
        if (houseData) {
            this.setState({house: houseData})
        }
    }
}

The significant thing to recognize is that the render function cannot be asynchronous, so any asynchronous logic must be handled outside of the render function and updated in state.

The other thing to remember is that changing the props (in this case, the viewed house) doesn’t trigger a remount of the component, and must be watched manually by the componentDidUpdate function.

5. Use Other People’s Components

Now that you’re getting pretty good at making your own React components, it’s time to avoid it as much as possible! I’m joking, but it’s important not to spend too much of your time on components that are common to a lot of applications.

Simple items, like breadcrumbs, don’t take too long to implement, but that time can pile up when you implement each one yourself. More complex items, like a datepicker, may take substantial development effort to implement. The good news is that someone has done this before, and you can take advantage of their experience. The bad news is that it can be challenging to identify the best implementation out there, and using a component that’s buggy or has a poor API can cost you as much time as implementing it yourself.

This time loss is especially true for simple components: it may take just as long to fit in a simple third-party component with options that don’t quite fit as it does to write the component yourself. In such instances, larger sets of components with similar interfaces (a component library) can speed up development.

When you start working on a new app, it’s worth your time to investigate using a component library, which will allow you to use a wide set of components with similar interfaces and uniform styles. There’s a wide variety out there, each with its pros and cons. 

Based on our experience, we recommend picking a library that already looks similar to the app you want to build. While most libraries offer some way to customize their styling, if you have to make a lot of styling changes to each component, you haven’t saved much time over implementing your own components. Component libraries we’ve enjoyed recently include React Material-UI, Semantic UI, and Reactstrap.

Even if you pick the best possible library for your project, it’s unlikely to contain every single UI component you need. You’re likely to need to pick up at least one or two components a la carte, like a chart, datepicker, or a treeview.

Just like when using any external dependency, you’ll want to make sure that whatever you pick is being actively used and maintained, that the API makes sense to you, and that the license fits the needs of your application.

Learn more about DMC’s Application Development Services

The post 5 Great Ways to Get Started with React Components appeared first on DMC, Inc..

Web-based Control and Monitoring

The most appealing aspect of Beckhoff’s platform is that it leverages the internet to allow end users to control and monitor their PLCs from anywhere. Interfacing with industrial controllers via the internet is a common request for DMC, and the TwinCAT HMI makes this easier than ever before with integrated server- and client-side development connecting easily to the underlying PLC access. The key benefit is that a web-based HMI can be accessed from any number of different clients – a traditional monitor screen nearby the device being controlled, a tablet carried around the area by a supervisor, or even a mobile phone halfway around the world. The HMI includes a responsive grid designed to facilitate development for multiple device sizes.

WYSIWYG Web Page Design

As any web developer can tell you, managing the location and arrangement of content on the page can be one of the most time-consuming aspects to do manually. Development for TwinCAT gets around these issues using a What You See Is What You Get style editor, paired with other features to make life easy for developers. Selecting and arranging components is as simple as dragging them in from a menu. The HMI features dozens of prebuilt components, including commonly used displays and controls, as well as advanced charts. We walked through a demo project using several different charts, which update live when linked with the PLC data, making it very easy to display live system data of all sorts to your end users.

Development in Visual Studio

This is a good point to bring up the ease of development afforded by the IDE. Development for the HMI is integrated directly into Visual Studio, which is very familiar to DMC from our extensive .NET development. The Visual Studio pane and menu system’s familiarity makes navigation quick, and Beckhoff’s custom screens are also very easy to use. Integrating development into a widely used and well-regarded editor allows engineers to develop a simple web-based HMIs for their PLCs without requiring extensive knowledge of web technologies. However, developers familiar with web technologies (like DMC) still have access to the generated results, allowing us to tailor a solution to the exact needs of our clients.

Easy Extension and Customization

As mentioned, Beckhoff’s existing framework controls allow for rapid development, especially for simple applications. However, the HMI is also very extensible, allowing for flexible and very custom solutions. DMC took an additional course in designing extensions for custom applications. The extensibility allows for custom Javascript interactive controls, in the case that the provided components don’t quite fit the bill. Further, the HMI allows for custom server controls in C#, which allows us to develop connect to any system, use any library, or employ any custom code from our .NET expertise. The flexibility of these extensions, combined with the ease of creating a simple solution, makes us very excited to work on projects with this new HMI.

Thanks to Zachary Daulton and co. at Beckhoff for hosting us and giving us a preview of the software!

The post DMC Attends Inaugural TwinCAT HMI Training appeared first on DMC, Inc..

1. Passing props
 

Probably the most common usage of the spread operator in a React app is in passing props down to a child component. So long as the object you’re spreading includes all the properties the child component requires, the child component will use those and ignore the extraneous ones.

This allows for much more concise code than breaking out each property that the child inherits from the parent. Note: we use Typescript in our applications, and these examples will use it as well for clarity.

interface LabeledButtonProps extends ButtonProps {
    labelText: string;
}

const LabeledButton = (props: LabeledButtonProps) => (
    <div>
        {props.labelText}
        <Button {...props} />
    </div>
);

interface LabeledButtonProps extends ButtonProps {
    labelText: string;
}

const LabeledButton = (props: LabeledButtonProps) => (
    <div>
        {props.labelText}
        <Button {...props} />
    </div>
);

2. Generating multiple component instances with common props
 

If you have multiple component instances with some attributes in common, and others which differ, it can be helpful to pull them out into one object which is referenced by all instances. For example, instead of the following:

render () {
    return (
        <div>
            <Button height={20} width={40} color="red" text="Press Here"/>
            <Button height={20} width={40} color="red" text="Or Here!"/>
            <Button height={20} width={40} color="red" text="(Even Here)"/>
        </div>
    );
}

render () {
    return (
        <div>
            <Button height={20} width={40} color="red" text="Press Here"/>
            <Button height={20} width={40} color="red" text="Or Here!"/>
            <Button height={20} width={40} color="red" text="(Even Here)"/>
        </div>
    );
}

You can instead abstract the common props:

render () {
    let commonButtonAttributes: PartialButtonProps = {
        height: 20, width: 40, color: 'red'
    }
    return (
        <div>
            <Button {...commonButtonAttributes} text="Press Here"/>
            <Button {...commonButtonAttributes} text="Or Here!"/>
            <Button {...commonButtonAttributes} text="(Even Here)"/>
        </div>
    );
}

render () {
    let commonButtonAttributes: PartialButtonProps = {
        height: 20, width: 40, color: 'red'
    }
    return (
        <div>
            <Button {...commonButtonAttributes} text="Press Here"/>
            <Button {...commonButtonAttributes} text="Or Here!"/>
            <Button {...commonButtonAttributes} text="(Even Here)"/>
        </div>
    );
}

Similarly, you can map a function which generates an instance of the component using these common props over an array of the unique elements (shown in example 4), which is preferable for longer or dynamic element lists.
 

3. Setting the state with dynamic key name
 

Leaving our button for a moment, another place where we frequently use the spread operator is in functions to handle change events for forms. We typically use the same function to handle changes for all fields in a form, to minimize code repetition.

The following syntax allows setting a property in the state with a dynamic key name while maintaining the other properties previously in the state:

handleChange(name: string, value: string | number) {
    this.setState({ ...this.state, [name]: value });
}

handleChange(name: string, value: string | number) {
    this.setState({ ...this.state, [name]: value });
}

As a note, this pattern is not necessary if using React without using Typescript. This is also a good point to emphasize the importance of order when using the spread operator. I like to think of the spread operator as literally spreading out (in order) the items in an object or list.

If you’re trying to overwrite an existing property, as I am in this case, it’s important to make sure it’s after the spread operator, or the existing property will overwrite your new value!
 

4. Adding a single item to the start or the end of an array
 

The spread operator can also be used working with arrays, which can be very useful in a React application. One situation we encounter frequently is adding an element to an array which is subsequently mapped and rendered. Doing so with the spread operator is simpler and cleaner than doing so with Javascript’s push() or concat().

For example, if our button list always needs to include a cancel button, we could do the following:

const ButtonList = (buttonTexts: string[]) =>
    [...buttonTexts, 'Cancel'].map((buttonText, index) =>
        <Button
            key={index}
            text={buttonText}
            {...commonButtonAttributes}
        />
    );

const ButtonList = (buttonTexts: string[]) =>
    [...buttonTexts, 'Cancel'].map((buttonText, index) =>
        <Button
            key={index}
            text={buttonText}
            {...commonButtonAttributes}
        />
    );

5. Stripping properties using destructuring
 

Our final favorite use of the spread operator is to strip properties from an existing object to make a new object without setting properties individually. We’ve found this most useful when making calls to an API, when we want to be careful to send only the data we intend.

Specifying all the properties we want on the new object can be quite verbose:

let locationUpdate = {
    name: this.state.name,
    address: this.state.address,
    locationId: this.state.locationId,
    etc…
}

let locationUpdate = {
    name: this.state.name,
    address: this.state.address,
    locationId: this.state.locationId,
    etc…
}

Instead, by using destructuring with the rest syntax, we can specify the properties we want to exclude from the new object.

let { isLoading, availableLocations, ...locationUpdate } = this.state;

let { isLoading, availableLocations, ...locationUpdate } = this.state;

Conclusion

Javascript’s spread operator is a powerful tool to minimize boilerplate in a React application and make it easy to read and maintain in addition to its natural performance benefits.

If you’re interested in working with DMC on a React application, feel free to contact us.

The post 5 Great Uses of the Spread Operator in a React App appeared first on DMC, Inc..

In this post, I will walk through how to create a simple frame-accurate video scrubber for video segments in a browser client using the HTML5 video element.

The inspiration for this scrubber implementation comes from this Github post: Frame Accurate Scrubbing, which describes a method that would extract frames on the backend and serve them up to a client for accurate scrubbing.

There are many great open-source packages that make for a simple frame grabbing implementation on the backend, and most of these packages rely on FFMPEG to decode video. 

Since GPL distributes FFmpeg, this is an approach that can be incompatible with projects that aren’t destined to be open source or also distributed under GPL. By using the HTML5 video element to extract frames, we can avoid FFPMEG’s viral GPL license as well as the hassle of writing the video decoder ourselves.

Environment

The examples below show the JSX markup of the development we did in React JS.

Prerequisites

This implementation requires a known framerate for the video you want to use. Additionally, I did this development using a Chrome browser, which supports the MP4 video format that I was using. Make sure that your browser supports your desired video format for HTML5 video.

With that out of the way, let’s get started!

HTML5 Video Element as Video Decoder

Create an HTML5 Video component on your page, but keep it hidden. Store a reference to this video player. Also, create a div to hold the extracted frames.

render() {
  return (
    <div className="video-scrubber">
      <video
        src={"video.mp4"}
        muted={true}
        hidden={true}
        controls={false}        
        onSeeked={this.extractFrame} 
        ref={(element) => { this.videoElement = element }}>
      </video>

      <div className="video-scrubber-frame-container"  
        ref={(element) => this.frameContainerElement = element}>
      </div>  
    </div>
  )    
}

render() {
  return (
    <div className="video-scrubber">
      <video
        src={"video.mp4"}
        muted={true}
        hidden={true}
        controls={false}        
        onSeeked={this.extractFrame} 
        ref={(element) => { this.videoElement = element }}>
      </video>

      <div className="video-scrubber-frame-container"  
        ref={(element) => this.frameContainerElement = element}>
      </div>  
    </div>
  )    
}

Create canvas representations of the video frames. Seek to one frame at a time using the known framerate of the video. The video component’s onSeeked event triggers the extractFrame function that draws the current video frame onto a canvas element.

loadVideoFrames = () => {
  // Exit loop if desired number of frames have been extracted 
  if (this.frames.length >= frameCount){
    this.setState({
      visibleFrame = 0 
    })

    // Append all canvases to container div
    this.frames.forEach((frame) => {this.frameContainerElement.appendChild(frame)})
    return
  }

  // If extraction hasn’t started, set desired time for first frame 
  if (this.frames.length === 0){
    this.requestedTime = 0
  }
  else{
    this.requestedTime = this.requestedTime + this.frameTimestep
  }

  // Send seek request to video player for the next frame.
  this.videoElement.currentTime = this.requestedTime
}
 
 
extractFrame = () => {
  // Create DOM canvas object
  var canvas = document.createElement('canvas')
  canvas.className = "video-scrubber-frame"
  canvas.height = videoHeight
  canvas.width = videoWidth
      
  // Copy current frame to canvas
  var context = canvas.getContext('2d');
  context.drawImage(this.videoElement, 0, 0, videoWidth, videoHeight);  
  this.frames.push(canvas)

  //  Load the next frame
  loadVideoFrames()
}

loadVideoFrames = () => {
  // Exit loop if desired number of frames have been extracted 
  if (this.frames.length >= frameCount){
    this.setState({
      visibleFrame = 0 
    })

    // Append all canvases to container div
    this.frames.forEach((frame) => {this.frameContainerElement.appendChild(frame)})
    return
  }

  // If extraction hasn’t started, set desired time for first frame 
  if (this.frames.length === 0){
    this.requestedTime = 0
  }
  else{
    this.requestedTime = this.requestedTime + this.frameTimestep
  }

  // Send seek request to video player for the next frame.
  this.videoElement.currentTime = this.requestedTime
}
 
 
extractFrame = () => {
  // Create DOM canvas object
  var canvas = document.createElement('canvas')
  canvas.className = "video-scrubber-frame"
  canvas.height = videoHeight
  canvas.width = videoWidth
      
  // Copy current frame to canvas
  var context = canvas.getContext('2d');
  context.drawImage(this.videoElement, 0, 0, videoWidth, videoHeight);  
  this.frames.push(canvas)

  //  Load the next frame
  loadVideoFrames()
}

Define styling that will layer the canvases on top of each other.

.video-scrubber-frame-container {
    position: relative;
}

.video-scrubber-frame {
    left: 0;
    position: absolute;
    top: 0;
}

.video-scrubber-frame-container {
    position: relative;
}

.video-scrubber-frame {
    left: 0;
    position: absolute;
    top: 0;
}

Implement Scrubbing Functionality

Add mouse event listeners to handle scrubbing action. Here we create another canvas that will sit on top of all our frames to attach our listeners to.

// Create mouseover canvas
var mouseEventCanvas = document.createElement('canvas')

// Set canvas attributes
mouseEventCanvas.className = "video-scrubber-frame"
mouseEventCanvas.height = videoHeight
mouseEventCanvas.width = videoWidth
mouseEventCanvas.onmousemove = this.onMouseDown
mouseEventCanvas.onmousedown = this.onMouseDown

// We set the z-index to be greater than that of the other frames
mouseEventCanvas.style['z-index'] = 2

// Append to document
this.frameContainerElement.appendChild(mouseEventCanvas)

// Create mouseover canvas
var mouseEventCanvas = document.createElement('canvas')

// Set canvas attributes
mouseEventCanvas.className = "video-scrubber-frame"
mouseEventCanvas.height = videoHeight
mouseEventCanvas.width = videoWidth
mouseEventCanvas.onmousemove = this.onMouseDown
mouseEventCanvas.onmousedown = this.onMouseDown

// We set the z-index to be greater than that of the other frames
mouseEventCanvas.style['z-index'] = 2

// Append to document
this.frameContainerElement.appendChild(mouseEventCanvas)

Toggle z-index of visible canvases according to mouse positioning over the frames. For our scrubber, we are listening for a mousedown event that moves on the frames. As a user drags their mouse across the frames, we toggle the visible frame value stored in our React component state.

onMouseDown = (event) => {
  // Bail early if we aren't clicking and dragging
  if (event.type === "mousemove" && event.buttons === 0) {
    return 
  }

  event.preventDefault()
  
  const frameRect = this.mouseEventCanvas.getBoundingClientRect()
  const x = event.clientX - frameRect.left
  const y = event.clientY - frameRect.top

  if (event.buttons === 1){ // Left button down
    var frameRequested = Math.floor((x / frameRect.width) 
* this.fullResolutionFrames.length)      
    if (frameRequested !== this.state.visibleFrame && frameRequested >= 0){
      this.setState({
        visibleFrame: frameRequested,
      })
    }
  }
}

onMouseDown = (event) => {
  // Bail early if we aren't clicking and dragging
  if (event.type === "mousemove" && event.buttons === 0) {
    return 
  }

  event.preventDefault()
  
  const frameRect = this.mouseEventCanvas.getBoundingClientRect()
  const x = event.clientX - frameRect.left
  const y = event.clientY - frameRect.top

  if (event.buttons === 1){ // Left button down
    var frameRequested = Math.floor((x / frameRect.width) 
* this.fullResolutionFrames.length)      
    if (frameRequested !== this.state.visibleFrame && frameRequested >= 0){
      this.setState({
        visibleFrame: frameRequested,
      })
    }
  }
}

We check for a changed visibleFrame value in the React component lifecycle and change the z-indexes of the appropriate frames.

componentWillUpdate(nextProps, nextState){
  // set the visible frame
  if (nextState.visibleFrame !== this.state.visibleFrame){
    if (this.state.visibleFrame < this.frames.length){
      this.frames[this.state.visibleFrame].style['z-index'] = 0 
    }   
    if (nextState.visibleFrame < this.frames.length){   
      this.frames[nextState.visibleFrame].style['z-index'] = 1 
    }
  }
}

componentWillUpdate(nextProps, nextState){
  // set the visible frame
  if (nextState.visibleFrame !== this.state.visibleFrame){
    if (this.state.visibleFrame < this.frames.length){
      this.frames[this.state.visibleFrame].style['z-index'] = 0 
    }   
    if (nextState.visibleFrame < this.frames.length){   
      this.frames[nextState.visibleFrame].style['z-index'] = 1 
    }
  }
}

There you have it! A simple video scrubber in a client browser.

Learn more about DMC’s Web Application Development services.

The post Frame Accurate Video Scrubbing in the Client appeared first on DMC, Inc..

This Microsoft Gold level certification makes DMC eligible for exclusive training opportunities that further the implementation expertise we provide to our Clients. DMC also obtains access to exclusive support from Microsoft engineers, allowing us to provide world-class support services to our Clients.

What is the Microsoft Cloud? 

The Microsoft Cloud is a secure platform that includes:

• Pre-built solutions (e.g. Office 365 Exchange, SharePoint, Skype for Business, Azure IoT, Power BI, etc.),
• Infrastructure (e.g. Azure virtual machines, storage, etc.)
• Services (e.g. Azure web apps, mobile apps, SQL database, machine learning, etc.)

These offerings can be assembled to provide a scalable and complete collaboration suite with the potential to transform the way teams work. With the cloud, high-performance computing and agility help businesses expand their growth quickly.

What does it take to become Gold Cloud Productivity Certified?

To become a Microsoft Gold Cloud Productivity certified partner, DMC had to provide evidence of its expertise in this area, which includes deploying a minimum of 4,000 users of Exchange Online, SharePoint Online, Skype for Business, Yammer, and Office ProPlus. 

Additionally, two DMC engineers passed rigorous Microsoft cloud and hybrid implementation exams focused on managing identities & authentication, as well as deploying Office 365 services. 

Finally, DMC had to provide references from a minimum of five customers within the previous 12 months from customers whom we provided solutions based on the products and technologies associated with Cloud Productivity.

DMC Cloud Services

Check out DMC's Microsoft Azure Cloud Solutions and Services and our Office 365 Cloud services. You can contact DMC if you have questions or need help getting your Cloud Productivity initiative up and running. 

Learn more about DMC's Microsoft consulting services.

The post DMC Achieves Microsoft’s Gold Cloud Productivity Competency appeared first on DMC, Inc..

What the Heck is Docker?

Docker acts very much like VirtualBox or VMware, but stripped down and more single-purposed. It runs tiny Linux VMs that are “snapshots” of applications with all the setup already completed for you (Windows VMs are actually supported now, too). 

Why is Docker Useful?

Using Docker’s extensive repository of prebuilt images, one can really quickly and easily get a variety of applications running on their system. Without Docker, there’s usually a good amount of setup that must be done for any given application, such as WordPress or MySQL. With Docker, it only takes a few commands to get going. Beyond this, Docker can also be used to automate the setup/teardown of different software configurations – which is what we’ll be doing today.

Why use Docker for Development?

Developers work with a lot of different technologies, languages, and system configurations. If one were to install all of the various servers, databases, languages, runtimes, and applications on their host machine, there’s bound to be a conflict somewhere: a port being used by another application, resources being used when switching from one type of a development to another, etc. Since Docker is a self-contained environment, your host machine is not modified and things are much less likely to break because of the aforementioned issues.

Getting Started

Alright, enough questions! Let’s get started setting up Docker with WordPress and MySQL. This can aid in development because the container(s) we create can be shared between developers.

Depending on your host machine, the setup instructions for Docker vary. All of my development was using Linux (specifically Ubuntu MATE 16.04.2 LTS). 

1. First things first, install Docker. Docker’s documentation is quite good, so take a look and then continue on.
2. We’ll also be using something called Docker Compose which lets you easily setup and link multiple containers. Windows and Mac users should install Docker Toolbox, while Linux users should follow the instructions here.
3. Once that’s done, it’s smooth sailing. Create a directory where you want your WordPress and MySQL database to live. Create a file named docker-compose.yml and paste the following inside:

   version: '3'
   
   services:
      db:
        image: mysql:5.7
        volumes:
          - ./data/mysql:/var/lib/mysql
        ports:
          - "3306:3306"
        restart: always
        environment:
          MYSQL_ROOT_PASSWORD: wordpress
          MYSQL_DATABASE: wordpress
          MYSQL_USER: wordpress
          MYSQL_PASSWORD: wordpress
   
      wordpress:
        depends_on:
          - db
        image: wordpress:latest
        volumes:
          - ./data/wordpress:/var/www/html
        ports:
          - "8000:80"
        restart: always
        environment:
          WORDPRESS_DB_HOST: db:3306
          WORDPRESS_DB_PASSWORD: wordpress
   

4. Save the file. This file describes the Docker images (mysql:5.7 and wordpress:latest) as well as where each of these images will store their data, and on what ports one can access them. 
5. Now let the magic happen. Open a terminal window where you created your docker-compose.yml file and type docker-compose up -d (the -d switch tells docker-compose to run in the background).
6. Open up a browser window, navigate to https://static.dmcinfo.com/ and you should be presented with the WordPress setup screen!
7. Congrats. You’ve just used Docker to setup a development environment that you can assemble and disassemble within minutes. Get hacking!

What’s Next?

Since this post was solely about setting up Docker for WordPress development, I’ve barely scratched the surface of all of the cool things Docker can do or how it can be used beyond just the development phase. If you’d like to see a particular post about Docker, let me know in the comments!

It’s also worth mentioning that there’s other software that shares the same space of Docker (containerization, virtualization, etc.). One particularly interesting software is Vagrant which essentially manages your Docker containers (or VirtualBox, VMWare, or even Amazon EC2 VMs). Vagrant can be used for provisioning (setting up VMs and handling configuration), and makes rapid deployment painless. 

I encourage you to explore further: Docker, Vagrant

Learn more about DMC’s web application development services. 

The post Setting Up Docker for WordPress Development appeared first on DMC, Inc..

I recently started a personal project to monitor the real estate market in Houston to gain insight into trends in pricing, neighborhood composition, construction, etc. One vital piece of the puzzle was reliably and efficiently gathering detailed information on specific properties to monitor over time. Using Zillow.com’s Developer APIs and the HTML Agility Pack, I was able to spin up a prototype over coffee one Sunday morning, and I wanted to share my experience using this powerful C# library.

The Zillow API

The majority of modern websites use JSON as the data exchange format, as it is easily consumed by the widely-used JavaScript language, but there are a significant number of sites (including Zillow.com) that use XML as the exchange format. There are advantages and disadvantages to each, but both formats are straightforward to parse and are human-readable. 

Zillow provides several useful APIs, and I chose GetDeepSearchResults because it encapsulates most of the data I want to track in my application. The documentation is refreshingly complete and useful: you can see details about each field, the XML schema, error codes, and an example usage. After obtaining my developer API key, I scratched out a few lines of code to load the results.

 private void LoadResults(string property)
 {
     // Argument "property" is a URL-encoded string containing a single property address, city, and state
     string addr = "http://www.zillow.com/webservice/GetDeepSearchResults.htm";
     string key = "?[My_API_Key]&";
     string results = String.Empty;

     // Create a new HTTP client to communicate with the Zillow server
     HttpClient client = new HttpClient();
     client.BaseAddress = new Uri(addr);

     // Load the results of the querty
     HttpResponseMessage response = client.GetAsync(key + property).Result;
     if (response.IsSuccessStatusCode)
     {
         results = response.Content.ReadAsStringAsync();
     }
     else
     {
         Debug.WriteLine("Web call failed with code " + response.StatusCode);
     }
     return results;
 }

 private void LoadResults(string property)
 {
     // Argument "property" is a URL-encoded string containing a single property address, city, and state
     string addr = "http://www.zillow.com/webservice/GetDeepSearchResults.htm";
     string key = "?[My_API_Key]&";
     string results = String.Empty;

     // Create a new HTTP client to communicate with the Zillow server
     HttpClient client = new HttpClient();
     client.BaseAddress = new Uri(addr);

     // Load the results of the querty
     HttpResponseMessage response = client.GetAsync(key + property).Result;
     if (response.IsSuccessStatusCode)
     {
         results = response.Content.ReadAsStringAsync();
     }
     else
     {
         Debug.WriteLine("Web call failed with code " + response.StatusCode);
     }
     return results;
 }

The LoadResults function takes in a well-formed URL-encoded property listing string that meets the requirements listed in the API documentation, and returns either an empty string (if the API call failed) or an XML-encoded string containing the property details.

Parsing with Agility

I could have spent some time brewing up a RegEx-powered parser for the XML results – after all, this is a well-documented API, and I know what to expect from each call. But why re-invent the wheel? It’s also worth pointing out that not all APIs (or web pages, which you can also easily scrape with the HTML Agility Pack) are as consistent and well-formed, so your homebrewed parser might work for a while until it tries to handle a malformed response. 

Using the Agility Pack and the Zillow documentation, I can easily parse out the XML tags I care about without writing a single regex.

 private PropertyData ParseResults(string results)
 {
     // Create an instance of the PropertyData to store the results
     PropertyData data = new PropertyData();

     // Load the API result string
     HtmlDocument doc = new HtmlDocument();
     doc.LoadHtml(results);

     // Find the parameters that will be tracked
     var zpid = doc.DocumentNode.Descendants("zpid").FirstOrDefault().InnerText;
     var finSize = doc.DocumentNode.Descendants("finishedSqFt").FirstOrDefault().InnerText;
     var zestValue = doc.DocumentNode.Descendants("amount").FirstOrDefault().InnerText;
     var baths = doc.DocumentNode.Descendants("bathrooms").FirstOrDefault().InnerText;
     var beds = doc.DocumentNode.Descendants("bedrooms").FirstOrDefault().InnerText;

     // Parse these value strings into their expected data types
     data.Zpid = int.Parse(zpid);
     data.FinishedSize = int.Parse(finSize);
     data.ZestValue = double.Parse(zestValue);
     data.Bathrooms = double.Parse(baths);
     data.Bedrooms = double.Parse(beds);

     return data;
 }

 private PropertyData ParseResults(string results)
 {
     // Create an instance of the PropertyData to store the results
     PropertyData data = new PropertyData();

     // Load the API result string
     HtmlDocument doc = new HtmlDocument();
     doc.LoadHtml(results);

     // Find the parameters that will be tracked
     var zpid = doc.DocumentNode.Descendants("zpid").FirstOrDefault().InnerText;
     var finSize = doc.DocumentNode.Descendants("finishedSqFt").FirstOrDefault().InnerText;
     var zestValue = doc.DocumentNode.Descendants("amount").FirstOrDefault().InnerText;
     var baths = doc.DocumentNode.Descendants("bathrooms").FirstOrDefault().InnerText;
     var beds = doc.DocumentNode.Descendants("bedrooms").FirstOrDefault().InnerText;

     // Parse these value strings into their expected data types
     data.Zpid = int.Parse(zpid);
     data.FinishedSize = int.Parse(finSize);
     data.ZestValue = double.Parse(zestValue);
     data.Bathrooms = double.Parse(baths);
     data.Bedrooms = double.Parse(beds);

     return data;
 }

That’s all there is to it! No bulky regular expressions or clunky homebrewed parsing code. For clarity, I stripped out a lot of input sanitation and error handling code, so don’t forget to check for exception conditions!

Other Applications

You may have an inkling that a parsing tool like the HTML Agility Pack can work for more than just parsing XML responses. You would be correct. Another key area where this library can come into play is data scraping (or web data extraction). If an API is not available or doesn’t give you all of the information you need, you can load the web page and parse the whole thing for the data you need. 

It’s very important to note that web scraping may violate the Terms of Use for a site, and if your scraping tool misbehaves and loads the webpage at a high rate, you run the risk of compromising the site’s resources and awaking the angry IT department kraken! Please be considerate, review the legality of your application, and scrape responsibly!

If you’ve used the HTML Agility Pack in an application or have questions about how I used it in mine, leave a comment below! Happy coding.

Learn more about DMC’s web application development.

The post Easy XML Parsing in C#/.NET With the HTML Agility Pack appeared first on DMC, Inc..

While there are some guides available that give you similar information, I found it a bit difficult to get started developing MVC modules in DNN. For reference, the articles I used are at the bottom of this blog.

Here’s an overview of the steps we’ll take to get started.

1. Prerequisites
2. Templates
3. Setup
4. Build
5. Installation
6. Next Steps
7. References

1. Prerequisites

For this quick start, you’ll need a few things before we can dive in.

First, you’ll need to have Visual Studio 2015 installed. The express editions have been reported to be incompatible with the templates we’ll be using later, but this may not be true by the time you’re reading this.

Next, you’ll need to have IIS (Internet Information Services) setup with a local installation of DNN (version 8 or higher). There are many tutorials on how to do this around the web. You’ll need to install IIS and Microsoft SQL Server, then you can install DNN by downloading the latest _install.zip from DNN’s GitHub releases.

Once those are all set up, you’re ready to go.

2. Templates

You could create a module from scratch. But why would you do that when a DNN expert created templates for you to use? Download the templates from the Visual Studio Gallery and run through the installation procedure.

3. Setup

Now that everything is set up, we can actually dive into creating the module. 

In Visual Studio, select File -> New -> Project

In the New Project window, select Templates -> Visual C# -> DotNetNuke and you’ll see a listing of the types of projects the templates have provided.

To create an MVC module, we’ll select DotNetNuke 8 C# DAL2 MVC Module. There are three other fields we must configure: Name, Location, and Solution name.

Name: Enter a name for your project (it’s best not to use any spaces or special characters for this)

Location: This is important to point this to the correct folder in DNN: /DesktopModules/MVC/. Depending on your installation directory, the folder should be something like C:\Dev\Projects\DMC_Website\Alpha\DesktopModules\MVC\ where “Alpha” is the root of your DNN installation.

Solution name: We’re not actually going to be using this field. Uncheck the box on the right that says “Create directory for solution” and the solution name textbox will be greyed out.

Confirm your settings look similar to mine and then click OK.

A Project Setup Wizard dialog box will appear asking for some project information. Many of these are self explanatory, so I will only address the two that are a bit tricky.

Namespace: Whatever namespace you want your module to live in. The templates will automatically include your project name in the namespace, so no need to enter it here. Make sure you include the last period. E.g. DMC.

Local Dev URL: By default this is set up to point to dnndev.me, which is actually set up to point back to 127.0.0.1 (your localhost). What you enter here depends on what settings you’ve set your DNN install up with. For my installation, I access my local DNN install through http://localhost./ Therefore, I am going to enter localhost as my Local Dev URL.

Initial values

Updated values (note: the owner website field includes https:// but the textbox isn’t large enough to display it. Be sure to include it in your URL.)

Once all fields have been complete, click OK.

4. Build

Now that the initial project setup is complete, you’ll be presented with a web page in Visual Studio that says * Important *. These are steps that you should read carefully and follow to ensure your project will work correctly. I’ll provide a quick overview of these steps in case the original wording is confusing for anyone.

First, check IIS to see if any of your folders were converted to virtual directories or applications. To do this, open IIS, expand your site’s dropdown and check what icon is displayed next to your DesktopModules folder or the MVC folder inside of the DesktopModules folder. If it’s anything other than a yellow folder, right click it and click remove.

Next, in Visual Studio, right click and delete the web.config files that are in the solution.

You can now build the module! change the solution configuration dropdown from Debug to Release and then select Build -> Build

You’ll get an install .zip file in your module’s install/ directory.

5. Installation

Now, in DNN, go to Hosts -> Extensions and click Install Extension, selecting your install .zip file that you previously built.

If everything goes well, then the module is now installed and can be placed on any page.

6. Next Steps

Once you’ve dragged the module into a page, you’ll see a demo application that includes multiple views, database interaction, and more. Simply build the project in debug mode to automatically copy the new DLL to the /bin folder.

7. References

• Chris Hammond’s DNN posts
• DNN Community Blogs
• DNN MVC Module Development

While you’re here, check out DMC’s Web Application Development and ASP.NET & ASP.NET MVC Development services so we can get started on your next DNN MVC module!

The post 6 Easy Steps to Get Started with MVC Module Development in DNN 8 appeared first on DMC, Inc..

Tools

• Ruby
• Sass (or Less)
• Node.js
• npm
• Bower
• Grunt or gulp

Ruby

We won’t be using Ruby as a programming language, but we will be needing it to install SASS.

If you’re on Windows, download the latest version of Ruby

If you’re on Linux or OS X, there are instructions you can follow

Or, after installing cURL, run this in a terminal window:

\curl -sSL https://get.rvm.io/ | bash

\curl -sSL https://get.rvm.io/ | bash

Once Ruby has finished installing, no matter what platform you’re on, open a terminal window and run

ruby -v

ruby -v

to ensure it has installed properly.

Sass (Syntactically Awesome Style Sheets) or Less

Sass is basically CSS with a ton of awesome features layered on top. Using Sass, which compiles to clean and efficient CSS, one can make use of extended abilities like variables, mixing, inline imports, and more.

There is another CSS extension called Less, which is an alternative to Sass. I prefer Sass, but you could definitely adapt this tutorial to work with Less as well.

Anyhow, now that Ruby is installed and ready to go, installing Sass is easy.

In a terminal window, type

gem install sass

gem install sass

Once that is finished, run

sass -v

sass -v

to ensure it has installed properly.

Node.js

Node.js is tool that allows one to write simple JavaScript programs that create powerful applications.

We’ll be using Node.js to power npm (node package manager), Bower, and Grunt.

Grab the proper download for your platform

To install Node.js on Windows or OS X, simply run the installers.

On Linux, you can build Node.js by using these steps:

Extract the downloaded archive and open a terminal window

1. Navigate to where you extracted the archive

2. Run

./configure

./configure

3. Run and wait patiently

make

make

4. Run

sudo make install

sudo make install

And you’ll be all set with Node.js.

npm

npm is the official package manager for Node.js. What this means is that using npm, one can install hundreds of different applications and tools that are built with Node.js.

We’ll be using npm to install Bower and Grunt.

npm comes installed with Node.js, so there are no additional steps required to install it.

Bower

Bower, much like npm, is a package manager. However, npm only deals with Node.js packages while Bower titles itself “a package manager for the web.” Using Bower, one can run a simple terminal command to download and install many different web libraries or frameworks, such as jQuery, Bootstrap, FontAwesome, and more.

To install Bower, open a terminal window and type:

npm install -g bower

npm install -g bower

(The -g flag is to install bower globally, so we can call it from the command line anywhere)

Grunt or gulp

Grunt is a task runner that performs the time-consuming, repetitive tasks that come along with website development like minification, SASS compilation, and more. 

Thanks to npm, Grunt is just as easy to install as Bower:

npm install -g grunt-cli

npm install -g grunt-cli

gulp (don’t you ever capitalize that g) is a similar tool that should provide better performance than Grunt because it uses Node.js’s streams.

npm comes in handy once again. Install gulp with:

npm install -g gulp

npm install -g gulp

Beginning Automation

Now that we have all of the tools we need to begin, we can finally start creating an automated build system.

There are tasks associated with web development that quickly become repetitive and mundane. Thankfully, we will no longer have to do these manually!

The tasks that we can now automate are (in no particular order):

• Sass (or Less) compilation (converting our Sass or Less to standard CSS)
• Concatenation (combining multiple files into one)
• Minification (smushing text together to reduce the size, making it load faster)
• Linting (automatically checking code for errors)
• Copying of files (like fonts)
• Adding vendor-specific prefixes to our CSS (ensuring compatibility across browsers)
• Detecting features that we require a user’s browser to have
• More that I can’t think of!

And best of all, the build system will be smart enough to understand when a particular file changes to prevent rebuilding the entire thing.

Stay tuned for the next article! For now, you can always take a look at DMC’s Web Application Development services, where we can harness the technologies outlined above for your needs.

The post Automating Web Development – Tools appeared first on DMC, Inc..

So how do you resist the temptation to make a URL like https://host/login/, since “login” a verb and not a noun?

Consider what is happening when you login to a web application. What resource is being accessed, created, or modified?

The session!

So when making a login page, use URLs and HTTP methods as follows:

• GET https://host/session/ retrieves a login page with a username and password form
• POST https://host/session/ submits your credentials
• DELETE https://host/session/ logs you out

DELETE is not available via HTML forms, so you’ll have to use AJAX.

One last note: why use POST to create the session rather than PUT, such as PUT https://host/session/username/?

There are two reasons:

1. Your username will be unencrypted when querying a DNS for the IP address of the server.
2. PUT is idempotent, so if you log in from separate clients, the first session will be semantically overwritten, logging you out. This doesn't usually actually happen since the session is stored in a token on the client side, but relying on this fact is an abuse of HTTP semantics.

Learn more about DMC's web application development services.

The post RESTful Logins appeared first on DMC, Inc..