slack   11899

« earlier    

Popular Unrest .
this is the ghost story about the Capital i mentioned in SGS <http://popularunrest.org/>
slack  intelandauto 
21 hours ago by datasociety
Slack Update: React to Messages with Reactji to Kick Off Zaps - Updates - Zapier
An emoji is worth a thousand words—and with the latest update to the Slack + Zapier integration, it can kick off a Zap, too. Use the New Reaction Added Trigger to kickstart a workflow whenever you add a reactji (Slack's term for reacting with an emoji) to a Slack message. ...
slack 
22 hours ago by donovanwatts
Building more intricate workflows in Slack with Dialogs
Using Dialogs, you can build forms in Slack that do all sorts of things (for bots).
bots  slack  api  ui-conversational 
yesterday by lorenzck
The best Slack groups for UX designers – uxdesign.cc
Tons of companies are using Slack to organize and facilitate how their employees communicate on a daily basis. Slack has now more than 5 million daily active users and more than 60,000 teams around…
slack 
yesterday by aaronneilwood
Rebuilding slack.com – Several People Are Coding
In August, we released a major redesign of slack.com, and we want to give you a peek behind-the-scenes. Rebuilding our marketing website was a massive project that took careful coordination across a…
CSS  Grids  Development  FrontEnd  Slack 
2 days ago by gregg
rauchg/slackin
slackin - Public Slack organizations made easy
slack 
2 days ago by raygrasso
Rebuilding slack.com – Several People Are Coding
We use some features of Grid that aren’t currently fully supported in all browsers, the most notable being percentage-based grid-gap. Although support for this has been implemented in some versions of Safari, we still needed to anticipate its absence. In practice, a Grid object is styled as follows:
@supports (display: grid) and (grid-template-columns: repeat(3, 1fr)) and (grid-row-gap: 1%) and (grid-gap: 1%) and (grid-column-gap: 1%) {
.c-photo-collage {
display: grid;
grid-gap: 1.5rem 2.4390244%;
}
.c-photo-collage > :nth-child(1) {
grid-column: 1 / span 3;
grid-row: 1;
}
.c-photo-collage > :nth-child(2) {
grid-column: 2;
grid-row: 2;
}
.c-photo-collage > :nth-child(3) {
grid-column: 4;
grid-row: 1;
align-self: flex-end;
}
.c-photo-collage > :nth-child(4) {
grid-column: 3 / span 2;
grid-row: 2 / span 2;
}
};
Any browser that doesn’t meet the query requirements will use our flexbox fallbacks instead.
@supports not ((display: grid) and (grid-column-gap: 1%)) {
/* fabulously written CSS goes here */
}


---

Inclusive, from the start
Another major goal was to ensure that low-vision, screenreader and keyboard-only users could navigate the site with ease. While starting from a clean codebase, we were able to make many impactful improvements to color contrast, semantic HTML and keyboard accessibility with little additional effort. Additionally, we were able to work in some new features for a more accessible experience. We added a skip link before the navigation so that users could bypass the menu if desired. For a better screenreader experience, we added an aria-live region and helper functions to announce form errors and route changes. In addition, interactions are keyboard accessible with noticeable focus states. We also strived to use clear, descriptive alt text.
Looking Forward
There are always more wins to be had for better performance, maintainability and accessibility. We are refining our site telemetry to better understand where the bottlenecks lie and where we can make the most impact. We’re proud of the progress we have made; progress that will surely serve us well as we look to create a more pleasant experience for our customers around the world.
css  webdesign  webdev  grid  slack 
2 days ago by sherbondy

« earlier    

related tags

2017-10-14  2017-10-16  2017-10-18  accessibility  analytics  and  api  apigateway  auditing  automation  aws  bitmoji  boat  bot  bots  business  by:minamarkham  calendar  carlchenet  casestudies  chart  chat  chatwork  ci  cli  collaboration  command-line  communicate  communication  concierge  continuous-deployment  continuous-integration  copy  county  css-grid  css  css:grid  custom  decision  delivery  design  development  disaster-relief  disaster  diversity  docker  education  emacs  email  emoji  emojis  engineering  events  facebook  flex  flexbox  from:medium  frontend  fundinginfo  games  gender  general  gif  github  go  golang  google  grid  grids  guidelines  heroku  hiring  howto  icon  inspiration  intelandauto  intranet  iphone  irc  irssi  itunes  javascript  journalism  js  jw  labor  lambda  layout  lifestyle  local  mac  macbook  management  marketing  mathematics  museums  node  nomad  notifications  opensource  php  platformaccount  privacy  producthunt  productivity  programming  puzzle  random  read  reading  relief  resources  responsive  robot  rss  scheduling  security  sentry  serverless  setup  sip  social-tools  software  sonoma  task  tech  todo  travis  twitter  typography  ui-conversational  ux  web  webdesign  webdev  workplace  workplacebyfacebook 

Copy this bookmark:



description:


tags: