RedTeamDesign Articles on front-end development, CSS, HTML, JavaScript and more. http://www.red-team-design.com Always strive to improve yourself Yeah I know the title is a cliche but I just couldn’t help it. Everyone could be a little better, but the thing is that some people don’t even try. Mon, 15 Feb 2016 08:00:00 +0000 http://www.red-team-design.com/strive-to-improve-yourself/ http://www.red-team-design.com/strive-to-improve-yourself/ AWRStudyr Chrome extension or what I've been up to lately If you’d ask me what I’ve been up lately, I’d say: working, reading, learning - pretty much just like you, I guess. The thing is it’s been a while since I wrote something here and my first article this year is about AWRstudyr, a Chrome extension I’ve been working lately and it’s something I’ve put lots of effort into it. Mon, 18 Jan 2016 08:00:00 +0000 http://www.red-team-design.com/awrstudyr-chrome-extension/ http://www.red-team-design.com/awrstudyr-chrome-extension/ Web design is not just web design anymore I’ve wanted to write this article for some time now, and this time I made it. It’s been a while since doing web design isn’t just like making stuff nice in Photoshop and then pass it to somebody else to slice it and deliver. In the meantime, designers have learned to code and nowadays, being a good web designer means to have the ability to combine your design skills with things like usability and accessibility knowledge in order to deliver the best user experience. Oh, and I almost forgot about SEO - you really need to know to handle your markup so that search engines to like you. Mon, 25 May 2015 08:00:00 +0000 http://www.red-team-design.com/web-design-is-not-just-web-design-anymore/ http://www.red-team-design.com/web-design-is-not-just-web-design-anymore/ SEOface icons There are a lot of great icon packs in the wild, but if you’re particularly looking for some SEO icons like stats, analytics, rankings or localization then you may want a bit more diversity to choose from. Mon, 30 Mar 2015 08:00:00 +0000 http://www.red-team-design.com/seoface-icons/ http://www.red-team-design.com/seoface-icons/ Unicode chars are now colored in latest Firefox on Windows 8.1 You know Unicode characters, those glyphs we’re inserting most of times via HTML or CSS in order to add a soft touch to our buttons, form controls and so on. Well, if you’re using Firefox on Windows 8.1, then you should check the newly colored Unicode characters in your web pages. Tue, 06 Jan 2015 08:00:00 +0000 http://www.red-team-design.com/colored-unicode-chars-windows8-firefox/ http://www.red-team-design.com/colored-unicode-chars-windows8-firefox/ Form controls with CSS currentColor and pseudo elements Because CSS currentColor value and pseudo elements make a damn good team. Well, I didn’t know about CSS currentColor keyword until a while ago. I’ve started playing around with it and yeah, this is extremely powerful. Some really say that this is the first CSS variable that ever existed, sounds pretty interesting huh? Mon, 10 Nov 2014 08:00:00 +0000 http://www.red-team-design.com/form-controls-currentcolor-pseudo-elements/ http://www.red-team-design.com/form-controls-currentcolor-pseudo-elements/ Using and over abusing CSS People usually are abusing features just because they can. It happened before, it’s happening now and most likely it will happen again. Mon, 11 Aug 2014 08:00:00 +0000 http://www.red-team-design.com/using-over-abusing-css/ http://www.red-team-design.com/using-over-abusing-css/ Gamespot's loading hearts “Video games ruined my life. Good thing I have extra lives.” If you’re a passionate gamer like me, then you’ve probably heard this before. On this matter, the other days I was browsing through some reviews to find out more about my latest favorite game, Dark Souls 2 which by the way, it rocks. But, I’m not making video games reviews here. The thing is that while checking the Gamespot review, I noticed a very nice and original loader somehow inspired by the above tagline. I fall instantly in love with that animation and tried to replicate it with CSS, I just couldn’t help myself. So, just in case you weren’t already tired of spinners and loaders, here’s another one. Mon, 07 Apr 2014 08:00:00 +0000 http://www.red-team-design.com/gamespot-loading-hearts/ http://www.red-team-design.com/gamespot-loading-hearts/ Moving from WordPress to Jekyll My website was needing a fresh new look, and what better chance to learn a new approach than this? You may ask why would you want to move from WordPress to Jekyll when everything works just fine? That’s a good question and I think the short answer is to learn. Mon, 03 Mar 2014 08:00:00 +0000 http://www.red-team-design.com/moving-from-wordpress-to-jekyll/ http://www.red-team-design.com/moving-from-wordpress-to-jekyll/ Simple SCSS spinner animation If you’re using Wordpress, you surely have seen this spinner effect while performing various actions within the admin area. I liked it a lot and that’s the reason I made a SCSS version of it, posted a demo on CodePen and even it’s not rocket science, I pushed it on GitHub too. Mon, 10 Feb 2014 06:00:01 +0000 http://www.red-team-design.com/simple-scss-spinner-animation/ http://www.red-team-design.com/simple-scss-spinner-animation/ Data URI conversion tools Nowadays, encoding stuff is not a secret anymore and we’re using data URI for small images, SVG’s and even custom fonts. After all, this is one of the best ways to minimize the number of HTTP requests. On this matter, I thought about making a list with some online conversion tools you can use right away. Mon, 20 Jan 2014 06:00:35 +0000 http://www.red-team-design.com/data-uri-tools/ http://www.red-team-design.com/data-uri-tools/ A beginner's list of JavaScript gotchas I consider myself a novice when it comes to coding in JavaScript but lately I played a bit more with this language and stumbled upon a few random things I thought were worth sharing. So, if you are new to JavaScript or just don’t know it as well as you would like, I hope you find this article useful. Mon, 09 Dec 2013 06:00:57 +0000 http://www.red-team-design.com/beginner-javascript-gotchas/ http://www.red-team-design.com/beginner-javascript-gotchas/ position: sticky might be the next best thing As you may have read a while ago, position: sticky landed in WebKit. Now, the latest news is that Firefox Nightly supports sticky positioning too and that’s definitely good news! Mon, 16 Sep 2013 05:00:43 +0000 http://www.red-team-design.com/position-sticky-might-be-the-next-best-thing/ http://www.red-team-design.com/position-sticky-might-be-the-next-best-thing/ Just another dropdown menu concept I found this two years old Dribbble shot by Ignacio Giri. Don’t ask me how, I just don’t remember how did I stumble upon it but one thing is clear: I bookmarked this dropdown menu concept, stared at it a bit and then I thought about making something similar with CSS. Mon, 29 Jul 2013 05:00:00 +0000 http://www.red-team-design.com/dropdown-menu-concept/ http://www.red-team-design.com/dropdown-menu-concept/ Making HTML dropdowns not suck Customizing form elements was always pretty frustrating and the select element is one of those elements who can make you want to pull your remaining hair out while trying to style it. As you may already know, when talking about its customization, there isn’t too much CSS stuff you can apply to it, just properties like color, background, font or border. In this article, in order to customize the look of the native HTML dropdown select, we’ll be using a different approach based on some cutting edge techniques like @supports, pointer-events and appearance. Mon, 01 Jul 2013 05:00:05 +0000 http://www.red-team-design.com/making-html-dropdowns-not-suck/ http://www.red-team-design.com/making-html-dropdowns-not-suck/