I Contributed To An Open-Source Editor, And So Can You




 


 

A few months ago, Jason Grigsby’s post about autocompletion in forms made the rounds. I loved the idea of allowing users to fill in their credit card details by taking a picture of their card. What I didn’t love was learning all of the possible values for autofill by heart. I’m getting lazy in my old age.

Contributing to the open source community is easy

Lately, I’ve gotten spoiled from using an editor that does intelligent autocompletion for me, something that in the past only massive complex IDEs offered. Opening my editor of choice, I created an input element and added an autocomplete attribute, only to find that the code completion offered me the state of on or off. Disappointing.

The post I Contributed To An Open-Source Editor, And So Can You appeared first on Smashing Magazine.

Five Rules Of App Localization In China: Money, Dating And App Store




 


 

I recently sat down with Rock Zhang, a Chinese mobile entrepreneur. Rock is my classmate from business school, and we have both worked in the mobile industry for a while. In an age when the best marketing is good product management, Rock knows how to make millions of Chinese users fall in love with an app. I asked him to share his thoughts on app localization.

Screenshots from the most popular apps on China's iOS App Store show some of the best practices to follow when localizing for the Chinese mobile market.

For me, China has always been a hard market to crack. I’ve marketed several mobile apps in European and US markets, and my apps have been featured many times in the App Stores in Russia, Israel, Spain, Germany and the US. But in China, our growth was stalling, and I don’t think we ever got a request for promotional artwork to be featured in the App Store. Truth be told, my “Asian expansion strategy” usually boiled down to hiring freelance translators through Elance to help me localize App Store pages in Chinese, Korean and Japanese.

The post Five Rules Of App Localization In China: Money, Dating And App Store appeared first on Smashing Magazine.

Building A Server-Side Application With Async Functions and Koa 2




 


 

One of the upcoming features of JavaScript that I especially like is the support for asynchronous functions. In this article, I would like to show you a very practical example of building a server-side application using Koa 2, a new version of the web framework, which relies heavily on this feature.

Getting Started With Koa 2

First, I’ll recap what async functions are and how they work. Then, I’ll highlight the differences between Koa 1 and Koa 2. After that, I will describe my demo app for Koa 2, covering all aspects of development, including testing (using Mocha, Chai and Supertest) and deployment (using PM2).

The post Building A Server-Side Application With Async Functions and Koa 2 appeared first on Smashing Magazine.

Web Development Reading List #150: Less Code, GitHub’s Security, And The Morals Of Science




 


 

There is a lot to learn this week. It starts with non-technical things like going for a walk to refresh your mind and finishes with how to prevent reverse XSS attacks in forms.

Nucleus

But it doesn’t matter whether you learn how to build self-contained web components using the new specification or to maximize the efficiency of your Angular 2 app or just how you can write less code. What matters is that you keep asking questions and that you try to get better and smarter at your craft.

The post Web Development Reading List #150: Less Code, GitHub’s Security, And The Morals Of Science appeared first on Smashing Magazine.

Digital Design & Web Innovation Summit 2016: Why You Should Be Paying Attention It

So much commercial activity takes place on the internet now, that the webpage really is the central aspect of your company image and profile. As traditional brick and mortar setups fade into the background, it is increasingly vital to harness the power of the web to propel your business into the future.

That’s why it is so important to make sure that your website is as powerful and effective as possible. The Upcoming Digital Design and Web Innovation Summit is a great opportunity for professionals to learn how they can boost their online profile. Read on to see why you should be marking your calendars.

UX is vital

The User Experience on a website is more central to the success of a company that it has ever been. So often the decision about whether to buy a product is based on the look and feel of a web platform, and customers are always more likely to return to a site that they had a positive interaction with.

At the Digital Design and Web Innovation Summit, they will discuss and feature some of the best new methods for creating an effective user experience on your website.

New Technologies

Not only will you leave with a better understanding of the central role of UX, you will have a good sense of the various aspects to a website visit and understand the weaknesses and strengths of your own company system.

Proven Experts

While summits related to tech are becoming more commonplace, what separates the Digital Design and Web Innovation Summit from the rest is that it will feature a number of industry leaders.

Rather than offer generic advice about the virtues of technological advancement, speakers will be able to offer specific and proven advice that you can take back to your company and begin applying immediately.

Speakers

The Summit will feature in depth case studies that will allow you to follow how solutions are implemented, and better understand how specific measures can apply to your particular leads.

Meaningful Connections

In addition to featuring industry experts as guests, the summit is sure to draw numerous leading professionals keen to learn and offer advice.

It will prove an excellent opportunity to think outside the box, and explore novel approaches to problems which your company might be having.

The intensive environment of the summit will foster meaningful interactions and connections, and is likely to lead to productive and strong relationships in the future.

Scaling Your System

Rather than focusing on simply stressing the importance of an online presence, a fact which most of understand well now, the summit will take an in-depth look at companies entire tech strategies.

Covering All The Hot Topics
This ranges from the user interface, to the nature of graphic design, to the overall creative platform at play.

Attendees will be able to understand how to make their company systems scalable and built to grow as the digital era intensifies the amount of information online.

You will be able to see how the customer experience on your website fits into the overall creative direction of the business, and how it can change your market or help you better understand it.

Innovative Approaches

Rather than attracting run of the mill approaches to a company’s online profile, the Digital Design and Web Innovation Summit is likely to attract those pushing the boundaries and applying unconventional and innovative ideas.

The Summit will be a breeding ground for new and exciting thinking, pushing the limits of what is possible and inspiring you to think broadly about your company.

New Tools Technologies
Rather than cookie cutter solutions, you will be able to see how some of the best thinkers confront business problems, applying ingenious solutions.

By focusing on flexible and adaptive solutions, the summit will help attendees understand how more creative internet solutions can be phased into a company’s existing structure. The summit will provide a creative breath of fresh air, that will inject life and ambition to your companies online profile.

Summit Stats

As commerce moves quickly into the digital age, and the average consumer becomes more and more hungry for style and innovation in their retail experience, it is vital for internet design experts to stay ahead of the curve.

The Digital Design and Web Innovation Summit is an excellent opportunity to meet and discuss intensively with professionals in the field, and is a must for anyone serious about developing a beautiful and powerful web experience within a company.

Rather than why attend this meaningful conference to enrich your life, ask yourself why not attend it?

Getting Started With Koa 2 And Async Functions




 


 

One of the upcoming features of JavaScript that I especially like is the support for asynchronous functions. In this article, I would like to show you a very practical example of building a server-side application using Koa 2, a new version of the web framework, which relies heavily on this feature.

Getting Started With Koa 2

First, I’ll recap what async functions are and how they work. Then, I’ll highlight the differences between Koa 1 and Koa 2. After that, I will describe my demo app for Koa 2, covering all aspects of development, including testing (using Mocha, Chai and Supertest) and deployment (using PM2).

The post Getting Started With Koa 2 And Async Functions appeared first on Smashing Magazine.

Mouse Over Effects Web Design Trend with Fresh Examples

The success of website design depends on numerous aspects. However, when it comes to user experience, as a rule, details make the whole difference. While every element in design does count, there are some features that enhance the project more than others.

Dynamic constituents do not go unnoticed and always catch the eye. They are those that spin the project creatively, give an experience a cutting-edge feel, reinforce the general feeling and make the interface alluring and appealing. Sometimes they are garish and flashy; sometimes they are just barely noticeable; nevertheless, their impact is always tangible.

One of the fresh dynamic trends among the creative folks is implementing various mouse over effects. They are not evident and triggered only when the cursor hits the required area and begins to move yet it achieves a favourable outcome that instantly engages the visitors.

This small enhancement that brings into life parts of overall composition is a win-win solution that has a certain degree of ‘wow factor’.

Today we will explore twenty examples of website designs that use mouse over effects to produce an instant impression.

Mouse Over Effects in Web Design

Saat + Saat

The website welcomes visitors with a pretty minimal and spacious front page. However, it has a nice twist. Relatively big logotype that is placed in the heart of the screen can be twiddled in several directions with the help of the mouse cursor.

Saat+Saat

Font Smith

The team invites visitors to pick a name for the font face. The screen consists of a ton of cells, each of which can be clicked for further manipulations. While you surf through the page, not only does each unit change its color and offer you to visit it, but also the mouse leaves a lovely fading trace, when you move too fast.

Font Smith

Pixels by Tomer Lerner

Tomer Lerner adopts a modern solution by incorporating a vigorous abstract background that responds to visitors’ actions.

Here you will find plenty of outlined and solid geometric objects of various shapes that are chaotically scattered throughout the screen. Use the cursor to set the scene into motion.

Pixels by Tomer Lerner

Trainrobber

The team offers users to take part in a unique and offbeat exploration. You are welcome to examine the header section that is overpopulated with various exciting features with the help of the mouse.

Trainrobber

Sakura International

Sakura International is defined by another trendy kind of background these days. It exhibits a lively canvas that is enriched with a skilfully reproduced particles animation.

You can connect the dots together and form paths between them by means of the cursor.

Sakura International

Fan Studio

Fan Studio looks juicy, cartoonish and spectacular. However, that’s not all; the backdrop that tries to convey movement with its illustration can be partially pivoted in two main planes to instill a subtle sense of motion.

Fan Studio

Studio Rotate

The agency embraces minimalism in terms of its homepage. The latter does not look boring nor insipid, thanks to the logotype that reacts to users’ moves. It becomes brighter when you pull the cursor farther from the center and almost disappears when you hit its area.

Studio Rotate

Minnim

Minnim has a dynamic front page with lots of dimensional line style circles that gently vibrate. You can easily link two elements together and form not only a bond but also generate a new item between them that will include a logotype.

Minnim

The McBride Company

The team demonstrates an interesting take on the mouse over effect. The homepage is based on a spectacular landscape image that is intentionally blurred. While you move the cursor along the page a small area beneath it becomes clear, giving you an opportunity to enjoy a high-quality, crisp version of a picture.

The McBride Company

Agency Forty

Agency Forty’s online portfolio is marked by inventive navigation. Hover over any circle to find out what is hidden inside. The great thing is that the idea works both with traditional desktops and touch screen devices.

Agency Forty

Full Bundle

Full Bundle puts the users into the driver’s seat by letting them blow away squares and triangles that are falling from the top. Use the mouse to disperse this mass of colorful geometric shapes.

Full Bundle

Dreams Come True

The front page has an original dynamic installation that shows a ton of flat, colorful bubbles, which are swirling and moving in one direction. Each object is linked to a Tweet with the hashtag ‘dreamscometrue’. Activate it with the help of the cursor and read through the messages.

Dreams Come True

M11

The team applies mouse over effects to numerous constituents of the design. Buttons, icons and of course the logotype are supplied with another state that becomes evident when the user gets into the specified area.

M11

JustCoded

JustCoded has an incredible dark design with a marvelous aesthetic and several sophisticated traits. Here, the ‘welcome’ screen is built on the top of a dynamic abstract background. It feels alive because of a subtle yet restless behavior. It is also a some kind of playground that reacts to the mouse cursor.

JustCoded

Haus

This odd 3D centerpiece that prettifies the front page is pretty manageable. When you hover over it, the color starts to change, and when you hold down the left button, you can rotate it on different axis.

Haus

Clever Franke

Clever Franke has a thing to marvel at, and that is its dynamically generated title. It is charged with energy that makes it act rather chaotically. Having landed on one of the characters, the mouse starts to destroy the letter, forcing it to partially blow up; but a few seconds later, everything falls back into place.

Clever Franke

Pixel Palace

The online portfolio is spiced up with some nice twists, and the dynamic geometric background that prettifies one of the sections on the front page is one of them. Not only does it smoothly move in various directions, but it also responds to the cursor, letting users create various geometric shapes.

Pixe Palace

Message Design Center

Message Design Center breaks the monotony of simple designs with its unique and a bit bizarre solution. The front page includes numerous messages that pulsate and feel alive. The cursor gives each symbol a little acceleration making it behave spontaneously and adds more energy.

Message Design Center

Kinetic Apps

The website speaks entirely through the action. It is full of energy and emotions. Use you mouse to explore its expanses.

Kinetic Apps

Studio Monocromo

Studio Monocromo has assigned a small animation to the logotype that is triggered by the cursor when it falls into its area. The background begins to move thereby establishing a feeling that you are being drawn in. Magnificent sci-fi typography in tandem with a beautiful environment, improved by dynamic touches, separates the project from the others.

Studio Monocromo

Conclusion

As you may have guessed, the only drawback of these tiny but original and eye-catching features lies in a lack of support for touch screen devices.

In the majority of cases, versions for tablets and cell phones are based on a static environment. Nevertheless, several examples in our list prove that these effects can also be triggered by a tap to ensure the consistency in user experience.

Do these tiny effects make any difference for you? What do you think about such projects?

Photoshop Etiquette For Responsive Web Design




 


 

It’s been almost five years since Photoshop Etiquette launched, which officially makes it a relic on the web. A lot can happen on the web in a few years, and these past five have illustrated that better than most.

Photoshop Etiquette For Responsive Web Design

In 2011, everyone was just getting their feet wet with Responsive Web Design. The traditional comp-to-HTML workflow was only beginning to be critiqued, and since then, we’ve seen a myriad of alternatives. Style Tiles, Style Prototypes, Visual Inventories, Element Collages, style guides, and even designing in the browser have all been suitable approaches to multi-device design. With a shift from page-based design to building a design system, it’s truly an exciting time.

The post Photoshop Etiquette For Responsive Web Design appeared first on Smashing Magazine.

S(GH)PA: The Single-Page App Hack For GitHub Pages




 


 

For some time now, I’ve wanted the ability to route paths for a GitHub Pages website to its index.html for handling as a single-page app (SPA). This is table-stakes because such apps require all requests to be routed to one HTML file, unless you want to copy the same file across all of your routes every time you make a change to the project. Currently, GitHub Pages doesn’t offer a route-handling solution; the Pages system is intended to be a flat, simple mechanism for serving basic project content.

The Single-Page App Hack For GitHub Pages

In case you weren’t aware, GitHub does provide one morsel of customization for your project website: the ability to add a 404.html file and have it served as your custom error page. I took a first stab at an SPA hack simply by duplicating my index.html file and renaming the copy to 404.html.

The post S(GH)PA: The Single-Page App Hack For GitHub Pages appeared first on Smashing Magazine.

Creativity Under The Microscope: Running A UI Design Critique




 


 

Criticism is easy. It seems like everybody has an opinion, but, as the author Harlan Ellison points out, “You are not entitled to your opinion. You are entitled to your informed opinion.” To become informed, though, requires exploration. Design critiques are an important part of any product exploration.

Creativity Under The Microscope: Running A UI Design Critique

A design critique — where the creator discusses and explains the creation with the rest of the team and/or client — is not about badgering the designer or pushing them to justify every decision they made. That’s just criticism. A good design critique is meant to explore the design, find where it is working and where it could be improved. If done well, design critiques allow everyone on the team to feel as if they have been heard and allow clients to give valuable feedback.

The post Creativity Under The Microscope: Running A UI Design Critique appeared first on Smashing Magazine.