Front End web development

I've been into the idea of JAMstack lately. In fact, it was at the inaugural JAMstack_conf that I gave a talked called The All-Powerful Font-End Developer . My overall point there was that there are all these services that we can leverage as front-end developers to build complete websites without needing much help from other disciplines — if any at all. Sometimes, the services we reach for these days are modern and fancy, like a real-time database solution with authentication capabilities. And sometimes those services help process forms. Speaking of which, a big thanks to Wufoo for so successfully being there for us front-end developers for so many years. Wufoo was one of my first tastes of being a powerful front-end developer. I can build and design a complex form super fast on Wufoo and integrate it onto any site in minutes. I've done it literally hundreds of times, including here on CSS-Tricks. Another thing that I love about building Wufoo forms is that they travel so ...

You know how you can have multiple backgrounds ? body { background-image: url(image-one.jpg), url(image-two.jpg); } That's just background-image . You can set their position too, as you might expect. We'll shorthand it: body { background: url(image-one.jpg) no-repeat top right, url(image-two.jpg) no-repeat bottom left; } I snuck background-repeat in there just for fun. Another one you might not think of setting for multiple different backgrounds, though, is background-clip . In this linked article , Stefan Judis notes that this unlocks some pretty legit CSS-Trickery! Direct Link to Article — Permalink The post Multiple Background Clip appeared first on CSS-Tricks . from CSS-Tricks http://bit.ly/2RWIssq

I’m thrilled to announce my Skillshare class about creating successful design systems is live! Here’s what the course is about: After working with many organizations to develop customized design systems, Brad saw the need for a straightforward approach that anyone could use to create a more effective system from scratch. His solution? The Atomic Design method. This 60-minute class will teach you to build a custom design system using Brad’s tried-and-true step-by-step method. You’ll learn how to: Conduct an interface inventory  to start your initiative Choose the right pilot project  to guide your system Build your design system  with the atomic design method Adapt your design system  as your needs change Plus, Brad shares his favorite tools, exercises, and templates to make it easy for you to get started right away. Whether you’re building your first design system from scratch or are looking to improve on a system that’s already in place, this class will...

I want to take a closer look at the CSS animation property and walk through an effect that I used on my own portfolio website : making text appear from behind a moving object. Here’s an isolated example if you’d like to see the final product. Here’s what we're going to work with: See the Pen Revealing Text Animation Part 4 - Responsive by Jesper Ekstrom ( @jesper-ekstrom ) on CodePen . Even if you’re not all that interested in the effect itself, this will be an excellent exercise to expand your CSS knowledge and begin creating unique animations of your own. In my case, digging deep into animation helped me grow more confident in my CSS abilities and increased my creativity, which got me more interested in front-end development as a whole. Ready? Set. Let’s go! Step 1: Markup the main elements Before we start with the animations, let's create a parent container that covers the full viewport. Inside it, we're adding the text and the image, each in a separate div s...

David Heinemeier Hansson has written an interesting post about the current state of web design and how designers ought to be able to still work on the code side of things: We build using server-side rendering, Turbolinks, and Stimulus. All tools that are approachable and realistic for designers to adopt, since the major focus is just on HTML and CSS, with a few sprinkles of JavaScript for interactivity. And it’s not like it’s some well kept secret! In fact, every single framework we’ve created at Basecamp that allows designers to work this way has been open sourced. The calamity of complexity that the current industry direction on JavaScript is unleashing upon designers is of human choice and design. It’s possible to make different choices and arrive at different designs. I like this sentiment a whole lot — not every company needs to build their websites the same way. However, I don’t think that the approach that Basecamp has taken would scale to the size of a much larger organiza...

Chen Hui Jing has tackled a ton of design patterns for tables that might come in handy when creating tables that are easy to read and responsive for the web: There are a myriad of table design patterns out there, and which approach you pick depends heavily on the type of data you have and the target audience for that data. At the end of the day, tables are a method for the organisation and presentation of data. It is important to figure out which information matters most to your users and decide on an approach that best serves their needs. This reminds me of way back when Chris wrote about responsive data tables and just how tricky they are to get right. Also there’s a great post by Richard Rutter in a similar vein where he writes about the legibility of tables and fine typography: Many tables, such as financial statements or timetables, are made up mostly of numbers. Generally speaking, their purpose is to provide the reader with numeric data, presented in either columns or ro...

This tutorial explains how to log requests that are blocked by the 7G Firewall . This is useful for testing, debugging, and just keeping an eye on things. Learn how to log requests from Apache mod_rewrite and download my custom 7G logging script . It’s a complete example that shows how to log rewrite requests via PHP . All open source and free :) If you’re using 7G, you can find any errors using the free logging script. Contents How it works Log Example Usage Configure 7G for logging Preparing the Log file Reading the log file Preflight Check Download 7G Logging script Troubleshooting 7G Firewall Bonus: IP Logging with 7G How it works The 7G Firewall includes built-in logging directives. Once logging is enabled (as explained below), mod_rewrite will send request data to our handy little PHP script. The logging script then parses the data and writes it to the log file. The result is a log file that looks very similar to Apache defaults. Under the hood, here is what ha...

The beta version of 7G Firewall is here! It’s been a long time coming, and now you can help test the next incarnation of the nG Firewall (aka nG Blacklist). The 7G Firewall offers lightweight, server-level protection against a wide range of malicious requests, bad bots, automated attacks, spam, and many other types of threats and nonsense. 7G is a lightweight (only 12KB) strong firewall that provides site security and peace of mind. Plus, 7G is open source and 100% free for everyone :) Contents About 7G How It Works Features Requirements Download 7G License Disclaimer Deployment Testing & Feedback Notes & Infos Learn More.. Show Support Thank You About 7G Two unwritten laws of the Web: 1) Nothing is 100% secure, and 2) All websites are under pretty much 24/7 constant attack. Whether it’s just nuisance traffic like spam, or serious in-your-face DDoS attack, now is the time to strengthen site security and lock things down . 7G helps with this by prot...

Here's a possibility! Perhaps you are testing your JavaScript with a framework like Jasmine . That's nice because you can write lots of tests to cover your application, get a nice little UI to see the output, and even integrate it with build and deploy tools to make your ongoing development work safer. Now, perhaps there is this zany developer on your team who keeps changing API endpoints on you — quite literally breaking things in the process. You decide to write a test that hits those endpoints and makes sure you're getting back from it what you expect. Straightforward enough. The only slightly tricky part is that API requests are async. To really test it, the test needs to have some way to wait for the results before testing the expectations. That can be handled in Jasmine through a beforeEach() , which can wait to complete until you call a done() function. Here's the whole thing: See the Pen Test Endpoint with Jasmine by Chris Coyier ( @chriscoyier ) on Code...

Andy Adams released a book for aspiring WordPress freelancers. It's meant to take a lot of the guesswork and the roadblocks that many folks often hit when making the decision to fly solo and rely on WordPress development for a stable source of work and income. Aside from being included in it (and Andy being an all-around great guy), I want to share the book with y'all because WordPress and freelancing are two topics I care deeply about, particularly because the WordPress platform and community helped me crack into freelancing when I made that decision five years ago . What I've seen over the years is a delta between what is perceived about WordPress freelancing and the actual reality of it. Sure, all you need is a computer, a text editor and a free download of WordPress to get started. That's the easy part, but there's much, much more that's worth considering. Finding clients is hard. Managing those clients is hard. Pricing work is hard. Proposals are hard...

Forms on websites can be used for a lot of purposes besides being a place to contact the website administrators. In previous posts, I covered how to create a fully functional contact form in PHP and how to build your own Captcha and integrate it in your contact forms . In this tutorial, our focus will be on creating forms in PHP that are meant to serve other purposes like gathering information about a job applicant, booking hotel rooms or getting information about marriage events from clients. Choosing the Right Fields for your Forms In the contact form tutorial, we learned that different organizations and websites will most probably want to get specific information from people contacting them in order to assist them in the best possible way. For instance, a contact form on a school website might ask parents information about their kids enrolled in that school. Similarly, the contact form on a shopping website might gather information about the last product people bought in order to...

This resonated pretty strongly with people: I’d watch a documentary series of developers giving a tour of their codebases. — Chris Coyier (@chriscoyier) January 6, 2019 I think I was watching some random Netflix documentary and daydreaming that the subject was actually something I was super interested in: a semi-high-quality video deep dive into different companies codebases, hearing directly from the developers that built and maintain them. Horror stories might also be interesting. Particularly if they involve perfect storm scenarios that naturally take us on a tour of the codebase along the way, so we can see how the system failed. We get little glimpses of this sometimes. Probably more interesting is a tour of codebases when everything is humming along as planned. I wanna see the bottling factory when it's working efficiently so I can see the symphony of it more than I wanna see a heaping pile of broken glass on the floor. Or! Maybe the filmmaker will get lucky and th...

(This is a sponsored post .) Let's say you were going to design the easiest way to deploy a static site you can possibly imagine. If I was tasked with that, I'd say, well, it would deploy whenever I push to my master branch, and I'd tell it what command to run to build my site. Or maybe it has its own CLI where I can kick stuff out with as I choose. Or, you know what, maybe it's so accommodating, I could drag and drop a folder onto it somehow and it would just deploy. Good news: Netlify is way ahead of me. Netlify can do all those things, and so much more. Your site will be hosted on a CDN so it's fast as heck. You can roll back to any other deployment because each build is immutable and trivially easy to point to. You can upload a folder of Node JavaScript functions and you can run those so you can do back-end things, like talk to APIs securely. Heck, even your forms can be automatically processed without writing any code at all! It's almost shocking how u...

For some reason, I’ve lately been thinking a lot about what it takes to break into the web design industry and learn CSS. I reckon it has something to do with Keith Grant’s post earlier this month on a CSS mental model where he talks about a “common core for CSS”: We need common core tricks like this for CSS. Not “tricks” in the old sense (like how to fake a gradient border), but mental patterns: ways to frame the problem in our heads, so we can break problems into their constituent parts and notice recurring patterns. Those of us who deeply understand the language do this internally. We need to start working on distilling out these mental patterns we use for understanding layout and positioning and working with relative units, so that we can articulate them to others. On this note, Rachel Andrew also wrote about how to learn CSS , but in this case, she focuses more on technical CSS specifics: For much of CSS, you don’t need to worry about learning properties and values by hear...

Many of us follow @horse_js on Twitter. Twenty-one thousand of us, to be exact. That horse loves stirring up mischief by taking people's statements out of context. It happened to me a few times and almost got me in trouble. I wonder how many people hate CSS because their experience with it — Horse JS (@horse_js) September 23, 2018 I wonder how many people hate CSS because their experience with it is overriding bootstrap. In completely unrelated news, guess what I'm doing today. — Sarah Drasner (@sarah_edo) September 21, 2018 There's even a @horsplain_js account that follows along and explains the origin of the tweets. Burke Holland and Jasmine Greenaway created a data science project to uncover the true identity of the notorious JavaScript parody account. This single page site goes through time series analysis, most quoted people, location and phrases to get to the bottom of the riddle. We won't spoil it... you'll just have to visit and see. Direct...

I've very excited to have this feature released for CodePen. It's very progressive enhancement friendly in the sense that you can take any <pre> block of HTML, CSS, and JavaScript (or any combination of them) and enhance it into an embed, meaning you can see the rendered output. It also lets you pass in stuff like external resources, making it a great choice for, say, documentation sites or the like. Here's an example right here: <div id="root"></div> @import url("https://fonts.googleapis.com/css?family=Montserrat:400,400i,700"); body { margin: 0; font-family: Montserrat, sans-serif; } header { background: #7B1FA2; color: white; padding: 2rem; font-weight: bold; font-size: 125% } class NavBar extends React.Component { render() { return( <header> Hello World, {this.props.name}! </header> ); } } ReactDOM.render( <NavBar name="Chris" />, document.getEle...