Image for post
Image for post
Photo by 冬城 on Unsplash

When creating React Native components it is a good idea to think about reusability. It is common to make components that have some base style, but that can also be styled upon use. As we will see, we can leverage some useful JavaScript features to achieve this in a clean way.

Styling in React Native

In React Native we use the style prop to declare our styles, essentially emulating the way it’s done on the web but with some differences, mainly that it is written in camel case. …


Image for post
Image for post

You’ve probably heard of the observer pattern; perhaps you’ve used it if you’ve ever developed with a Javascript frontend framework before. In its most basic form it can look like this:

class Observable {
constructor() {
this.observers = []
}
subscribe(observer) {
this.observers.push(observer)
}
unsubscribe(observer) {
this.observers = this.observers.filter(obs => {
return obs != observer
})
}
publish(data) {
this.observers.forEach(observer => {
observer.update(data)
})
}
}

Essentially, you get an object that other objects can subscribe to. When you get some new data, you use the publish(data) method to let each subscribing object know that something new has happened. …


Image for post
Image for post
Credit: Adi Chakravarty

I’ve been using Nuxt.js for a project that I’ve been working on for some time now. Having worked with Vue.js previously it wasn’t too difficult to get into the groove of things, but there are some significant differences between Vue.js and Nuxt.js that are important to understand. In this article I will go over the three main differences that I experienced coming from Vue, uncovering the features to focus on when entering into the world of Nuxt and Server Side Rendering.

Server Side Rendering

For those who are completely unfamiliar with Nuxt, it is based on Vue.js but adds the ability to render components and data on the server instead of on the client. The main benefit that this brings is the content on your web app will be available upon page load, which makes it possible for search engines such as Google to correctly index your website’s content. …


Image for post
Image for post

Ever needed to quickly set up a database to connect to in development? Typically you need to download and install the database of your choice (such as MySQL, PostgreSQL, etc.) on your local environment but there is an easier way to go about this. In this article, I will show you how you can very conveniently spin up any database locally using a single Docker command!

Install Docker

The first step is to make sure you have Docker installed for your platform and that it is up and running. You can check this by running:

docker info

It should print a bunch of information about Docker if it is running on your machine. …


Image for post
Image for post

When developing an MVP (Minimum Viable Product), you intend to go from idea to prototype as fast as possible. The faster you can prototype your idea, the faster you are able to iterate upon it.

As you’re moving from abstract idea to working prototype, you usually don’t want to spend a lot of time creating a custom design when you should be focusing on the functionality of the application. To solve this issue, we use frameworks like Bootstrap to quickly achieve a structured layout with a UI that looks “pretty good” without too much effort.

What we really want to achieve, in terms of design, is to rapidly create a UI that is recognizable and coherent.


In today’s Internet, websites tend to be interactive, dynamic, and serve some sort of function. They can be more than a static HTML and CSS page. Here’s where the Model View Controller (MVC) architectural pattern comes in.

User interaction enables use cases which would be impossible with only a statically loaded page. This is why, in modern web development, it is important to understand how dynamic pages are created. Perhaps the key to this is familiarity with the MVC architectural pattern.

If you are a beginner at web development, words such as “architectural pattern” may sound dauntingly complex and abstract. But the general idea behind MVC is actually very intuitive. …


Image for post
Image for post
Super Mario Land for gameboy

There are plenty of articles written about neural networks and machine learning out there, as the subject has gained popularity greatly the past few years. This area can seem extremely unapproachable and difficult to understand and many might believe that one must be a mathematician or statistician to be able to grasp the concepts of machine learning. However, the basic concepts of machine learning and neural networks are not necessarily as complex as one might think.

The purpose of this article is to explain the high level concept of how machine learning could work through a simple example that anybody can understand. Hopefully it will give you the interest and confidence to continue reading and learning more about the subject and break down the daunting barrier which makes it seem so unapproachable. …


Image for post
Image for post

Sketch App together with InVision really is an unbeatable combo when you want to create renderings for web pages or apps. Together, they make for an extremely fast and smooth work experience while yielding a product that is organized, scalable and (most importantly) presentable to your stakeholders. I will explain why this combo is so good, but in order to do this I must also explain why there is a need for the possibilities that they present.

Sketch App

If you have ever used Sketch App you know that designing with it is great. It is very easy and quick to learn how everything works and you find yourself creating stuff in no time. In Sketch App, everything seems to be geared towards creating design concepts for web pages and apps. The artboards come pre-sized for different devices and you are able to create a sort of library (Symbols) for all your components that you make, such as buttons, inputs and navbars. This makes it easy to create new pages; you just get a new artboard and fill in all the components that you need for that page. …


Image for post
Image for post

A while back I was working on a Django project and wanted to implement fast free text search. Instead of using a regular database for this search function — such as MySQL or PostgreSQL — I decided to use a NoSQL database. That is when I discovered ElasticSearch.

ElasticSearch indexes documents for your data instead of using data tables like a regular relational database does. This speeds up search, and offers a lot of other benefits that you don’t get with a regular database. …


The aim of a UX designer is to create something that conveys an intended experience to the end user. It should be created in such a way that the consumer can’t think of any other way it could have been done. I recently came across an interface that achieved this extremely well and would like to dissect and analyze its components. The UX I am referring to is a new feature that Netflix implemented on their platform and it is a perfect example of what great UX should look like.

The other day I was lazily scrolling through Netflix trying to find something good to watch. I was passing by all the different shows and movies in a range of sections and genres. Just like always, an image for each movie/show was displayed when it was selected — with the title, a rating and a short description of what it was about. All these features are of course great for the user to make a decision of what to watch depending on their mood or preference. Then, I suddenly noticed that something was different since the last time I used Netflix. When you stayed in place for a second or two the image would start playing as a sort of trailer for the the selected media. It was a few short video snippets that pretty much summed up the essence of what the movie would be about. Important to note: these previews were not the real trailers of the movies but instead a custom collection of snippets that summed up its plot. …

About

Adam Wattis

Javascript developer. Passionate learner.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store