POPULARITY
We're talking about CUBE CSS. What is it, and how does it differ from approaches such as BEM, SMACSS, and OOCSS? Drew McLellan talks to its creator, Andy Bell, to find out.
Nello sviluppo di siti o applicazioni web, una parte sempre critica è di sicuro il CSS. Il CSS-in-JS permette di scrivere lo stile direttamente in JS e aiuta ad avere uno scope isolato, evitare codice morto e strutturare lo stile in moduli. Una buon punto di partenza per dare un occhio a cosa c'è di disponibile, di sicuro è il repo CSS-in-JS di Michele Bertoli Io personalmente uso con piacere Styled Component e mi piacciono anche styled-jsx ed Emotion Infine una naming convention come BEM e SMACSS aiutano molto a strutturare il proprio codice CSS. Photo by Pankaj Patel on Unsplash
V páté epizodě @JonasKrutil popisuje různé přístupy k psaní CSS a vybrané metodiky, které používá. Vyjmenováváme výhody a nevýhody Idiomatic CSS, SMACSS, DRY CSS, OOCSS a BEM. Vzájemně si pochválíme pár dobrých postřehů a mimo záznam si stěžujeme, že jsme měli málo času. (V podcastu často říkáme slovo metodologie, myslím, že bychom místo toho měli říkat metodika. Tak si to prosím za poslechu přeložte.) http://bruskodu.cz/epizoda/5/ --- Send in a voice message: https://anchor.fm/bruskodu/message
For full show notes, go to wyeradio.com/episode004 Topics in this episode include: Are we all a little bit crazy when it comes to oversharing? Which generation is more likely to make a mistake online? What are the best strategies to avoid SMACSS?
Fixate on Code | Weekly interviews on how to write better code, for frontend developers
Jonathan is the creator of the influential SMACSS methodology for writing scalable and modular C-S-S. He has worked his magic at Xero, Yahoo!, and Shopify, and has appeared on stage at conferences such as Generate, CSSConf, and the Smashing Conference. With 3 highly-acclaimed books, Jonathan has - a - knack for influencing devs around the world and earning the respect of the top people in the industry.
On this episode, Marcy Sutton and I talk about the importance of storytelling and how it relates to the Web field as well as speaking at conferences.Transcript:Chris: What is up boils and ghouls, and welcome to another episode of Tales from the Script, a podcast focused on front end web development, accessibility, performance, end user experience, with a little bit of horror mixed in. I'm your host, the script keeper, Chris DeMars. Today I have an amazing guest with me, reigning from the mountains of Bellingham, Washington, my good friend Marcy Sutton. What's up Marcy?Marcy: Hello, what's happening?Chris: Oh you know, just trying to get through this fall-ish, summer-ish weather in Michigan, and it's killing my sinuses beyond belief. I'm literally dying over here.Marcy: Oh no. Chris: Yeah, it's not good.Marcy: Your own horror movie.Chris: Yeah, oh, that would be a horror movie that'd sell for sure. For those unfamiliar, Marcy's one of the top influential people in the world of accessibility. For those viewers who may not be familiar with you and your work, where do you work and what do you do?Marcy: I work at a company called Deque Systems on tools for web developers to help them make the web more accessible to people with disabilities. Browser extensions, APIs, and things to basically help point out to you if you mess something up for accessibility, how to fix it. Chris: Awesome, awesome, yeah.Marcy: That's what I do in a nutshell. Chris: Sweet, yeah. I love Deque, I love that they have an office here locally, right outside of Detroit and Ann Arbor. I'm a full supporter of everything you do as well as all your team mates. Any [inaudible 00:01:50] I give on accessibility I always plug Deque or have Deque stickers, so I'm right there rooting along with you. Cool.Marcy: Oh, thanks. Chris: Yeah, no problem. You know I got your back. Today's episode, we're going to switch it up a little bit and we're not going to talk about accessibility. We're going to talk about story telling and how it relates to what we do as a front end developer and as a UI developer, myself, and as well as how that plays along with conference speaking. Storytelling, what is it? The dictionary version, it says that it's the activity of telling or writing stories, so if our storytelling ... Right, exactly. Marcy: No way. Chris: Oh that's not what we do, we don't do that any day. We just there to write code, right? This is something we do pretty much every day, depending on what type of situation we're in or what type of work environment we're in. What does storytelling mean to you in our industry, Marcy?Marcy: Well for me it's about being able to articulate ideas in an entertaining way. My background is in journalism, visual journalism. Using visuals and photography to tell stories. Really the basis of storytelling to me is something that has a beginning, middle, and an end. This can come up in so many different ways in our jobs, either just presenting something to a client, or trying to figure out the discovery phase of a project, to doing a conference talk, to trying to delight your users with something you're building for them to put in front of them. It can come up in so many different ways. When I pivoted away from photojournalism because I wasn't really seeing any good job prospects, it didn't occur to me that those skills would really come in handy later in life. Yeah, that's what it means to me, is just trying to tell stories that are compelling, that they have a starting point and an ending point, and you take it along that story arc. It really comes up in so many different ways. Chris: Yeah, I totally agree with you on that front. I've been doing web design development for a long, long time and relating that to storytelling and having user stories or personas ... I know that personas
On this episode, my guest Matt Rose and I discuss the problem between the industry and the reliance on frameworks to get the job done.
CSS ist eine Schnittmenge der Gewerke Design und Entwicklung. In der achten Folge des UIengineering Podcasts sprechen wir heute darüber wie wir CSS schreiben, welche Tools wir nutzen und welche Architekturen es gibt. CSS ist nicht CSS ist CSS … heute schreibt kaum noch ein Frontend-Entwickler direkt CSS. Wer sich viel Arbeit und Zeit sparen will, der nutzt einen Preprozessor. Welchen aber nutzt man am besten? Was steckt hinter diesen Tools? Und ist das schon wieder etwas, was ein Designer lernen muss, der womöglich gerade seine ersten Schritte in CSS gemacht hat? Wir berichten über unsere Erfahrungen mit BEM, auch ausserhalb der Design-und-Entwickler-Schnittmenge, warum das Konzept gut zu Atomic Design passt und was man sonst noch so beachten kann und sollte. Keine reine Entwicklerfolge, im Gegenteil. Termine mit #UIengineering 16.3.–18.3.2017 E-Commerce Camp Jena 29.5.–2.6.2017 webinale Berlin Shownotes & Links Preprozessoren / Architekturen BEM SASS Stylus LESS Atomic CSS SMACSS Tools zum Kompilieren Koala (Win, Mac, Linux) CodeKit (Mac) Prepros (Win, Mac, Linux)
Mina Markham built "Pantsuit," Hillary for America’s internal design system. The core CSS architecture of Pantsuit is based around a combination of SMACSS and Harry Roberts’ ITCSS, along with his brilliant namespacing patterns. How complex are systems like this? How does a well-documented styleguide and system improve your developer's workflow?
As we look forward to all the great trends and changes that will happen in 2017, in this episode we discuss our thoughts and opinions on the various development trends and notable things that happened in 2016. Looking forward on 2017, we share some of the things we’re excited to see in the new year. Items mentioned in the episode: Preact, React, Inferno, Vue JS, Ember, Angular, Box, Yarn JS, Firefox, Mozilla, Microsoft, Edge, Chakra, Visual Studio Code, Flexbox, CSS Grid, IE, TypeScript, Elm, Flow, Webpack, Progressive Web Apps, React Native, Babel, Redux, WebKit, ES6, Safari, Apple AirPods, Apple MacBook Pro, iPhone 7, Service workers, Web workers, Apple Pay, WebVR, React VR, WebAssembly, Dear JavaScript, OpenSSL, Wearables, Brexit, 2016 US Election, SMACSS, BEM, PostCSS, CSS Houdini, Net Neutrality, Netflix, Atom, Sublime Panelists: Ryan Burgess - @burgessdryan Jem Young - @JemYoung Ryan Anklam - @bittersweetryan Brian Holt - @holtbt Mars Jullian - @marsjosephine Stacy London - @stacylondoner Picks: Ryan Burgess - Electric Objects Frame Ryan Burgess - 2017 conference list Jem Young - Travelers Jem Young - Everyone Ryan Anklam - VIM - devicons Ryan Anklam - Runner’s World Podcast Brian Holt - Run The Jewels 3 Brian Holt - Fish Shell Mars Jullian - React Status Mars Jullian - Frontend focus Stacy London - Nuclide Stacy London - Yarn
Writing CSS seems pretty straight forward until your project and team starts to grow. CSS has a lot of issues, in this episode we share some advice for making it a little bit easier. We’ll also discuss ways to create a scalable CSS architecture for large projects and teams. Items mentioned in the episode: Sarah Drasner, Chris Coyier, Una Kravets, Sass, Less, Transpilers episode, BEM, Sass-lint, BEM lint, React, Radium, Aphrodite, Webpack, Ruby, Ruby Sass, LibSass, PostCSS, CSS Houdini, SMACSS, SassySass, Wai Lun Poon, Dart, xkcd compiling, Stylus, Jade, TJ Holowaychuk, Express, Koa, Go, Autoprefixer, Flexbox Panelists: Ryan Burgess - @burgessdryan Augustus Yuan - @augburto Jem Young - @JemYoung Derrick Showers - @derrickshowers Brian Holt - @holtbt Mars Jullian - @marsjosephine Picks: Ryan Burgess - Art of Readme Ryan Burgess - Nas - Wrote My Way Out Augustus Yuan - Google Code-in Augustus Yuan - CSS Stats Jem Young - Sketch Jem Young - Complete Intro to React Derrick Showers - Code Pen Derrick Showers - Nextdoor Brian Holt - CSS Wizardry Brian Holt - mrmrs Brian Holt - Una Kravets Brian Holt - Sarah Drasner Brian Holt - Rachel Nabors Brian Holt - City of Minneapolis Brian Holt - Laphroaig Madeira Mars Jullian - cssreference.io Mars Jullian - The Great Dickens Fair
Descripcion del programa En el programa de hoy, hablamos con Belén Albeza, devrel de Mozilla sobre la importancia del buen código CSS y buenas prácticas a tener en cuenta. Debatimos abiertamente sobre el uso de conocidos frameworks de diseño como Bootstrap o Foundation y que implica su uso y si es lo más adecuado en muchos casos. Hablamos de la importancia del uso de las etiquetas semánticas y como ayudan a los screenreaders o los crawlers de los buscadores. Así mismo ayudan al mantenimiento del código. ¡Como siempre espero que lo disfrutéis! Encuesta para pedir Feedback Posibles topics, entrevistados y duración del programa Eventos en Madrid OpenSource Weekends FrontFest Recomendaciones Preguntas rápidas: Belén Albeza Quién me ha inspirado: Adriel Wallick Recomiéndanos un recurso: Mozilla Developer Network Recomiéndanos un recurso: Can I use Recomiéndanos a un invitado: Blanca Tortajada ¿Qué tema te gustaría que tratásemos?: Grid Layout Contacta con: Belén Albeza Web Twitter Articles by Belén Albeza (Mozilla Hacks) Links del programa Cristina Fernández BEM OOCSS SMACSS CSS Guidelines Anna Debenham Libro de Anna Debenham GEL Mailchimp You might not need a CSS framework (video) You might not need a CSS framework (artículo) CSS coding techniques The future of layout with CSS: Grid Layouts Specificity Bootstrap Foundation Bruce Lawson Feature Queries @supports Supports will change your life Grid by Example Labs Jen Simmons Writing efficient CSS selectors Recomendaciones de Nacho Harry Roberts Hugo Giraudel Contacta con el programa Web de WeCodeSign Twitter de WeCodeSign eMail de WeCodeSign Web de Ignacio Villanueva Twitter de Ignacio Villanueva
Descripcion del programa En el front-end cada seis meses aparece un nuevo framework o librería y creemos que va a camabiarlo todo. Por ello en este episodio hemos invitado a Miguel, CTO de Redradix en el que hablamos de su visión del panorama actual. Le pregunto por multitud de metodologías, tecnologías y buenas prácticas que se usan en nuestro día a día para saber que es lo mejor en cada situación y su punto de vista. Si no te asusta este contínuo cambio este es tu programa. ¡A disfrutar se ha dicho! Encuesta para pedir Feedback Posibles topics, entrevistados y duración del programa Recomendaciones Preguntas rápidas: Miguel Martín Quién me ha inspirado: Elon Musk Recomiéndanos un recurso: MDN Recomiéndanos a un invitado: Elías Alonso ¿Qué tema te gustaría que tratásemos?: Internet of Things Contacta con: Miguel Martín Twitter Github Contacto de Redradix Links del programa BEM SMACSS OOCSS Grid Layout Flex Layout LESS Sass Stylus Hammer CodeKit Atomic Design Bootstrap WordPress Fundation jQuery Backbone Ember Angular React ES6 (no oficial) Bluebird Flux React Redux Babel Grunt Gulp NPM Bower Browserify JSPM Jasmine Mocha Karma Sinon Chai Istanbul Nightwatch AirbnbJS Frameworks de JavaScript Recomendaciones de Nacho State of JavaScript Front-end Event Alistapart Recent Conference Talks Worth Watching Must-Watch CSS Must-Watch JavaScript Contacta con el programa Web de WeCodeSign Twitter de WeCodeSign eMail de WeCodeSign Web de Ignacio Villanueva Twitter de Ignacio Villanueva
Встречайте новый подкаст от старых друзей из uWebDesign. На этот раз мы много говорили про UX: что можно позаимствовать из видео-игр и дизайн неудобств. Кроме этого обратили внимание на новый стандарт HTML 5.1, посмотрели релиз W3 Total Cache 0.9.5 и посмотрели как успевает всё изучать Джонатан Снук, создатель SMACSS. Тему к следующему выпуску предлагайте здесь: Тему к подкасту #98. «Дизайн» Чему UX дизайнерам стоит поучиться у геймдизайнеров. Rob Janoff рассказывает про логотип Apple. Дизайним неудобства. «Разработка» Настоящие разработчики выбирают правильный хостинг!↓ Готовится к выходу HTML 5.1. Как я учусь (Джонатан Снук). «Светские новости» Spectacles от Snapchat. «WordPress» W3 Total Cache 0.9.5, новый релиз. «Начно-популярное» «Мы используем лишь 10% от всего мозга» и другие мифы. Спасибо всем, кто предлагал темы к этому выпуску, с ними можно ознакомиться по ссылке: Темы к подкасту #97. Удачи и дай вам Бог на эти коротенькие семь дней.
In this episode, Adam talks to Jonathan Snook, author of SMACSS, about finding the balance between utility and component driven CSS approaches, design systems engineering, and using container queries to build better responsive web experiences. Sponsors: Laracasts, use coupon code FULLSTACK2016 for 50% off your first month Rollbar, sign up at https://rollbar.com/fullstackradio to try their Bootstrap Plan free for 90 days Links: Snook's Blog SMACSS, Jonathan's book Atomic CSS "Staffing a Design Systems Team" "Why I Value Truly Responsive Web Design" "Container Queries: Once More Unto the Breach" Scott Jehl on container queries CSS-Element-Queries library
In this episode: the pit of despair, server-side Swift, graphic text, front-end methodologies, and changing your mind! If you have questions of your own, you can tweet us at @immutablefm, email us at questions@immutable.fm, or join our Slack team! Sponsors: Linode Topic 1: What are the best resources for intermediate developers that are in the so-called “pit of despair”? Aubrey's tweet with the image Topic 2: What's the significance of server-side swift? Swift IBM Cloud Swift Ben Scheirman NSScreencast NSDateFormatter.com Mustache Stencil Kyle Fuller Parse Topic 3: I'm currently in the early stages of development/design for my first app. When designing in iOS, is it common today for apps to use graphic text to get a specific custom look in certain areas rather than using text generated through code? Is graphic-generated text lazy? H&Co's Made for Mobile Topic 4: What front-end methodology do you usually use in your projects? SMACSS, BEM, other? Also thoughts on atomic design? SMACSS BEM Jonathan Snook OOCSS Functional CSS Atomic Design Brad Frost Topic 5: What is something you both have changed your mind about recently?
Since the age of Geocities Era, CSS has been evolved a lot. It has seen the transition from plain CSS to emerging development framework such as such as OOCSS (Object Oriented CSS), SMACSS and now BEM. BEM – stands for block, element, modifier. By definition, it is a CSS development methodology specifically designed for flexibility and ease of modification in the mind. In the given podcast episode, Atish Narlawar talks to William Anderson about the BEM. William is a die hard Technologist, Software Engineer and part time Professor at The New School University New York. The conversation gets a start by going through high-level CSS evolution since the 1990s. William shares the fascinating things in the CSS in 2015 like logical integration, media queries, and animations. Along with he also explains how CSS development became quite complicated down the line due to cascade, responsive design and the javascript itself. One of the biggest challenges gets added to the newfound complexity includes messy CMS, broken semantics and SEO refactor, and BEM emerged as one of the possible solutions to address these challenges. With the example of feature card, William explains how BEM tries to fix the issues mentioned, such as complexity, semantics, and decoupling. Using zero specificity, he shares how seamlessly his team were able to integrate SEO tag change in the active project. William also shares his valuable insight regarding how BEM works with other CSS methodologies such as OOCSS (Object oriented CSS) or SMACSS (smacks). He tries to clarify the lingering haunting doubts about BEM such as BEM is too verbose, and it pollutes the DOM with Blocks, Elements, and Modifiers all cooked in class names. He shares what could be the best strategy for initiating the adoption of BEM into existing projects, and entirely possible barriers team may face during the transitionary switch. In the end, he also shares valuable resources where someone should start digging about BEM methodology and its related practices. Venue: Brooklyn, NY. Host: Atish Narlawar Guest: William Anderson @TheWAAnderson
Show notes: http://betweenscreens.fm/episodes/81
In our very first episode, Adam talks with Matt Stauffer of Tighten Co about OOCSS, BEM, SMACSS, preprocessors, common architecture pitfalls, and CSS semantics. "Organizing CSS: OOCSS, SMACSS, and BEM" by Matt Stauffer Nicole Sullivan on Media Objects SMACSS "MindBEMding" "Bootstrap without all the debt" "Medium's CSS is actually pretting f***ing good" "About HTML semantics and front-end architecture"
Style guides, once the exclusive domain of print designers, are finding their way onto the web. Built out of HTML and CSS, such style guides are handy tools for the design process, for maintaining sites over time, and for making collaboration across teams much easier. Anna Debenham joins Jen Simmons to explain.
Jonathan Snook joins us and talks about SMACSS, writing, workshops and more! Listen to hear about how Jonathan took an idea and expanded that idea into a book and series of workshops. Also find out his take on how to keep material fresh and interesting when you repeat information for different groups of people. To […]The post Jonathan Snook Turns Writing into Speaking appeared first on Ladies in Tech Podcast Feed.
In this podcast recorded AFTER True North PHP, Chris and Ed are joined by the esteemed Jonathan Snook, web developer extraordinaire. We talk about the heady days of Twitter app dev, how Jonathan got to be a Big Deal, and why there are so many Snooks in web dev. Check out our sponsors, Engine Yard and WonderNetwork Follow us on Twitter here. Rate us on iTunes here Listen Download now (MP3, 26.5MB, 59:40) Links and Notes Remembrance Day Hardcore History podcast Dark Secret Place Spaz Snook’s site SMACSS
The first episode of 2013 find Chris and Ed talking about the tragedy of Aaron Swartzs' suicide, both in the context of governmental power and mental illness. We also talk about Ed’s favorite (and only tolerable) Apple-related podcast ending. Finally, Ed rambles about SASS, a superset of CSS3 that makes writing CSS less painful. We have a new sponsor! EasyBib is looking for junior and senior PHP devs to work on their awesome academic web app. Check out the job description and email stuff to till+php@imagineeasy.com. As always, thank you to our awesome sponsors at Engine Yard and Wonder Network for providing cashmoney and bandwidth for our live stream, respectively. Rate us on iTunes here Follow us on Twitter here. Like us on Facebook here Listen Download now (MP3, 29MB, 1:02:33) Links and Notes Lincoln Park Chicago Appl store Linkin Park’s Mysterious Cyberstalker Aaron Swartz How to Get a Job Like Mine. “I followed these rules. And here I am today, with a dozen projects on my plate and my stress level through the roof once again.” Jacob Applebaum (IOError) Centre for Addiction and Mental Health National Alliance on Mental Illness Hypercritical podcast Mike Wilner SASS SMACSS – Scalable and Modular Architecture for CSS