Tag Archives: oxford

Thumbnail

Dirty Tricks From The Dark Corners Of Front-End (Slides, PDF)

You know how it works: you spend hours trying to find a workaround for a problem that you have encountered, just to realize that it doesn’t quite work in, you know, that browser. Finding little techniques and tricks to help you get to results faster can immensely improve your productivity, so you don’t have to waste time on solutions that will never see the light of day.
Further Reading on SmashingMag: List Of Upcoming Web Design Conferences’“) Smashing Conferences and Workshops How To Transform Conference Takeaways Into Real-Life Results I love finding those little useful front-end goodies that make our lives easier.

Continue reading here: 

Dirty Tricks From The Dark Corners Of Front-End (Slides, PDF)

Server-Side Rendering With React, Node And Express


Web applications are everywhere. There is no official definition, but we’ve made the distinction: web applications are highly interactive, dynamic and performant, while websites are informational and less transient. This very rough categorization provides us with a starting point, from which to apply development and design patterns.

Server-Side Rendering With React, Node And Express

These patterns are often established through a different look at the mainstream techniques, a paradigm shift, convergence with an external concept, or just a better implementation. Universal web applications are one such pattern.

The post Server-Side Rendering With React, Node And Express appeared first on Smashing Magazine.

Link:  

Server-Side Rendering With React, Node And Express

Preload: What Is It Good For?


Preload is a new web standard aimed at improving performance and providing more granular loading control to web developers. It gives developers the ability to define custom loading logic without suffering the performance penalty that script-based resource loaders incur.

Preload: What is it good for?

A few weeks ago, I shipped preload support in Chrome Canary, and barring unexpected bugs it will hit Chrome stable in mid-April. But what is that preload thing? What does it do? And how can it help you?

The post Preload: What Is It Good For? appeared first on Smashing Magazine.

Continue reading: 

Preload: What Is It Good For?

Simple Augmented Reality With OpenCV, Three.js and WebSockets


Augmented reality is generally considered to be very hard to create. However, it’s possible to make visually impressive projects using just open source libraries. In this tutorial we’ll make use of OpenCV in Python to detect circle-shaped objects in a webcam stream and replace them with 3D Earth in Three.js in a browser window while using WebSockets to join this all together.

Simple Augmented Reality With OpenCV and Three.js

We want to strictly separate front-end and back-end in order to make it reusable. In a real-world application we could write the front-end in Unity, Unreal Engine or Blender, for example, to make it look really nice. The browser front-end is the easiest to implement and should work on nearly every possible configuration.

The post Simple Augmented Reality With OpenCV, Three.js and WebSockets appeared first on Smashing Magazine.

See the original post:  

Simple Augmented Reality With OpenCV, Three.js and WebSockets

Content Modeling With Jekyll


It’s not exactly a new subject, but lately I’ve had reason to revisit the skill of content modeling in my team’s work. Our experience has reached a point where the limitations of how we practice are starting to become clear. Our most common issue is that people tend to tie themselves and their mental models to a chosen platform and its conventions.

Content Modeling With Jekyll

Instead of teaching people how to model content, we end up teaching them how to model content in Drupal, or how to model content in WordPress. But I’d prefer that we approach it from a focus on the best interests of users, regardless of which platform said content will end up in.

The post Content Modeling With Jekyll appeared first on Smashing Magazine.

Continue at source:  

Content Modeling With Jekyll

Thumbnail

Hardware Hacking With JavaScript


The Internet of Things (IoT) has enabled the Internet to reach beyond the browser. Made up of electronically networked devices, these “things” are able to interact with the physical world via sensors that feed data they capture back into their ecosystems.

Hardware Hacking With JavaScript

Currently, these devices are mostly products, designed with a specific purpose in mind, a typical example being a fitness band that tracks activity. It reports the information gathered to an app, which is then able to analyze the data and offer suggestions and motivation to push the user further.

The post Hardware Hacking With JavaScript appeared first on Smashing Magazine.

Originally from: 

Hardware Hacking With JavaScript

Website Layout Tools Compared: Flexbox Vs. Susy


Flexbox has become one of the most popular tools for creating website layouts. Susy is another layout tool that has gained popularity with the Sass community over the last few years.

Website Layout Tools Compared: Flexbox Vs. Susy

Many developers I’ve spoken with are unsure which tool is best for creating layouts for their websites. Some feel that flexbox is powerful enough to handle all of their layout problems. However, they are unsure whether to learn it because of its confusing syntax. Others feel that Susy is much simpler and prefer its simplicity to flexbox.

The post Website Layout Tools Compared: Flexbox Vs. Susy appeared first on Smashing Magazine.

Jump to original: 

Website Layout Tools Compared: Flexbox Vs. Susy

Getting Started With CSS calc()


I first discovered the calc() function more than four years ago, thanks to CSS3 Click Chart, and I was absolutely delighted to see that basic mathematical computations — addition, subtraction, multiplication and division — had found their way into CSS.

Using CSS calc()

A lot of people think preprocessors fully cover the realm of logic and computation, but the calc() function can do something that no preprocessor can: mix any kind of units. Preprocessors can only mix units with a fixed relation between them, like angular units, time units, frequency units, resolution units and certain length units.

The post Getting Started With CSS calc() appeared first on Smashing Magazine.

View article:  

Getting Started With CSS calc()

Thumbnail

Using The Gamepad API In Web Games


The Gamepad API is a relatively new piece of technology that allows us to access the state of connected gamepads using JavaScript, which is great news for HTML5 game developers.

Using The Gamepad API In Web Games

A lot of game genres, such as racing and platform fighting games, rely on a gamepad rather than a keyboard and mouse for the best experience. This means these games can now be played on the web with the same gamepads that are used for consoles. A demo is available, and if you don’t have a gamepad, you can still enjoy the demo using a keyboard.

The post Using The Gamepad API In Web Games appeared first on Smashing Magazine.

See original article – 

Using The Gamepad API In Web Games

Thumbnail

Flexbox For Interfaces All The Way: Tracks Case Study


The days of floats and margin trickery are finally behind us, as CSS furnishes developers with new and improved properties perfect for those delicate layouts. Layout features such as vertical alignment, evenly distributed spacing, source-order control and other patterns such as “sticky” footers are quite effortless to achieve with flexbox.

Tracks preview

In this article, we’ll discuss layout patterns well suited to flexbox, using the interface from the Tracks application, which also takes advantage of atomic design principles. I’ll share how flexbox proved useful and note the pitfalls of pairing it with particular layout patterns. We’ll look at those patterns that caused concern, provide suggestions for fallbacks and share additional tactics to start using this CSS property immediately.

The post Flexbox For Interfaces All The Way: Tracks Case Study appeared first on Smashing Magazine.

Link:  

Flexbox For Interfaces All The Way: Tracks Case Study