netAugust 2016的目錄

What’s your biggest CSS bugbear? Last row of flex items not stretching the entire row when justifycontent isn’t default. @thebru1905 Inconsistent form styling capabilities across browsers @James_M_South ‘column-gap’ accepts any valid length … except percentages. @revoltpuppy Putting padding on a div and wanting a border to be on the inside of the padding not outside the div. @Mandeee_J There’s a pseudoelement for first-letter, but not for last-letter. @GarettCreative How you can’t stack background images with rgba(). @muzzlehatch_ min-width has a default value of 0, but maxwidth has a default of ‘none’. Why can’t min-width be more like max-width? :( @AshConnnolly People who don’t use appropriate selectors and just put classes everywhere! CSS can do so much without JS when understood. @MartinDarksnow Floating elements does not add to the stack height…

Mark Anthony, Atlanta, US RB: There are three key things to focus on: OPTIMISE IMAGES + Images are probably the heaviest part of your site, so use the right one for the job (photos should be JPG, graphics PNG/SVG). Optimise them in your editor before saving and strip meta-data before they hit your user’s browser. LAZY LOAD CONTENT + Load what you need, when you need it. For example, lazy load images so they only appear when they come into view on the page. INVESTIGATE FREEBIES + New specs like preload and HTTP/2 are not available to all users, but that doesn’t mean they should be ignored. Keep a keen eye on Can I Use and remember that today’s performance best practices may become unnecessary.…

We asked our followers how they get feedback to explore whether their site or product is serving its users in the way they want Use the tools @bluemwhitew recommends @bugherd’s feedback form, but triggered from a footer link so it’s less intrusive. Meanwhile, @mrcodella notes that ZURB’s Notable project tracking tool is good for collecting customer feedback and “has a ton of different test formats”. @lapierrej takes a different route – he prefers to build an integrated feedback process into the app itself. Live interviews Impersonal forms don’t always reveal the right information. “Thoughtful, in-depth interviews” are what’s needed, according to @kayleighkarutis. “Surveys only go so far – sometimes you need to really dig in, in person.” @dbomb concurs that “actually talking with them” is necessary to get the most…

BEYOND PIXELS I’ve been working in IT in Riyadh for the last 16 or so years. Initially I was a systems developer, and introduced CSS to my team – heady days. Over recent years though, I’ve mostly worked as a project manager, primarily delivering infrastructure. It’s through this rather circuitous route that I came to be repairing guitars. I quickly learned that you have to put some effort into keeping yourself amused when not in work, as things I might normally take for granted like cinemas, the pub and live music events aren’t available here. People can be remarkably resourceful in creating a more familiar life for themselves. With expats comes western music, and the means to make that music. For me that means guitars. While I’ve been here I’ve…

EUROPYTHON DATE: 17-24 JULY 2016 LOCATION: BILBAO, ES If Python is your thing, get yourself to Bilbao for the biggest Python conference in Europe, with over 150 talks over the course of the week. 2016.europython.eu THE FRONTEND GUIDE DATE: 15-16 SEPT 2016 LOCATION: BOLOGNA, IT The Frontend Guide to Life, the Universe and Everything (to give it its full title) promises to skyrocket you into a galaxy of all things frontend. Head to the site for 42 reasons to attend. 2016.fromthefront.it AN EVENT APART DATE: 3-5 OCT 2016 LOCATION: ORLANDO, US For this ‘special edition’ show in Orlando, the An Event Apart crew are offering a special Gold Pass, which includes an exclusive backstage tour of Disney’s Hollywood Studios. netm.ag/event-282 FRONTIER DATE: 16 NOV 2016 LOCATION: LONDON, UK Aral Balkan,…

AUTHOR CHRIS MILLS Chris (@chrisdavidmills) is a senior technical writer at Mozilla, where he writes documentation about Web APIs, HTML and CSS. He also leads the learning area at netm.ag/learn-282 ILLUSTRAT0R LINZIE HUNTER Linzie’s hand-lettering and illustrations have appeared in books, magazines and ad campaigns for clients including Nike, the BBC, Marks & Spencer, and Random House www.linziehunter.co.uk The capabilities available to websites and apps have changed a lot since the early days of static pages. Even in recent times we’ve seen many significant advancements: native animations, simple flexible layouts (finally), real 3D graphics and streaming video, to name but a few. But there is still more to do, especially if the web is to compete effectively with native platforms. Spec writers and browser engineers have been looking at the…

Now you’ve been introduced to the wonderful world of web app development, you’re thirsty for more, right? Follow these links for more information on subtopics I’ve covered. TOOLS AND BLOGS Platform status (platform-status.mozilla.org) – Platform status dashboard for implementing modern web app APIs in browsers Emscripten (emscripten.org) – Tool for transpiling native code to fast JavaScript Service Worker and Push DevTools (netm.ag/addition-282) – Additions to Firefox DevTools to help debug Push and Service Workers WebAssembly (webassembly.github.io) – Early news and info on WebAssembly The Service Worker cookbook (serviceworke. rs) – Useful real world recipes for Service Workers and Push Oghliner (mozilla.github.io/oghliner) – Node tool for converting apps to offline using Service Workers TUTORIALS The MDN App Center (developer.mozilla.org/en-US/Apps) – Mozilla’s hub for modern web app development techniques Progressive Web Apps…

ABOUT THE AU THOR MATT JAMES w: mattjamesmedia.com t: @mattFrankJames job: Frontend developer, Wells Fargo Advisors areas of expertise: CSS, RWD, JavaScript q: what’s the first video game you ever played? a: Pong VIDEO Matt James has created an exclusive screencast to go with this tutorial. Watch along at netm.ag/RWDvid-282 The current frontend landscape is a sea of build tools, frameworks and complexities. These resources often aim to simplify the workflow by automating any redundant development tasks, but it’s important to remember that they are not accessible for many developers. For those of us behind a proxy or firewall in an enterprise setting, these tools are either impractical or unavailable due to restrictions, security concerns or other organisational hurdles. How then to handle the task of turning around an aging…

ABOUT THE AU THOR CLARK WIMBERLY w: clarklab.com t: @clarklab job: Designer, InVision areas of expertise: UX, design, BBQ q: what’s the first video game you ever played? a: Sneak ’n Peek for Atari 2600 Exclusive offer! UNLIMITED PROTOTYPES Get unlimited InVision prototypes for 3 months! netm.ag/offer-282 Code: INV-NETMAG VIDEO Clark Wimberly has created an exclusive screencast to go with this tutorial. Watch along at netm. ag/sketchvid-282 Screen design has come a long way in the past few years. Heck, we weren’t even saying ‘screen design’ a few years ago. As scores of graphic designers and illustrators evolve to tackle screen design, so too must our toolset. We’re no longer creating static, singularly-specced pieces of art – we’re planning living, breathing design systems that must work across a variety of environments. This…

ABOUT THE AUTHOR RAY VILLALOBOS w: www.raybo.org t: @planetoftheweb job: Senior staff author, Lynda.com areas of expertise: Frontend and fullstack web design and development q: what’s the first video game you ever played? a: Space Invaders on a Commodore PET with about 4K of RAM VIDEO Ray Villalobos has created an exclusive screencast to go with this tutorial. Watch along at netm. ag/atomvid-282 First there was Vi, BBEdit, then TextMate and Sublime Text. Now Atom – the cross-platform, open source offering from GitHub – is the latest text editor to win over the developer community. Active and rapid development by a respected team from GitHub means this tool has a solid future. Touted as the most hackable text editor, it ships with a super-small core and can be easily extended using…

+ Part of what makes Atom awesome is the great number of packages that come pre-installed with the application. But to really make it sing, there are lots of other packages that will improve on what it can do. Here are the ones I use. emmet: A series of shortcuts that will improve the speed with which you write your code html-entities: Quickly encode and decode HTML entities, so you just type in characters like ‘®’, and it will convert it to ‘®’ for you linter: Check your syntax directly from within your editor. Sub-plugins exist for many languages and you should load up on the ones you use. It will highlight errors in the gutter, so you’ll make fewer mistakes open-in-browser: Quickly open the current file in your default…

CHRIS MILLS Chris is a senior technical writer at Mozilla. From page 68 he tells us how the progressive web apps revolution is bringing the perks of native apps to the web w: developer.mozilla.org t: @chrisdavidmills SARA WACHTERBOETTCHER Sara runs a content strategy consultancy and wrote Design for Real Life with Eric Meyer. On page 26 she analyses why delight is a bad goal for web designers w: www.sarawb.com t: @sara_ann_marie MAT VOGELS Mat is a designer and leads the education efforts at Webflow. From page 76 he breaks down how to get started with the Flexible Box Layout module w: matvogels.com t: @matvogels KACEY COUGHLIN Kacey is an UI engineer on the internal tools team at LinkedIn. On page 94 she explains how to tackle technical debt within an…

TOO MANY TYPEFACES + Conventional wisdom tells us not to use lots of different typefaces, but Bethany Heck has been producing great designs that do exactly that. She explains that the rule is likely there to stop designers using varied type as a crutch to add visual interest to an otherwise dull design; but if your design principles are sound then why worry about this? netm.ag/type-282 HAPPY COG STARTER FILES + There’s no ‘right’ way to kick off a web project, but some ways are righter than others. Developer Allison Wagner shares the ins and outs of Happy Cog’s frontend toolkit, giving an insight into its naming conventions, folder structure and overall approach to starting a new project. netm.ag/start-282 THE WEB OF THE FUTURE + Flexbox and Grid are transforming…

DIGITAL DESIGN THEORY $24.95 INKS. $1.99 SKETCH MASTER FROM $39 JUMP START SASS $29.95 PROTT VARIOUS GROW VOL.2 FREE What we think (1) This book examines the relationship between print design and digital experience via a series of critical essays (netm.ag/theory-282). (2) INKS. reimagines a traditional pinball game, adding beautiful bursts of colour wherever your ball hits a wall (inksgame.com).(3) Master Sketch with this collection of video training courses from Peter Nowell (sketchmaster.com). (4) Still not found time to learn Sass? Kick-start your learning with this book for beginners (netm.ag/jump-282). (5) Create simple, interactive prototypes quickly and easily, then share your designs with others to get fast feedback (prottapp.com). (6) Winning and keeping clients is key to building a successful business. This guide explores nine methods you can use to…

I took a friend from out of town to a restaurant in my neighbourhood the other day. She has coeliac disease – the real-deal autoimmune disorder that makes gluten attack her small intestine. Eating out is stressful; some places assume she’s just avoiding carbs, or that a little bit won’t hurt. They’re wrong. My friend hates bothering staff, so she doesn’t go to new places much. But here she is, across the country, trusting me to lead her right. I’m anxious to find a good meal that won’t trigger her illness. She asks the host a bunch of questions: What’s safe? Are you sure about the sauces? Can you prep my food separately? They’re patient. They’re confident. They’re kind. We’re told there’s no gluten-free dessert, but we don’t mind. Then,…

ALICIA SEDLOCK Frontend developer Alicia is a responsive web enthusiast, and loves digging into new CSS specs w: www.aliciability.com t: @aliciability SVG, HTML5, ES6 FS-UNTITLED.FONTSMITH.COM The Space Between www.the--space--between.com There are plenty of sites that show different font variants in action, but none as full of personality as FS-Untitled. The site was built by collaborative studio The Space Between to show off all the fonts of its versatile new typeface. “By creating a digital playground with 48 unique scenes, we gave ourselves the perfect platform to present the typeface in many different ways,” says designer Steven Jones. “We wanted to generate an overall feeling of playfulness that could in turn be beautiful, funny, provocative and inspiring.” The site demos the assortment of variants through a diverse set of fun and…

ADRIAN BELINA Partner What’s on your desktop? A neon orange skull, a Canadian Mountie whose hand waves at you, and a bobblehead of myself that I got as a gift. What little things make your life worthwhile? At work I love getting and giving high fives, watching juniors become seniors, traveling to amazing cities, and working in a such an social industry where your client or even competitor can end up becoming your friend. What do you have on the walls? I love interior design, but I have an incredibly difficult time choosing art. After having bare walls for ages, I’ve finally purchased a photo print from a project called Bottom Ash Observatory. What hours do you work? All of them! Although I step away from the computer and get…

Opera’s deputy CTO shares his predictions for progressive web apps CM: Are progressive web apps going to make your breakfast cereal taste better? BL: Totes – they’re more nourishing than sugar, and sweeter than honey. CM: Seriously though, what problems are you hoping will be solved by this movement? BL: The problem is the UX gap between native apps and the web, now we pretty much have API parity. Native apps can be ‘installed’ to the homescreen and tickled into fullscreen glory with your finger. PWAs add this UX feature (because UX is a feature) so you can save a web app to your homescreen, just like native. And with Service Worker, it can run offline. But, better than native apps: it never needs updating! The app lives on your web…

ABOUT THE AU THOR KACEY COUGHLIN w: kaceycoughlin.com t: @kaceykaso job: UI engineer, LinkedIn areas of expertise: HTML, CSS, JavaScript q: what’s the first video game you ever played? a: Freeway on the Atari 2600 VIDEO Kacey Coughlin presented ‘Declare bankruptcy on technical debt’ at FITC. You can watch her talk at: netm.ag/FITC-282 If you work in tech, you’ll have probably heard about ‘technical debt’ at some point. The mere mention is enough to send some programmers packing. Technical debt refers to the work that needs to be done before any project or job can be considered properly complete. This debt must be addressed at some point, or the issues it causes will only grow. Technical debt is the clean-up work that arises from using a less optimal design in the…

Using the mouse is fine, but to get really fast with the editor, these command key power combos will get you what you want much faster. It takes a while for these to become second nature, so make sure you spend some time forcing yourself to use them. It’ll pay off in a big way once they become a part of your regular workflow. Command palette cmd-shift-p (Mac), ctrl-shift-p (Windows) Access just about any tool in the menus/preview command key combinations. Jump to line ctrl+G (Mac), ctrl+G (Windows) Get to any line, row or column quickly. Bookmarks ctrl+F2 (Mac), ctrl+F2 (Windows) You can create and navigate through custom bookmarks you place in documents. This command lists the current bookmarks. Symbols cmd+R (Mac), ctrl+R (Windows) Context-sensitive index of the current document…

ABOUT THE AUTHOR FABRICE LEJEUNE w: www.dogstudio.be t: @fabricelejeune job: Lead frontend developer, Dogstudio areas of expertise: CSS, Sass, the KISS principle q: what’s the first video game you ever played? a: A soccer game on a Commodore 64: International Soccer View source files here! All the files you need for this tutorial can be found at netm.ag/fontsgit-282 RESOURCE Written by Hugo Giraudel, this is an opinionated style guide for writing sane, maintainable and scalable Sass: sass-guidelin.es Often, it is possible to create an effective design using a few simple font varieties. Font stacks like this make sense to developers and are easy enough to work with. However, when we work with our (beloved) designers at Dogstudio, you can be sure we’ll be facing a lot of font variants. And…

ABOUT THE AUTHOR LUKAS RUEBBELKE w: onehungrymind.com t: @simpulton Job: Author, trainer and consultant Areas of expertise: Angular, JavaScript, Caffeine q: what’s the first video game you ever played? a: Outlaw on the Atari 2600 when I was five years old. Nothing like shooting a punk dead with a one-pixel bullet View source files here! All the files you need for this tutorial can be found at netm.ag/angulargit-282 VIDEO Lukas Ruebbelke has created an exclusive screencast to go with this tutorial. Watch along at netm.ag/angularvid-282 Angular 2 is here, and it is a brave new world! With language improvements, tooling enhancements, new browser features and the best practices gleaned from AngularJS 1.X, it has evolved from a framework that provides us with a mostly sane approach to building web apps to…

CONTACT US @netmag /netma netmag@futurenet.com net.creativebloq.com medium.com/net-magazine A CHALLENGING BLOG POST net: Many thanks to Chris Robinson for his blog post about putting together his Design Challenge entry for a brewery site, which he managed to write while balanced on his wife’s exercise ball and (possibly) covered in his baby son’s wee. A man of many talents. You can read Chris’ post at netm.ag/robinson-282, and if you want to get involved in an upcoming Design Challenge, drop us a line. NO MORE AGENCIES net: With recent highprofile studio closures and in-house teams becoming more and more common, many are speculating we may be witnessing the demise of the web design agency. We explored the issue in a feature, which we recently republished (netm.ag/agency-282). Here are some of your thoughts: In my…

Send your questions to netmag@futurenet.com THIS MONTH FEATURING... ERICA HEINZ Erica is a freelance UX and product designer working out of Brooklyn, New York w: www.ericaheinz.com t: @ericaheinz JOSH CLARK Josh is a mobile/IoT designer and author of Designing for Touch w: www.bigmedium.com t: @bigmediumjosh ROSS BRUNIGES Ross is long-term web developer in the web standards community w: www.thecssdiv.co.uk t: @rossbruniges DAN EDWARDS Dan is creative director at No Divide and the co-founder of oozled.com w: www.danedwards.com t: @de QUESTION OF THE MONTH Why are many apps and websites throwing away the hamburger icon? Keshav Soni, Chennai, IN JC: Despite its broad use, the icon itself is still opaque to many users. Studies show that a button labeled ‘Menu’ attracts 20 per cent more use than the hamburger. But even more problematic is the menu itself. Tucking links into…

Kevin Lozandier UX engineer @KevinLozandier SVP With 60FPS being all the rage these days, why not watch everything in 60FPS? With SVP I can do just that! Using clever frame interpolation, SVP enables me to enjoy or debug visual content at 60FPS and above. www.svp-team.com IMGIX With imgix, representing content in accommodating and performant ways on the web becomes fun again! With this service I can significantly minimise the footprint of images for end users, provide better fallbacks for emerging web standards, and accommodate various art direction concerns all at once! www.imgix.com AXE Accounting for accessibility isn’t easy. To make well thought-out concessions for those who need assistive technologies to understand content, I turn to aXe. It provides me with invaluable recommendations before I start improvising. www.deque.com/products/axe…

You are probably familiar with the concept of user-centred design (UCD). There are many variations, but the basic elements look like this: Explore > Design > Test/Iterate/Refine > Deploy UCD is an invaluable tool that helps us uncover unmet user needs and turn these into new design solutions. However, unfolding UCD as it is used by practitioners reveals a striking pattern: science-based knowledge of human behaviour is vague, if not missing altogether. Instead, the primary focus is on how we can gather information about user needs in the design process and then, in iterative user testing loops, refine the design concepts until they are ready for deployment. Is essence, the human part of technological development is pretty much a black box. UDC AND HCD I find it useful to analytically…

YARON SCHOEN Product designer, Compass www.yaronschoen.com Although we’ve made progress, our design tools are still extremely primitive in the context of 2016. Design within organisations is still a hodgepodge of tools, files, printouts, sketches and thoughts scattered throughout teams. That is not to say we should blame our tools for everything, but having tools that help us with the design process (not only the execution), would help us move towards innovation quicker. ANDY BUDD Founding partner, Clearleft www.clearleft.com It depends on what you mean by ‘innovation’ and whether you think it’s automatically a good thing. A lot of companies are constantly chasing new ideas to give themselves a competitive advantage. However, this can often come at the expense of the basics. While it’s important for companies to explore the ‘future’,…

This month ... BIcycle shops PROFILES RALUCA MIRCEA Raluca is a UX and UI developer and digital art director based in Milan w: www.mirami.it t: @raluca_mirami MATT COOPER Matt is a web designer and branding specialist at Doncaster-based web agency Damage w: netm.ag/cooper-282 t: @MatthewCooperUK CEMAL CEBI Cemal is the founder of EXENLABS, an agency specialising in Shopify ecommerce setup w: www.exen.co t: @cemalcebi BRIEF This month we would like you to design a site for a bicycle shop. It could be a bricks and mortar shop that does repairs, or it could be an online-only bike seller. Make sure the user can find the information they need easily, and are inspired to get cycling! RALUCA MIRCEA DUO Wheel-inspired central navigation ties together the two halves of this bike retailer site Born from the passion of…

When I begin a new project, half the battle is starting on the right foot. I imagine others feel the same, as they navigate countless tools and blogs trying to work out what is new and recommended. However, no matter what problem we’re trying to solve, a few elements are always necessary, and one of them is a grid system. While Bootstrap and Foundation are great in many cases, it can take a lot of work to customise them for each project, and the array of options can make them heavy and clunky, with a lot of unnecessary features. With grids, it’s important to find a tool that is lightweight and lets you get to work right away. It should have CSS classes that are easy to use, and it…

Learning flexbox has never been easier, with a variety of resources available across the web. With these guides, resources and games, you’ll be flexing your flexbox muscles in no time. The Flexbox Game www.flexboxgame.com The Flexbox Game allows you to visually solve flexbox layout puzzles without writing a single line of code. If you’re a visual learner, this is the one for you. Flexbox Froggy www.flexboxfroggy.com An online game that teaches you the basics of flexbox while you help some frogs get across a pond. It’s never been easier to jump into flexbox. Flexbox Defense www.flexboxdefense.com Who says flexbox isn’t serious? In this game you’ll use common flexbox layouts to position cannons and thwart oncoming waves of enemies. A Complete Guide to Flexbox netm.ag/complete-282 CSS-Tricks is a great resources for…

+ There are many resources available for developers that don’t have access to the latest open-source tools. These resources can help us build a modern product that streamlines resource delivery and facilitates modern techniques that might otherwise be impossible in a security conscious environment. Prepros prepros.io Prepros.io provides the bulk of the baseline tasks found in command line build tools like gulp or Grunt. With Sass processing, file minification and concatenation, ES6 transpiling, image optimisation and more, Prepros is a viable cross-platform GUI option. Brackets brackets.io Brackets is Adobe’s open source text editor. Its extension ecosystem is navigable behind a proxy and can accomplish many of the tasks of a build tool. Compressor.io Compressor.io Compressor.io is an online tool providing lossy image compression. Using drag and drop functionality, Compressor.io can…

ABOUT THE AUTHOR RICHARD THOMPSON w: www.inviqa.com t: @Zaylril job: Technical Team Lead areas of expertise: JavaScript, AngularJS, Magento 2, RWD q: what’s the first video game you ever played? a: Treasure Island Dizzy, although my favourite childhood game was definitely Mario Kart! FACT FILE ALTERNATIVES SystemJS is looking to shake things up in the JS community. It uses JSPM for its package management, has the advantage of skipping the bundling step entirely during development, and generates productiononly bundles. HOT MODULE REPLACEMENT The hot module replacement feature in the webpackdev-server supports real time injection of updated modules into the running app when a bundle change is detected, which is great for speedier app development. WEBPACK webpack (webpack.github.io) is a modular loader for JavaScript, with a focus on large-scale singlepage applications. It…

+ If you want to get the most out of Atom’s integration, learn some of the command key combinations that let you quickly get to common GitHub pages. alt+G O : Open the current file on on GitHub alt+G B : Open GitHub’s blame page, which helps you figure out who did what on a project alt+G H : Open GitHub’s history page for this file. It allows you to see the changes on an individual document over time alt+G I : Review issues regarding this page alt+G C : Copy the GitHub URL for this project alt+G R : Compare the current branch with a different branch alt+G G : Open current repository in GitHub…