Podcast appearances and mentions of sara soueidan

Wes and Scott talk about the origins of Syntax, sharing how a friendly course name conflict led to a mastermind group, then a podcast, and eventually a full-blown media brand. They also reflect on key milestones, from early episodes and sponsorships to joining Sentry, expanding the team, and what's next. Show Notes 00:00 Welcome to Syntax! 00:51 How Wes and Scott met Scott Tolinski & The Origins of LevelUpTuts LevelUpTutorials WesBos.com 09:31 How Syntax got its name Episode 001: React Tools 15:30 Getting sponsors Delicious Brains FreshBooks 18:53 Hasty Treats and expanding the show 22:36 Adding interviews to Syntax SVGs with Sara Soueidan 23:38 Syntax's first live show Live at JAMstack_conf 27:58 Brought to you by Sentry.io 28:34 Acquisition by Sentry 600th Episode! Major Announcement and Swag Giveaway! 33:56 Hiring a producer Randy Rektor 36:39 Transitioning to video and growing the team Rating and ROASTING Coding Desk Setups CJ Reynolds Kaitlin Bloom 41:47 Launching the merch store Sentry.shop 46:01 The future of Syntax 47:23 Sick Picks + Shameless Plugs Sick Picks Scott: Crucial X10 Pro 4TB Portable SSD Wes: MONVICT Cordless Glue Gun Shameless Plugs Syntax YouTube Channel Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

In this episode of Syntax, Wes and Scott talk through some modern responsive design techniques that you may not have heard of, or haven't had a chance to use yet. Linode - Sponsor Whether you're working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode's Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It's an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax Show Notes 00:47 Clean Talk 03:55 The menu of responsive design Syntax 154 with Sara Soueidan 06:52 Responsive design basics 11:54 What should you build for first in 2022? 16:15 Shrink and grow until it looks bad 21:36 Menus in responsive 23:43 Sponsor: Linode 24:13 Grid systems 28:08 Grid and Flexbox CSS Grid Course Flexbox Course Can I Use 35:02 Sponsor: LogRocket 36:00 Container queries 45:56 FitText 49:12 How do you test these types of things? 51:15 Future techniques coming 53:28 Sponsor: Freshbooks 53:56 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: Lutron Light switches Wes: Sunco Lighting BR30 Shameless Plugs Scott: LevelUp Tutorials Wes: Wes Bos Tutorials Tweet us your tasty treats Scott's Instagram LevelUpTutorials Instagram Wes' Instagram Wes' Twitter Wes' Facebook Scott's Twitter Make sure to include @SyntaxFM in your tweets

We ask why accessibility really matters, and why is it so important to get it right? Smashing's Vitaly Friedman talks in depth to Sara Soueidan to find out.

0:22 - Episode begins2:22 - Adalo launched a new Component in the Marketplace, Interstitial ads4:09 - Jetboost dropped some new features!7:42 - Connor Finlayson has a new video out “11 tools to level up your Webflow game” 8:27 - Sara Soueidan announced a new accessibility course!9:19 - Finsweet announced a new show, Critique!12:40 - Finsweet also released Nobull into beta (more on that later in this episode)12:50 - MKT1, dropped a newsletter article about how to build your site right the 1st time14:00 - Jan Losert posted a new project built in Webflow, prismdata.com15:05 - Softr dropped some new updates15:40 - Coda launched a new toolbar and cover image!16:40 - Glide announced “Apps for Work”17:52 - Glide is looking for Enterprise customers who want to build on MySQL19:55 - Integromat added a Zoom integration20:43 - Tally Forms now has multi-language support21:06 - Debuild is joining the text based app creation party25:40 - Httpdump looks cool (A simpler version of webhook.site)26:23 - Episode Begins27:50 - Finsweet's launch video40:49 - Docs

Sara is a Lebanon-based UI engineer helping brands build modern, resilient, and inclusive user interfaces. She gets into how she discovered the freelance career path and talks about how a curious mind and sense of resourcefulness has fueled her success thus far.

Resources:cassie.codestwitter.com/cassiecodesAmelia's TwitterNate's TwitterKurt Vonnegut and Narrative ArcsSara Soueidan's Post on SVG Filters: The Crash CourseWelcome to the newline podcast. Our show is a conversation with experienced software engineers where we discuss new technology, career advice, and help you be amazing at work.I'm Nate Murray and I'm Amelia Wattenberger and today we're talking with creative coder Cassie Evans.In this episode we talk about something often neglected in web design today: how to bring whimsy and joy to your usersIn our chat we talk about how the old web had entry points to programming and where we might find find that today.And open with a story about how she, as a child, sold animated cursors for donuts, which felt like magic - and how even today snippets of code feel like magic spells.We loved our conversation with Cassie, and think you will too, let's dig in!Cassie Evans PodcastAmelia: [00:00:00] Welcome to the newline Podcast. Nate: [00:00:08] Our show is a conversation with experienced software engineers, where we discuss new technology, career advice and help you be amazing at work. I'm Nate. Amelia: [00:00:17] And I'm Amelia Wattenberger. Today, we're talking with creative coder, Cassie Evans. In this episode, we talk about something often neglected in web design today, how to bring whimsy and joy to your users. In our chat, we talk about how the old web had entry points to programming and where we might find that today. Nate: [00:00:35] We open with a story about how Cassie as a child, sold animated cursors for donuts, which felt like magic. And how even today, snippets of code still feel like magic spells. We loved our conversation with Cassie and we think you will too. Let's dig in. Cassie: [00:00:53] We're not Nate: [00:00:54] live and so we just it to be fun. One of things is I really love your talks and you talked about how the web needs more whimsy. I just love that so much. In one of your talks, you mentioned that you sold neopets pages for donuts. Cassie: [00:01:11] Yes. Nate: [00:01:11] Like when you were a child. Can you tell me more about that? For context, I think you and I grew up with some of the similar early web stuff. For example, when I was younger, I once got on the Internet for hours and then my parents were furious, because my dad had gotten an accident at work and his boss was supposed to call. I'd been tying up the Internet, because I was on dial-up for hours. Yeah, I just love the old classic web style, like Myspace and neopets. We can get into that some, but can you tell me about how you sold neopets pages for donuts? Cassie: [00:01:40] Yes, definitely. Yeah, firstly you mentioned dial-up. I missed that so much. It's so close to my heart, because I remember we had one computer at home, that was our home computer and I was only allowed to use it for educational things for a lot of times. I used to wait until my parents were asleep and then I'd creep downstairs with blankets and I'd have to wrap the whole computer up in the blanket, so that it wouldn't make the noises, so that I could dial-up to the Internet. I just sit there clutching it to my chest, trying to dampen down the noises, so they wouldn't wake up. Why Nate: [00:02:15] were modems so loud, right? Cassie: [00:02:17] So loud. Nate: [00:02:18] Yeah. Cassie: [00:02:21] Even that noise now gives me anxiety, because it sounds like being downstairs, terrified that my parents are going to wake up at any moment. I love that. Yeah, the donuts. I didn't have money for the tuck shop when I was younger. I got school dinners. I didn't have packed lunch boxes and they weren't really into giving us sugary snacks. They were quite healthy. I got quite jealous about all of the other kids having donuts from the tuck shops. Around that time, everyone started making Myspace profiles and neopets pet pages. My one was really good and lots of people asked me whether I could make them sparkly cursors and stuff. I started up a little side hustle and swapped sparkly cursors for donuts. It was excellent. Amelia: [00:03:11] What is the deal? Is it one cursor for one donut? Cassie: [00:03:15] Yeah, I think it was something like that; a cursor for a donut. This Nate: [00:03:19] is amazing. I don't actually understand how this would work. How much programming was it? Were you finding GIFs? I'm interested in particularly one, for the entrepreneurship side, two, because it's on-brand that you're adding sparkles. Then three, is the learning programming aspect. I love this idea, for example, that some of the best ways to learn are just when you're self-motivated and you're just trying to do stuff. I learned how to program, because I was tweaking web pages this similar way and I worked my way down. I'm interested. I didn't actually use neopets necessarily, but what were these cursors and how did that work for as much as you remember? Cassie: [00:03:53] As much as I remember. I think it was very much accidental. I don't think that I realized that I was coding at the time. I didn't really have much of an awareness of what coding was. I used to play The Sims me other early games as well and they had cheat codes that you could type in. I saw it as the same thing. It was Internet cheat codes that you went to some websites and they had pictures of different sparkly cursors, or different backgrounds, or different CSS effects and you just copied a cheat code and then you put that cheat code onto your – and I didn't really know that that's what the building blocks of the web were. I didn't understand that at the time. I thought that they were a little magical snippets that you just – I mean, they still are. Nate: [00:04:42] Right, they still are. They still are Cassie: [00:04:43] magical snippets, aren't they? I still feel like that nowadays. Some new CSS comes out and I'm just like, “Wow, another magical snippet. Amelia: [00:04:52] This is amazing.” They keep making them. Cassie: [00:04:54] Yeah. Nate: [00:04:56] I learned some early programming, we would play these old games, they were called MUDs. You'd Telnet in. It's before SSH, you Telnet. It's like SSH, but insecure. You Telnet into these servers and play these text games, where you're go to the sword shop or whatever and you buy a sword. Then I remember that what we would do is we were like, “Oh, we could host our own server.” It's the same thing. We didn't know we were We were just copying and pasting these codes, make our own server and then we're like, “Oh, we can give ourselves our own items.” We're copy this snippet and then you realize now you have these God-like powers of playing this game that you enjoy and then realize like, “Oh, shoot. What else could I do with this power?” That was actually one of my entry points to programming too. I think that's really special. One of the things that you've talked about too is well, I don't know. What are some of these entry points that people have now? What could we do to give this, serendipitous entry point into coding for kids today? Cassie: [00:05:46] It's really difficult, because I've looked around and I haven't found anything that has that same accidentally educational aspect to it. There's some really amazing things that have the same sense of community, because neopets for me and Myspace to a degree had this community aspect, where there were lots of other young kids who were all hacking around and changing things and you learnt things from each other. I think that we definitely got that in platforms like CodePen and Glitch. They're really great, because they lower the barrier to entry. They abstract away all of the fiddly setup and build tools and all of that stuff and they allow people to just jump in and start making things and remix things that other people have made and fork things that other people have made. I think that's really great, but I don't think we already have any of those accidentally educational things around anymore, which is a shame. People have to be a lot more intentional. They have to want to learn and know what they're there for in order to start off. I Amelia: [00:06:58] also think about this with cars. I think it's a little bit related. When I first started dating my husband, he had a – it was 69 Mercury Cougar, a really old car. He could work on it, because there's no computer, you can understand what the parts are pretty easily. You can just look at them and be like, okay, this turns and it turns this other thing. I think the Internet today is so much more complicated. The bar for what's cool on the web is so much higher that when we were kids and we made a sparkly cursor, even our parents would be like, “Oh, wow. How did you do that?” It's hard to make something impressive now and it's just so overwhelming. I think that's also part of why Glitch and CodePen can be so helpful, because they take care of the nitty-gritty for you, so you can focus on being creative. Nate: [00:07:51] I'm optimistic. I think that I've seen some movement there with Minecraft maybe, Roblox is interesting. Yeah, there's some interesting ideas happening there. There's even some interesting, like more deliberate code for kid tools. There's one called Microsoft MakeCode Arcade. It's like Scratch, but it's designed for building games. Even that, board is on educational. I think there's something special, where it's not deliberately educational, but you learn from it that it's important. Cassie: [00:08:19] Scratch is so cool. I really love Scratch. The Harvard computer science course, the first thing that they get you to do is a thing in Scratch. When I started that, I was like, “Oh, I bet this is really – it's really hard. It's that like Harvard computer science course.” Then they were like, “We're going to build a game in scratch.” Wow, it's Nate: [00:08:39] cool. You're like, “I can do this. Yeah.” I hope that there's more tools that come out, particularly on tablets, because one of the things I notice with my kids is that they're using an iPad a lot more frequently than they're using a computer. I think just the ethos and the ecosystem of tablet apps is it's a lot more locked down. You can't necessarily look under the covers, like you would with Vue source on a webpage. I think any tools like that that let you learn are really interesting. There's a scratch junior that my kids use just to build little stories and little animations and I love that, but there's not too many tools yet, but I'm hoping we can create more. I Cassie: [00:09:15] feel there's some stuff in the hardware hacking, crafting worlds. I think that coding and crafting, the intersection of that, there's some quite interesting stuff happening, because I think you can fall into that accidentally as well if you're interested in hacking around with things. You can end up, “Oh, well. I want to make these lights flash and oh, I'm going to have to learn Python in order to do that.” I think that that's still yeah, accidental gateway Amelia: [00:09:51] into things. Yeah, I love that. I think some of the people I used to work with, they would spend time with their kids making a Halloween skull with an Arduino that makes its eyes flashed. It's such good bonding time, and because it's fun for everyone. I enjoy doing that. Cassie: [00:10:05] I was Amelia: [00:10:06] like, “I need a kid, so I mean, Cassie: [00:10:08] I can have an excuse Amelia: [00:10:09] to do Nate: [00:10:10] this.” Right. Yeah, I know. Right. But our kids are doing that now with cosplay stuff, is they first were doing little paper craft creatures. They would print off a template and they cut it out and they'd be like, “Oh, we want to make our own,” so then they're learning how to use blender to do their own 3D modeling. Then use, there's this tool called Pepakura, which you can use to slice 3D models down into a little papercraft, like Minecraft creature or whatever. Then they're learning computer skills for using Figma to edit the templates and they're using Blender to learn 3D modeling. They're not good at that yet, but you can see the progression. They're going to take over the world. Yeah. I recently watched one of your talks on CSS filters and it totally blew my mind. I've been programming for since we talked about since dial-up, and I didn't even know that SVG had filters. I thought that was so fascinating. Can you talk a little bit about your recent work on doing paintings with SVG? Cassie: [00:11:05] Yes. I've really been loving SVG filters recently. I got into a little bit of a slump at the beginning of lockdown, where I wasn't feeling creative at all. The idea of programming, coding sounded not so much fun. I wanted to do something a little bit more relaxing. Yeah, I find SVG and SVG filters really fun to play around with, because it's more declarative. You have some filter primitives and filter primitives they work – well, filters they work a lot like audio programming, where you've got inputs and outputs. You can chain things together. You have different filter primitives inside a filter element and you can feed the output of one into the input of the next one and the output of the first two into the input of another one. That means that there's infinite possibilities. Ultimately, all you're doing is just changing a couple of values and some attributes. It feels like putting Lego blocks together. You don't really have to think through any intricate logic. You can just put some filters together and see what happens. Yeah, I find that really fun, the randomness that you get not being able to predict the outcome. I've played around and I accidentally ended up with something that looked a little bit like a pencil line. Then I just riffed on that and made some things that looked a bit like hand sketched paintings, which was a lot of fun. Nate: [00:12:42] It's gorgeous. It is one of the most beautiful SVGs I've ever seen. We'll put a link in the show notes. It was just delightful and mind-blowing. I think that yeah, your talks on SVG are really a Cassie: [00:12:55] delight. That's so lovely to hear. When you have the chance to play with these things, is Amelia: [00:12:57] that all through just side projects? I know when my – at least my job title was developer, most jobs you don't get to play around or do something super creative. Is this something you get to do in your day-to-day job, or is it mostly just side? Yeah, what is Cassie: [00:13:16] your day job? My day job, I am a front-end developer at a company called Clearleft in Brighton. I'm lucky, because my job we have a mixture of client projects, but we also – well, not so much right now, because of the pandemic, but we also do events. The event sites are a chance to flex your creative muscles a little bit, try out new things. I get to explore things creatively through the event sites and then focus on building accessible, solid front-end websites for Amelia: [00:13:55] my day job. Oh, that's a nice balance of the more focused and the more creative. Are you usually working with designers? Cassie: [00:14:02] We have a lot of really good designers at Clearleft. It's hard, but we try to avoid pigeonholing people into just one role. If people want to explore a little bit more design, but they're a developer, then they try to give people space to do that. I'm currently working on a little side project site at work. I'm getting to do design and stuff on that, which is really nice. Nate: [00:14:28] You mentioned that you used to draw a lot and I feel that , experience in your work. Your chameleon, for example, is just adorable and obviously done by someone who has art skills outside of programming. What does your process look like? Are you sketching out ideas for what you want to see on paper, or do you just go straight to SVG? How does that work? Cassie: [00:14:48] It's very much technology-driven, rather than aesthetics first, actually. I tend to get ideas, because I'll be looking at a particular technology and then I'll think, “Oh, how could I demonstrate that? Or how could I play with that in a way that is aesthetically pleasing, or fun?” The chameleon, I wanted to play around with getting colors from a webcam. I did that and it was just changing Amelia: [00:15:16] a rectangle Cassie: [00:15:17] on the screen to different colors. I was like, “Well, that's fun, but it would be so much more fun if it was a chameleon.” Nate: [00:15:25] I love that in your work. Amelia does this too, I think, in that you build something and then it's like, okay, that's fine, but how do we make that more fun? Then you'll take the time to put in those details and it's really delightful. Cassie: [00:15:38] Yeah, I am such a huge fan of Amelia's work. Your article about the SVG viewBox, I have directed so many people at that. I had a whole lengthy explanation in a workshop that I did about the viewBox and then I was just like, well, actually just look at this wonderful article, because it explains it a million times better than I could. That's so Amelia: [00:15:59] good to hear. I feel like I do these things for myself. I'm like, okay, well I need a little toy example. Then I'm like, well, I might as well make it into a telescope. Might as well just let other people use it, I think the way you described your processes, it's very just like, playing around for your own personal benefit. Then just like, “Well, if I enjoy this, other people may also enjoy this.” You released your new website recently and I feel like it got a lot of attention, especially for the bottom. You have a little SVG of yourself and the eyes follow the cursor around. It's just really delightful to play around with, because there's so many websites out there. It's nice to even stumble across one, where you're like, “Oh, this person didn't just make a nice looking well-designed website, they took the next step to make it delightful and take a chance to connect with the user.” Cassie: [00:16:56] I love that so much. I'm not a huge fan of really whiz-bang websites, so websites that you land on and just everything animates and your cursor gets hijacked and your scroll gets hijacked and all of that thing. I find that really overwhelming. I absolutely love it when I'm navigating around a website that looks on the surface, like it's just your average website and then you hover over something, or you click something and it does something unexpected and joyful. It makes you smile. It makes the website feel a lot more human. Amelia: [00:17:32] I think you have to really understand how the web works to create a website that's both really easy to read and accessible and also has that next level. I feel it's easy to do the scroll-jacking, or just animations everywhere, but to have a little bit of restraint and to make it so that people with slower connections, or using screen readers can even navigate it as well. I think that's really awesome. Cassie: [00:17:58] Yeah. I think I had a head start, because I was using 11T. You get out of the box just a lot of performance benefits there. It's a static site generator. I think the tagline is it's a very simple static site generator. Nate: [00:18:12] On the tooling side, I've noticed that you use GreenSock for a lot of your animations. I've never really used GreenSock, but I've seen that a lot of CodePen people use it. Can you just talk about GreenSock a little bit, like what you about it and explain to me why it's so popular? Cassie: [00:18:29] Yeah. I have to start with the disclaimer that I don't work for GreenSock and GreenSock don't pay me any money. Because whenever I get really excited about GreenSock people are like, “She's got to be selling something.” Yeah, I love GreenSock so much. There are a whole bunch of different animation libraries out there, like JavaScript animation libraries. I think if you're doing things with HTML DOM, or say you're using a JavaScript animation library to trim some 3JS stuff, you're mostly just concerned with changing some numbers and a lot of the animation libraries handle things exactly the same way. The problem with SVG land is different browsers handle SVG transforms differently. You can end up with things moving around in unexpected ways in some older browsers and GreenSock, they have gone above and beyond to iron out all of these browser inconsistencies. You can be very sure that your SVG animations are going to work the way that they should do. They Amelia: [00:19:31] a lot more. They'll make really nice animations between things. They have this new scrolling library, right? Cassie: [00:19:39] Yeah. This is another really cool thing about GreenSock is that they've got the core GreenSock library. Their licensing model gets a bit misunderstood, because they're one of the only JavaScript animation libraries that aren't open source. But their core animation library is free for the majority of use cases. I think if you're selling an end product to multiple users, then you have to pay for it, but for 99% of people, it's free. Then they have these additional plugins. The core library does everything that you would need it to do and then the plugins are extra fun and some of the plugins are free and then some of them are behind a membership fee, but they've got a whole bunch of different SVG-specific plugins. They've got ones that help with SVG stroke animation and they've got ones that do morphing. Yeah, they've just released scroll trigger, which is amazing. I've played around with it a little bit. It uses one event listener behind the scenes, so it's really performance and just really intuitive as well. I think that's, yeah, another thing that I really love about GreenSock is the docs. They're just really good. They've got so many good animated examples in there and the forums are really, really friendly. It's like the opposite of stack overflow, can I say that? People are nice there. You post a question and I think as a newbie, I started off doing banner ads animation. That was my first job. I didn't have anyone to learn from and I had no idea what I was doing and I'd post on the GreenSock forum and someone would just jump in and help me out immediately. Yeah, it's really good. That's a Amelia: [00:21:22] really interesting business model. Cassie: [00:21:23] It's difficult to explain to people, but I understand why they do it, because it means that they don't have to rely on any external sponsors. They can just focus their time purely on updating it, which is why a lot of the other animation libraries don't have the time to put in the effort to make sure that things work with SVG cross browser, whereas GreenSock do. Oh, Amelia: [00:21:45] and it also looks like you can use any of the plugins on CodePen? Cassie: [00:21:50] Yes. It's super cool. That's the coolest thing. I think that's why so many people on CodePen use GreenSock, because everything's available to use on there. Amelia: [00:21:58] Yeah, that's super cool. I haven't had a chance to play with it yet, but it seems like it's – just a really great way to lower the overhead of if you're like, “Oh, I want this button to have a particle system and explode, or I want it to morph into this other thing.” It might just be too much work Cassie: [00:22:13] to do. We all have deadlines at Amelia: [00:22:14] work. If anything, even haves that effort, it might just make it worthwhile. Yeah, definitely. I think there's been quite a few times where people have gone, “Wow, that's Cassie: [00:22:23] a really cool animation that you've done.” Then see that it's five lines of green top coat. That's all Amelia: [00:22:32] it takes Nate: [00:22:33] sometimes, though. Yeah. It's Cassie: [00:22:35] also a lot easier to tweak your animations with green chords, or just an animation library in general. I've struggled with very complex animations with CSS, because you can't chain them together. It's really nice to have a timeline and all that. Amelia: [00:22:54] Yeah, are there any other tools like GreenSock that might be really useful for someone who is new to the more creative coding Cassie: [00:23:02] space? I don't Nate: [00:23:03] know. I'm curious on how to learn how to do SVG animations as well, because I feel the things that actually both of you create just feel like black magic to me. I don't really understand SVG super well, or particularly CSS animations. Golly. I am not good Amelia: [00:23:18] at Cassie: [00:23:19] that. Golly. Amelia: [00:23:21] I thought of one, which is similar. I've always felt like I've seen 3D stuff on the web. I don't know what wizard you have to be to have this 3D scene in a web page, but I will never be there. Then you discover 3JS Cassie: [00:23:38] and it's like – A frame as well. A Amelia: [00:23:41] frame. Cassie: [00:23:41] Yeah, A frame is really cool. It's a web framework for building virtual reality experiences. Oh, my goodness. Yeah. Amazing. Amelia: [00:23:51] I love it. I love how these libraries make even, just you have three lines of code and you're like, “I have no idea how I did this either.” Cassie: [00:23:59] I remember when I made my first Taurus knot in 3JS and I was so excited about it. I think pretty much out of the box, you have to import Amelia: [00:24:10] a plugin, but you can rotate it, you can zoom in and out, you can pan around. It's definitely magic. Cassie: [00:24:16] What's the D3 version of that? Is there a good entry point into D3? I Amelia: [00:24:23] have this spectrum in my head of things that are really complicated, but down to the metal. You can do whatever you want with them. Then the other end is a chart library that'll make a chart for you. You say, do a line chart with this data and it'll make a line chart. D3 is definitely on the former end, where it's like, it gives you tools you need. There's a lot of tools and you have to dig into each one of them. I feel if you want that oh, my God. This is magic feeling with D3, a lot of people, especially at the beginning, they'll just look up, there's so many examples online. They'll copy the code and then they'll paste it and then over two years, they'll understand what each line is doing, which I think everyone who learns D3, this is the way they learn it, just because those end examples are so cool and you're like, “I want this. I'm going to have it.” Then you take it and don't really understand all of it. Then there's also the chart libraries that make it super easy to do a really fancy chart really easily. Nate: [00:25:23] We talked a lot about this when we were working with React and D3. I mean, D3 is like React, in that it's a ton of different little modules that all work together. If you try to use for example, D3 with React, it's obnoxious, because D3 also takes over rewriting the DOM for you. One of the things that I would complain to Amelia when she was teaching me this is that to use D3 with React, you basically use React to form all the SVGs and you almost don't need D3, except for the utility functions. I don't actually know what is a good tool that's magic for D3. There's Amelia: [00:25:55] React chart libraries that you'll get something really amazing and be like, “I did this.” We're all on the shoulders of giants. Cassie: [00:26:04] I remember looking into D3. We got a solar panel installed on the roof of our work and I wanted to hook in. Well, you could hook into the API, which is really cool. I wanted to do that and see what we'd saved. I looked into D3 and it terrified me. Then I ended up making an illustration of our office building in SVG. I've set it up, so that with every certain amount of CO2 we save, it grows another plant out of a rooftop garden. Amelia: [00:26:44] I love how this was easier. Nate: [00:26:46] Yeah. Cassie: [00:26:49] It's like reaching for the tool that you understand. It's really difficult to make yourself learn new things. I was like, this is a great opportunity to learn D3. Then about 24 hours later I was like, “I'm going to make an SVG.” I think about this a Amelia: [00:27:05] lot where the flow state is in between something that's really boring and something that's really challenging. If something's too challenging and overwhelming, your brain will just shut off. You'll be like, “I can't learn this.” Then if it's too boring, your brain also shuts off and it's like, “I can just do this in my sleep.” I think a lot of people when they first look at D3, the needle goes all the way and they'll like, “This is overwhelming. I don't know where to start direction.” Then I think even with SVG, that was probably not in the boring area for you, even though you know SVG it was in the middle flow state of this is a good challenging. Cassie: [00:27:45] Yeah. Nate: [00:27:45] Cassie, in one of your talks you mentioned this idea that limitation breeds creativity. Could you talk a little bit more about that and your thoughts there? Cassie: [00:27:53] I have quite bad anxiety. I'm quite bad with procrastinating as well. I overthink things and I procrastinate. When I was learning how to code, there were lots of times where I'd sit down and stare at an empty VS code screen and just be like, “Right. I need to make something.” Then not knowing what to do. It felt a lot like when I was younger. I really loved drawing. At a certain point, I started doubting myself a little bit and overthinking it. My mom started what we called the scribble game. The scribble game was great. She'd take the paper from me and she'd draw a scribble on it, so that the paper wasn't blank anymore and then she'd hand it back to me and I had to make that scribble into something. It was a challenge, but there was a starting point. I think that that's so important when you're trying to make some things, to have a limitation and a challenge and a starting point. If you've got those three things, I think it's a lot easier. Amelia: [00:29:02] I love that. I Cassie: [00:29:03] love the scribble game. Yeah, it's wonderful. How Amelia: [00:29:07] can we apply this to code? How can we do a code scribble in order to lower that barrier? Cassie: [00:29:14] I guess, that's what you're saying about D3 having examples that you can copy and paste and start with. CodePen as well, like other people's pens that you can fork and Glitch has things that you can remix. I think that's a really great place to get started with something new, is just start with something and then see what you can make it into, or see how you can break it. I think it's a good way to learn things. Amelia: [00:29:40] Yeah, I think that's great. I was also reading an article yesterday. I've been meaning to learn 3D modeling, like you're talking about, Nate, that your kids are doing. It was this article, someone did a 100 days of 3D modeling to learn. They had a few things where it was like, one day they'll do a tutorial and the next day they'll make something with that knowledge. Every other day, they're doing a tutorial and it's an easier day, or every other day they do something easy and then they do something really hard. That's a good idea, because otherwise, you're either burning yourself out, or you're not learning as much as you could. Nate: [00:30:17] I feel like we are so early in programming education in that there's not really – I'm lumping 3D modeling into this too. There's not really a good place that you can go that will give you this off-the-shelf curriculum to learn 3D modeling, as you learn D3. Cassie: [00:30:32] Yeah, it's definitely a tricky thing. I find it really hard, even just trying to figure out what I need to learn to be a good front-end developer nowadays, because I feel there's just so much and I inevitably just go off on rabbit hole tangents all the time into the stuff that I'm really interested in. I'm like, “I should be learning webpack, but I'm going to learn some 3JS instead.” Amelia: [00:30:59] I feel whenever I try to write an article, I turn into a grade school version of myself that would tweak the PowerPoint slide styles, instead of actually writing my presentation, where this is the only reason idea in my blog posts have something fun in them is I don't like writing. Cassie: [00:31:16] I'd rather Amelia: [00:31:17] just do something fun, like scribble on the page with SVG. It's also a strength, I guess. Because most of these things I do, I'll end up using them Cassie: [00:31:26] in work. I work with someone who uses the phrase procrasti-working. That's when you know that you're really bad at procrastinating. You have a couple of things that you want to do. Then if you're not doing one of them, then you're going to be doing the other one to procrastinate them. Right, Nate: [00:31:43] procrastinate doing something else you should be doing, so that at least, you're moving Cassie: [00:31:48] I was to Amelia: [00:31:49] my friend about this. She said, she cleans when she has a deadline. That sounds like such a superpower. At least something's clean. Cassie: [00:31:57] Before I do a talk, my house is the tidiest it's ever been. Everything is alphabetically organized. Everything is polished. Nate: [00:32:06] Can you tell us about how you prep for your talks? What does that workflow look like? I prep with Cassie: [00:32:11] great difficulty, is the honest answer. I'm very lucky, because there's a lot of people at Clearleft who do a lot of public speaking. Jeremy Keith being one of them and he helped me huge amounts with my talk writing. I think that the first ever talk I did, it was just a little talk at a meet-up. I was just doing a show and tell, basically, of some of my CodePens I clutched a glass of wine for the whole thing and just showed people the fun stuff I was working on. Doing a conference talk, it needs to have a little bit more structure than just a list of things. I think that it's very rare that you see a talk that's just a list of things that is engaging. I think Jeremy really helped with that, because he's very good at telling stories and he said to me, what you need is you to make sure that your talk has a narrative structure. You need a flow to it. I wrote down everything that I wanted to talk about on post-it notes. Then Jeremy prompted me with different narrative structures. One being the hero's journey, I think was the one I used, so you've got a hero. The hero learns something along the way and overcomes something. I looked at all of the notes that I had and tried to arrange them into different narrative structures and then, eventually found one that I was happy with. Amelia: [00:33:39] What are the other narrative structures? What do you even google find this story to narrative arts? Nate: [00:33:45] The Wikipedia page on the hero's journey is pretty good. There's another one. There's a graph. I'll link to this in the show notes. There's a blog called Reedzy, and they've actually diagrammed out. There's a talk by Kurt Vonnegut, where he actually goes through all these different narrative arcs. One of them that he talks about is the hero's journey, but they actually plot out Cinderella. Here, I'll send you the link. Cassie: [00:34:10] I love graphs of Cinderella. Excellent. Nate: [00:34:14] Yeah, so Kurt Vonnegut, he wrote Slaughterhouse-Five and he also gave this really fantastic talk. There's a YouTube video of it, where it's Kurt Vonnegut graphs the plot of every story. There's actually a database of these different narrative plot lines. Dativism Cassie: [00:34:28] storytelling. Yeah, this is right up my street. Yeah, I love cart when I get as well. Amelia: [00:34:34] I also found this chart of how happy Harry Potter is throughout all the books. It looks like he just gets progressively less happy. Yeah, Nate: [00:34:42] progressively sadder the whole time, right? Amelia: [00:34:44] Yeah. It's pretty dark by that in there. Cassie: [00:34:47] What are some other narrative arcs? Oh, the rags to riches. That's a narrative arc. Oh, rags to riches has two, so there's the rags to riches rise and riches to rags full Icarus, where you rise and then fall. I feel that'd be such a Amelia: [00:35:03] disappointing book. Cassie: [00:35:04] Yeah. Amelia: [00:35:04] Everything's happy until the end. You definitely wouldn't want to choose that for a conference talk. Right. For a conference, you got to end on the up. Yeah, Cassie: [00:35:08] definitely. Amelia: [00:35:15] Yeah, I love the concept of using storytelling in talks, because I think, especially with technical talks, it can be very like, all right, people want facts. I'm going to tell people how to use this thing. I'm just going to have slide after slide of here's a fact, here's a best practice and then it can be really hard to sit through an hour of that and keep paying attention and just keep learning things. Cassie: [00:35:39] I think it's the human element, isn't it? Again, you need more whimsy and more human elements to things. I think some of the best conference talks that I've seen have been – I learnt this thing by doing it wrong for ages. This is what happened, because I was doing it wrong and I learned this lesson the hard way. I think that that's really good, because it feels – you have empathy with them. It feels more relatable. Amelia: [00:36:06] Brain, it's like, I can avoid this pain myself. Cassie: [00:36:11] Everybody likes to laugh at other people's misfortune as well. You Amelia: [00:36:16] just started a creative coding meetup. Cassie: [00:36:19] Yes. Amelia: [00:36:20] Right before lockdown, right? Cassie: [00:36:23] Yeah. We had about three meet-ups and then lockdown happened. It was really great. There's a conference in Brighton called FFConf and Charlotte Dan did a talk. She's amazing. She does lots of really cool generative art. She makes degenerative jewelry as well, which is very cool. A lot of my Brighton nerd friends, we all went to this conference and we saw her talk and she talks through pen plotting and generative art with CSS and generative art with JavaScript and using hardware and creating physical things, like jewelry and stuff. We were all really inspired. Afterwards, we were like, “Let's have a meet-up,” because it's really hard to find time to do all of that stuff and motivation to do side projects outside of work. We decided to do a meet-up that wasn't the normal talk structure, where you go along and watch people talk and then leave again. It was more of we call it a knitting circle for nerds. Everyone just goes along and we all have our laptops and we just tinker on projects and help each other. Then do a little show-and-tell at the end and eat crisps. Sometimes there's a very, very small dog. A very, very small dog. Very, very, very small chihuahua. Amelia: [00:37:48] [inaudible] . Cassie: [00:37:50] Yeah, now that's all moved online now, because of the plague. It's been really lovely, because we've got this little Slack community that has been there the whole time the lockdown's been happening and quarantine's been happening. It's just been such a great bunch of people. Creativity without the pressure and coding without the link to work and career development and stuff. It's just feels a very free space. Everyone there has been super open about feeling a bit creatively restricted, or battling with balancing out life stuff and coding. Yeah, it's been a really, really lovely group of people. Chris, one of the people from Brighton Generator, he is just a project machine. Even when everyone else hasn't been making stuff, he's just been knocking out projects pretty much every week. It's been wonderful watching what he's been making. That Amelia: [00:38:51] sounds so nice to just have that group, especially in these times. On Twitter, I feel a lot of people are having just such a hard time with a lot of people get inspiration from nature, or talking to people, or going places. It's just so hard when you always stay in the same house, if you see the same things and the same people all the time. Yeah, definitely. I think that that's fine. People shouldn't be outputting stuff all Cassie: [00:39:18] the time. You shouldn't feel like you have to constantly be producing things. Sometimes you have to take time to absorb stuff. If that's reading books, or watching tutorials, or going for walks, or that thing. I think it's all just as important. Amelia: [00:39:34] Totally agree. Cassie: [00:39:35] Ooh, if you're wanting to learn more about SVG filters, Sara Soueidan has an amazing set of articles on Codrops, which I Amelia: [00:39:43] learned everything from. They're really great. Nate: [00:39:45] One of the things I appreciate about you is that you remember people's names. I've noticed that in your talks as well. When you are saying, you're not just like, “Oh, there's a blog post on SVG filters.” You're like, “Sara Soueidan wrote this filter.” You should know her as well as her article. I really appreciate that. I think I would like to see more of that in general. Cassie: [00:40:06] It's so important. One of the things that brings me the most joy, which I've started doing is there are a few times where I had made a CodePen or something, or written a blog post and someone actually just sent me a direct message just saying, “Oh, I just read your article and it was really helpful. Thank you for that.” I do that now. Every time I read something and it's useful, I get hold of the person directly and just say, thank you. It's such a small thing, but yeah, I think it's really nice, especially for people who don't have analytics and tracking on their things, because I don't. I don't really want to know who's on my blog, because I get a bit too overwhelmed with numbers and statistics. But it's really nice to get a message from someone saying that they enjoyed it. Amelia: [00:40:51] I love that. Also, I feel for me, the better something is, probably the less likely I'll reach out to someone to say that I enjoyed it, because I'm like, “Oh, there's so many people who are telling them that it's great.” As a creator, it's so nice to get any message. I think being on the other side has helped that anxiety. Cassie: [00:41:12] Yeah. I think we put people on pedestals and don't reach out for that reason. I think we should stop doing Amelia: [00:41:19] also recently released new newsletter. I think it's monthly. What was your motivation behind starting it? I think it's solely focused on SVG, which is just a great niche. Where do you find inspiration for that newsletter? There is Cassie: [00:41:36] a little patch of time where GreenSock were hosting the CodePen challenges. I mean, it was about a month. Every week, Jack from GreenSock got hold of me with a whole load of CodePens for me to look through and judge. I just loved it. It was so much fun. I spent every Sunday evening just going through all of these different CodePens and writing people messages and telling them what I liked about it. I got so many lovely messages back. It just felt so joyful and so lovely to be able to signal boost some people who are making really cool things and give people some feedback. I basically just loved it, so I thought that I would like to carry on doing that. Then I had also, just before lockdown happened, I did a workshop in Brussels and I met Louie, who's also putting the newsletter together with me and we've been Internet friends for quite a while, but it was we met in person for the first time. We just got along really well. We decided we wanted to do a little side project together. Yeah, he's been writing some SVG tips for a while as well on Twitter and I've been looking at those and thinking, “Oh, it'd be great if we could get these tips out to some more people.” Amelia: [00:42:50] Oh, I've seen those. They're so good. Cassie: [00:42:52] Yeah, I learned things. Amelia: [00:42:54] Yeah, Cassie: [00:42:57] me too for sure. He's a creative coding tour de force, he is. Nate: [00:43:00] Cassie, thank you so much for being with us today. It was really delightful. Cassie: [00:43:04] Oh, it's an absolute pleasure. It was lovely to meet both of you, and especially because I've been such a huge fan of Amelia: [00:43:11] Amelia's work for a while. Nate: [00:43:19] Thank you. Hey, you made it to the end. I hope you enjoyed this conversation. Amelia: [00:43:22] If you have a minute, a review on iTunes would help other people find the podcast. We have a lot of great content coming up. To be notified of new episodes, hit that subscribe Cassie: [00:43:37] button.

CSS разработчики, почему они нужны миру? 00:30 Почему миру нужны CSS разработчики 00:57 История CSS 01:43 Основополагающие события новой эры CSS 02:19 CSS 3, HTML 5 и JavaScript: новая эра 03:54 Что нового появилось в CSS за последние 10 лет 05:20 Большая ошибка веб-индустрии 06:09 Angular 2: первый JavaScript-согласованный фреймворк 06:53 React — смерть семантики! 07:43 Frontend разработчики не тащат в CSS! 08:01 Кто я есть такой 09:23 Веб-индустрия должна измениться 10:07 Какими могут быть новые названия должностей? 10:50 Не будьте только CSS разработчиком 12:12 Заключение Sara Soueidan, SVG Expert: https://www.sarasoueidan.com/ Diana Smith, CSS Artist: https://diana-adrianne.com/purecss-pink/ Basic concepts of Logical Properties and Values: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties/Basic_concepts CSS Masters Israel, Facebook community: https://www.facebook.com/groups/css.masters.israel/ Статьи Элада: https://eladsc.com/tag/articles/ Митапы Элада:: https://eladsc.com/tag/talks/ Linked in Элада: https://www.linkedin.com/in/eladshechter/ The Great Divide, статья на сайте CSS Tricks: https://css-tricks.com/the-great-divide/ What CSS Developers Do and Why You Need One: https://www.toptal.com/css/why-you-need-a-css-developer По мотивам статьи Why the world needs CSS developers? Автор: Elad Shechter https://medium.com/@elad/why-the-world-needs-css-developers-318025a6f5c1 Музыка Purple Planet Music: https://www.purple-planet.com, Jake Chudnow https://www.youtube.com/channel/UC1UIj7Y9SphX5GuoG2e94XQ

In this episode of Syntax, Scott and Wes talk about how to get better at problem solving — one of the most important skills to build as a developer. Netlify - Sponsor Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up netlify.com/syntax for more info. Prismic - Sponsor Prismic is a Headless CMS for your next front end project. Create complex content type, relate data, and have your clients edit it all with the Prismic UI. Then pull the data into your project with their JSON or GraphQL API. Try it out with your next project - Gatsby, React + Apollo, or any other language. Check out their examples to get you started at Prismic.io/syntax. Show Notes 2:43 - Gather info What is this thing trying to do? Use tools DevTools are your best friend during this phase 8:01 - Know where to look (and use tools) Dev tools for client side Error logs Sentry LogRocket The most experienced people in any field know how to ask the right questions. Some of this will come with experience and nothing else. If you’ve seen a problem before, it’s easier to solve. 10:00 - Look at the end game What are you really trying to do here? Don’t focus so much on the tech that you miss the bigger picture. 13:17 - Read Again Error logs provide the best clues. Read them closely. Actually read your code — don’t skim it. Write comments while reading it, or follow existing comments — good for documenting, but also for structuring your thoughts. 18:08 - Make it simple (break it into smaller parts) Limit the number of inputs and outputs Get it working in a limited capacity (e.g. safe mode, Codepen, etc.) Comment out major sections of code until you have a working example Does this problem exist outside of the framework? Does this work in a clean environment? 25:35 - Take yourself out of your environment You should be able to take a look at the problem at all zoom levels Does it work locally but not on the server? Does it work in other browsers? 27:32 - Stay calm It’s easy to get nervous or worked up when the stakes are high It won’t serve you to panic. If you are panicking, take a 10 min walk to deep breath Take a shower, lift weights (seriously) 30:14 - Talk it over Getting the perspective of another developer can be invaluable 32:28 - Make things obvious Use debugger or label logs — don’t let it be ambiguous For CSS bugs, use primary colors to make things stand out Use the right tool to make the problem stand out Layers for CSS issues Network for network issues Performance tab (etc.) 35:12 - Use Git correctly to free up your techniques If you’re code commits are up to date, you can heavily modify code without fear of deleting things — just revert to a previous commit once you find the issue and fix. 36:10 - Don’t jump at solutions Take the time to fully dissect the problem Question you assumptions It can’t possibly be a problem with ____. Well maybe it is. Wes once spent hours trying to diagnose a check engine light when the gas cap was lose. 43:51 - Get good at pattern matching This comes with experience When did this problem start? Did we deploy any code? Did we change any logic? 44:54 - Get good at googling Being able to describe your problem is key. Search the error from Firefox Links DevTools Sentry LogRocket CodePen Syntax 154: SVGs with Sara Soueidan @walpolea Syntax 152: Debugging Tools + Tips @bowlendev @dan_abramov Ryan Dahl on creating Node.js @LaurieonTech Firefox DuckDuckGo ××× SIIIIICK ××× PIIIICKS ××× Scott: Jeremy Ethier Youtube Channel Wes: Marpac Rohm Sound Machine Shameless Plugs Scott: Typescript in React Course - Sign up for the year and save 25%! Wes: Beginner Javascript Course Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets

In this episode of Syntax, Wes is joined by Sara Soueidan, a freelance front-end UI developer and trainer. While Scott is taking a break to spend time with his new baby girl, Wes and Sara dive into all things SVG! Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry and using the coupon code “tastytreat”. Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on Sanity. Show Notes 6:05 - What are SVGs? It’s an image you can edit 16:17 - Icon fonts Better tools Fails in certain areas SVG sprite icons Grunticon 24:24 - SVG files / Build tools SVGO / SVGOMG 31:50 - Where to find SVGs Noun project Exporting from Sketch/Illustrator/Figma Freepik Iconmoon 33:48 - What is the viewbox? 40:39 - Animating SVG 43:41 - Accessibility & text with SVG 45:44 - Graphing with SVG D3.js 47:58 - Filters Links Font Awesome Grunticon Grunt gulp.js React Vue.js Sketch Illustrator Figma imagemin gulp-imagemin Gatsby.js gatsby-plugin-sharp jakearchibald/svgomg Noun Project Freepik Icomoon GreenSock Snap.svg SVG Animations: From Common UX Implementations to Complex Responsive Animation By Sarah Drasner Codrops D3.js ××× SIIIIICK ××× PIIIICKS ××× Sara: Netlify Wes: Wise Contact Sensors Shameless Plugs Sara’s Website & Workshop Dates Wes’ Courses - Use the coupon code ‘Syntax’ for $10 off! Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets Sara’s Twitter

Sara is a two-times award-winning freelance front-end UI/UX developer, trainer, author and speaker based in Lebanon, working with companies across the globe. she partners with design teams to execute and build beautiful, progressive Web user interfaces and design systems, with a strong focus on responsive design, performance, and accessibility, using the latest front-end design techniques.

Ever wanted to quit your job and work for yourself, on projects of your choosing? International speaker, trainer, consultant and front end expert Sara Soueidan joins us to talk about the benefits and challenges of becoming a contractor. We'll look at contracting advice born of her experiences that you can apply to your escape from the rat race or just to learn more about tech contracting.

Sven verlässt die heile Welt in Bremen und nimmt eine turbulente Reise in den Norden Portugals auf sich. Alles für sie. Die Mirror Conf, eine Konferenz für Designer und Frontend-Developer. Zum zweiten Mal begrüßt sie Speakergrößen und Gäste aus aller Welt im malerischen Braga. An drei Tagen heißt es Vorträgen lauschen und in Workshops selbst aktiv werden zu Themen von Atomic Design und CSS bis hin zu Virtual Reality. Sven berichtet in dieser Folge über den größten Abfuck von 2017 und seine Highlights unter den Talks. Gemeinsam diskutieren wir über Gestaltung für alle Sinne in VR, Leitfragen auf der Suche nach sinnvollen Webtechnologien und ziehen ein Fazit über die Konferenz. Neugierig? Na dann los, reinhören. ;) (Wir freuen uns immer über Feedback. Schreibt uns über Facebook, Twitter, Instagram oder unserer Webseite an. Bei maximaler Zufriedenheit freuen wir uns natürlich über Sterne und Herzen auf iTunes und SoundCloud.) SoundCloud: http://buff.ly/2oQaJlQ iTunes: http://buff.ly/2oPRhpf RSS: http://buff.ly/2oQbY4G Shownotes Mirror Conf http://www.mirrorconf.com Video mit Eindrücken zur Mirror Conf 2017 https://www.youtube.com/watch?v=PpONHt-n8eY Brad Frost http://bradfrost.com Gabriel Valdivia http://www.gabrielvaldivia.com Facebook Spaces mit Avataren in VR https://www.facebook.com/spaces Artikel von G. Valdivia über das Design von Avataren für VR https://uxdesign.cc/the-ux-of-virtual-identity-systems-584fd83f04ff Trailer zu The Legend of Zelda: Wind Waker https://www.youtube.com/watch?v=IkVt1s_ZFbw Artikel zu Geruch und Geschmack in VR https://www.engadget.com/2017/11/13/smellable-vr-is-coming/ Skeuomorphismus in kurz und knackig https://de.wikipedia.org/wiki/Skeuomorphismus Air Power mit skeuomorphistischen 3D Ladeanimationen https://www.youtube.com/watch?v=VnJmf7UxWiU Jeremy Keith https://adactio.com Sara Soueidan, SVG-Expertin https://www.sarasoueidan.com Talk von Sara Soueidan zu SVG für Designer und Developer https://www.youtube.com/watch?v=q4QI9iOeyPo Rachel Andrew, Gründerin und CSS-Grid-Expertin https://rachelandrew.co.uk Talk von Rachel Andrew zu CSS-Grid Layout https://www.youtube.com/watch?v=N5Lt1SLqBmQ

Every fifth episode of the Mr Frontend Podcast is gonna be a visual one! In this episode, I will talk about the new Mr Frontend Online Class, Frontend Love Conference, VueJS Conference and some cool Web Development new from these past weeks! You can also listen to this podcast on Youtube (https://www.youtube.com/watch?v=YyGbKnNuQAQ) or iTunes (https://itunes.apple.com/us/podcast/mr-frontend-community/id1271838550?mt=2)! [MR FRONTEND ONLINE CLASS] This program includes: - Every 4 weeks we plan an Online Class session via Video. - We are going in-depth with HTML, CSS, JavaScript, Tooling and a whole lot more technical skills. I'm gonna teach a whole lot of things based on the current market, so you are more interesting for potential employers! - We launch December 2017 - It will be group sessions for about 45 min / 60 min. - We will have a Q&A session at the end of every session. - This class will be mainly be focused on the people who are just starting in Web Development, learning to program or are in a Junior Developer position. If you are an experienced Developer but want to join? Please, you are more than welcome!! Go to https://blog.mrfrontend.org/online-class/ to stay up to date with my program or register on Patreon.com/mrfrontend [FRONTEND LOVE CONFERENCE] Single course / Frontend related topics like VueJS, ReactJS and Angular February 15th 2018 Theater Amsterdam https://www.frontenddeveloperlove.com - Luca Mezzalira (Google Developer Expert) - Simona Cotin (Developer Advocate Microsoft) - Michel Westrate (Creator MobX & Tech lead Mendix) - Norbert de Lange (Senior Frontend Consultant Xebia) [VUEJS CONFERENCE IN AMSTERDAM] Single course / VueJS related topics! February 16th 2018 Theater Amsterdam https://www.vuejs.amsterdam - Evan You (Vue.js Creator) - Sarah Drasner (Developer Advocate Microsoft) - Guillaume Chau (Core team member Vue.JS) - Sebastien Chopin (NuxtJS co-author) [WEB DEV NEWS] - New FireFox http://firefox.com - Using SVGs as Image Placeholder https://jmperezperez.com/svg-placeholders/ - Serverside rendered Applications https://blog.mrfrontend.org/2017/11/introduction-ssr-nextjs-nodejs-reactjs-nuxtjs-vuejs/ - Service Workers https://www.smashingmagazine.com/2017/10/service-worker-single-page-application-wordpress-sites/ - Papercss: https://github.com/rhyneav/papercss - CSS element queries: https://webdesign.tutsplus.com/articles/the-current-state-of-element-queries--cms-29690/ - SyntaxFM Podcast "How to get into Speaking At Conferences" by Wes Bos and Scott Tolinski https://syntax.fm/show/019/how-to-get-into-speaking-at-conferences - Fixate On Code Podcast interview with Sara Soueidan by Larry Botha http://fixate.it/podcast/sticking-to-the-essentials-sara-soueidan/ Enjoy! If you have comments, questions or opinions please share them in the comments! If you want to support my blogs, video's and podcast please go to https://patreon.com/mrfrontend and choose the amount of money you want to spend. For (almost) every amount there is a thank you package! Follow us on Blog: http://blog.mrfrontend.org/ Follow us on Medium: https://medium.com/mr-frontend-community Follow us on twitter: https://twitter.com/frontendmr Follow us on Facebook: http://facebook.com/mrfrontendcommunity/

Sara is a freelance front-end web developer, author, and speaker from Lebanon. She was named Developer of the Year in the 2015 .net magazine awards, and awarded a Web Platform Award from O’Reilly. Sara is the author of Codrops CSS Reference, and is the co-author of Real-Life Responsive Web Design, which focuses on smart “responsive” workflows, effective UX patterns, and powerful front-end techniques.

Descripcion del programa ¿Has tenido la sensación de que no sabes nada? En esta ocasión hablaremos sobre ello, es el Síndrome del Impostor. A todos nos ha ocurrido que tenemos miedos y no sabemos como avanzar. ¡Esperamos que os guste el episodio y como siempre nos vemos al final! ¿Queréis participar? ¿Queréis participar y ayudarnos a decidir que grabar en WeCodeSign y proponer invitad@s? Aquí podéis participar en WeCodeSign. Recomendaciones Preguntas rápidas: Cristina Fernández y Elena Torró Quién me ha inspirado: Emilio Rodríguez Quién me ha inspirado: Naiara Abaroa Quién me ha inspirado: Katia Aresti Quién me ha inspirado: Cata Recomiéndanos un recurso: Foro Más de 140 Recomiéndanos un recurso: Blog de Belén Albeza Recomiéndanos un recurso: Womenalia Recomiéndanos a un invitado o invitada: José Dongil Recomiéndanos a un invitado o invitada: Susana Morcuende Recomiéndanos a un invitado o invitada: Alex Jover Morales Recomiéndanos a un invitado o invitada: B. ¿Qué tema te gustaría que tratásemos?: Mejorar como programador ¿Qué tema te gustaría que tratásemos?: Testing en el frontend Contacta con: Cristina Fernández y Elena Torró Twitter de Cristina Blog de Cristina Twitter de Elena Blog de Elena Links del programa Code on The Rocks Codesai JSDay Murcia Front-end Redux a través de la música Sara Soueidan Desarrolla aplicaciones con VueJS Refactoring Legacy CSS CodePen de Eva Carlos Benítez Hilo Twitter Cristina Hilo Twitter Marina Adalab Recomendaciones de Ignacio Fighting impostor syndrome Recognizing and Dealing with Impostor Syndrome I’m an Impostor Impostor Syndrome Patrocinadores Fictizia.com Contacta con Ignacio Web de WeCodeSign Twitter de WeCodeSign eMail de WeCodeSign Web de Ignacio Villanueva Twitter de Ignacio Villanueva

In our continuing series about the people who make responsive designs happen, we talk with freelance front-end Web developer, Sara Soueidan. Read more »

ساره سويدان هي مبرمجة من لبنان تعمل بشكل مستقل في برمجة واجهات مواقع الويب، حصلت على أكثر من جائزة واستطاعت في غضون سنوات قليلة، إثبات نفسها على نطاق عالمي، عن طريق الغوص بعمق في مواضيع تتعلّق ببرمجة وتصميم واجهة المواقع ومشاركة ما تعلّمته من خلال الكتابة أو التحدّث في المؤتمرات في هذه الحلقة نتحدث مع ساره عن بنائها لموقعها الأول في الصف الثامن، بالإضافة إلى تجربتها في العمل الحر، الكتابة، التحدث في المؤتمرات وغيرها من المواضيع Sara Soueidan, is an award-winning freelance front-end web developer, author & speaker from Lebanon. She was able, within few years, to prove herself on a global scale, by simply digging deep into topics she's excited about. When sharing her knowledge with the world, the world responded with gratitude! in this episode, we talk to Sara about building her 1st website at school, freelancing, writing, speaking at conferences and everything in between. Links: Sara's website: https://www.sarasoueidan.com Smashing Magazine (case study): http://sarasoueidan.com/case-studies/smashing-magazine (direct link to slides: https://sarasoueidan.com/slides/Smashing-Case-Study.pdf)

How do you go from having no idea of a career... to becoming Net Awards Developer of the Year? For Lebanese freelancer Sara it's been a journey of self development as much as anything she's done for the web. Hear her story of learning, sharing, writing, speaking, teaching, creating... and then learning some more. Episode sponsored by The Podcast Host - use the promo code FREELANCE for 10% off - bless 'em* Love learning from other freelancers like this? Check out the website beingfreelance.com, subscribe to the podcast and to the newsletter. You'll also find useful links for this episode. That's beingfreelance.com Who the hell is Steve Folland? You know how everyone bangs on about how powerful video and audio content can be? Yeah, well Steve helps businesses make it and make the most of it. Find out more at www.stevefolland.com Track him down on Twitter @sfolland or lay a trail of cake and he'll eventually catch you up.

In this episode, Adam talks to Sara Soueidan about the benefits of using SVG over icon fonts, and the best workflow for using SVG in your projects. 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: Sara's Blog SVG vs Icon Fonts Cage Match grunticon A Designer's Guide to Grumpicon Making the Switch Away from Icont Fonts to SVG A complete guide to SVG fallbacks Overview of SVG Sprite Creation Techniques All SVG articles on Sara's blog svgo svgomg The Smashing Book 5 Practical SVG book

In this episode we learn about animating with JavaScript. We’re joined by a special guest, Sarah Drasner, who is an expert in JavaScript and SVG animations. Having good animations in your product is really important for the overall user experience. In the episode we discuss various libraries to help create animations in your websites or applications. Sarah shares a lot of valuable information. Items mentioned in the episode: Coin, GreenSock, Weighing SVG Animation Techniques (with Benchmarks), Mac Pro parallax, Mo.js, Lego Mushroom, SnapSvg, D3, Sara Soueidan, React Motion, Sarah Drasner's CodePen, Framer JS, React Training, A Comparison of Animation Technologies, SVGOMG, SVGO, IcoMoon Guests: Sarah Drasner - @sarah_edo Panelists: Ryan Burgess - @burgessdryan Augustus Yuan - @augburto Derrick Showers - @derrickshowers Sarah Federman - @sarah_federman Picks: Sarah Drasner - Val Head's book Sarah Drasner - Valio Con Ryan Burgess - Sleep no more Ryan Burgess - Internet trends 2016 Augustus Yuan - Jankfree.org Augustus Yuan - Icon System with SVG sprites Derrick Showers - how2 Derrick Showers - Werker Sarah Federman - Transitions and Animations in CSS Sarah Federman - Alexa / Pebble Core integration

Check out Newbie Remote Conf!   02:11 - Heiko Behrens Introduction Twitter GitHub Blog 02:42 - François Baldassari Introduction Twitter GitHub 03:04 - JavaScript and Pebble Espruino jerryscript 06:40 - Watch vs Phone Pebble.js 09:32 - Memory Constraints and Code Size Limitations APIs rockyjs tween.js 26:24 - Advantages of Writing in JavaScript 32:09 - Capabilities of the Watch iPhreaks Episode #153: Using Mobile Devices to Manage Diabetes with Scott Hanselman 37:08 - Running Web Servers 39:29 - Resources rockyjs Newsletter Pebble Slack Channel Pebble Developer Page @PebbleDev Pebble TicToc Source 41:58 - Voice Capabilities 43:06 - UI For the Round Face vs Square Face 46:18 - Future Pebble Milestones   Picks Vortex Poker 3 (Jamison) Thao & The Get Down Stay Down (Jamison) Maciej Ceglowski: Barely succeed! It's easier! (Jamison) The Way of Kings Trilogy by Brandon Sanderson (Joe) Juniors Are Awesome (Aimee) octotree (Aimee) Fully Alive by Ken Davis (Chuck) Sara Soueidan (Heiko) Jake Archibald: Using the service worker (Heiko) beyond tellerrand’s Videos (Heiko) Fabien Chouteau: Make with Ada: Formal proof on my wrist (François) pebble.rs (François) The World of Yesterday by Stefan Zweig (François)   See Also iPhreaks Show Episode #146: Pebble with Heiko Behrens and Daniel Rodríguez Troitiño

Check out Newbie Remote Conf!   02:11 - Heiko Behrens Introduction Twitter GitHub Blog 02:42 - François Baldassari Introduction Twitter GitHub 03:04 - JavaScript and Pebble Espruino jerryscript 06:40 - Watch vs Phone Pebble.js 09:32 - Memory Constraints and Code Size Limitations APIs rockyjs tween.js 26:24 - Advantages of Writing in JavaScript 32:09 - Capabilities of the Watch iPhreaks Episode #153: Using Mobile Devices to Manage Diabetes with Scott Hanselman 37:08 - Running Web Servers 39:29 - Resources rockyjs Newsletter Pebble Slack Channel Pebble Developer Page @PebbleDev Pebble TicToc Source 41:58 - Voice Capabilities 43:06 - UI For the Round Face vs Square Face 46:18 - Future Pebble Milestones   Picks Vortex Poker 3 (Jamison) Thao & The Get Down Stay Down (Jamison) Maciej Ceglowski: Barely succeed! It's easier! (Jamison) The Way of Kings Trilogy by Brandon Sanderson (Joe) Juniors Are Awesome (Aimee) octotree (Aimee) Fully Alive by Ken Davis (Chuck) Sara Soueidan (Heiko) Jake Archibald: Using the service worker (Heiko) beyond tellerrand’s Videos (Heiko) Fabien Chouteau: Make with Ada: Formal proof on my wrist (François) pebble.rs (François) The World of Yesterday by Stefan Zweig (François)   See Also iPhreaks Show Episode #146: Pebble with Heiko Behrens and Daniel Rodríguez Troitiño

Check out Newbie Remote Conf!   02:11 - Heiko Behrens Introduction Twitter GitHub Blog 02:42 - François Baldassari Introduction Twitter GitHub 03:04 - JavaScript and Pebble Espruino jerryscript 06:40 - Watch vs Phone Pebble.js 09:32 - Memory Constraints and Code Size Limitations APIs rockyjs tween.js 26:24 - Advantages of Writing in JavaScript 32:09 - Capabilities of the Watch iPhreaks Episode #153: Using Mobile Devices to Manage Diabetes with Scott Hanselman 37:08 - Running Web Servers 39:29 - Resources rockyjs Newsletter Pebble Slack Channel Pebble Developer Page @PebbleDev Pebble TicToc Source 41:58 - Voice Capabilities 43:06 - UI For the Round Face vs Square Face 46:18 - Future Pebble Milestones   Picks Vortex Poker 3 (Jamison) Thao & The Get Down Stay Down (Jamison) Maciej Ceglowski: Barely succeed! It's easier! (Jamison) The Way of Kings Trilogy by Brandon Sanderson (Joe) Juniors Are Awesome (Aimee) octotree (Aimee) Fully Alive by Ken Davis (Chuck) Sara Soueidan (Heiko) Jake Archibald: Using the service worker (Heiko) beyond tellerrand’s Videos (Heiko) Fabien Chouteau: Make with Ada: Formal proof on my wrist (François) pebble.rs (François) The World of Yesterday by Stefan Zweig (François)   See Also iPhreaks Show Episode #146: Pebble with Heiko Behrens and Daniel Rodríguez Troitiño

Seb is joined by regular guest co-host Val Head at the Render Conference in Oxford. Val is our roving reporter for this episode, and she interviews two of the Render Conference speakers Mariko Kosaka, and Sara Soueidan. Mariko talks about … Continue reading →

In this episode, Brenda Storer stands in for the vacationing Reda. Brenda and Kyle talk about Brenda's recent talk on SVG's. The in's and out's of her process of learning about them and talking about them. They also talk about giving talks. This episode of The Bike Shed is sponsored by: Code School: Entertaining online learning for existing and aspiring developers. Leave a review on our iTunes page to be entered to win a free month of Code School. Links and Show Notes Slides from the talk Brenda's codepen account with a bunch of simple examples of SVGs to play with SVGO Sara Soueidan's 2014 CSSConf talk Jacob Jenkov's SVG Book online Chris Coyier's technique for using symbols as icons in svgs Jake Archibald's article on animating a stroke Iconic Icon Responsive Icons ManhattanJS website with animated clouds Brenda on Twitter

Scott talks to web developer Sara Soueidan about the state of SVG on the web today. Is SVG mainstream and ready for you to use in your web apps today? Sara is the author of the Codrops CSS Reference, and a co-author of the Smashing Book #5 - a book that covers time-saving, practical techniques for crafting fast, maintainable, and scalable responsive websites.

Natürlich waren wir auch dieses Mal wieder auf der (grandiosen) beyond tellerrand // Düsseldorf und haben uns wie gehabt einen der Sprecher herausgeangelt und zu einem Interview genötigt :) Getroffen hat es niemanden geringeres als Sara Soueidan, der CSS- und SVG-Shooting-Star des letzten Jahres. Wir sprachen allerdings genau nicht über technische Themen, sondern interessierten uns […]

Jen Simmons (@JenSimmons), full stack designer & host of The Web Ahead Podcast (@TheWebAhead), takes us through what is means to contribute to and shape the ever changing landscape of the web. Jen produces an immense amount of free content from speaking engagements & training to podcasting that have reached all over the globe.   The Web Ahead guests have included some of the most influential people in web technology & design to date. Jen has had a major impact in the way we build and design for the web. Her uncanny abilities are almost akin to a unicorn in that she is extremely knowledgeable in both development & design. Good thing for us that Jen knows how to share her knowledge and help everyone have a chance to shape the future of the web. Upcoming Events with Jen Simmons San Francisco HTML5 Meetup  - http://www.meetup.com/sfhtml5/events/219966720/ An Event Apart - San Diego: aneventapart.com/event/san-diego-2015 An Event Apart - Washington, DC: http://aneventapart.com/event/washington-dc-2015 An Event Apart - Chicago: aneventapart.com/event/chicago-2015 Resources The Web Ahead - http://thewebahead.net/ Jen's blog - http://jensimmons.com/ Jen's Github - https://github.com/jensimmons CSS Layouts with Rachel Andrew -  http://thewebahead.net/49 Changing the Shapes with Sara Soueidan - http://thewebahead.net/81 autoprefixer - https://github.com/postcss/autoprefixer Drupal - https://www.drupal.org/ Jen's Bartik theme for Drupal - https://www.drupal.org/project/bartik Jen's Drupal work - https://www.drupal.org/u/jensimmons SASS - http://sass-lang.com/ Git Tower - http://www.git-tower.com/ Square Space - http://www.squarespace.com/ Grid Layout - https://css-tricks.com/snippets/css/complete-guide-grid/ CSS Shapes 101 - http://alistapart.com/article/css-shapes-101 multicolumn layout - https://css-tricks.com/almanac/properties/c/columns/ CSS Shapes Chrome Extension - https://chrome.google.com/webstore/detail/css-shapes-editor/nenndldnbcncjmeacmnondmkkfedmgmp?hl=en-US Media work by Jen on an Opera about Nikolas Tesla - http://www.violetfireopera.com/ Tim Berners-Lee article using Multicolumn Layout - http://www.w3.org/DesignIssues/Security-NotTheS.html Panelists Danny Blue - Front End Engineer at Deloitte Digital Erik Isaksen - HTML5 Google Developer Expert & Front End Engineer at Deloitte Digital Nick Niemeir - Partner at Good News Everyone Rachel Nabors - Master Web Animation Wizard, speaker & her own boss at Tin Magpie

SVGs can be animated with CSS, but they also come packed with their own animation elements that allow us to animate them in ways that are not yet possible with CSS. In this session, we'll go over how SVGs can be animated with CSS, including prerequisites, gotchas, and browser bugs, and then we'll go over the native SVG animation elements and how they can be used, what advantages and disadvantages they have compared to CSS animations, browser compatibility, and a little bit more! More info at: https://fronteers.nl/congres/2014/sessions/sara-soueidan-animating-svgs-with-css-and-smil

SVGs can be animated with CSS, but they also come packed with their own animation elements that allow us to animate them in ways that are not yet possible with CSS. In this session, we'll go over how SVGs can be animated with CSS, including prerequisites, gotchas, and browser bugs, and then we'll go over the native SVG animation elements and how they can be used, what advantages and disadvantages they have compared to CSS animations, browser compatibility, and a little bit more! More info at: https://fronteers.nl/congres/2014/sessions/sara-soueidan-animating-svgs-with-css-and-smil

For this Snippet, we discuss Techniques For Responsive Typography by Sara Soueidan.(http://www.pagebreakpodcast.com/snippets/responsive-typography)

So far, page layout on the web has consisted of a lot of boxes stacked on top of boxes — rectangular columns everywhere. That's about to change. New specifications, including CSS Shapes and CSS Exclusions, are about to the change the shape of page. Sara Soueidan joins Jen Simmons to explain.

Mark, a newcomer to the web industry, and Ben, a hard bitten web veteran, work out why they want to do a podcast and what it might be about. Mark’s suggested read this week is ‘Learning Web Design’ by Jennifer Robbins, and Ben’s is a series of articles called ‘Understanding SVG Coordinate Systems & Transformations’ by Sara Soueidan. Music wise we plug Autechre’s ancient album ‘Inconabula‘ and Spiro’s ‘Kaleidophonica‘ album from early 2013. The intro music ‘Vitreous Detachment’ is used with kind permission from Origamibiro.

I’ve been looking forward to speaking with Sara Soueidan on this week’s episode of Unfinished Business for a long while, not least because I’m a huge, huge, fan of her work. She’s been writing what I consider to be the best articles about CSS and SVG. We talk about those, yes, but we also talk about what it’s like for her, living and working as a web developer in her home country of Lebanon. We discuss the preconceptions and misconceptions that people in the West have about Lebanon, its people and its customs. I think you’ll find what she has to say fascinating. I know I did. This episode is kindly sponsored by two UK conferences, Native Summit and dConstruct. Get your ticket to dConstruct for only £125+VAT (£150) when you use the offer code unfinished.