Erik Kennedy wrote up a bunch of design advice for designing for the iPhone. Like Apple’s Human Interface Guidelines, only illustrated and readable, says Erik.

This is mostly for native iOS apps kinda stuff, but it makes me wonder how much of this is expected when doing a mobile Progressive Web App. On one hand, this kind of stuff looks fun to try to build on the web, and it would be kinda cool to make your web app feel super native. On the other hand, doesn’t that make it extra awkward for Android and other non-iOS platforms?

A few other thoughts:

• How much of this stuff do you get “for free” with SwiftUI?
• As I understand it, when you build apps with Flutter / Material, the native apps that get built do some smart cross-platform stuff, mimicking how that platform does things.

Erik also does very in-depth design training with enrollment only opening once in a while, the next opens March 4th.

Direct Link to Article — Permalink

The post iOS 13 Design Guidelines, Templates, and Downloads appeared first on CSS-Tricks.

from CSS-Tricks https://app.learnui.design/a/aff_systqg5d/external?affcode=70335_li1b9fix…

Every once in a while I’m motivated to attempt to draw some shapes with <path>, the all-powerful drawing syntax of SVG. I only understand a fragment of what it all can do, but I know enough to be dangerous. All the straight-line syntax commands (like L) are pretty straightforward and I find the curved Q command fairly intuitive. Box yourself into a viewBox="0 0 100 100" and drawing simple stuff doesn’t seem so bad.

Here’s a classic example of mine that draws things with all the basic commands, but also animates them with CSS (Chromium browsers only):

Weird but true:

<svg viewBox="0 0 10 10"<path d="M2,2 L8,8" /</svg

svg:hover path {
  transition: 0.2s;
  d: path("M8,2 L2,8");
}

The other day I had a situation where I needed a UI element that has a different icon depending on what state it’s in. It was kind of a “log” shape so the default was straight lines, kinda like a hamburger menu (only four lines so it read more like lines of text), then other various states.

1. DEFAULT
2. ACTIVE
3. SUCCESS
4. ERROR

First I wrote the most complicated state machine in the world:

const indicator = document.querySelector(".element");

let currentState = indicator.dataset.state;

indicator.addEventListener("click", () ={
  let nextState = "";

  if (currentState == "DEFAULT") {
    nextState = "ACTIVE";
  } else if (currentState == "ACTIVE") {
    nextState = "SUCCESS";
  } else if (currentState == "SUCCESS") {
    nextState = "ERROR";
  } else {
    nextState = "DEFAULT";
  }
  
  indicator.dataset.state = nextState;
  currentState = nextState;
});

That opened the door for styling states with data-attributes:

.element {
  
  &[data-state="DEFAULT"] {
  }
  &[data-state="ACTIVE"] {
  }
  &[data-state="SUCCESS"] {
  }
  &[data-state="ERROR"] {
  }

}

So now if my element starts with the default state of four lines:

<div class="element" data-state="DEFAULT"<svg viewBox="0 0 100 100" class="icon"<path d="M0, 20 Q50, 20 100, 20"</path<path d="M0, 40 Q50, 40 100, 40"</path<path d="M0, 60 Q50, 60 100, 60"</path<path d="M0, 80 Q50, 80 100, 80"</path</svg</div

…I can alter those paths in …

The advantages of using SVGs in web development are well known. SVGs are small in size, can be made quite accessible, are scalable while maintaining their quality, and can be animated. Still, there is a learning curve. Things, like the syntax of SVG, can be a little tricky and having to hand-alter SVG code sometimes isn’t out of the question.

Most SVG assets allow styling to be applied in predictable ways. For instance, this circle has a hover state that functions much like any other element in the DOM.

However, a problem I’ve encountered on several front-end projects is being provided a sub-optimal SVG asset by a client, designer, or brand resources site. There isn’t anything “wrong” with these files, but the SVG code requires manual revision to achieve necessary functionality. Instead of requesting new files, it is often easier to tweak them myself. 

Styling SVGs is complicated by the fact that, as XML-based files, they act like HTML in some respects, but not in others. Let’s work with an example provided by Instagram themselves (which is also easily findable on Wikipedia). Because the spaces in between paths act as a sort of transparency this image displays whatever background has been applied behind it.

Why isn’t there a background color on the SVG so we can apply a color change on hover (e.g. svg:hover { background: #888; })? It’s because the paths fill the reverse of the space you would think they would. The negative space renders whatever sits behind this element (<body> in the CodePen examples below). Often this is not a problem and may even be desirable for large background designs to ensure organic transitions between content areas. However, because I am using this SVG as a link, I will need to alter the file so that I can style the space behind it. 

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"<titleInstagram</title<path d="..." transform="translate(0 0)" fill="#fff"/<path d="..." transform="translate(0 0)" fill="#fff"/<path d="..." transform="translate(0 0)" fill="#fff"/</svg

The Instagram logo is a perfect example of an awkward SVG file that requires more CSS finesse than most. Again, …

(This is a sponsored post.)

Are you looking for a tech job where you clock in, or for a career where you’ll be seen?

Seen by Indeed is a matching service for software engineers, product managers and other tech pros that sorts through thousands of companies — like Twilio, Overstock, VRBO, and PayPal — and matches tech talent like you to the role that’ll take you further. Not only does Seen by Indeed match on things like skills, experience and salary, but we’re with you every step of the way with free one-on-one career coaching, resume reviews and in-depth resources.

So, whether you need negotiation tips, networking strategies or just want to talk to someone about your career, Seen by Indeed has you covered. In fact, you can start by getting a free resume review that covers formatting, how to beat the resume-screening bots and personalized tips on how to show yourself off.

What are you waiting for? Put Indeed’s new tech-focused matching platform to use to move up in your career.

Direct Link to Article — Permalink

The post Seen by Indeed appeared first on CSS-Tricks.

from CSS-Tricks https://synd.co/2UKNo3L…