Archive For The “Web Tutorials” Category

How We Built An iOS App To Shoot A 3D Video (Case Study)

How We Built An iOS App To Shoot A 3D Video (Case Study)

It wasn’t long after Hollywood released its first 3D films that the movie format quickly gained huge popularity worldwide. Thanks to developments in video-recording technology, any user can now shoot a video on their own. You can make a stereo record of memorable events in your life or create wonderful material for your business.

Our team was also attracted to 3D filming. We thoroughly studied the features of the human visual apparatus and the technical details of stereoscopic photography. Then, we decided to develop an iOS app to shoot 3D videos and upload the videos to YouTube. The idea behind the app was to facilitate the shooting of 3D video by mounting two iPhones to a special frame — and we did it! That was how the Stereo Video Recorder1 app appeared. read more

Read more »

Building Pattern Libraries With Shadow DOM In Markdown

Building Pattern Libraries With Shadow DOM In Markdown

Some people hate writing documentation, and others just hate writing. I happen to love writing; otherwise, you wouldn’t be reading this. It helps that I love writing because, as a design consultant offering professional guidance, writing is a big part of what I do. But I hate, hate, hate word processors.

My typical workflow using a desktop word processor goes something like this:

  1. Select some text I want to copy to another part of the document.
  2. Note that the application has selected slightly more or less than I told it to.
  3. Try again.
  4. Give up and resolve to add the missing part (or remove the extra part) of my intended selection later.
  5. Copy and paste the selection.
  6. Note that the formatting of the pasted text is somehow different from the original.
  7. Try to find the styling preset that matches the original text.
  8. Try to apply the preset.
  9. Give up and apply the font family and size manually.
  10. Note that there is too much white space above the pasted text, and press “Backspace” to close the gap.
  11. Note that the text in question has elevated itself several lines at once, joined the heading text above it and adopted its styling.
  12. Ponder my mortality.

When writing technical web documentation (read: pattern libraries1), word processors are not just disobedient, but inappropriate. Ideally, I want a mode of writing that allows me to include the components I’m documenting inline, and this isn’t possible unless the documentation itself is made of HTML, CSS, and JavaScript. In this article, I’ll be sharing a method for easily including code demos in Markdown, with the help of shortcodes and shadow DOM encapsulation.

An M, a down-arrow plus a dective hidden in the dark symbolizing Markdown and Shadown Dom

CSS And Markdown Link

Say what you will about CSS, but it’s certainly a more consistent and reliable typesetting tool than any WYSIWYG editor or word processor on the market. Why? Because there’s no high-level black-box algorithm that tries to second-guess what styles you really intended to go where. Instead, it’s very explicit: You define which elements take which styles in which circumstances2, and it honors those rules.

The only trouble with CSS is that it requires you to write its counterpart, HTML. Even great lovers of HTML would likely concede that writing it manually is on the arduous side when you just want to produce prose content. This is where Markdown comes in. With its terse syntax and reduced feature set, it offers a mode of writing that is easy to learn but can still — once converted into HTML programmatically — harness CSS’ powerful and predictable typesetting features. There’s a reason why it has become the de facto format for static website generators and modern blogging platforms such as Ghost.

Where more complex, bespoke markup is required, most Markdown parsers will accept raw HTML in the input. However, the more one relies on complex markup, the less accessible one’s authoring system is to those who are less technical, or those short on time and patience. This is where shortcodes come in.

Shortcodes In Hugo Link

Hugo3 is a static site generator written in Go — a multi-purpose, compiled language developed at Google. Due to concurrency (and, no doubt, other low-level language features I don’t fully understand), Go makes Hugo a lightening-fast generator of static web content. This is one of the many reasons why Hugo has been chosen for the new version of Smashing Magazine.

Performance aside, it works in a similar fashion to the Ruby and Node.js4-based generators with which you may already be familiar: Markdown plus meta data (YAML or TOML) processed via templates. Sara Soueidan has written an excellent primer5 on Hugo’s core functionality.

For me, Hugo’s killer feature is its implementation of shortcodes6. Those coming from WordPress may already be familiar with the concept: a shortened syntax primarily used for including the complex embed codes of third-party services. For instance, WordPress includes a Vimeo shortcode that takes just the ID of the Vimeo video in question.

[vimeo 44633289]

The brackets signify that their content should be processed as a shortcode and expanded into the full HTML embed markup when the content is parsed.

Making use of Go template functions, Hugo provides an extremely simple API for creating custom shortcodes. For example, I have created a simple Codepen shortcode to include among my Markdown content:

Some Markdown content before the shortcode. Aliquam sodales rhoncus dui, sed congue velit semper ut. Class aptent taciti sociosqu ad litora torquent.

{{<codePen VpVNKW>}}

Some Markdown content after the shortcode. Nulla vel magna sit amet dui lobortis commodo vitae vel nulla sit amet ante hendrerit tempus.

Hugo automatically looks for a template named codePen.html in the shortcodes subfolder to parse the shortcode during compilation. My implementation looks like this:

{{ if .Site.Params.codePenUser }} <iframe height='300' scrolling='no' title="code demonstration with codePen" src='//{{ .Site.Params.codepenUser | lower }}/embed/{{ .Get 0 }}/?height=265&theme-id=dark&default-tab=result,result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'> <div> <a href="//{{ .Site.Params.codePenUser | lower }}/pen/{{ .Get 0 }}">See the demo on codePen</a> </div> </iframe> {{ else }} <p class="site-error"><strong>Site error:</strong> The <code>codePenUser</code> param has not been set in <code>config.toml</code></p> {{ end }} read more

Read more »

Things To Keep In Mind When Designing A Transportation Map

Things To Keep In Mind When Designing A Transportation Map

For many people, a map of a transportation network is a given, an expected part of the system, something that just is — like a fire-escape plan in a building. So, when I say that I design transportation maps, they don’t understand. What is there to design even?

Well, let’s take the London underground map as an example. Designed by Harry Beck, it was the world’s first transportation map to use the principles of electrical circuit drawings. All line segments were put to the angles of 45 or 90 degrees. The distances between stations were equalized. I wrote about it in part three of my “Maps and Reality” series, “Diagrams1.” read more

Read more »

Web Development Reading List #188: Real-World Accessibility, Flexbox Madness, And The Ephemerality Of Things We Build

Web Development Reading List #188: Real-World Accessibility, Flexbox Madness, And The Ephemerality Of Things We Build
Smashing Conf Barcelona

You know, we use ad-blockers as well. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

CSS is an amazing tool which we constantly use but we don’t seem to honor it appropriately. Whenever I see the growing browser support of the :focus-within selector, the much wanted justify-content: space-evenly for Flexbox or how great CSS Grids already work, I feel really grateful to have such awesome tools available to work with. read more

Read more »

Challenge Yourself More Often By Creating Artwork Every Day

Challenge Yourself More Often By Creating Artwork Every Day

Whether you’re into good ol’ drawing and painting, or quick editing in Photoshop or Illustrator, one thing’s for sure: they’re all creativity’s best friends. Some draw pictures all day1, while others find their inspiration in uncommon sources2 in order to break out of the box. Whatever it is that you decide to do, it’s good to challenge yourself more often and get out of your comfort zone. If you don’t, you may never discover something that you love doing, or perhaps even worse, never learn a whole lot about yourself. read more

Read more »

Designing The Perfect Date And Time Picker

Designing The Perfect Date And Time Picker

What could be so difficult about designing a decent date picker? Basically, we just need an input field and an icon that represents a calendar clearly enough, and once the user clicks on that icon, we pop up a little overlay with the days lined up in rows. Right?

Well, not every date picker fits every interface, just like not every interface actually needs a date picker. But when a date picker is required, quite often it’s just a bit too tedious and annoying to specify that one date, and too often it produces irrelevant results or even a zero-results page, although just a few minor refinements would make it much easier to use. read more

Read more »

Free Business Icons For The Startup World (28 Icons, 5 Formats)

Free Business Icons For The Startup World (28 Icons, 5 Formats)
Smashing Conf Barcelona

You know, we use ad-blockers as well. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

What comes to your mind when you hear the word “business”? White collars, cubicle offices, and encrusted habits? Not when you ask the folks at Vexels161. Their Business Concept icon set manages to break free from the conceptions that are stuck in our heads and paints a fresh and creative picture instead. One that captures the liveliness of today’s startup world. And, well, we are very happy to present you the icons as a freebie. read more

Read more »

Apple’s WWDC 2017 Highlights For iOS Developers

Apple’s WWDC 2017 Highlights For iOS Developers

Apple’s Worldwide Developer Conference (WWDC) has been running for 34 years, which is 6 years longer than The Simpsons. Like Netflix, Apple likes to drop a whole season at once. When it does, I devote that week and the following weekend to binge-watching as many videos as I can and trying out some of the new technology, especially as it relates to iOS.

In the past 10 years, a big portion of these conferences has been devoted to iOS. This is where we learned about the first iPhone SDK, notifications, share and todvay widgets, the iOS 7 redesign, iPad multitasking, and other iOS milestones. I was genuinely surprised with some of the announcements this year.

Here’s my overview of what happened this WWDC season, with code samples. But before we begin, there are some things you need to keep in mind. If you want to try out any of the sample projects, you are going to have to update your Mac to macOS Sierra 10.12.5 (the latest point release), and have Xcode 9 installed. If you are super-brave, or just irresponsible, you’ll need at least one device on iOS 11 for some of the samples to work. I fall under the irresponsible category here, but I also needed iOS 11 for my day job and to write this article, which seemed like a good excuse, but it’s not. Everything is working fine for me so far, but this is a huge risk. Don’t do it with an unbacked-up device you care about.

Further Reading on SmashingMag: Link

Prepare Your Mac and Devices (to Run Code Samples Below) Link

  1. Update macOS in the Mac App Store if you haven’t already. You don’t need the beta of the next version, just the most up-to-date release.
  2. Download Xcode 95 (which requires a free developer account)
  3. Go to the same website on your device, and install the iOS 11 Beta Configuration Profile6. This will let you get iOS 11 Beta and updates through the normal iOS update mechanism. (A free developer account is required.)
Download Xcode 9 and install the iOS 11 Beta Configuration Profile7
Download Xcode 9 and install the iOS 11 Beta Configuration Profile. (View large version8)

While you are waiting for Xcode 9 to download, go watch the WWDC Keynote9 if you haven’t seen it. If you have, watch the “Platforms State of the Union4610.” All WWDC session videos have to viewed in Safari or in the WWDC app on any iOS or tvOS device. Another great option is the unofficial WWDC app for macOS11.

WWDC Keynote: TL;DW And Spoilers Link

This article is about the WWDC updates that matter most to iOS developers, so I’ll skim through some of the big news on other fronts.

  • There were updates across the MacBook and iMac lines, including a tease for a new iMac Pro12 with very high-end components (up to 18 cores) and a new space-gray finish, to be released in December.
  • These new iMacs (and MacBooks with an external GPU) can be used to create virtual reality13 (VR) content, and this was demoed, with ILM showing off a VR Darth Vader. Steam, Unity and Unreal VR engines will release Mac versions later this year.
  • WWDC VR Demo14
    WWDC VR demo (Image: Apple Newsroom15) (View large version16)
  • The new macOS will be called High Sierra, and, as the name indicates, this release is meant to be a refinement of Sierra. Apple File System will make its Mac debut in this release.
  • The iPad Pro also got component bumps, and the smaller size has been increased to 10.5 inches. The video refresh rate on both is variable and up to 120 Hz (twice the previous speed).
  • iOS system apps got updates, including handwriting recognition and document scanning in Notes, live photo effects, and a new Files app that lets you get to the files inside of apps directly.
  • Apple announced a new smart speaker named HomePod17. It describes it as a cross between a high-end speaker like Sonos and a smart speaker like Amazon Echo. It’s also scheduled for December, but I’d expect this to be available to buy for the holidays.
  • Apple Watch has a new Siri watch face that gives you information that it thinks you want (using machine learning). This is a lot like Google Now, but it does it all on the device, so your privacy is protected.
  • Apple Pay supports peer-to-peer payment through iMessage, so you can split up a restaurant bill with just a text message.
  • The App Store has been totally redesigned. It looks a lot like the Music app and puts Games into its own area. Developers can now roll out releases over time, among other features.
  • Amazon Prime Video will be available on Apple TV later this year.

That’s a lot, and we haven’t even gotten to the new developer capabilities in iOS 11.

iOS Cocoa Touch And System Updates Link

Every year, iOS developers can expect some refinements to the overall system experience, and this year we got a big one: drag and drop. A lot of app developers try to do this themselves, but now iOS provides built-in support for it that supports multi-select, default animations and standardized interactions. On iPad, it even works between apps. You could say it was overdue, and perhaps it was, but we didn’t even get copy-and-paste until iPhone OS 3.

Another big addition to the system is that files are now more of a first-class concept. You can browse your device’s documents in the Files app (which includes cloud-based documents from iCloud Drive and third-party services), but, also, any app can bring up a file browser for the user to pick files from.

You can see these and more in the “What’s New in Cocoa Touch4718” session.

Drag and Drop Link

The new drag-and-drop system interaction is implemented so that any view can participate by having a UIDragInteraction attached to it and then implementing the appropriate delegates. Similarly, the drop target just needs to implement the drop delegates to accept the dragged data. On iPad, items can be dragged from one app to another, but on iPhone, drag and drop only works inside the same app.

One nice thing is that if a view already knows how to accept pasted data, then it automatically will accept drops of the same kind. So, UITextView can automatically have text dropped onto it without your needing to add anything to your app. You can get the basics by watching the “Introducing Drag and Drop19” video or downloading the demo app20.

If you want to add drag or drop behaviors to a UITableView or UICollectionView, then a lot of the work is done for you already, and you just need to implement the drag or drop delegates specific to those views. The details can be found in the “Drag and Drop With Collection and Table View21” video and demo app22.

The UICollectionView/UITableView Drag and Drop Demo app implements a photo album that supports using drag and drop to:

  • reorder photos in an album,
  • move photos from one album to another,
  • move all of an album’s photos to another album,
  • copy images between this app and other ones.

The main points to look at are in PhotoCollectionViewController.swift in the sample app (which you can download23):

A UIViewController with a collection view should implement the UICollectionViewDragDelegate to allow drags and the UICollectionViewDropDelegate to allow drops.

class PhotoCollectionViewController: UICollectionViewController, UICollectionViewDelegateFlowLayout, UICollectionViewDragDelegate, UICollectionViewDropDelegate {

As with other delegates, you should assign the collection view’s drag and drop delegates to self in viewDidLoad.

collectionView?.dragDelegate = self
collectionView?.dropDelegate = self

The only required drag delegate protocol method is called to create a UIDragItem array when dragging starts. A drag item holds any object that represents the drag data.

func collectionView(_ collectionView: UICollectionView, itemsForBeginning
 session: UIDragSession, at indexPath: IndexPath) -> [UIDragItem] {
 let dragItem = self.dragItem(forPhotoAt: indexPath)
 return [dragItem]

On the drop side, you need to say whether you can accept the data being dragged over you:

func collectionView(_ collectionView: UICollectionView, canHandle session: UIDropSession) -> Bool { guard album != nil else { return false } return session.hasItemsConforming( toTypeIdentifiers: UIImage.readableTypeIdentifiersForItemProvider) } read more

Read more »

Starry Summer Nights, Unexplored Worlds, And… Ice Cream! (July 2017 Wallpapers)

Starry Summer Nights, Unexplored Worlds, And… Ice Cream! (July 2017 Wallpapers)

July is almost here, and that means, well, new wallpapers. It’s been nine years already since we embarked on this mission1 to welcome the new month with a fresh batch of desktop eye candy, with wallpapers that are a bit more distinctive as the usual crowd. And it wasn’t any different this time around.

Bound to spark new ideas, artists and designers from across the globe once again challenged their creative skills and created a lovely collection of wallpapers for July 2017. All of them come in two versions — with and without a calendar — and can be downloaded for free. Now you only need to decide which one will make it to your desktop. Enjoy! read more

Read more »

Web Development Reading List #187: Webpack 3, Assisted Writing, And Automated Chrome Testing

Web Development Reading List #187: Webpack 3, Assisted Writing, And Automated Chrome Testing
Smashing Conf Barcelona

You know, we use ad-blockers as well. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

This week, we’ll explore some rather new concepts: What happens if we apply artificial intelligence to text software, for example? And why would a phone manufacturer want its business model to be stolen by competitors? We’ll also take a look at how we can use the new headless Chrome browser for automated testing and learn to build smarter JavaScript bundles with Webpack 3’s new scope hoisting. Sometimes it’s easy to be excited about all the improvements and new things our industry has to offer. read more

Read more »