Web Development Reading List #132: The Challenges In Our Field, Debouncing And The Contain CSS Property
What has been your biggest web development challenge recently? Was it a development issue, a communication issue or an education issue in your team?
Facing so many things that don't work as expected these days in many different teams and projects, I now realize that we all are part of a very young industry, and by challenging not only our technical foundations but also traditional working habits, we have yet to find how we want to work. Share your challenges in the comments to this post, and enjoy the weekend!
The post Web Development Reading List #132: The Challenges In Our Field, Debouncing And The Contain CSS Property appeared first on Smashing Magazine.
As it turns out, React has proved tremendously successful, both on my own projects, and with many others around the web, including large companies like Netflix. And now with React Native, the framework has been brought to mobile. React Native is a great option for creating performant iOS and Android apps that feel at home on their respective platforms, all while building on any previous web development experience.
The post Why You Should Consider React Native For Your Mobile App appeared first on Smashing Magazine.
Real-time technology delivers information to your users as it happens. But how does it help improve your product and align with your customers' expectations?
Only a few years ago words like WebSockets, low latency and real-time functionality were at the forefront of bleeding-edge development. Fast-forward a couple of years and this technology has become an integral part of many of our favourite apps: e.g. Facebook with its in-app notifications, or Uber with its real-time location tracking effect.
The post Improve User Experience With Real-Time Features appeared first on Smashing Magazine.
I write about it often, but it’s a topic that makes me love my job, it’s the reason why communities work and why great people are great. I’m talking about honesty and ethics in everything we do, in how we live.
Reading about corruption, tax avoidance tricks, wars, and also about poorly written code or bad user experiences has taught me a lot. Looking back at projects where I stood behind the idea and business model and at projects that I saw only as money-making work showed me that sticking to my ethical principles and being honest makes me feel better, which leads to better work.
The post Web Development Reading List #133: Workflow Tools And The Aesthetics Of Invisible Code appeared first on Smashing Magazine.
The modern logo has to work harder than ever before. In the past, a company logo was perhaps intended simply for a shop sign and printed in local newspaper adverts. Today's logos have to work with a growing plethora of smart devices with varying screen sizes and resolutions, displaying responsive websites.
Often logos end up suffering within responsive website design. Many have not been designed with responsive frameworks and variable sizes in mind, and are just resized to fit whatever available space has been provided for them or not.
The post Logo Design For Responsive Websites appeared first on Smashing Magazine.
I once worked with a digital agency that didn’t know how to hold a kickoff meeting. And they didn’t even know that they didn’t know. Weeks into every project, they’d simply find themselves frustrated over how they’d ended up in a position of following rather than leading.
They would fight to get their good ideas out the door but end up on defence all the time when their clients came back screaming with arguments based on whim and vapor. The agency just couldn’t figure out how to establish itself as the UX leader of its projects, despite being hired to play exactly that role. I’m not even sure they recognized what it meant to lead.
The post How To Take Charge Of A UX Kickoff Meeting appeared first on Smashing Magazine.
There are over two million iOS apps and almost as many Android apps in the growing app economy. However, for every Flappy Bird app that gets lucky and goes viral, there are thousands of apps that take time and hard work to launch and persistence to maintain, grow and avoid the app graveyard. While we typically hear about overnight success stories, this article explores the more typical experience of an appreneur, or app entrepreneur.
I spoke with one such appreneur, Amit Murumkar, about his journey with Canvsly over the past three and a half years. Canvsly helps parents capture and store their children’s artwork for posterity (and avoid the piles of paper!).
The post Lessons Learned From A First-Time Appreneur appeared first on Smashing Magazine.
Anyone who has created a WordPress plugin understands the need to create configurable fields to modify how the plugin works. There are countless uses for configurable options in a plugin, and nearly as many ways to implement said options. You see, WordPress allows plugin authors to create their own markup within their settings pages. As a side effect, settings pages can vary greatly between plugins.
In this article we are going to go over three common ways you can make your plugin configurable. We will start by creating a settings page and create our fields using the default WordPress Settings API. I will then walk you through how to set up your fields with a custom handler. Finally, I will show you how to integrate a great configurable fields plugin Advanced Custom Fields (ACF) into your own plugin.
The post Three Approaches To Adding Configurable Fields To Your WordPress Plugin appeared first on Smashing Magazine.
CodePen has become the playground for developers. The sandbox where you can build whatever your imagination fancies. Practical things, experimental concepts — it’s a treasure chest, bound to fuel your ideas.
For this Quick Tip, we have done some digging around and found some interesting UI demos and concepts for you to indulge in and build upon: dialog and modal windows, signup and login screens, navigation and menus, sliders and toggles. Small bits of delight that make the user’s interaction with a website or app more pleasant. Enjoy!
The post Better Interface Design: Logins, Menus, Toggles And Other Fancy Modules appeared first on Smashing Magazine.
Editor's Note: Some people simply have the magic touch for digging up design goodness. Today, we are proud to present the brilliant gems that Veerle Pieters has dug out, letting us explore a fresh breeze of photography, art, type, print as well as web design projects.
As designers, we have our good and bad days. Some days ideas come naturally. Other days we struggle or have moments where we are really stuck. We are in urgent need of inspiration. Let me help you get through these moments of pain and suffering. Let me nurture your creativity. Sit back, relax, and feed your appetite. Here’s your monthly dose.
The post Breaking Out Of The Box: Design Inspiration (April 2016) appeared first on Smashing Magazine.
Have you heard of Docker but thought that it’s only for system administrators and other Linux geeks? Or have you looked into it and felt a bit intimidated by the jargon? Or are you silently suffering with a messy development environment that seems to break all of the time in various mysterious ways? Then read on. By the end of this article, you should have a basic understanding of Docker and have it working on your computer!
The first part of this article gives a bit of background to help you understand the concepts behind Docker through some metaphors. But if you just want to get started with the tutorial, skip to the “Time to Play!” section.
The post Why You Should Stop Installing Your WebDev Environment Locally appeared first on Smashing Magazine.
In part 1 of this tutorial we started building our iOS app from scratch. We started out by setting up a blank React Native project. Then we pulled data from the Unsplash.it API. Because downloading data takes time, we built a loading screen.
In the process we went over positioning UI elements with flexbox and styling them using CSS-like properties. Towards the end of part 1 we downloaded and included a third-party
Swiper component from GitHub, which allowed us to display wallpaper data in a swipeable container.
What would a page look like if it had no designer? This odd question occurred to me in the 1980s, while overseeing the transition from lead-based typesetting to phototypesetting of an Indian newspaper. The Patriot’s distinctive design seemed to emerge, not from a designer, but the tactile interaction between lead and the illiterate villager who assembled the pages.
This article examines how design has changed as materials have evolved, and underlines how the need for deliberate design is greater than it has ever been.
The post Design Or Get Undesigned appeared first on Smashing Magazine.
Imagine a web componentdistributed as a single
For interaction designers, it’s becoming common to encounter privacy concerns as part of the design process. Rich online experiences often require the personalization of services, involving the use of people’s information.
Because gathering information to personalize a customer experience can interfere with the overall experience — with negative consequences for the business — how do we navigate this increasingly difficult territory? What are the guidelines to follow when using data to personalize digital experiences, and how can organizations help people feel comfortable with personalization services that research clearly shows people want?
The post Privacy Guidelines For Designing Personalization appeared first on Smashing Magazine.
Have you ever wanted to use a particular CSS feature but didn’t because it wasn’t fully supported in all browsers? Or, worse, it was supported in all browsers, but the support was buggy, inconsistent or even completely incompatible? If this has happened to you — and I’m betting it has — then you should care about Houdini.
Houdini is a new W3C task force whose ultimate goal is to make this problem go away forever. It plans to do that by introducing a new set of APIs that will, for the first time, give developers the power to extend CSS itself, and the tools to hook into the styling and layout process of a browser’s rendering engine.
The post Houdini: Maybe The Most Exciting Development In CSS You’ve Never Heard Of appeared first on Smashing Magazine.
Drawing a cartoon is no trivial pursuit. It turns us into a director, writer, narrator. Through a cartoon or comic, you tell a story that takes place in a certain time, a certain environment, with certain characters. This is why you will learn here not just how to draw a cartoon in Adobe Illustrator, but how to decide on character, place and situation.
Before grabbing your pencil or software tool, ask yourself, “What will be my topic?” How many characters you will use, and who will they be? What background will they move against? What era will they live in? In what scene will you put them? Through the steps in this tutorial, I will explain to you my own choices. Let’s begin.
The post Drawing A Cartoon In Illustrator appeared first on Smashing Magazine.
Editor’s Note: Today we are pleased to feature the new and free font families Yrsa and Rasa by David Březina and Anna Giedryś and their story behind the design process.
Yrsa and Rasa are two open-source type families published by Rosetta with generous financial support from Google. The fonts support over 92 languages in Latin script and 2 languages in Gujarati script. The family currently has 5 weights. They were designed and produced by Anna Giedryś and me and they are now released and ready for download.
The post Free Font Release: Yrsa And Rasa Available For Download appeared first on Smashing Magazine.
If you’ve dreamed of the day when you could design more than one thing at once in Photoshop, the wait is over. You can now have multiple designs right next to each other. Design mobile layouts alongside your tablet and desktop layouts. And in this article, we’ll design an entire set of assets all at once.
What many Photoshop users have been hoping for — with a push from Sketch, no doubt — finally arrives in the form of artboards. No longer are you constrained to one canvas. Turning layer groups on and off, be gone. Create as many canvases as you like in one PSD.
The post The Retina Asset Workflow You’ve Always Wanted For Photoshop appeared first on Smashing Magazine.
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.
I love finding those little useful front-end goodies that make our lives easier. Since technologies emerge and evolve permanently, keeping track on what's going on is often difficult, especially since specifications change and so does the browser support. For a replacement talk at SmashingConf Oxford last week, I've decided to collect some of the useful techniques from various articles, conversations and my workshops in a slide deck — and since it proved to be useful for many front-end developers I've spoken to after the talk, I'm very privileged to share it with the entire community as well.
The post Dirty Tricks From The Dark Corners Of Front-End (Slides, PDF) appeared first on Smashing Magazine.
When Google announced the launch of its new mobile ranking system, dubbed Mobilegeddon by the press, everybody agreed that the impact would be devastating on those businesses that didn't have a mobile web presence. At that time, we conducted a study of the top 10,000 sites from Alexa and showed that four out of ten sites would be affected by Google's update.
Eight months into the apocalyptic event, we repeated the study because we wanted to measure and understand the real proportions of such an important development. We crunched the data and discovered some interesting findings — this article details the most significant ones.
The post Google’s Mobilegeddon Aftermath: Eight Months Into A Better Mobile Web appeared first on Smashing Magazine.
If you’ve ever had to move your iPad from one hand to the other just to tap a button you couldn’t reach, then you may have already guessed why we began this study in our UX lab.
Our Mail.Ru Group’s UX lab team carries out many usability studies of our apps for smartphones and tablets. We address users’ needs by introducing features in our products. We carefully test all of the functions to ensure users notice and understand them well. Nevertheless, this was the first time we had looked at the physiological aspect of our app’s usage.
The post How To Make A Physiology-Friendly Application For The iPad appeared first on Smashing Magazine.
Many WordPress superpowers come from its flexible data architecture that allows developers to widely customize their installations with custom post types, taxonomies and fields. However, when it comes down to its search, WordPress provides us with only one-field form that often appears inadequate and leads site admins to adopt external search systems, like Google Custom Search, or third-party plugins.
In this article I’ll show you how to provide your WordPress installation with an advanced search system allowing the user to search and retrieve content from a specific custom post type, filtering results by custom taxonomy terms and multiple custom field values.
The post Building An Advanced WordPress Search With WP_Query appeared first on Smashing Magazine.
In the last few years, the way we design infographics has changed significantly. Infographics have evolved from static graphics to rich, interactive experiences with animation and video elements, all tailored to the uniqueness of the content, instead of pressing it into a precast mold. For this round-up, I have collected some of the better infographics to see what engaging and informative experiences can look like today.
Most of the infographics on this list were chosen to showcase different ways that designers have approached data visualization. However, there are also a few hybrids here that illustrate the disappearing boundaries between infographics and richer multimedia experiences in creating engaging content and compelling stories. Deviating from the traditional infographic form means that we tread into more complex media territory, but such experimentation with technology and narrative will be key in shaping the future of infographic design.
The post Diverse And Engaging Instances Of Interactive Infographic Design appeared first on Smashing Magazine.
When I was young and learning to program, I was fascinated by the possibility of creating things that could live inside my monitor. I had the same feeling when I started to play with procedural content generation, which is to find the rules behind a phenomenon, encode them in an algorithm, and use that algorithm to create something virtual, but realistic — a plausible simulation.
Typically, you can give a seed or some initial parameters to a procedural content generation algorithm, and get some result. You could generate the landscape of a city, the shape of a tree or an entire world.
The post Diving Into Procedural Content Generation, With WorldEngine appeared first on Smashing Magazine.
What a week! Some people were debating over our npm workflows and security attacks (and sadly not just virtual social engineering ones but real ones in Brussels), we've also seen some great new articles that feature the better parts of our community and society. I'm happy to share them with you over this longer Easter-weekend. Cheers!
iOS9.3 and OS X 10.11.4 is finally being delivered to users, and with it, Safari 9.1 is out with
<picture> element support, CSS Custom Properties,
unset value and unprefixed
The post Web Development Reading List #130: Opera Mini, Workflow Fragility And Happy Work appeared first on Smashing Magazine.
I’ve never been a fan of color theory. I think it’s because I’ve always been a bit hopeless at it. I’d love to be able to sit there, color wheel in hand, and pick out complementary, split-complementary and triad color schemes, impressing all of my friends, family and clients in the process.
But the theory has always eluded me, and, truthfully, I’ve never found it useful when trying to use color in my projects. Somewhat ironically, I’ve been finding that the better I get at choosing and using color, the better I become in the theory behind it.
The post A Simple Web Developer’s Guide To Color appeared first on Smashing Magazine.
One of the most popular tools for screen design and illustration in the last couple of years has undoubtedly been Sketch, which became an important part of many designers’ responsive web design and mobile design and prototyping workflows.
However, an increasing number of other tools are becoming available. In this article, I will explore the first browser-based app to be viable in the vector illustration and UI design space: Gravit.
The post Sketch, Illustrator or Fireworks? Exploring A New Free UI Design App: Gravit appeared first on Smashing Magazine.
Although it’s April 1st, and people go all crazy making up jokes and spreading hoaxes, I’m sending out this edition to you without any April fools. Instead, I want to challenge you to put more effort, more thoughts into your code.
Instead of blindly following a given path to build the solution with the least effort, what about thinking more about your users? Wouldn’t a lot more users benefit from you spending an additional hour on building a form on your own instead of relying on a third party that involves tracking? Wouldn’t they benefit from a smaller website that doesn’t contain big libraries?
The post Web Development Reading List #131: Git 2.8, CSS Grids And The Key To Good Code appeared first on Smashing Magazine.
Since eight years, we start into the new month with a collection of desktop wallpapers — the best way to fuel some fresh inspiration, as we find. And it’s not any different this time around. Designers and artists from across the globe shared their creations with us for April 2016. The result is a collection of desktop wallpapers with a unique mix of ideas and styles, eye candy that is bound to cater for new idea sparks.
We are very thankful to everyone who has contributed to this challenge and who keeps the steady stream of wallpapers flowing by sharing their artworks each month anew. The wallpapers all come in versions with and without a calendar and can be downloaded for free. It’s time to get your desktop ready for spring!
The post Desktop Wallpaper Calendars: April 2016 appeared first on Smashing Magazine.
What makes a great conference? It fuels your ideas and polishes up your skills. It fosters your professional growth and takes your work to the next level. Luckily, a lot of conferences provide videos of their talks after the event has ended, some do even stream live to pass on their knowledge even if you couldn’t attend.
The videos collected in this round-up revive the spirit of the conferences they were recorded at and cater for a lot of fresh insights and light-bulb moments to make the learning never stop. As a very special goodie, we’re very pleased to also feature the live stream of this year’s Build 2016 Conference, taking place at the Moscone Center in San Francisco, CA, right here on Smashing.
The post Never Stop Learning With Conference Live Streams And Videos appeared first on Smashing Magazine.
Editor’s Note: Some people seem to have a magic touch when it comes to digging up design goodness. Veerle Pieters is one of them. As she explores print and web design, photography, art and type, she uncovers a lot of brilliant gems. And because they are too good not to share, she has compiled a selection of inspirational examples for you in this showcase.
The plan is to bring out a new one every month, so let us know in the comments if you like what you see. But for now, please lean back and enjoy!
The post Monday Morning Design Inspiration appeared first on Smashing Magazine.
Desperate times call for desperate measures. In attempts to fight back against the growing adoption of ad-blockers, many publishers and ad-dependent websites adopt all kinds of techniques from introducing "light" paywalls to limiting access to the site to fully blocking ad-blocker users from accessing the content altogether.
It seems a bit ironic that a website would send away potential customers that are taking measures to actually access the site faster, and read the content published on the site without annoying distractions. Don’t get me wrong: publishers need to earn money, and in most cases advertising is still the most efficient way of doing this. We know it better than anybody: with our smart tech-savvy audience, the ad-blocker usage has grown from 12% in 2012 to 55% today (as of March 2016). That’s a huge growth, and it’s a tendency that hurts us massively.
The post A Never-Ending Story On Ad-Blockers appeared first on Smashing Magazine.
Another week comes to an end, with new browser announcements, releases and cool new tools that you might want to check out. I make it short: Have fun reading this week’s reading list and enjoy your weekend!
Firefox 45 is out and now re-evaluates responsive images in srcset on resize or viewport changes. Also, the Web Speech Synthesis API and
window.onstorage were implemented, and you can now test CSS Grid Layouts. Firefox Nightly also got an interesting new feature: the browser can read text in Reader View.
The post Web Development Reading List #128: Firefox 45, A Multi-Colored Font And Better Force-Pushing appeared first on Smashing Magazine.
Location-based services are growing in popularity every day, and beacon-based services are tipped to be the advertising goldmine of 2016. You may already be using location data and beacons to enhance your users’ experience with your websites, apps and wearables. However, the use of location data is not without limits.
Developers must become aware of international privacy laws, as well as industry codes of self-regulation, that govern its usage. Following laws and codes, while also adhering to best practice principles through frameworks such as privacy by design (PbD), will ensure public trust in your app as well as in your services as a developer.
The post Legal Guidelines For The Use Of Location Data On The Web appeared first on Smashing Magazine.
The idea that designers are bound to be servants of other people's and companies' products is extremely pervasive. Sure, you may build your own design agency but, in the end, that agency is simply a collective effort to serve someone else. From my perspective, though, the world is waking up to the idea that designers can be founders of a product and not just create the beautiful wrapping around some engineering core.
A recent study by Boston's Design Management Institute showed that design-driven businesses have outperformed the Standard & Poor's 500 by an astounding 228% over the past 10 years. These were companies that had design embedded within the company's organizational structure, design leadership present at senior levels, and a commitment to design's use as an innovation resource.
The post From Fledgling To Founder: How Designers Can Push Their Creations Into The Real World appeared first on Smashing Magazine.
It’s the small details that make a project shine. Solid typography, well-crafted with attention and care is one of them. A harmonious visual rhythm, typographic subtleties like soft caps, margin outdents or the correct use of hyphens and dashes — there are a lot of things that add up to it.
In practice, however, publishing on the web is supposed to be fast, and the little details are often overlooked, which is a pity, because they are not only pleasing to the eye but also improve the reading experience.
The post Tools And Resources For A More Meaningful Web Typography appeared first on Smashing Magazine.
If you’ve ever worked in an agile environment, chances are you’ve had your share of “retrospectives” — meetings where people write what made them “glad,” “mad” or “sad” onto different-colored notes, post them onto a board, arrange them in groups and — most importantly — talk about them.
These meetings are straightforward, as long as everyone is in the same room. But if you’re working with a locally distributed team, things can get a bit tricky. Let’s address this by creating a virtual version of our board to allow team members in different locations to hold their retrospective just as if they were in the same room.
The post Building A Real-Time Retrospective Board With Video Chat appeared first on Smashing Magazine.
When your design looks beautiful and polished, how do you know if it performs well? While it is easy to predict the appeal of a clean and simple UI, design that converts is always a shot in the dark for marketers and designers.
We worked with the team at FiftyThree to test their app store landing page before they launched ads in China. After tweaking background color, graphics, screenshot order, and localization, we achieved a 33% increase in app page conversion. In this article, I’ll share some ideas about app page design. I'll also argue that dropping your assumptions and testing is the only way to find content that not only looks and reads great, but also helps your bottom line.
The post How To Improve Conversions By Localizing An App — A Case Study On “Paper” appeared first on Smashing Magazine.
Easter is only a week away, and it's time to add a few icons to your projects. Or perhaps just freshen up your good 'ol Easter cards for your family, friends, colleagues, and perhaps even strangers. Today, we're happy to release the Easter Icon Set, a set of 13 icons available in AI, PSD, EPS, PDF, SVG and PNG formats.
The icon set was designed and created by Manuela Langella and, as always, is free to use in private and commercial projects.
The post Freebie: Easter Icon Set (13 Icons, AI, PSD, EPS, PDF, SVG, PNG) appeared first on Smashing Magazine.
Every week I learn so many new things about front-end development. By building various kinds of projects, by talking to other developers, by reading new articles. Of course, it can be overwhelming, but to me this is the best part of the job. By sharing and talking to other people, my job gets more interesting.
For example, this week I learned how to build malicious links with
target="_blank", I learned how CSRF works, and how important it is that an icon clearly indicates what it is thought for — the latter after I implemented the icons and only found some of them helpful as I saw the fallback/title text for them. Always stay curious.
The post Web Development Reading List #129: CSRF, Modern Tooling And The UX Of Web Fonts appeared first on Smashing Magazine.
Creative folks like yourself know how important our daily dose of hot and steaming coffee is. Many of us even choose to work from a coffee house because the cozy atmosphere, the smell of freshly ground coffee beans and the carefully created art on the glossy foam fuels our creativity.
Designed by Oliver Pitsch, Barista is an icon set dedicated to all baristas and coffee lovers. It consists of 50 carefully crafted vector icons. The icons are drawn on a special 256px grid adapted from the iOS icon grid. All icons are available as 128px PNG (+ @2x 256px versions), as well as Illustrator EPS and SVG files.
The post Freebie: Barista And Coffee Lovers Icon Set (50 Icons, EPS, PNG, SVG) appeared first on Smashing Magazine.
An increasingly large number of publicly available APIs provide powerful services to expand the functionality of our applications. WordPress is an incredibly dynamic and flexible CMS that powers everything from small personal blogs to major e-commerce websites and everything in between. Part of what makes WordPress so versatile is its powerful plugin system, which makes it incredibly easy to add functionality.
We will walk through how I made GitHub Pipeline, a plugin that allows you to display data from the GitHub API on WordPress pages using shortcodes. I’ll give specific examples and code snippets, but consider the technique described here a blueprint for how to consume any service API with a plugin. We’ll start from the beginning, but a degree of familiarity with WordPress and plugin development is assumed, and we won’t spend time on beginner topics, like installing WordPress or Composer.
The post Making A WordPress Plugin That Uses Service APIs, “From Soup To Nuts” appeared first on Smashing Magazine.
As UX professionals, we play a key role in raising the bar for customer experiences. A simple attention to detail is often what signals to the customer that we’re thinking about them. In the digital space, we focus on user interactions within applications devices and processes.
With the ever-increasing computing power of desktops, browser sophistication and use of native apps, every day we learn of new ways to push the limits of what defines a well-crafted UI. When used correctly, motion can be a key utility in helping your users achieve their goals.
The post How To Integrate Motion Design In The UX Workflow appeared first on Smashing Magazine.
More Articles ...
- Managing Mobile Performance Optimization
- Simple Augmented Reality With OpenCV, Three.js And WebSockets
- Free Icon Sets: E-Commerce, Food, Science, Avatars And Summer
- Noah’s Transition To Mobile Usability Testing
- The Flexbox Reading List: Techniques And Tools
- Content Modeling With Jekyll
- Efficient Responsive Design Process
- Web Development Reading List #127: jQuery 3, UX Research And XSS In Ads
- Getting (Dis)Connected: Shallow Interaction Design For Deeper Human Experiences
- Inspiring Everyday Graphic Design