November, 2020 | Webmasters Gallery

The Cleanest Trick for Autogrowing Textareas

November 11th, 2020 admin No comments

Earlier this year I wrote a bit about autogrowing textareas and inputs. The idea was to make a </code> more like a <code></p> <div></code> so it expands in height as much as it needs to in order to contain the current value. It’s almost weird there isn’t a simple native solution for this, isn’t it? Looking back at that article, none of my ideas were particularly good. But Stephen Shaw’s <a target="_blank" href="https://codepen.io/shshaw/pen/c72208b279d750f1ab46b6a45bbd04d7">idea</a> that I linked to toward the end of it is actually a <em>very</em> good idea for this, so I wanted to shine some light on that and talk through how it works, because it seems like it’s the final answer to how this UX can be done until we get something native and better.</p> <p><span></span></p> <p>Here’s the demo in case you just want a working example:</p> <div>CodePen Embed Fallback</div> <h3>The trick is that you exactly replicate the content of the <code><textarea></code> in an element that <em>can</em> auto expand height, and match its sizing.</h3> <p>So you’ve got a <code><textarea></code>, which <em>cannot</em> auto expand height. </p> <p>Instead, you <em>exactly</em> replicate the look, content, and position of the element in another element. You hide the replica visually (might as well leave the one that’s technically-functional visible). </p> <figure></figure> <p>Now all three elements are tied to each other. Whichever of the children is tallest is will push the parent to that height, and the other child will follow. This means that the minimum height of the <code><textarea></code> will become the “base” height, but if the replicated text element happens to grow taller, everything will grow taller with it.</p> <p>So clever. I love it so much. </p> <h3>You need to make sure the replicated element is <em>exactly</em> the same</h3> <p>Same font, same padding, same margin, same border… everything. It’s an identical copy, just visually hidden with <code>visibility: hidden;</code>. If it’s not exactly the same, everything won’t grow together exactly right.</p> <p>We also need <code>white-space: pre-wrap;</code> on the replicated text because that is how textareas behave.</p> <h3>This is the weirdest part</h3> <p><a target="_blank" href="https://codepen.io/chriscoyier/pen/XWKEVLy">In my demo</a>, I’m using <code>::after</code> for the replicated text. I’m not sure if that’s the best possible approach or not. It feels clean to me, but I wonder if using a <code></p> <div></code> is safer for screen readers? Or maybe the <code>visibility: hidden;</code> is enough for that? Anyway, that’s not the weird part. This is the weird part:</p> <pre><code>content: attr(data-replicated-value) " ";</code></pre> <p>Because I am using a pseudo-element, that’s the line that takes the <code>data</code> attribute off the element and renders the content to the page <strong>with that extra space</strong> (that’s the weird part). If you don’t do that, the end result feels “jumpy.” I can’t say I entirely understand it, but it seems like it respects the line break behavior across the textarea and text elements better.</p> <p>If you don’t want to use a pseudo-element, hey, fine with me, just watch for the jumpy behavior.</p> <hr> <p>Special high fives to Will Earp and Martin Tillmann who both randomly emailed on the same exact day to remind me how clever Shaw’s technique is. <a target="_blank" href="https://codepen.io/mrmartinezzz/pen/jOrVRmm">Here’s an example</a> Martin made with Alpine.js and Tailwind that also ends up kinda like a one-liner (but note how it’s got the jumpy thing going on). </p> <p>I’m sure ya’ll could imagine how to do this with Vue and React and whatnot in a way that can very easily maintain state across a textarea and another element. I’m not going to include examples here, partially because I’m lazy, but mostly because I think you should understand <em>how</em> this works. It will make you smarter and understand your site better.</p> <hr> <p>The post <a target="_blank" rel="nofollow" href="https://css-tricks.com/the-cleanest-trick-for-autogrowing-textareas/">The Cleanest Trick for Autogrowing Textareas</a> appeared first on <a target="_blank" rel="nofollow" href="https://css-tricks.com/">CSS-Tricks</a>.</p> <p>You can support CSS-Tricks by being an <a target="_blank" href="https://css-tricks.com/product/mvp-supporter/">MVP Supporter</a>.</p> <div class="fixed"></div> </div> <div class="under"> <span class="categories">Categories: </span><span><a href="http://www.webmastersgallery.com/category/design/" rel="category tag">Designing</a>, <a href="http://www.webmastersgallery.com/category/uncategorized/" rel="category tag">Others</a></span> <span class="tags">Tags: </span><span></span> </div> </div> <div class="post" id="post-3657396"> <h2><a class="title" href="http://www.webmastersgallery.com/2020/11/11/how-to-design-a-contact-page-that-drives-engagement/" rel="bookmark">How to Design a Contact Page That Drives Engagement</a></h2> <div class="info"> <span class="date">November 11th, 2020</span> <span class="author"><a href="http://www.webmastersgallery.com/author/admin/" title="Posts by admin" rel="author">admin</a></span> <span class="comments"><a href="http://www.webmastersgallery.com/2020/11/11/how-to-design-a-contact-page-that-drives-engagement/#respond">No comments</a></span> <div class="fixed"></div> </div> <div class="content"> <div class="ftpimagefix" style="float:left"><a target="_blank" href="https://www.webdesignerdepot.com/2020/11/how-to-design-a-contact-page-that-drives-engagement/"><img decoding="async" src="https://www.webdesignerdepot.com/cdn-origin/uploads/2020/11/tune.png" title="" alt=""></a></div> <p> How can your customer reach you? If a client arrives on your website after searching on Google, what can they do to take the next step in a relationship with your brand,<em> without buying anything?</em></p> <p>One of the primary aims of any website is to drive conversions. However, it usually takes between 5 and 8 touchpoints to generate a <a target="_blank" href="https://www.salesforce.com/blog/2015/04/takes-6-8-touches-generate-viable-sales-lead-heres-why-gp.html">viable sales lead</a>. People don’t want to convert straight away.</p> <p>Since building a relationship with customers is crucial to success, it makes sense that the contact page would be an essential part of driving results. Unfortunately, a lot of website owners pay virtually no attention to that page. They ask their designer to <a target="_blank" href="https://www.webdesignerdepot.com/2015/11/how-to-design-the-perfect-contact-page/">create a page</a> with their address and phone number on – and that’s it.</p> <p>What many business owners don’t realize, is that the contact page is the door to deeper, more lucrative relationships with potential prospects. The design of this essential website element needs to be fantastic to drive results.</p> <p>So, where do you start?</p> <h1>Defining a Well-Designed Contact Page</h1> <p>Let’s start with the basics, what makes a great contact page?</p> <p>The complete answer to that question depends on the target audience. Some customers will want to see fun and friendly contact pages, complete with social media sharing buttons. Others will want to see a map that shows them exactly how to reach an office or business.</p> <p>There are a few golden rules to keep in mind, of course. Contact pages should be:</p> <ul> <li><b>Easy to find: </b>Don’t hide the link to the contact page on the website footer. Make it easy for customers to find out how they can get in touch.</li> <li><b>Simple:</b> Don’t put too much content on this page or it will overwhelm your audience. Just let them know where they can go to get answers to various questions.</li> <li><b>Professional:</b> Even if you have a friendly brand personality, your contact form still needs to be grammatically correct and well-designed to show a professional edge.</li> <li><b>Convenient: </b>Make your phone number clickable so customers can use it on Skype. The same can apply for your email address. Provide easy access to social media profiles, and if you have a contact form – keep it short and sweet.</li> <li><b>Informative:</b> Include <b>all </b>of your contact information in the same place. This may include your address, a map to your location, social media pages, email addresses, and even forums.</li> <li><b>Accurate:</b> Ensure that the information on your contact page matches the information listed elsewhere. Check directories and Google my Business listings to be sure.</li> <li><b>Attractive: </b>Yes, a contact page needs to look good too. Plenty of white space will make essential information stand out. A good layout will guide the eye through the page.</li> <li><b>Consistent:</b> Make sure the contact form on your website matches the brand personality that appears on all of your other pages.</li> </ul> <p>Take a look at the <a target="_blank" href="https://www.tune.com/contact-us/">Tune Contact</a> page:</p> </p> <p>It’s beautifully laid out, with clear information that’s easy to read. The company shows exactly <em>why</em> customers might want to get in touch and how they can reach out. As you scroll through the page, you’ll find additional office locations, email addresses for different teams (sales and support), and links to social media accounts too.</p> <h1>How to Drive Engagement on a Contact Us Page</h1> <p>A good contact page needs to look fantastic, showcase the company’s personality, and capture audience attention. However, there’s a big difference between a contact page that gets the job done, and one that convinces your audience they <em>have </em>to connect with you.</p> <p>Here are some excellent ways to make your contact us page stand out.</p> <h2>Step 1: Using Color Correctly</h2> <p>Color and color psychology have a <a target="_blank" href="https://www.webdesignerdepot.com/2019/07/how-color-impacts-ux/">massive impact on user experience</a>.</p> <p>Studies constantly demonstrate the conversion powers of having the right shades on certain pages throughout your website. For instance, changing a CTA button from red to green can increase<a target="_blank" href="http://blog.hubspot.com/blog/tabid/6307/bid/20566/The-Button-Color-A-B-Test-Red-Beats-Green.aspx#sm.0001lp3ugxe2peiey531wmrmf0uru"> click-through rates by 27%.</a></p> <p>However, every audience is different. The colors that drive engagement on a contact page for your company will depend on your target customer. A/B testing color palettes that match your brand personality is a good way to get started.</p> <p>One interesting example of colors that make the right impact on a Contact Us page <a target="_blank" href="https://www.hubspot.com/company/contact">comes from Hubspot</a>. Here, the brand maintains it’s brand color (orange), but it also introduces some new shades that convey trustworthiness and professionalism.</p> <p><a target="_blank" href="https://www.hubspot.com/company/contact"><img decoding="async" src="https://www.webdesignerdepot.com/cdn-origin/uploads/2020/11/hubspot.png" width="650" title="" alt=""></a></p> <p>Blue is the most <a target="_blank" href="https://neilpatel.com/blog/psychology-of-color-and-conversions/">calming and credible color</a> for any brand, The gradient that Hubspot uses here blends perfectly with its brand identity, allowing for a stunning contact page, with CTA buttons that still stand out.</p> <p>Experiment with colors that can generate the right emotional response from your audience, but don’t ignore the golden rules of color in web design. You still need to showcase your brand identity, and you still need a way of making crucial information <b>stand out. </b></p> <h2>Step 2: Humanizing the Customer Service Team</h2> <p>Some of the customers that arrive at a contact page are interested in your product or inspired by the potential of your service. Other customers will be looking for assistance because they’re frustrated with something or stressed out.</p> <p>If you’ve ever had a problem with a product and wanted to reach out to the brand about it, you’ve probably noticed how annoying it is to find a blank contact page with nothing but an email address. The lack of effort and humanity in the contact page is enough to convince you that you probably won’t get a response.</p> <p>But what if you add some happy smiling faces to the page?</p> <p>Research indicates that <a target="_blank" href="http://science.sciencemag.org/content/314/5796/72.full">brains are fine-tuned</a> to recognize and appreciate human faces. Having a picture of your customer service team, or just any human being on your contact page makes you instantly more approachable. Your customers start to feel like they’re reaching out to a person – not an empty website.</p> <p>Look at how engaging and personalized <a target="_blank" href="https://ambermccue.com/contact/">this contact page</a> from Amber McCue looks:</p> <p><a target="_blank" href="https://ambermccue.com/contact/"><img decoding="async" src="https://www.webdesignerdepot.com/cdn-origin/uploads/2020/11/ambermccue.png" width="650" title="" alt=""></a></p> <p>Although you can show any human face on your contact page and potentially get results, showing your actual agents will be more likely to drive positive results. It’s a great way to showcase the authenticity and humanity of your team.</p> <h2>Step 3: Making it Easy to Find</h2> <p>A surprisingly large amount of the time, companies shove their contact information into the footer of their website, forcing customers to spend <em>forever</em> looking for them. However, your audience might not want to spend an age searching for your details if they’re in a hurry to get answers.</p> <p>Stowing a contact page in a footer is also a problem for those visiting your website via mobile, as they might not be able to see all your footer details and links as well.</p> <p>A Contact Us page doesn’t have to be a massive part of your website navigation if you don’t want it to be. However, it should be one of the first things your audience can see. Putting the information on the header of your website, or even sticking it to the top of the page as your users scroll is very helpful.</p> <p><a target="_blank" href="https://www.zendesk.com/">Zendesk</a> makes it easy for customers to get in touch in multiple ways. First, the Contact section of the website is clear at the top of the page. Secondly, if you start scrolling through the Zendesk website, a “Get Help” button pops up, so you don’t have to scroll back to find assistance:</p> <p><a target="_blank" href="https://www.zendesk.com/"><img decoding="async" src="https://www.webdesignerdepot.com/cdn-origin/uploads/2020/11/zendesk.png" width="650" title="" alt=""></a></p> <p>Remember, aside from making sure that your contact page appears in the right part of your website, it’s also worth ensuring that it’s easy to understand. Don’t use unusual terms like “Chat”, or “Chill with us”. Stick to tried-and-true options like Help, Contact, or Support.</p> <h2>Step 4: Making the Experience Relevant</h2> <p>There’s a reason why it’s practically <em>impossible </em>to find a one-size-fits-all contact page.</p> <p>It’s because different customers need different things from your brand.</p> <p>Some customers will be looking for the answer to a question; others will want to discuss something with your sales team. That’s why many companies are using adaptive contact pages that can change to suit the situation.</p> <p>For instance, you may start by asking customers what they need help with. Zapier takes this approach with <a target="_blank" href="https://zapier.com/app/get-help">its Contact page</a>:</p> <p><a target="_blank" href="https://zapier.com/app/get-help"><img decoding="async" src="https://www.webdesignerdepot.com/cdn-origin/uploads/2020/11/zapier.png" width="650" title="" alt=""></a></p> <p>By asking the client what they need straight away, Zapier can make sure that the visitor finds the right information, and the right number or email address for the appropriate agent. You can even scroll down the help page and look for something in the available help centre, using the search bar. Or you can click on <em>View our experts </em>to hire a Zapier pro.</p> <p>Creating a dynamic and customized experience like this does a few things. First, it ensures that the customer will reach the right person to help them first-time around. This reduces the number of inappropriate calls your employees have to deal with, and the number of transfers.</p> <p>Secondly, you deliver a better experience overall for your client, because they don’t have to repeat their issue to multiple people or start a massive email thread. They get the support they need immediately.</p> <p>Dynamic contact pages can even save you some money and time. If clients decide to solve an issue themselves, using your resources, that’s great for your busy agents.</p> <h2>Step 5: Direct People to the Right Place</h2> <p>The central focus of your contact us page needs to be the available contact options. Centralizing the contact options on a page is an excellent way to make sure that they get the right amount of attention. Centralizing also means that your customers can spend less time searching for the contact details that they need, which is great for usability.</p> <p>The <a target="_blank" href="http://melonfree.com/">Melonfree.com</a> website uses a contact us form that’s centralized to immediately pull attention to the customer’s options for getting help.</p> <p><a target="_blank" href="http://melonfree.com/"><img decoding="async" src="https://www.webdesignerdepot.com/cdn-origin/uploads/2020/11/melonfree.png" width="650" title="" alt=""></a></p> <p>Centralization isn’t the only way of using design principles to guide visitors on a contact page. According to Ray Hyman and Edmund Hick, increasing the number of choices on a page often increases the time it takes for people to <a target="_blank" href="http://blog.usabilla.com/killing-choice-applying-hicks-law-web-design/">make a decision</a>.</p> <p>When it comes to connecting with a brand, the right option for each customer will depend on the person and the situation they’re trying to overcome. For instance, a customer that needs to reset their password will probably be able to get the solution they need from an FAQ page.</p> <p>On the other hand, someone who needs help using a new feature might need the guidance of a professional. To help guide customers to the right solution, Basecamp gives customers a <a target="_blank" href="https://basecamp.com/support">variety of steps to follow</a> to get the right solution fast.</p> <p><a target="_blank" href="https://basecamp.com/support"><img decoding="async" src="https://www.webdesignerdepot.com/cdn-origin/uploads/2020/11/basecamp.png" width="650" title="" alt=""></a></p> <p>The main purpose of the contact page is to help customers get the right answer with an informative form. <b>However, </b>there are unobtrusive alternative options available too. If all you’re looking for is a way to help yourself fix a problem, you can click on the <b>help guides </b>link before you ever scroll down to the form.</p> <h2>Step 6: Support the Contact Team Too</h2> <p>The best <b>contact us </b>pages aren’t just a great way to improve customer experience. Well-designed solutions also help the customer service team to save time and stay productive.</p> <p>One of the primary metrics that companies consider when evaluating the success of a service team, is the <a target="_blank" href="https://www.helpscout.com/playlists/customer-service-metrics-reports/">number of replies</a> required before an issue is resolved. However, if the initial question from a customer doesn’t contain enough information, this number often increases.</p> <p>Using the design of the contact form to access the right information helps with:</p> <ul> <li><b>Automatically routing people to the right team member: </b>Companies can set up segmentation rules that automatically send certain emails to different employees based on keywords. You might have questions that go to the sales team, and separate queries that you direct straight to the customer service team.</li> <li><b>Show appropriate support options and FAQs:</b> Remember to give the audience a chance to help themselves before they reach out for extra support. Links to an FAQ page or self-service options can really reduce the pressure on a team. Some companies even add automated chatbots to the mix to help with self-service.</li> <li><b>Prompt for extra context: </b>Although not every customer will take advantage of an opportunity to add extra information to a form, some will. Adding a box to your contact form for “anything we need to know?” is a great way to generate more information. <a target="_blank" href="https://www.bando.com/pages/contact-us">Ban.do</a> includes a simple “question” box where customers can add as much detail as they like. An option to add screen shots or documents might be a nice touch too.</li> </ul> <p><a target="_blank" href="https://www.bando.com/pages/contact-us"><img decoding="async" src="https://www.webdesignerdepot.com/cdn-origin/uploads/2020/11/bando.png" width="650" title="" alt=""></a></p> <h1>Building Your Own Contact Us Page</h1> <p>Every customer has their own specific set of needs. The right contact page for another business might not be the right one for you. That’s why it’s so important to take some time getting to know your customers and speaking to your support team.</p> <p>When you’re planning your contact page, it helps to ask yourself some basic questions about what you want to achieve. For instance:</p> <ul> <li>What kind of channels will our customers want to use to connect with us? Look at things like social media messaging, email, or phone calls. If you’ve got a relatively tech-savvy audience, then they might want to use things like instant messaging with chat bots too.</li> <li>How can we direct clients to the appropriate channels in as little time as possible? Having a system in place to automatically route your customers to the right agent will reduce the time to resolution for your customers. The faster you solve problems, the better your reputation becomes.</li> <li>What can we do to set customer expectations and build confidence before they speak to us? Designing a professional-looking contact page will increase customer confidence, while an FAQ section shows that you’re ready to answer common questions.</li> <li>How can we showcase a unique brand personality without making the page complicated? Everything from using distinct brand colors on a contact page, to adding images and illustrations reminds customers that they’re in the right place.</li> <li>What can we do to reduce the friction points in a customer’s path to contact? Avoid adding too many input options to a contact form and ensure that it’s easy to reach out when your clients have a problem.</li> </ul> <p>Understanding exactly what your audience needs from you, and what they’re looking for when they come to your team for help reduces the effort involved for your client when they reach out for help. Remember, today’s digitally-savvy customers expect their interactions with companies to be as streamlined and simple as possible.</p> <h1>Make the Most of Your Contact Page</h1> <p>Contact pages are frequently an afterthought in the website design process. However, they’re one of the most valuable tools your company has. With a good contact page, you ensure that your customers can always reach you when they have problems. What’s more, you boost your chances of people wanting to reach out to the sales team too!</p> <p>Good luck creating a contact page that encourages engagement from your target audience. Don’t forget to track your results from each design, and A/B test for optimization.</p> <p><a target="_blank" href="https://www.webdesignerdepot.com/2020/11/how-to-design-a-contact-page-that-drives-engagement/">Source</a></p> <div class="fixed"></div> </div> <div class="under"> <span class="categories">Categories: </span><span><a href="http://www.webmastersgallery.com/category/design/" rel="category tag">Designing</a>, <a href="http://www.webmastersgallery.com/category/uncategorized/" rel="category tag">Others</a></span> <span class="tags">Tags: </span><span></span> </div> </div> <div class="post" id="post-3655816"> <h2><a class="title" href="http://www.webmastersgallery.com/2020/11/10/understanding-flex-grow-flex-shrink-and-flex-basis/" rel="bookmark">Understanding flex-grow, flex-shrink, and flex-basis</a></h2> <div class="info"> <span class="date">November 10th, 2020</span> <span class="author"><a href="http://www.webmastersgallery.com/author/admin/" title="Posts by admin" rel="author">admin</a></span> <span class="comments"><a href="http://www.webmastersgallery.com/2020/11/10/understanding-flex-grow-flex-shrink-and-flex-basis/#respond">No comments</a></span> <div class="fixed"></div> </div> <div class="content"> <p>When you apply a CSS property to an element, there’s lots of things going on under the hood. For example, let’s say we have some HTML like this:</p> <pre><code><div class="parent"> <div class="child">Child</div> <div class="child">Child</div> <div class="child">Child</div> </div></code></pre> <p>And then we write some CSS…</p> <pre><code>.parent { display: flex; }</code></pre> <p><span></span></p> <p>These are technically not the only styles we’re applying when we write that one line of CSS above. In fact, a whole bunch of properties will be applied to the <code>.child</code> elements here, as if we wrote these styles ourselves:</p> <pre><code>.child { flex: 0 1 auto; /* Default flex value */ }</code></pre> <p>That’s weird! Why do these elements have these extra styles applied to them even though we didn’t write that code? Well, that’s because some properties have defaults that are then intended to be overridden by us. And if we don’t happen to know these styles are being applied when we’re writing CSS, then our layouts can get pretty darn confusing and tough to manage.</p> <p>That <code>flex</code> property above is what’s known as a shorthand CSS property. And really what <em>this</em> is doing is setting three separate CSS properties at the same time. So what we wrote above is the same as writing this:</p> <pre><code>.child { flex-grow: 0; flex-shrink: 1; flex-basis: auto; }</code></pre> <p>So, a shorthand property bundles up a bunch of different CSS properties to make it easier to write multiple properties at once, precisely like the <code>background</code> property where we can write something like this:</p> <pre><code>body { background: url(sweettexture.jpg) top center no-repeat fixed padding-box content-box red; }</code></pre> <p>I try to avoid shorthand properties because they can get pretty confusing and I often tend to write the long hand versions just because my brain fails to parse long lines of property values. But it’s <a target="_blank" href="https://drafts.csswg.org/css-flexbox/#flex-grow-property">recommended</a> to use the shorthand when it comes to flexbox, which is…weird… that is, until you understand that the <code>flex</code> property is doing a lot of work and each of its sub-properties interact with the others.</p> <p>Also, the default styles are a good thing because we don’t need to know what these flexbox properties are doing 90% of the time. For example, when I use flexbox, I tend to write something like this:</p> <pre><code>.parent { display: flex; justify-content: space-between; }</code></pre> <p>I don’t even need to care about the child elements or what styles have been applied to them, and that’s great! In this case, we’re aligning the child items side-by-side and then spacing them equally between each other. Two lines of CSS gives you a lot of power here and that’s the neatest thing about flexbox and these inherited styles — <em>you don’t have to understand all the complexity under the hood</em> if you just want to do the same thing 90% of the time. It’s remarkably smart because all of that complexity is hidden out of view.</p> <p>But what if we want to understand how flexbox — including the <code>flex-grow</code>, <code>flex-shrink</code>, and <code>flex-basis</code> properties — actually work? And what cool things can we do with them?</p> <p>Just go to the <a target="_blank" href="https://css-tricks.com/almanac/">CSS-Tricks Almanac</a>. Done!</p> <p>Just kidding. Let’s start with a quick overview that’s a little bit simplified, and return to the default <code>flex</code> properties that are applied to child elements: </p> <pre><code>.child { flex: 0 1 auto; }</code></pre> <p>These default styles are telling that child element how to stretch and expand. But whenever I see it being used or overridden, I find it helpful to think of these shorthand properties like this:</p> <pre><code>/* This is just how I think about the rule above in my head */ .child { flex: [flex-grow] [flex-shrink] [flex-basis]; } /* or... */ .child { flex: [max] [min] [ideal size]; }</code></pre> <p>That first value is <code>flex-grow</code> and it’s set to <code>0</code> because, by default, we don’t want our elements to expand at all (most of the time). Instead, we want every element to be dependent on the size of the content within it. Here’s an example:</p> <pre><code>.parent { display: flex; }</code></pre> <div>CodePen Embed Fallback</div> <p>I’ve added the <code>contenteditable</code> property to each <code>.child</code> element above so you can click into it and type even more content. See how it responds? That’s the default behavior of a flexbox item: <code>flex-grow</code> is set to <code>0</code> because we want the element to grow based on the content inside it.</p> <p>But! If we were to change the default of the <code>flex-grow</code> property from <code>0</code> to <code>1</code>, like this…</p> <pre><code>.child { flex: 1 1 auto; }</code></pre> <p>Then all the elements will grow to take up an equal portion of the .parent element:</p> <div>CodePen Embed Fallback</div> <p>This is exactly the same as writing…</p> <pre><code>.child { flex-grow: 1; }</code></pre> <p>…and ignoring the other values because those have been set by default anyway. I think this confused me for <em>such</em> a long time when I started working with flexible layouts. I would see code that would add just <code>flex-grow</code> and wonder where the other styles are coming from. It was like an infuriating murder mystery that I just couldn’t figure out.</p> <p>Now, if we wanted to make just one of these elements grow more than the others we’d just need to do the following:</p> <pre><code>.child-three { flex: 3 1 auto; } /* or we could just write... */ .child-three { flex-grow: 3; }</code></pre> <div>CodePen Embed Fallback</div> <p>Is this weird code to look at even a decade after flexbox landed in browsers? It certainly is for me. I need extra brain power to say, “Ah, max, min, ideal size,” when I’m reading the shorthand, but it does get easier over time. Anyway, in the example above, the first two child elements will take up proportionally the same amount of space but that third element will try to grow up to three times the space as the others.</p> <p>Now this is where things get weird because this is all dependent on the content of the child elements. Even if we set <code>flex-grow</code> to <code>3</code>, like we did in the example above and then add more content, the layout will do something odd and peculiar like this:</p> <div>CodePen Embed Fallback</div> <p>That second column is now taking up too much darn space! We’ll come back to this later, but for now, it’s just important to remember that the content of a flex item has an impact on how <code>flex-grow</code>, <code>flex-shrink</code>, and <code>flex-basis</code> work together.</p> <p>OK so now for <code>flex-shrink</code>. Remember that’s the second value in the shorthand:</p> <pre><code>.child { flex: 0 1 auto; /* flex-shrink = 1 */ }</code></pre> <p><code>flex-shrink</code> tells the browser what the minimum size of an element should be. The default value is <code>1</code>, which is saying, “Take up the same amount of space at all times.” However! If we were to set that value to <code>0</code> like this:</p> <pre><code>.child { flex: 0 0 auto; }</code></pre> <p>…then we’re telling this element not to shrink at all now. <em>Stay the same size, you blasted element!</em> is essentially what this CSS says, and that’s precisely what it’ll do. We’ll come back to this property in a bit once we look at the final value in this shorthand.</p> <p><code>flex-basis</code> is the last value that’s added by default in the <code>flex</code> shorthand, and it’s how we tell an element to stick to an ideal size. By default, it’s set to <code>auto</code> which means, “Use my height or width.” So, when we set a parent element to <code>display: flex</code>…</p> <pre><code>.parent { display: flex; } .child { flex: 0 1 auto; }</code></pre> <p>We’ll get this by default in the browser:</p> <div>CodePen Embed Fallback</div> <p>Notice how all the elements are the width of their content by default? That’s because <code>auto</code> is saying that the ideal size of our element is defined by its content. To make all the elements take up the full space of the parent we can set the child elements to <code>width: 100%</code>, <em>or</em> we can set the <code>flex-basis</code> to <code>100%</code>, <em>or</em> we can set <code>flex-grow</code> to <code>1</code>.</p> <p>Does that make sense? It’s weird, huh! It does when you think about it. Each of these shorthand values impact the other and that’s why it is recommended to write this shorthand in the first place rather than setting these values independently of one another.</p> <p>OK, moving on. When we write something like this…</p> <pre><code>.child-three { flex: 0 1 1000px; }</code></pre> <p>What we’re telling the browser here is to set the <code>flex-basis</code> to <code>1000px</code> or, “please, please, please just try and take up <code>1000px</code> of space.” If that’s not possible, then the element will take up that much space proportionally to the other elements.</p> <div>CodePen Embed Fallback</div> <p>You might notice that on smaller screens this third element is not actually a <code>1000px</code>! That’s because it’s really a suggestion. We still have <code>flex-shrink</code> applied which is telling the element to shrink to the same size as the other elements.</p> <p>Also, adding more content to the other children will still have an impact here:</p> <div>CodePen Embed Fallback</div> <p>Now, if we wanted to prevent this element from shrinking at all we could write something like this:</p> <pre><code>.child-three { flex: 0 0 1000px; }</code></pre> <p>Remember, <code>flex-shrink</code> is the second value here and by setting it to 0 we’re saying, “Don’t shrink ever, you jerk.” And so it won’t. The element will even break out of the parent element because it’ll never get shorter than <code>1000px</code> wide:</p> <div>CodePen Embed Fallback</div> <p>Now all of this changes if we set <code>flex-wrap</code> to the parent element:</p> <pre><code>.parent { display: flex; flex-wrap: wrap; } .child-three { flex: 0 0 1000px; }</code></pre> <p>We’ll see something like this:</p> <div>CodePen Embed Fallback</div> <p>This is because, by default, flex items will try to fit into one line but <code>flex-wrap: wrap</code> will ignore that entirely. Now, if those flex items can’t fit in the same space, they’ll break onto a new line.</p> <hr> <p>Anyway, this is just some of the ways in which <code>flex</code> properties bump into each other and why it’s so gosh darn valuable to understand how these properties work under the hood. Each of these properties can affect the other, and if you don’t understand how one property works, then you sort of don’t understand how any of it works at all — which certainly confused me before I started digging into this!</p> <p>But to summarize:</p> <ul> <li>Try to use the <code>flex</code> shorthand </li> <li>Remember min, max, and ideal size when doing so</li> <li>Remember that the content of an element can impact how these values work together, too.</li> </ul> <hr> <p>The post <a target="_blank" rel="nofollow" href="https://css-tricks.com/understanding-flex-grow-flex-shrink-and-flex-basis/">Understanding flex-grow, flex-shrink, and flex-basis</a> appeared first on <a target="_blank" rel="nofollow" href="https://css-tricks.com/">CSS-Tricks</a>.</p> <p>You can support CSS-Tricks by being an <a target="_blank" href="https://css-tricks.com/product/mvp-supporter/">MVP Supporter</a>.</p> <div class="fixed"></div> </div> <div class="under"> <span class="categories">Categories: </span><span><a href="http://www.webmastersgallery.com/category/design/" rel="category tag">Designing</a>, <a href="http://www.webmastersgallery.com/category/uncategorized/" rel="category tag">Others</a></span> <span class="tags">Tags: </span><span></span> </div> </div> <div class="post" id="post-3655817"> <h2><a class="title" href="http://www.webmastersgallery.com/2020/11/10/aria-in-css/" rel="bookmark">ARIA in CSS</a></h2> <div class="info"> <span class="date">November 10th, 2020</span> <span class="author"><a href="http://www.webmastersgallery.com/author/admin/" title="Posts by admin" rel="author">admin</a></span> <span class="comments"><a href="http://www.webmastersgallery.com/2020/11/10/aria-in-css/#respond">No comments</a></span> <div class="fixed"></div> </div> <div class="content"> <p>Jeremey reacting to <a target="_blank" href="https://twitter.com/SaraSoueidan/status/1319992242262757377">Sara’s tweet</a>, about using <code>[aria-*]</code> selectors instead of classes when the styling you are applying is directly related to the ARIA state.</p> <blockquote> <p>… this is my preferred way of hooking up CSS and JavaScript interactions. Here’s [an] <a target="_blank" href="https://codepen.io/adactio/pen/oxLNwY">old CodePen</a> where you can see it in action</p> </blockquote> <p>Which is this classic matchup:</p> <pre><code>[aria-hidden='true'] { display: none; }</code></pre> <p><span></span></p> <p>There are plenty of more opportunities. Take a tab design component:</p> <div>CodePen Embed Fallback</div> <p>Since these tabs (using <a target="_blank" href="https://www.google.com/search?q=reach+ui&oq=reach+ui&aqs=chrome..69i57j69i59j69i60l2j69i61j69i60l2j69i61.692j0j7&sourceid=chrome&ie=UTF-8">Reach UI</a>) are already applying proper ARIA states for things like which tab is active, they don’t even bother with class name manipulation. To style the active state, you select the <code><button></code> with a data attribute and ARIA state like:</p> <pre><code>[data-reach-tab][aria-selected="true"] { background: white; }</code></pre> <p>The panels with the content? Those have an ARIA role, so are styled that way:</p> <pre><code>[role="tabpanel"] { background: white; }</code></pre> <p>ARIA is also matches up with variations sometimes, like…</p> <pre><code>[aria-orientation="vertical"] { flex-direction: column; }</code></pre> <p>If you’re like, wait, what’s ARIA? Heydon’s new show <em>Webbed Briefs</em> has <a target="_blank" href="https://briefs.video/#pilot">a funny introduction to ARIA</a> as the pilot episode.</p> <p><a target="_blank" href="https://adactio.com/journal/17566" title="Direct link to featured article">Direct Link to Article</a> — <a target="_blank" href="https://css-tricks.com/aria-in-css/">Permalink</a></p> <hr> <p>The post <a target="_blank" rel="nofollow" href="https://css-tricks.com/aria-in-css/">ARIA in CSS</a> appeared first on <a target="_blank" rel="nofollow" href="https://css-tricks.com/">CSS-Tricks</a>.</p> <p>You can support CSS-Tricks by being an <a target="_blank" href="https://css-tricks.com/product/mvp-supporter/">MVP Supporter</a>.</p> <div class="fixed"></div> </div> <div class="under"> <span class="categories">Categories: </span><span><a href="http://www.webmastersgallery.com/category/design/" rel="category tag">Designing</a>, <a href="http://www.webmastersgallery.com/category/uncategorized/" rel="category tag">Others</a></span> <span class="tags">Tags: </span><span></span> </div> </div> <div class="post" id="post-3654964"> <h2><a class="title" href="http://www.webmastersgallery.com/2020/11/10/the-raven-technique-one-step-closer-to-container-queries/" rel="bookmark">The Raven Technique: One Step Closer to Container Queries</a></h2> <div class="info"> <span class="date">November 10th, 2020</span> <span class="author"><a href="http://www.webmastersgallery.com/author/admin/" title="Posts by admin" rel="author">admin</a></span> <span class="comments"><a href="http://www.webmastersgallery.com/2020/11/10/the-raven-technique-one-step-closer-to-container-queries/#respond">No comments</a></span> <div class="fixed"></div> </div> <div class="content"> <div class="ftpimagefix" style="float:left"><a target="_blank" href="https://css-tricks.com/the-raven-technique-one-step-closer-to-container-queries/"><img decoding="async" src="https://i2.wp.com/css-tricks.com/wp-content/uploads/2020/10/RT_x4UFA.png?resize=1200%2C482&ssl=1" alt="Three boxes representing browsers from left-to-right. The first is a wide viewport with three boxes in a single row. The second is a narrow viewport with the boxes stacked vertically. The third is a wide viewport, but with a dashed vertical line down the middle representing a container and the three boxes are to the right of it in a single row."></a></div> <p>For the millionth time: <a target="_blank" href="https://css-tricks.com/lets-not-forget-about-container-queries/">We need container queries</a> in CSS! And guess what, it looks like <a target="_blank" href="https://groups.google.com/a/chromium.org/g/blink-dev/c/u1AKdrXhPGI/m/wrJb-unhAgAJ">we’re heading in that direction</a>.</p> <p>When building components for a website, you don’t always know how that component will be used. Maybe it will be render as wide as the browser window is. Maybe two of them will sit side by side. Maybe it will be in some narrow column. The width of <em>it</em> doesn’t always correlate with the width of the <em>browser window</em>.</p> <p>It’s common to reach a point where having container based queries for the CSS of the component would be super handy. If you search around the web for solution to this, you’ll probably find several JavaScript-based solutions. But those come at a price: extra dependencies, styling that requires JavaScript, and polluted application logic and design logic.</p> <p>I am a strong believer in separation of concerns, and layout is a CSS concern. For example, as nice of an API as <code>IntersectionObserver</code> is, I want things like <code>:in-viewport</code> in CSS! So I continued searching for a CSS-only solution and I came across Heydon Pickering’s <a target="_blank" href="https://heydonworks.com/article/the-flexbox-holy-albatross/">The Flexbox Holy Albatross</a>. It is a nice solution for columns, but I wanted more. There are some refinements of the original albatross (like <a target="_blank" href="https://css-tricks.com/holy-albatross-with-widths/">The Unholy Albatross</a>), but still, they are a little hacky and all that is happening is a rows-to-columns switch.</p> <p><span></span></p> <p>I still want more! I want to get closer to actual container queries! So, what does CSS have offer that I could tap into? I have a mathematical background, so functions like <code>calc()</code>, <code>min()</code>, <code>max()</code> and <code>clamp()</code> are things I like and understand.</p> <p>Next step: build a container-query-like solution with them.</p> <div> <div> <h4>Table of contents:</h4> <ol> <li><a target="_blank" href="https://css-tricks.com/?p=324644#why-raven">Why “Raven”?</a></li> <li><a target="_blank" href="https://css-tricks.com/#recap-math-functions-in-css">Math functions in CSS</a></li> <li><a target="_blank" href="https://css-tricks.com/#step-1-create-configuration-variables">Step 1: Create configuration variables</a></li> <li><a target="_blank" href="https://css-tricks.com/?p=324644#step-2-create-indicator-variables">Step 2: Create indicator variables</a></li> <li><a target="_blank" href="https://css-tricks.com/#step-3-use-indicator-variables-to-select-interval-values">Step 3: Use indicator variables to select interval values</a></li> <li><a target="_blank" href="https://css-tricks.com/#step-4-use-min-and-an-absurdly-large-integer-to-select-arbitrary-length-values">Step 4: Use <code>min()</code> and an absurdly large integer to select arbitrary-length values</a></li> <li><a target="_blank" href="https://css-tricks.com/#step-5-bringing-it-all-together">Step 5: Bringing it all together</a></li> <li><a target="_blank" href="https://css-tricks.com/#anything-else">Anything else?</a></li> <li><a target="_blank" href="https://css-tricks.com/#what-about-heights">What about heights?</a></li> <li><a target="_blank" href="https://css-tricks.com/#what-about-showing-and-hiding-things">What about showing and hiding things?</a></li> <li><a target="_blank" href="https://css-tricks.com/#takeaways">Takeaways</a></li> <li><a target="_blank" href="https://css-tricks.com/#bonus-boolean-logic">Bonuses</a></li> <li><a target="_blank" href="https://css-tricks.com/#final-thoughts">Final thoughts</a></li> </ol> </div> </div> <p>Want to see what is possible before reading on? <a target="_blank" href="https://codepen.io/collection/XqLJdm">Here is a CodePen collection</a> showing off what can be done with the ideas discussed in this article.</p> <hr> <h3>Why “Raven”?</h3> <p>This work is inspired by Heydon’s albatross, but the technique can do more tricks, so I picked a raven, since ravens are very clever birds.</p> <h3>Recap: Math functions in CSS</h3> <p><a target="_blank" href="https://css-tricks.com/a-complete-guide-to-calc-in-css/">The <code>calc()</code> function</a> allows mathematical operations in CSS. As a bonus, one can combine units, so things like <code>calc(100vw - 300px)</code> are possible.</p> <p>The <code>min()</code> and <code>max()</code> functions take two or more arguments and return the smallest or biggest argument (respectively).</p> <p>The <code>clamp()</code> function is like a combination of <code>min()</code> and <code>max()</code> in a very useful way. The function <code>clamp(a, x, b)</code> will return:</p> <ul> <li><strong>a</strong> if x is smaller than a</li> <li><strong>b</strong> if x is bigger than b and</li> <li><strong>x</strong> if x is in between a and b</li> </ul> <p>So it’s a bit like <code>clamp(smallest, relative, largest)</code>. One may think of it as a shorthand for <code>min(max(a,x),b)</code>. <a target="_blank" href="https://web.dev/min-max-clamp/">Here’s more info on all that</a> if you’d like to read more.</p> <p>We’re also going to use another CSS tool pretty heavily in this article: <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/var">CSS custom properties</a>. Those are the things like <code>--color: red;</code> or <code>--distance: 20px</code>. Variables, essentially. We’ll be using them to keep the CSS cleaner, like not repeating ourselves too much.</p> <p>Let’s get started with this Raven Technique.</p> <h3>Step 1: Create configuration variables</h3> <p>Let’s create some CSS custom properties to set things up.</p> <p>What is the base size we want our queries to be based on? Since we’re shooting for container query behavior, this would be <code>100%</code> — using <code>100vw</code> would make this behave like a media query, because that’s the width of the browser window, not the container!</p> <pre><code>--base_size: 100%;</code></pre> <p>Now we think about the breakpoints. Literally container widths where we want a break in order to apply new styles.</p> <pre><code>--breakpoint_wide: 1500px; /* Wider than 1500px will be considered wide */ --breakpoint_medium: 800px; /* From 801px to 1500px will be considered medium */ /* Smaller than or exact 800px will be small */</code></pre> <p>In the running example, we will use three intervals, but there is no limit with this technique.</p> <p>Now let’s define some (CSS length) values we would like to be returned for the intervals defined by the breakpoints. These are literal values:</p> <pre><code>--length_4_small: calc((100% / 1) - 10px); /* Change to your needs */ --length_4_medium: calc((100% / 2) - 10px); /* Change to your needs */ --length_4_wide: calc((100% / 3) - 10px); /* Change to your needs */</code></pre> <p>This is the config. Let’s use it!</p> <h3>Step 2: Create indicator variables</h3> <p>We will create some indicator variables for the intervals. They act a bit like boolean values, but with a length unit (<code>0px</code> and <code>1px</code>). If we clamp those lengths as minimum and maximum values, then they serve as a sort of “true” and “false” indicator.</p> <p>So, if, and only if <code>--base_size</code> is bigger than <code>--breakpoint_wide</code>, we want a variable that’s <code>1px</code>. Otherwise, we want <code>0px</code>. This can be done with <code>clamp()</code>:</p> <pre><code>--is_wide: clamp(0px, var(--base_size) - var(--breakpoint_wide), 1px );</code></pre> <p>If <code>var(--base_size) - var(--breakpoint_wide)</code> is negative, then <code>--base_size</code> is smaller than <code>--breakpoint_wide</code>, so <code>clamp()</code> will return <code>0px</code> in this case.</p> <p>Conversely, if <code>--base_size</code> is bigger than <code>--breakpoint_wide</code>, the calculation will give a positive length, which is bigger than or equal to <code>1px</code>. That means <code>clamp()</code> will return <code>1px</code>.</p> <p>Bingo! We got an indicator variable for “wide.”</p> <p>Let’s do this for the “medium” interval:</p> <pre><code>--is_medium: clamp(0px, var(--base_size) - var(--breakpoint_medium), 1px ); /* DO NOT USE, SEE BELOW! */</code></pre> <p>This will give us <code>0px</code> for the small interval, but <code>1px</code> for the medium <em>and</em> the wide interval. What we want, however, is <code>0px</code> for the wide interval and <code>1px</code> for the medium interval <em>exclusively</em>.</p> <p>We can solve this by subtracting <code>--is_wide</code> value. In the wide interval, <code>1px - 1px</code> is <code>0px</code>; in the medium interval <code>1px - 0px</code> is <code>1px</code>; and for the small interval <code>0px - 0px</code> gives <code>0px</code>. Perfect.</p> <p>So we get:</p> <pre><code>--is_medium: calc( clamp(0px, var(--base_size) - var(--breakpoint_medium), 1px) - var(--is_wide) ); </code></pre> <p>See the idea? To calculate an indicator variable, use <code>clamp()</code> with <code>0px</code> and <code>1px</code> as borders and the difference of <code>--base_width</code> and <code>--breakpoint_whatever</code> as the clamped value. Then subtract the sum of all indicators for bigger intervals. This logic produces the following for the smallest interval indicator:</p> <pre><code>--is_small: calc( clamp(0px, (var(--base_size) - 0px, 1px) - (var(--is_medium) + var(--is_wide)) ); </code></pre> <p>We can skip the clamp here because the breakpoint for small is <code>0px</code> and <code>--base_size</code> is positive, so <code>--base_size - 0px</code> is alway bigger than <code>1px</code> and <code>clamp()</code> will always return <code>1px</code>. Therefore, the calculation of <code>--is_small</code> can be simplified to:</p> <pre><code>--is_small: calc(1px - (var(--is_medium) + var(--is_wide))); </code></pre> <h3>Step 3: Use indicator variables to select interval values</h3> <p>Now we need to go from these “indicator variables” to something useful. Let’s assume we’re working with a pixel-based layout. Don’t panic, we will handle other units later.</p> <p>Here’s a question. What does this return?</p> <pre><code>calc(var(--is_small) * 100);</code></pre> <p>If <code>--is_small</code> is <code>1px</code>, it will return <code>100px</code> and if <code>--is_small</code> is <code>0px</code>, it will return <code>0px</code>.</p> <p>How is this useful? See this:</p> <pre><code>calc( (var(--is_small) * 100) + (var(--is_medium) * 200) );</code></pre> <p>This will return <code>100px + 0px = 100px</code> in the small interval (where <code>--is_small</code> is <code>1px</code> and <code>--is_medium</code> is <code>0px</code>). In the medium interval (where <code>--is_medium</code> is <code>1px</code> and <code>--is_small</code> is <code>0px</code>), it will return <code>0px + 200px = 200px</code>.</p> <p>Do you get the idea? See Roman Komarov’s <a target="_blank" href="https://www.kizu.ru/conditions-for-css-variables/">article</a> for a deeper look at what is going on here because it can be complex to grasp.</p> <p>You multiply a pixel value (without a unit) by the corresponding indicator variable and sum up all these terms. So, for a pixel based layout, something like this is sufficient:</p> <pre><code>width: calc( (var(--is_small) * 100) + (var(--is_medium) * 200) + (var(--is_wide) * 500) ); </code></pre> <p>But most of the time, we don’t want pixel-based values. We want concepts, like “full width” or “third width” or maybe even other units, like <code>2rem</code>, <code>65ch</code>, and the like. We’ll have to keep going here for those.</p> <h3>Step 4: Use <code>min()</code> and an absurdly large integer to select arbitrary-length values</h3> <p>In the first step, we defined something like this instead of a static pixel value:</p> <pre><code>--length_4_medium: calc((100% / 2) - 10px);</code></pre> <p>How can we use them then? The <code>min()</code> function to the rescue!</p> <p>Let’s define one helper variable:</p> <pre><code>--very_big_int: 9999; /* Pure, unitless number. Must be bigger than any length appearing elsewhere. */</code></pre> <p>Multiplying this value by an indicator variable gives either <code>0px</code> or <code>9999px</code>. How large this value should be depends on your browser. Chrome will take <code>999999</code>, but Firefox will not accept that high of a number, so <code>9999</code> is a value that will work in both. There are very few viewports larger than <code>9999px</code> around, so we should be OK.</p> <p>What happens, then, when we <code>min()</code> this with any value smaller than <code>9999px</code> but bigger than <code>0px</code>?</p> <pre><code>min( var(--length_4_small), var(--is_small) * var(--very_big_int) );</code></pre> <p>If, and only if <code>--is_small</code> is <code>0px</code>, it will return <code>0px</code>. If <code>--is_small</code> is <code>1px</code>, the multiplication will return <code>9999px</code> (which is bigger than <code>--length_4_small</code>), and <code>min</code> will return: <code>--length_4_small</code>.</p> <p>This is how we can select any length (that is, smaller than <code>9999px</code> but bigger than <code>0px</code>) based on indicator variables.</p> <p>If you deal with viewports larger than 9999px, then you’ll need to adjust the <code>--very_big_int</code> variable. This is a bit ugly, but we can fix this the moment pure CSS can <a target="_blank" href="https://css-tricks.com/property/">drop the unit on a value</a> in order to get rid of the units at our indicator variables (and directly multiply it with any length). For now, this works.</p> <p>We will now combine all the parts and make the Raven fly!</p> <h3>Step 5: Bringing it all together</h3> <p>We can now calculate our dynamic container-width-based, breakpoint-driven value like this:</p> <pre><code>--dyn_length: calc( min(var(--is_wide) * var(--very_big_int), var(--length_4_wide)) + min(var(--is_medium) * var(--very_big_int), var(--length_4_medium)) + min(var(--is_small) * var(--very_big_int), var(--length_4_small)) ); </code></pre> <p>Each line is a <code>min()</code> from Step 4. All lines are added up like in Step 3, the indicator variables are from Step 2 and all is based on the configuration we did in Step 1 — they work all together in one big formula!</p> <p>Want to try it out? Here is a <a target="_blank" href="https://codepen.io/batchman/pen/GRZNeaQ">is a Pen</a> to play with (see the notes in the CSS).</p> <p>This Pen uses no flexbox, no grid, no floats. Just some divs. This is to show that helpers are unnecessary in this kind of layout. But feel free to use the Raven with these layouts too as it will help you do more complex layouts.</p> <h3>Anything else?</h3> <p>So far, we’ve used fixed pixel values as our breakpoints, but maybe we want to change layout if the container is bigger or smaller than <em>half</em> of the viewport, minus 10px? No problem:</p> <pre><code>--breakpoint_wide: calc(50vw - 10px);</code></pre> <p>That just works! Other formulas work as well. To avoid strange behavior, we want to use something like:</p> <pre><code>--breakpoint_medium: min(var(--breakpoint_wide), 500px);</code></pre> <p>…to set a second breakpoint at <code>500px</code> width. The calculations in Step 2 depend on the fact that <code>--breakpoint_wide</code> is not smaller than <code>--breakpoint_medium</code>. Just keep your breakpoints in the right order: <code>min()</code> and/or <code>max()</code> are very useful here!</p> <h3>What about heights?</h3> <p>The evaluations of all the calculations are done lazily. That is, when assigning <code>--dyn_length</code> to any property, the calculation will be based on whatever <code>--base_size</code> evaluates to in this place. So setting a height will base the breakpoints on 100% height, if <code>--base_size</code> is <code>100%</code>.</p> <p>I have not (yet) found a way to set a height based on the width of a container. So, you can use <code>padding-top</code> since <code>100%</code> evaluates to the width for padding.</p> <h3>What about showing and hiding things?</h3> <p>The simplest way to show and hide things the Raven way is to set the width to <code>100px</code> (or any other suitable width) at the appropriate indicator variable:</p> <pre><code>.show_if_small { width: calc(var(--is_small) * 100); } .show_if_medium { width: calc(var(--is_medium) * 100); } .show_if_wide { width: calc(var(--is_wide) * 100); }</code></pre> <p>You need to set:</p> <pre><code>overflow: hidden; display: inline-block; /* to avoid ugly empty lines */</code></pre> <p>…or some other way to hide things within a box of <code>width: 0px</code>. Completely hiding the box requires setting additional box model properties, including <code>margin</code>, <code>padding</code> and <code>border-width</code>, to <code>0px</code> . The Raven can do this for some properties, but it’s just as effective to fix them to <code>0px</code>.</p> <p>Another alternative is to use <code>position: absolute;</code> and draw the element off-screen via <code>left: calc(var(--is_???) * 9999);</code>.</p> <h3>Takeaways</h3> <p>We might not need JavaScript at all, even for container query behavior! Certainly, we’d hope that if we actually get container queries in the CSS syntax, it will be a lot easier to use and understand — but it’s also very cool that things are possible in CSS today.</p> <p>While working on this, I developed some opinions about other things CSS could use:</p> <ul> <li>Container based units like <code>cw</code> and <code>ch</code> to set heights based on width. These units could be based on the root element of the current stacking context.</li> <li>Some sort of “evaluate to value” function, to overcome problems with lazy evaluation. This would work great with a “strip unit” function that works at render time.</li> </ul> <p>If we had that second one, it would allow us to set colors (in a clean way), borders, <code>box-shadow</code>, <code>flex-grow</code>, <code>background-position</code>, <code>z-index</code>, <code>scale()</code>, and other things with the Raven.</p> <p>Together with component-based units, setting child dimensions to the same aspect-ratio as the parent would even be possible. Dividing by a value with unit is not possible; otherwise <code>--indicator / 1px</code> would work as “strip unit” for the Raven.</p> <h3>Bonus: Boolean logic</h3> <p>Indicator variables look like boolean values, right? The only difference is they have a “px” unit. What about the logical combination of those? Imagine things like “container is wider than half the screen” <strong>and</strong> “layout is in two-column mode.” CSS functions to the rescue again!</p> <p>For the <code>OR</code> operator, we can <code>max()</code> over all of the indicators:</p> <pre><code>--a_OR_b: max( var(--indicator_a) , var(--indicator_b) ); </code></pre> <p>For the <code>NOT</code> operator, we can subtract the indicator from <code>1px</code>:</p> <pre><code>--NOT_a: calc(1px - var(--indicator_a)); </code></pre> <p>Logic purists may stop here, since <code>NOR(a,b) = NOT(OR(a,b))</code> is complete boolean algebra. But, hey, just for fun, here are some more:</p> <p><code>AND</code>:</p> <pre><code>--a_AND_b: min(var(--indicator_a), var(--indicator_b)); </code></pre> <p>This evaluates to <code>1px</code> if and only if both indicators are <code>1px</code>.</p> <p>Note that <code>min()</code> and <code>max()</code> take more than two arguments. They still work as an <code>AND</code> and <code>OR</code> for (more than two) indicator variables.</p> <p><code>XOR</code>:</p> <pre><code>--a_XOR_b: max( var(--indicator_a) - var(--indicator_b), var(--indicator_b) - var(--indicator_a) ); </code></pre> <p>If (and only if) both indicators have the same value, both differences are <code>0px</code>, and <code>max()</code> will return this. If the indicators have different values, one term will give <code>-1px</code>, the other will give <code>1px</code>. <code>max()</code> returns <code>1px</code> in this case.</p> <p>If anyone is interested in the case where two indicators are equal, use this:</p> <pre><code>--a_EQ_b: calc(1px - max( var(--indicator_a) - var(--indicator_b), var(--indicator_b) - var(--indicator_a) ) ); </code></pre> <p>And yes, this is <code>NOT(a XOR b)</code><em>.</em> I was unable to find a “nicer” solution to this.</p> <p>Equality may be interesting for CSS length variables in general, rather than just being used for indicator variables. By using <code>clamp()</code> once again, this might help:</p> <pre><code>--a_EQUALS_b_general: calc( 1px - clamp(0px, max( var(--var_a) - var(--var_b), var(--var_b) - var(--var_a) ), 1px) ); </code></pre> <p>Remove the <code>px</code> units to get general equality for unit-less variables (integers).</p> <p>I think this is enough boolean logic for most layouts!</p> <h3>Bonus 2: Set the number of columns in a grid layout</h3> <p>Since the Raven is limited to return CSS length values, it is unable to directly choose the number of columns for a grid (since this is a value without a unit). But there is a way to make it work (assuming we declared the indicator variables like above):</p> <pre><code>--number_of_cols_4_wide: 4; --number_of_cols_4_medium: 2; --number_of_cols_4_small: 1; --grid_gap: 0px; --grid_columns_width_4_wide: calc( (100% - (var(--number_of_cols_4_wide) - 1) * var(--grid_gap) ) / var(--number_of_cols_4_wide)); --grid_columns_width_4_medium: calc( (100% - (var(--number_of_cols_4_medium) - 1) * var(--grid_gap) ) / var(--number_of_cols_4_medium)); --grid_columns_width_4_small: calc( (100% - (var(--number_of_cols_4_small) - 1) * var(--grid_gap) ) / var(--number_of_cols_4_small)); --raven_grid_columns_width: calc( /* use the Raven to combine the values */ min(var(--is_wide) * var(--very_big_int),var(--grid_columns_width_4_wide)) + min(var(--is_medium) * var(--very_big_int),var(--grid_columns_width_4_medium)) + min(var(--is_small) * var(--very_big_int),var(--grid_columns_width_4_small)) );</code></pre> <p>And set your grid up with:</p> <pre><code>.grid_container{ display: grid; grid-template-columns: repeat(auto-fit, var(--raven_grid_columns_width)); gap: var(--grid_gap) };</code></pre> <p>How does this work?</p> <ol> <li>Define the number of columns we want for each interval (lines 1, 2, 3)</li> <li>Calculate the perfect width of the columns for each interval (lines 5, 6, 7). <p>What is happening here?</p> <p>First, we calculate the available space for our columns. This is <code>100%</code>, minus the place the gaps will take. For <code>n</code> columns, there are <code>(n-1)</code> gaps. This space is then divided by the number of columns we want.</p> </li> <li>Use the Raven to calculate the right column’s width for the actual <code>--base_size</code>.</li> </ol> <p>In the grid container, this line:</p> <pre><code>grid-template-columns: repeat(auto-fit, var(--raven_grid_columns_width));</code></pre> <p>…then chooses the number of columns to fit the value the Raven provided (which will result in our <code>--number_of_cols_4_???</code> variables from above).</p> <p>The Raven may not be able give the number of columns directly, but it can give a length to make <code>repeat</code> and <code>autofit</code> calculate the number we want for us.</p> <p>But <code>auto-fit</code> with <code>minmax()</code> does the same thing, right? No! The solution above will never give three columns (or five) and the number of columns does not need to increase with the width of the container. Try to set the following values <a target="_blank" href="https://codepen.io/batchman/pen/GRZVGQx">in this Pen</a> to see the Raven take full flight:</p> <pre><code>--number_of_cols_4_wide: 1; --number_of_cols_4_medium: 2; --number_of_cols_4_small: 4;</code></pre> <h3>Bonus 3: Change the <code>background-color</code> with a <code>linear-gradient()</code></h3> <p>This one is a little more mind-bending. The Raven is all about length values, so how can we get a color out of these? Well, <a target="_blank" href="https://css-tricks.com/snippets/css/css-linear-gradient/">linear gradients</a> deal with both. They define colors in certain areas defined by length values. Let’s go through that concept in more detail before getting to the code.</p> <p>To work around the actual gradient part, it is a well known technique to <a target="_blank" href="https://css-tricks.com/books/greatest-css-tricks/hard-stop-gradients/">double up a color stop</a>, effectively making the gradient part happen within <code>0px</code>. Look at this code to see how this is done:</p> <pre><code>background-image:linear-gradient( to right, red 0%, red 50%, blue 50%, blue 100% );</code></pre> <p>This will color your background red on the left half, blue on the right. Note the first argument “to right.” This implies that percentage values are evaluated horizontally, from left to right.</p> <p>Controlling the values of <code>50%</code> via Raven variables allows for shifting the color stop at will. And we can add more color stops. In the running example, we need three colors, resulting in two (doubled) inner color stops.</p> <p>Adding some variables for color and color stops, this is what we get:</p> <pre><code>background-image: linear-gradient( to right, var(--color_small) 0px, var(--color_small) var(--first_lgbreak_value), var(--color_medium) var(--first_lgbreak_value), var(--color_medium) var(--second_lgbreak_value), var(--color_wide) var(--second_lgbreak_value), var(--color_wide) 100% );</code></pre> <p>But how do we calculate the values for <code>--first_lgbreak_value</code> and <code>--second_lgbreak_value</code>? Let’s see.</p> <p>The first value controls where <code>--color_small</code> is visible. On the small interval, it should be <code>100%</code>, and <code>0px</code> in the other intervals. We’ve seen how to do this with the raven. The second variable controls the visibility of <code>--color_medium</code>. It should be <code>100%</code> for the small interval, <code>100%</code> for the medium interval, but <code>0px</code> for the wide interval. The corresponding indicator must be <code>1px</code> if the container width is in the small <em>or</em> the medium interval.</p> <p>Since we can do boolean logic on indicators, it is:</p> <pre><code>max(--is_small, --is_medium)</code></pre> <p>…to get the right indicator. This gives:</p> <pre><code>--first_lgbreak_value: min(var(--is_small) * var(--very_big_int), 100%); --second_lgbreak_value: min( max(var(--is_small), var(--is_medium)) * var(--very_big_int), 100%); </code></pre> <p>Putting things together results in this CSS code to change the <code>background-color</code> based on the width (the interval indicators are calculated like shown above):</p> <pre><code>--first_lgbreak_value: min( var(--is_small) * var(--very_big_int), 100%); --second_lgbreak_value: min( max(var(--is_small), var(--is_medium)) * var(--very_big_int), 100%); --color_wide: red;/* change to your needs*/ --color_medium: green;/* change to your needs*/ --color_small: lightblue;/* change to your needs*/ background-image: linear-gradient( to right, var(--color_small) 0px, var(--color_small) var(--first_lgbreak_value), var(--color_medium) var(--first_lgbreak_value), var(--color_medium) var(--second_lgbreak_value), var(--color_wide) var(--second_lgbreak_value), var(--color_wide) 100% );</code></pre> <p><a target="_blank" href="https://codepen.io/batchman/pen/XWdvPVo">Here’s a Pen</a> to see that in action.</p> <h3>Bonus 4: Getting rid of nested variables</h3> <p>While working with the Raven, I came across a strange problem: There is a limit on the number of nested variables that can be used in <code>calc()</code><em>.</em> This can cause some problems when using too many breakpoints. As far as I understand, this limit is in place to prevent page blocking while calculating the styles and allow for faster circle-reference checks.</p> <p>In my opinion, something like <em>evaluate to value</em> would be a great way to overcome this. Nevertheless, this limit can give you a headache when pushing the limits of CSS. Hopefully this problem will be tackled in the future.</p> <p>There is a way to calculate the indicator variables for the Raven without the need of (deeply) nested variables. Let’s look at the original calculation for the <code>--is_medium</code> value:</p> <pre><code>--is_medium:calc( clamp(0px, var(--base_size) - var(--breakpoint_medium), 1px) - var(--is_wide) ); </code></pre> <p>The problem occurs with the subtraction of <code>--is_wide</code> . This causes the CSS parser to paste in the definition of the complete formula of <code>--is_wide</code>. The calculation of <code>--is_small</code> has even more of these types of references. (The definition for <code>--is_wide</code> will even be pasted twice since it is hidden within the definition of <code>--is_medium</code> and is also used directly.)</p> <p>Fortunately, there is a way to calculate indicators without referencing indicators for bigger breakpoints.</p> <p>The indicator is true if, and only if, <code>--base_size</code> is bigger than the lower breakpoint for the interval and smaller or equal than the higher breakpoint for the interval. This definition gives us the following code:</p> <pre><code>--is_medium: min( clamp(0px, var(--base_size) - var(--breakpoint_medium), 1px), clamp(0px, 1px + var(--breakpoint_wide) - var(--base_size), 1px) ); </code></pre> <ul> <li><code>min()</code> is used as a logical AND operator</li> <li>the first <code>clamp()</code> is “<code>--base_size</code> is bigger than <code>--breakpoint_medium</code>”</li> <li>the second <code>clamp()</code> means “<code>--base_size</code> is smaller or equal than <code>--breakpoint_wide</code>.”</li> <li>Adding <code>1px</code> switches from “smaller than” to “smaller <strong>or equal</strong> than.” This works, because we are dealing with whole (pixel) numbers (<code>a <= b</code> means <code>a < (b+1)</code> for whole numbers). </li> </ul> <p>The complete calculation of the indicator variables can be done this way:</p> <pre><code>--is_wide: clamp(0px, var(--base_size) - var(--breakpoint_wide), 1px); --is_medium: min(clamp(0px, var(--base_size) - var(--breakpoint_medium), 1px), clamp(0px, 1px + var(--breakpoint_wide) - var(--base_size), 1px) ); --is_small: clamp(0px,1px + var(--breakpoint_medium) - var(--base_size), 1px); </code></pre> <p>The calculations for <code>--is_wide</code> and <code>--is_small</code> are simpler, because only one given breakpoint needs to be checked for each.</p> <p>This works with all the things we’ve looked at so far. <a target="_blank" href="https://codepen.io/batchman/pen/YzWKpOr">Here’s a Pen</a> that combines examples.</p> <h3>Final thoughts</h3> <p>The Raven is not capable of all the things that a media query can do. But we don’t need it to do that, as we have media queries in CSS. It is fine to use them for the “big” design changes, like the position of a sidebar or a reconfiguration of a menu. Those things happen within the context of the full viewport (the size of the browser window).</p> <p>But for components, media queries are kind of <em>wrong</em>, since we never know how components will be sized.</p> <p>Heydon Pickering demonstrated this problem with this image:</p> <figure></figure> <p>I hope that the Raven helps you to overcome the problems of creating responsive layouts for components and pushes the limits of “what can be done with CSS” a little bit further.</p> <p>By showing what is possible today, maybe “real” container queries can be done by adding some syntax sugar and some very small new functions (like <code>cw</code>, <code>ch</code>, “strip-unit” or “evaluate-to-pixels”). If there was a function in CSS that allows to rewrite “<code>1px</code>” to a whitespace, and “<code>0px</code>” to “<code>initial</code>“, the Raven could be combined with the <a target="_blank" href="https://css-tricks.com/the-css-custom-property-toggle-trick/">Custom Property Toggle Trick</a> and change every CSS property, not just length values. </p> <p>By avoiding JavaScript for this, your layouts will render faster because it’s not dependent on JavaScript downloading or running. It doesn’t even matter if JavaScript is disabled. These calculations will not block your main thread and your application logic isn’t cluttered with design logic.</p> <hr> <p><small>Thanks to <a target="_blank" href="https://css-tricks.com/author/chriscoyier/">Chris</a>, <a target="_blank" href="https://css-tricks.com/author/agalante/">Andrés Galante</a>, <a target="_blank" href="https://css-tricks.com/author/cathydutton/">Cathy Dutton</a>, <a target="_blank" href="https://css-tricks.com/author/markoilic/">Marko Ilic</a>, and <a target="_blank" href="https://css-tricks.com/author/daveatanda/">David Atanda</a> for their great CSS-Tricks articles. They really helped me explore what can be done with the Raven.</small></p> <hr> <p>The post <a target="_blank" rel="nofollow" href="https://css-tricks.com/the-raven-technique-one-step-closer-to-container-queries/">The Raven Technique: One Step Closer to Container Queries</a> appeared first on <a target="_blank" rel="nofollow" href="https://css-tricks.com/">CSS-Tricks</a>.</p> <p>You can support CSS-Tricks by being an <a target="_blank" href="https://css-tricks.com/product/mvp-supporter/">MVP Supporter</a>.</p> <div class="fixed"></div> </div> <div class="under"> <span class="categories">Categories: </span><span><a href="http://www.webmastersgallery.com/category/design/" rel="category tag">Designing</a>, <a href="http://www.webmastersgallery.com/category/uncategorized/" rel="category tag">Others</a></span> <span class="tags">Tags: </span><span></span> </div> </div> <div class="post" id="post-3654965"> <h2><a class="title" href="http://www.webmastersgallery.com/2020/11/10/netlify-background-functions/" rel="bookmark">Netlify Background Functions</a></h2> <div class="info"> <span class="date">November 10th, 2020</span> <span class="author"><a href="http://www.webmastersgallery.com/author/admin/" title="Posts by admin" rel="author">admin</a></span> <span class="comments"><a href="http://www.webmastersgallery.com/2020/11/10/netlify-background-functions/#respond">No comments</a></span> <div class="fixed"></div> </div> <div class="content"> <p>As quickly as I can:</p> <ul> <li><a target="_blank" href="https://aws.amazon.com/lambda/">AWS Lambda</a> is great: it allows you to run server-side code without really running a server. This is what <a target="_blank" href="https://serverless.css-tricks.com/">“serverless”</a> largely means.</li> <li><a target="_blank" href="https://www.netlify.com/products/functions/">Netlify Functions</a> run on AWS Lambda and make them way easier to use. For example, you just chuck some scripts into a folder they deploy when you push to your main branch. Plus you get logs.</li> <li>Netlify Functions used to be limited to a 10-second execution time, even though Lambda’s can run <a target="_blank" href="https://docs.aws.amazon.com/lambda/latest/dg/gettingstarted-limits.html">15 minutes</a>.</li> <li><a target="_blank" href="https://www.netlify.com/blog/2020/10/29/announcing-background-functions/">Now</a>, you can run 15-minute functions on Netlify also, by appending <code>-background</code> to the filename like <code>my-function-background.js</code>. (You can write in Go also.)</li> <li>This means you can do long-ish running tasks, like spin up a headless browser and scrape some data, process images to build into a PDF and email it, sync data across systems with batch API requests… or anything else that takes a lot longer than 10 seconds to do.</li> </ul> <hr> <p>The post <a target="_blank" rel="nofollow" href="https://css-tricks.com/netlify-background-functions/">Netlify Background Functions</a> appeared first on <a target="_blank" rel="nofollow" href="https://css-tricks.com/">CSS-Tricks</a>.</p> <p>You can support CSS-Tricks by being an <a target="_blank" href="https://css-tricks.com/product/mvp-supporter/">MVP Supporter</a>.</p> <div class="fixed"></div> </div> <div class="under"> <span class="categories">Categories: </span><span><a href="http://www.webmastersgallery.com/category/design/" rel="category tag">Designing</a>, <a href="http://www.webmastersgallery.com/category/uncategorized/" rel="category tag">Others</a></span> <span class="tags">Tags: </span><span></span> </div> </div> <div class="post" id="post-3654435"> <h2><a class="title" href="http://www.webmastersgallery.com/2020/11/10/top-6-tools-for-creating-an-mvp-designers-choice/" rel="bookmark">Top 6 Tools For Creating an MVP (Designers’ Choice)</a></h2> <div class="info"> <span class="date">November 10th, 2020</span> <span class="author"><a href="http://www.webmastersgallery.com/author/admin/" title="Posts by admin" rel="author">admin</a></span> <span class="comments"><a href="http://www.webmastersgallery.com/2020/11/10/top-6-tools-for-creating-an-mvp-designers-choice/#respond">No comments</a></span> <div class="fixed"></div> </div> <div class="content"> <div class="ftpimagefix" style="float:left"><a target="_blank" href="https://webdesignledger.com/top-6-web-app-builders-designers-choose-to-create-an-mvp-or-an-app-prototype-in-2020/"><img decoding="async" src="https://storage.googleapis.com/webdesignledger.pub.network/WDL/9654b8d9-image3-970x545.png" alt=""></a></div> <h2>Top 6 Web App Builders Designers Choose to Create an MVP or an App Prototype in 2020</h2> <p><span>Whether you’re a mature product designer, or only starting your design career, regardless of your knowledge in web design, UI/UX, development, you can build and design a </span><i><span>working prototype</span></i><span>, or a </span><i><span>minimum viable product (MVP)</span></i> <i><span>on your own</span></i><span>. Today, it’s possible due to the existence of </span><b>visual app builders</b><span>.</span></p> <p><span>We’ve compiled a list of the visual web app building platforms popular among UI/UX designers in 2020. Some of these app development & design tools are more feature-rich than others. Some lock you inside the platform, while the others allow you to </span><b>download your app code</b><span>, and go your own way. Consider all the factors when choosing your perfect match.</span></p> <p><span>Let’s now look at the app makers designers choose to build & design MVPs and prototypes – clear, simple, viable enough to show the real value, created at minimal costs, and with almost no development skills (like you can do in </span><i><span>Webflow</span></i><span>, for example).</span></p> <h4><b>#1. </b><a target="_blank" href="https://bubble.io/"><b>Bubble.io</b></a></h4> <p><img decoding="async" loading="lazy" src="https://storage.googleapis.com/webdesignledger.pub.network/WDL/2712a432-image1.png" alt="" width="1460" height="812"></p> <p><span>Bubble is a full-stack app development platform allowing you to create and design pixel-perfect web apps. You can build social network apps, SaaS, marketplaces, and more.</span></p> <p><i><span>Pros:</span></i></p> <ul> <li><span>An intuitive interface with a convenient drag-n-drop editor.</span></li> <li><span>Mobile-friendly design.</span></li> <li><span>A variety of free and paid templates.</span></li> <li><span>An ability to create hybrid mobile apps.</span></li> <li><span>About 1,000 plugins you can integrate your app with.</span></li> <li><span>Code’s editable with Javascript.</span></li> <li><span>SQL Database Connector’s available to connect the built app to databases.</span></li> <li><span>An ability to deploy & host your app on the Bubble.io domain.</span></li> </ul> <p><i><span>Cons:</span></i></p> <ul> <li><span>No code export.</span></li> <li><span>Limited functionality’s available for free.</span></li> <li><span>You need to buy a separate plan for each new app.</span></li> <li><span>Interface is rather complex, which makes it difficult to onboard for a newcomer.</span></li> <li><span>No ability to host an app on a custom domain.</span></li> </ul> <h4><b>#2. </b><a target="_blank" href="https://www.fluidui.com/"><b>Fluid UI</b></a><b> </b></h4> <p><img decoding="async" loading="lazy" src="https://storage.googleapis.com/webdesignledger.pub.network/WDL/d0823ff7-image6.png" alt="" width="1460" height="824"></p> <p><span>Fluid UI is a tool helping designers, developers, product managers to wireframe and design apps, build minimum viable products using pre-built UI kits for Wireframing, Material Design, etc.</span></p> <p><i><span>Pros:</span></i></p> <ul> <li><span>Over 2,000 built-in components are available in pre-built UI Kits for Material Design, iOS, Windows, Wireframing, and more.</span></li> <li><span>An ability to add existing graphic assets to your prototype.</span></li> <li><span>An ability to use mouse and touch gestures to build & design interactive app prototypes.</span></li> <li><span>Built-in review and feedback collecting feature.</span></li> <li><span>Downloadable Android and iOS preview apps.</span></li> <li><span>An ability to retrieve a ready-made project by scanning QR code with your smartphone.</span></li> </ul> <p><i><span>Cons:</span></i></p> <ul> <li><span>App code is not downloadable.</span></li> <li><span>Only for app prototyping – no ability to build a full-fledged web app with a responsive design.</span></li> <li><span>Only 1 project you can create for free.</span></li> </ul> <h4><b>#3. </b><a target="_blank" href="https://uibakery.io/"><b>UI Bakery</b></a><b> </b></h4> <p><img decoding="async" loading="lazy" src="https://storage.googleapis.com/webdesignledger.pub.network/WDL/9654b8d9-image3.png" alt="" width="1780" height="1000"></p> <p><span>UI Bakery is a visual app builder allowing to create & design minimum viable products, white-label apps, and fully-functional web apps with the connected data & integrated APIs.</span></p> <p><i><span>Pros:</span></i></p> <ul> <li><span>A very intuitive and understandable apps builder.</span></li> <li><span>Responsive design.</span></li> <li><span>Nebular Open Source UI library and Eva Design System – under the hood.</span></li> <li><span>A range of predefined layouts, widgets, and UI components.</span></li> <li><span>Downloadable code allowing you to use an app outside UI Bakery.</span></li> <li><span>Free ready-made web app templates & dashboards with an ability to </span><a target="_blank" href="https://community.uibakery.io/c/template-requests/8"><span>request</span></a><span> the one you need.</span></li> <li><span>Data connection & API integration’s available within the platform.</span></li> <li><span>An unlimited number of pages you can create in one project.</span></li> </ul> <p><i><span>Cons:</span></i></p> <ul> <li><span>No ability to build a backend within the platform.</span></li> <li><span>Few third-party integrations available for now.</span></li> <li><span>Reusable UI components are not available (yet).</span></li> </ul> <h4><b>#4. </b><a target="_blank" href="https://marvelapp.com/"><b>Marvel</b></a></h4> <p><img decoding="async" loading="lazy" src="https://storage.googleapis.com/webdesignledger.pub.network/WDL/844f20ca-image4.png" alt="" width="1524" height="1130"></p> <p><span>Marvel is a web app prototyping and design platform allowing you to create interactive prototypes and MVPs without writing even a line of code. </span></p> <p><i><span>Pros:</span></i></p> <ul> <li><span>An intuitive and user-friendly UI.</span></li> <li><span>An ability to download assets, and generate CSS, Swift, or Android XML code.</span></li> <li><span>A big collection of pre-made assets, images, icons are available for use.</span></li> <li><span>An offline working mode.</span></li> <li><span>Third-party integrations (Jira, Confluence, Sketch, Microsoft, and many others).</span></li> <li><span>An ability to use GraphQL API to customise your workflows.</span></li> <li><span>An integrated user testing feature.</span></li> <li><span>Built-in collaboration for reviewing & collecting feedback in real-time.</span></li> <li><span>A lot of educational articles and video tutorials.</span></li> </ul> <p><i><span>Cons:</span></i></p> <ul> <li><span>You can build only 1 project for free.</span></li> <li><span>Only 1 user working on the project is included in a free plan.</span></li> <li><span>An app branding feature is paid.</span></li> </ul> <h4><b>#5. </b><a target="_blank" href="https://www.glideapps.com/"><b>Glide</b></a><b> </b></h4> <p><img decoding="async" loading="lazy" src="https://storage.googleapis.com/webdesignledger.pub.network/WDL/3daf57b8-image5.png" alt="" width="1999" height="1568"></p> <p><span>Glide is an app-building tool you can use to turn Google spreadsheets into easy-to-use apps with no coding. You can build an app on top of a spreadsheet, or use a customizable template. </span></p> <p><i><span>Pros:</span></i></p> <ul> <li><span>A convenient drag-n-drop editor.</span></li> <li><span>A huge library of ready-made templates, both free and paid.</span></li> <li><span>Allows you to build apps based on Google spreadsheets.</span></li> <li><span>Easy onboarding with no needed technical experience.</span></li> <li><span>Google and Zapier integration is available.</span></li> <li><span>A free app deployment feature to the glideapp.io domain.</span></li> </ul> <p><i><span>Cons:</span></i></p> <ul> <li><span>Custom branding is paid.</span></li> <li><span>Very few integrations are available for now.</span></li> <li><span>Lacks customization flexibility.</span></li> <li><span>Limits in a number of data rows available in a free plan.</span></li> <li><span>Only a mobile layout is included in a free plan.</span></li> </ul> <h4><b>#6. </b><a target="_blank" href="https://www.appsheet.com/"><b>AppSheet</b></a></h4> <p><img decoding="async" loading="lazy" src="https://storage.googleapis.com/webdesignledger.pub.network/WDL/99542ecb-image2.png" alt="" width="1680" height="946"></p> <p><span>AppSheet is an online app builder allowing you to create & design full-fledged mobile and desktop applications that are automatically compatible across different devices.</span></p> <p><i><span>Pros:</span></i></p> <ul> <li><span>Quite a big choice of free ready-made templates.</span></li> <li><span>A created app fits for different screen sizes automatically.</span></li> <li><span>Custom app branding.</span></li> <li><span>Integrations with Salesforce, Dropbox, Amazon Web Services, and other third-party services are available.</span></li> <li><span>Useful videos, tutorials, etc., and how-to webinars on the YouTube channel.</span></li> <li><span>Offline working mode.</span></li> <li><span>Built-in application lifecycle monitoring & management.</span></li> </ul> <p><i><span>Cons:</span></i></p> <ul> <li><span>The need to pay for each end-user (“active user”) of your created application.</span></li> <li><span>Only 10 users are available for free.</span></li> <li><span>Very limited development & design functionality you can use for free.</span></li> <li><span>The need to reach the support team to build your app on your SQL databases.</span></li> </ul> <h3><b>On a final note</b></h3> <p><span>The visual development platforms mentioned above greatly decrease the time from a product ideation and its MVP creation to its successful implementation. Once you build your app, you might want to export the code, give it to developers, let them connect a backend to a frontend you’ve created, etc. Be careful when choosing an apps builder that gives you as much development & design freedom as you need. </span></p> <p><span>There’s a great number of </span><a target="_blank" href="https://uibakery.io/bubble-alternatives?utm_campaign=ui_bakery%20-%20website_page%20-%20bubble_alternatives%20-%20cacq%20-%20xx%20-%20traffic&utm_source=WDL&utm_medium=article&utm_content=article_link"><span>other visual web app builders</span></a><span> allowing designers and developers with different skill levels create MVPs before building a full-fledged product to test their ideas without overpaying for it.</span></p> <p><span>Hope this overview of the most popular visual app makers will help you bring your next software solution to life faster, easier, with less costs and efforts.</span></p> <p>Read More at <a target="_blank" rel="nofollow" href="https://webdesignledger.com/top-6-web-app-builders-designers-choose-to-create-an-mvp-or-an-app-prototype-in-2020/">Top 6 Tools For Creating an MVP (Designers’ Choice)</a></p> <div class="fixed"></div> </div> <div class="under"> <span class="categories">Categories: </span><span><a href="http://www.webmastersgallery.com/category/design/" rel="category tag">Designing</a>, <a href="http://www.webmastersgallery.com/category/uncategorized/" rel="category tag">Others</a></span> <span class="tags">Tags: </span><span></span> </div> </div> <div class="post" id="post-3654422"> <h2><a class="title" href="http://www.webmastersgallery.com/2020/11/10/starbucks-releases-brand-new-cup-designs-for-the-holiday-season/" rel="bookmark">Starbucks Releases Brand New Cup Designs for The Holiday Season</a></h2> <div class="info"> <span class="date">November 10th, 2020</span> <span class="author"><a href="http://www.webmastersgallery.com/author/admin/" title="Posts by admin" rel="author">admin</a></span> <span class="comments"><a href="http://www.webmastersgallery.com/2020/11/10/starbucks-releases-brand-new-cup-designs-for-the-holiday-season/#respond">No comments</a></span> <div class="fixed"></div> </div> <div class="content"> <div class="ftpimagefix" style="float:left"><a target="_blank" href="https://webdesignledger.com/starbucks-releases-brand-new-cup-designs-for-the-holiday-season/"><img decoding="async" src="https://storage.googleapis.com/webdesignledger.pub.network/WDL/af9db9d4-image3-962x970.png" alt=""></a></div> <p><span>Is it too early to get ready for the winter holidays? Starbucks says no!</span></p> <p><span>We are all so excited for the holiday season. Not only does it mark the end of the year 2020, but it also means all those holiday traditions we have a love/hate relationship with will start again.</span></p> <p><img decoding="async" loading="lazy" src="https://storage.googleapis.com/webdesignledger.pub.network/WDL/3fd6805b-image2.png" alt="" width="1698" height="1120"></p> <p><span>One of the traditions we have grown to love is the re-launching of Starbuck’s holiday drinks. And alongside the drinks themselves, Starbucks has released a new set of Holiday-themed cups! </span></p> <p><span>Starting November 6th, drinks will be served in one of the four new holiday cups. </span></p> <p><span>Starbucks has also added an additional bonus alongside the four newly designed cups. Whenever you purchase a handcrafted holiday drink, you receive a reusable holiday cup!</span></p> <p><img decoding="async" loading="lazy" src="https://storage.googleapis.com/webdesignledger.pub.network/WDL/134c1a38-image5.png" alt="" width="1706" height="1106"></p> <p><span>The brightly colored designs were crafted with the idea of spreading seasonal joy in mind.</span></p> <p><span>According to Starbucks in their press release, “</span><span>This year’s holiday design brings forward all the joyful elements of the holiday season in ribbons of Starbucks greens and a jolly red like a cozy holiday sweater.”</span><span> </span></p> <p><img decoding="async" loading="lazy" src="https://storage.googleapis.com/webdesignledger.pub.network/WDL/0f421d9c-image1.png" alt="" width="1000" height="544"></p> <p><span>Starbucks has been carrying on this tradition of redesigning their holiday cups for over 20 years. </span></p> <p><span>However, contrary to the mainstream traditions, Starbucks did not use the traditional red and green color pallet the holidays are known for. In fact, Starbucks ‘ first sets of holiday cups were actually purple. (very festive) </span></p> <p><img decoding="async" loading="lazy" src="https://storage.googleapis.com/webdesignledger.pub.network/WDL/aaa80370-image4.png" alt="" width="590" height="794"></p> <p><span>This year, their designs are meant to invoke the look of a silly, tacky, and joyful holiday sweater, similar to ones worn at office holiday parties. In our opinion, This design works well and is a welcomed choice that makes us recall nostalgic moments in the past holiday seasons.</span></p> <p><img decoding="async" loading="lazy" src="https://storage.googleapis.com/webdesignledger.pub.network/WDL/af9db9d4-image3.png" alt="" width="1000" height="1008"></p> <p><span>Alongside its new design, Starbucks also has a new motto. Last year’s motto was “merry coffee” which appears to be a clever spin on the commonly used phrase “merry Christmas.”</span></p> </p> <p><span>“Carry the merry” is this year’s new slogan to accompany these new cup designs. We believe the main idea behind these words is to bring joy to those around us in this season (because we all need a little joy in 2020).</span></p> </p> <p><span>Whatever your opinions are on these new designs, we hope you have a happy holiday season this year!</span></p> <p>Read More at <a target="_blank" rel="nofollow" href="https://webdesignledger.com/starbucks-releases-brand-new-cup-designs-for-the-holiday-season/">Starbucks Releases Brand New Cup Designs for The Holiday Season</a></p> <div class="fixed"></div> </div> <div class="under"> <span class="categories">Categories: </span><span><a href="http://www.webmastersgallery.com/category/design/" rel="category tag">Designing</a>, <a href="http://www.webmastersgallery.com/category/uncategorized/" rel="category tag">Others</a></span> <span class="tags">Tags: </span><span></span> </div> </div> <div class="post" id="post-3653493"> <h2><a class="title" href="http://www.webmastersgallery.com/2020/11/10/how-to-detect-when-a-sticky-element-gets-pinned/" rel="bookmark">How to Detect When a Sticky Element Gets Pinned</a></h2> <div class="info"> <span class="date">November 10th, 2020</span> <span class="author"><a href="http://www.webmastersgallery.com/author/admin/" title="Posts by admin" rel="author">admin</a></span> <span class="comments"><a href="http://www.webmastersgallery.com/2020/11/10/how-to-detect-when-a-sticky-element-gets-pinned/#respond">No comments</a></span> <div class="fixed"></div> </div> <div class="content"> <p>Totally agree with David, on CSS needing a selector to know if a <code>position: sticky;</code> element is doing its sticky thing or not.</p> <blockquote> <p>Ideally there would be a <code>:stuck</code> CSS directive we could use, but instead the best we can do is applying a CSS class when the element becomes sticky using a CSS trick and some JavaScript magic</p> </blockquote> <p><span></span></p> <p>I love it when there is a solution that isn’t some massive polyfill or something. In this case, a few lines of <code>IntersectionObserver</code> JavaScript and tricky usage of <code>top: -1px</code> in the CSS.</p> <div>CodePen Embed Fallback</div> <p><a target="_blank" href="https://davidwalsh.name/detect-sticky" title="Direct link to featured article">Direct Link to Article</a> — <a target="_blank" href="https://css-tricks.com/how-to-detect-when-a-sticky-element-gets-pinned/">Permalink</a></p> <hr> <p>The post <a target="_blank" rel="nofollow" href="https://css-tricks.com/how-to-detect-when-a-sticky-element-gets-pinned/">How to Detect When a Sticky Element Gets Pinned</a> appeared first on <a target="_blank" rel="nofollow" href="https://css-tricks.com/">CSS-Tricks</a>.</p> <p>You can support CSS-Tricks by being an <a target="_blank" href="https://css-tricks.com/product/mvp-supporter/">MVP Supporter</a>.</p> <div class="fixed"></div> </div> <div class="under"> <span class="categories">Categories: </span><span><a href="http://www.webmastersgallery.com/category/design/" rel="category tag">Designing</a>, <a href="http://www.webmastersgallery.com/category/uncategorized/" rel="category tag">Others</a></span> <span class="tags">Tags: </span><span></span> </div> </div> <div class="post" id="post-3653070"> <h2><a class="title" href="http://www.webmastersgallery.com/2020/11/09/chapter-5-publishing/" rel="bookmark">Chapter 5: Publishing</a></h2> <div class="info"> <span class="date">November 9th, 2020</span> <span class="author"><a href="http://www.webmastersgallery.com/author/admin/" title="Posts by admin" rel="author">admin</a></span> <span class="comments"><a href="http://www.webmastersgallery.com/2020/11/09/chapter-5-publishing/#respond">No comments</a></span> <div class="fixed"></div> </div> <div class="content"> <div class="ftpimagefix" style="float:left"><a target="_blank" href="https://css-tricks.com/chapter-5-publishing/"><img decoding="async" src="https://i1.wp.com/css-tricks.com/wp-content/uploads/2020/10/hotwired21.jpg?resize=814%2C718&ssl=1" alt="pastedGraphic_1.png"></a></div> <p>Not long after HotWired launched on the web in 1994, Josh Quittner wrote <a target="_blank" href="https://archive.gyford.com/1995/11/13/HotWiredDemo/i-agent/index.htm">an article</a> entitled “Way New Journalism” for the publication. He was enthusiastic about the birth of a new medium.</p> <p>I’m talking about a sea change in journalism itself, in the way we do the work of reporting and presenting information. The change that’s coming will be more significant than anything we’ve seen since the birth of New Journalism; it may be even more revolutionary than that. It has to be: Look at all the new tools we’re getting.</p> <p>The title and the quote was a nod to the last major revolution in journalism, what writer Tom Wolfe would often refer to as “New Journalism” in the 1960s and 1970s. Wolfe believed that journalism was shifting in the second half of the 20th century. Writers like Hunter S. Thompson, Truman Capote, and Joan Didion incorporated the methods and techniques of fiction into nonfiction storytelling to derive more personal narrative stories.</p> <p>Quittner believed that the web was bringing us a change no less bold. “Way New Journalism” would use the tools of the web — intertextual links, concise narratives, interactive media — to find a new voice. Quittner believed that the voice that writers used on the web would become more authentic and direct. “Voice becomes more intimate and immediate online. You expect your reporter (or your newspaper/magazine) to be an intelligent agent, a voice you recognize and trust.”</p> <p>Revolutions, as it were, do not happen overnight, and they don’t happen predictably. Quittner would not be the last to forecast, as he describes it, the sea-change in publishing that followed the birth of the web. Some of his predictions never fully come to fruition. But he was correct about voice. The writers of the web would come to define the voice of publishing in a truly fundamental way.</p> <hr> <p>In 1993, <em>Wired</em> included <a target="_blank" href="https://www.wired.com/1993/04/gibson-2/">an article</a> in their Fall issue by fiction writer William Gibson called “Disneyland with a Death Penalty.” The now well-known article is ruthlessly critical of Singapore, what Gibson describes as a conformist government structure designed to paper over the systemic issues of the city-state that undermine its culture. It was a strong denunciation of Singaporean policy, and coincidentally, it was not well-received by its government. <em>Wired</em>, which had only just recently published its fourth issue, was suddenly banned from Singapore, a move that to some appeared to incriminate rather than refute the central thesis of Gibson’s column.</p> <p>This would not be <em>Wired</em>‘s last venture into the controversial. Its creators, Louis Rosetto and Jane Metcalfe, spent years trying to sell their countercultural take on the digital revolution — the “Rolling Stone” of the Internet age. When its first issue was released, <a target="_blank" href="https://www.nytimes.com/1995/05/21/magazine/the-digerati.html"><em>The New York Times</em> called it</a> “inscrutable and nearly hostile to its readers.” <em>Wired</em>, and Rosetto in particular, cultivated a reputation for edgy content, radical design, and contentious drama.</p> <p>In any case, the Singapore ban was little more than a temporary inconvenience for two driven citizens who lived there. They began manually converting each issue of <em>Wired</em> into HTML, making them available for download on a website. The first <em>Wired </em>website, therefore, has a unique distinction of being an unofficial, amateur project led by two people from a different country uploading copyrighted content they didn’t own to a site that lacked any of the panache, glitz, or unconventional charm that had made <em>Wired</em> famous. That would drive most publications mad. Not <em>Wired</em>. For them, it was motivation.</p> <p><em>Wired</em> had one eye on the web already, well aware of its influence and potential. Within a few months, they had an official website up and running, with uploaded back issues of the magazine. But even that was just a placeholder. Around the corner, they had something much more ambitious in mind.</p> <p>The job of figuring out what to do with the web fell to Andrew Anker. Anker was used to occupying two worlds at once. His background was in engineering, and he spent a bit of time writing software before spending years as a banker on Wall Street. When he became the CTO of <em>Wired</em>, he acted to balance out Rosetto and bring a more measured strategy to the magazine. Rosetto would often lean on his experience in the finance world as much as his training in technology.</p> <p>Anker assembled a small team and began drawing up plans for a <em>Wired</em> website. One thing was clear: a carbon copy digital version of the magazine tossed up on the web wasn’t going to work. <em>Wired</em> had captured a perfect moment in time, launched just before the crescendo of the digital revolution. Its voice was distinct and earned; the kind of voice that might get you banned from a country or two. Finding a new voice for the web, and writing the rules of web publishing in the process, would once again place Anker on the knife’s edge of two worlds. In the one corner, community. And in the other, control.</p> <p>Pulling influence from its magazine roots, the team decided that the <em>Wired</em> website would be organized into content “channels,” each focusing on a different aspect of digital culture. The homepage would be a launching pad into each of these channels. Some, such as Kino (film and movies) or Signal (tech news) would be carefully organized editorial channels, with columns that reflected a <em>Wired</em> tone and were sourced from the magazine’s writers. Other channels, like Piazza, were scenes of chaos, including chat rooms and message boards hosted on the site, filled with comments from ordinary people on the web.</p> <p>The channels would be set against a bold aesthetic that cut against the noise of the plain and simple homepages and academic sites that were little more than a bit of black text on a white background. All of this would be packaged under a new brand, one derived from <em>Wired</em> but very much its own thing. In October of 1994, HotWired officially launched.</p> <figure></figure> <p>Even against a backdrop of commercial web pioneers like GNN, HotWired stood out. They published dynamic stories about the tech world that you couldn’t find anywhere else, both from outside the web and within it. It soon made them among the most popular destinations on the web.</p> <p>The HotWired team — holed up in a corner of the <em>Wired</em> office — frenetically jumped from one challenge to another, “inventing a new medium,” <a target="_blank" href="https://web.archive.org/web/20120206121625/http://www.tcho.com/blog/comments/remembering_hotwired/">as Rosetto would later declare</a>. Some of what they faced were technical challenges, building web servers that could scale to thousands of views a day or designing user interfaces read exclusively on a screen. Others were more strategic. HotWired was among the first to build a dedicated email list, for instance. They had a lot of conversations about what to say and how often to say it.</p> <p>By virtue of being among the first major publications online, HotWired paved more than a few cow paths. They are often cited as the first website to feature banner ads. Anker’s business plan included advertising revenue from the very beginning. Each ad that went up on their site was accompanied by a landing page built specifically for the advertiser by the HotWired team. In launching web commercialization, they also launched some of the first ever corporate websites. “On the same day, the first magazine, the first automobile site, the first travel site, the first commercial consumer telephone company sites all went up online, as well as the first advertising model,” <a target="_blank" href="https://after-on.com/architects-of-the-web">HotWired marketer Jonathan Nelson would later say</a>.</p> <p>Most days, however, they would find themselves debating more philosophical questions. <a target="_blank" href="https://www.nytimes.com/1995/05/21/magazine/the-digerati.html">Rosetto had an aphorism he liked to toss around</a>, “<em>Wired</em> covers the digital revolution. HotWired is the digital revolution.” And in the public eye, HotWired liked to position themselves as the heart of a pulsing new medium. But internally, there was a much larger conflict taking place.</p> <p>Some of the first HotWired recruits were from inside of the storm of the so-called revolution taking place on the Internet. Among them was Howard Rheingold, who had created a massive networked community known as the WELL, along with his intern Justin Hall who, <a target="_blank" href="https://css-tricks.com/chapter-3-the-website/">as a previous chapter discussed</a>, was already making a name for himself for a certain brand of personal homepage. They were joined by the likes of Jonathan Steur, finishing up his academic work on Internet communities for his Ph.D at Stanford, and Brian Behelendorf who would later be one of the creators of the Apache server. This was a very specific team, with a very specific plan.</p> <p>“The biggest draw for me,” <a target="_blank" href="https://after-on.com/architects-of-the-web">Behlendorf recalls</a>, “was the idea of community, the idea of being able to pull people together to the content, and provide <em>context</em> through their contributions. And to make people feel like they were empowered to actually be in control.” The group believed deeply that the voice of the web would be one of contribution. That the users of the web would come together, and converse and collaborate, and create publishing themselves. To that end, they developed features that would be forward thinking even a decade later: user generated art galleries and multi-threaded chatrooms. They dreamed big.</p> <p>Rosetto preferred a more cultivated approach. His background was as a publisher and he had spent years refining the <em>Wired</em> style. He found user participation would muddy the waters and detract from the site’s vision. He believed that the role of writers and editors on the web was to provide a strong point of view. The web, after all, lacked clear purpose and utility. It needed a steady voice to guide it. People, in Rosetto’s view, came to the web for entertainment and fun. Web visitors did not want to contribute; they wanted to read.</p> <p>One early conflict perfectly illustrates the tension between the two camps. Rosetto wanted the site to add registration, so that users would need to create a profile to read the content. This would give HotWired further control over their user experience, and open up the possibility of content personalization tailored to each reader’s preferences. Rheingold and his team were adamantly against the idea. The web was open by design and registration as a requirement flew in the face of that. The idea was scrapped, though not necessarily on ideological grounds. Registration meant less eyeballs and less eyeballs meant less revenue from advertising.</p> <p>The ongoing tension yielded something new in the form of compromise. Anker, at the helm, made the final decision. HotWired would ultimately function as a magazine — Anker understood better than most that the language of editorial direction was one advertisers understood — but it would allow community driven elements.</p> <p>Rheingold and several others left the project soon after it launched, but not before leaving an impression on the site. The unique blend of <em>Wired’s</em> point of view and a community-driven ethos would give way to a new style on the website. The <em>Wired</em> tone was adopted to a more conversational style. Readers were invited in to be part of discussions on the site through comments and emails. Humor became an important tool to cut through a staid medium. And a new voice on the web was born.</p> <p>The web would soon see experiments from two sides. From above, from the largest media conglomerates, and from below, writers working out of basements and garages and one-bedroom apartments. But it would all branch off from HotWired.</p> <hr> <p>A few months before HotWired launched, Rosetto was at the National Magazine Awards. <em>Wired</em> had garnered a lot of attention, and was the recipient of the award for General Excellence at the event. While he was there, he struck up a conversation with Walter Isaacson, then New Media Editor for <em>Time</em> magazine. Isaacson was already an accomplished author and biographer — his 900 page tome <em>Kissinger </em>was a critical and commercial success — and journalist. At <em>Time</em>, he cultivated a reputation for exceptional journalism and business acumen, a rare combination in the media world.</p> <p>Isaacson had become something of a legend at <em>Time</em>, a towering personality with an accomplished record and the ear of the highest levels of the magazine. He had been placed on the fast track to the top of the ranks and given enough freedom to try his hand at something having to do with cyberspace. Inside of the organization, Isaacson and marketing executive Bruce Judson had formed the Online Steering Committee, a collection of editors, marketers, and outside consultants tasked with making a few well-placed bets on the future of publishing.</p> <p>The committee had a Gopher site and something do with Telnet in the works, not to mention a partnership with AOL that had begun to go sour. At the award ceremony, Isaacson was eager to talk to Rosetto a bit about how far Time Warner had managed to go. He was likely one of the few people in the room who might understand the scope of the work, and the promise of the Internet for the media world.</p> <p>During their conversation, Isaacson asked what part of the Internet had Rosetto, who had already begun work on HotWired, excited him most. His response was simple: <em>the web</em>.</p> <p>Isaacson shifted focus at Time Warner. He wanted to talk to people who knew the web, few in number as they were. He brought in some people from the outside. But inside of Time Warner there was really only one person trying his hand at the web. His name was Chan Suh, and he had managed to create a website for the hip-hop and R&B magazine <em>Vibe</em>, hiding out in plain sight.</p> <p>Suh was not the rising star that Isaacson was. Just a few years out of college and very early in his career, he was flying under the radar. Suh had a knack for prescient predictions, and saw early on how publishing could fit with the web. He would impact the web’s trajectory in a number of ways, but he became known for the way in which he brought others up alongside him. His future business partner Kyle Shannon was a theater actor when Suh pulled him in to create one of the first digital agencies, Agency.com. He brought Omar Wasow — the future creator of social network Black Planet — into the <em>Vibe</em> web operation.</p> <p>At <em>Vibe</em>, Suh had a bit of a shell game going. Shannon <a target="_blank" href="https://www.harpercollins.com/products/digital-hustlers-casey-kaitstephen-weiss?variant=32128374341666">would later recall how it all worked</a>. Suh would talk to the magazine’s advertisers, and say “‘For an extra ten grand I’ll give you an advertisement deal on the website,’ and they’re like, ‘That’s great, but we don’t have a website to put there,’ and he said, ‘Well, we could build it for you.’ So he built a couple of websites that became content for Vibe Online.” Through clever sleight of hand, Suh learned how to build websites on his advertisers’ dimes, and used each success to leverage his next deal.</p> <p>By the time Isaacson found Suh, he was already out the door with a business plan and financial backers. Before he left, he agreed to consult while Isaacson gathered together a team and figured out how he was going to bring <em>Time</em> to the web.</p> <p>Suh’s work had answered two open questions. Number one, it had proven that advertising worked as a business model on the web, at least until they could start charging online subscribers for content. Number two, web readers were ready for content written by established publications.</p> <p>The web, at the time, was all promise and potential, and Time Warner could have had any kind of website. Yet, inside the organization, total dominance — control of the web’s audience — became the articulated goal. Rather than focus on developing each publication individually, the steering committee decided to roll up all of Time Warner’s properties into a single destination on the web. In October of 1994, Pathfinder launched, a site with each major magazine split up and spit out into separate feeds.</p> <figure><img decoding="async" loading="lazy" width="616" height="548" src="https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/10/fromTWcorponPF-2005.07.02-13.17.08.jpg?resize=616%2C548&ssl=1" alt="pastedGraphic_2.png"><figcaption>A press release announcing the move to a single destination for multiple magazines, published on an early 1995 version of the Pathfinder website (Credit: <a target="_blank" href="https://www.disobey.com/ghostsites/pathfindermuseum/index.shtml" rel="noreferrer noopener">The Pathfinder.com Museum</a>)</figcaption></figure> <p>At launch, Pathfinderpieced together a vibrant collection. Organized into discrete channels were articles from <em>Sports Illustrated</em>, <em>People</em>, <em>Fortune</em>, <em>Time</em>, and others. They were streamed together in a package that, though not as striking as HotWired or GNN, was at the very least clear and attractive. In their first week, they had 200,00 visitors. There were only a few million people using the web at this point. It wouldn’t be long before they were the most popular site on the web.</p> <p>As Pathfinder’s success hung in the air, it appeared as if their bet had paid off. The grown-ups had finally arrived to button up the rowdy web and make it palatable to a mainstream audience. Within a year, they’d have 14 million visitors to their site every week. Content was refreshed, and was often up to date with publications, and they were experimenting with new formats. Lucrative advertising deals marked, though not quite profitability, at the very least steady revenue. Their moment of glory would not last long.</p> <figure><img decoding="async" loading="lazy" width="461" height="342" src="https://i1.wp.com/css-tricks.com/wp-content/uploads/2020/10/Pathfinder.jpg?resize=461%2C342&ssl=1" alt="pastedGraphic_3.png"><figcaption>The Pathfinder homepage was a portal to many established magazine publications.</figcaption></figure> <p>There were problems even in the beginning, of course. Negotiating publication schedules among editors and publishers at nationally syndicated magazines proved difficult. There were some executives who had a not unfounded fear that their digital play would cannibalize their print business. Content on the web for free which required a subscription in print did not feel responsible or sustainable. And many believed — rightfully so — that the web was little more than a passing fad. As a result, content wasn’t always available and the website was treated as an afterthought, a chore to be checked off the list once the real work had been complete.</p> <p>In the end, however, their failure would boil down to doing too much while doing too little at the same time. Attempting to assert control over an untested medium — and the web was still wary of outsiders — led to a strategy of consolidation. But Pathfinder was not a brand that anybody knew. <em>Sports Illustrated</em> was. <em>People</em> was. <em>Time</em> was. On their own, each of these sites may have had some success adapting to the web. When they were combined, all of these vibrant publications were made faceless and faded into obscurity.</p> <figure><img decoding="async" loading="lazy" width="1024" height="735" src="https://i1.wp.com/css-tricks.com/wp-content/uploads/2020/10/pathfinderhomepageexperimental-2005.06.20-12.12.06.jpg?resize=1024%2C735&ssl=1" alt="pastedGraphic_4.png"><figcaption>An experimental Pathfinder redesign from 1996 (Credit: <a target="_blank" href="https://www.disobey.com/ghostsites/pathfindermuseum/index.shtml" rel="noreferrer noopener">The Pathfinder.com Museum</a>)</figcaption></figure> <p>Pathfinder was never able to find a dedicated audience. Isaacson left the project to become editor at <em>Time</em>, and his vacancy was never fully filled. Pathfinder was left to die on the vine. It continued publishing regularly, but other, more niche publications began to fill the space. During that time, Time Warner was spending a rumored fifteen million dollars a year on the venture. They had always planned to eventually charge subscribers for access. But as <em>Wired</em> learned, web users did not want that. Public sentiment turned. A successful gamble started to look like an overplayed hand.</p> <p>“It began being used by the industry as an example of how not to do it. People pointed to Pathfinder and said it hadn’t taken off,” <a target="_blank" href="https://www.deseret.com/1999/4/27/19442398/time-warner-pulls-magazine-rich-pathfinder-web-site">research analyst Melissa Bane noted</a> when the site closed its doors in April of 1999, “It’s kind of been an albatross around Time Warner’s neck.” Pathfinder properties got split up among a few different websites and unceremoniously shut down, buried under the rubble of history as little more than rounding error on Time Warner’s balance sheet for a few years.</p> <p>Throughout Pathfinder’s lifespan it had one original outlet, a place that published regular, exclusively online content. It was called Netly News, founded by Noah Robischon and Josh Quittner — the same Josh Quittner who wrote the “Way New Journalism” article for HotWired when it launched. Netly News dealt in short, concise pieces and commentary rather than editorially driven magazine content. They were a webzine, hidden behind a corporate veneer. And the second half of the decade would come to be defined by webzines.</p> <hr> <p>Reading back through the data of web use in the mid-90’s reveals a simple conclusion. People didn’t use it all that much. Even early adopters. The average web user at the time surfed for less than 30 minutes a day. And when they were online, most stuck to a handful of central portals, like AOL or Yahoo!. You’d log on, check your email, read a few headlines, and log off.</p> <p>There was, however, a second group of statistical outliers. They spent hours on the web every day, pouring over their favorite sites, collecting links into buckets of lists to share with friends. They cruised on the long tail of the web, venturing far deeper than what could be found on the front-page of Yahoo!. They read content on websites all day — tiny text on low-res screens — until their eyes hurt. These were a special group of individuals. These were the webzine readers.</p> <hr> <p>Carl Steadman was a Rheingold disciple. He had joined HotWired in 1994 to try and put a stop to user registration on the site. He was instrumental in convincing Anker and Rosetto to do so via data he harvested from their server logs. Steadman was young, barely in his mid-20’s, but already spoke as if he were a weathered old-timer of the web, a seasoned expert in decoding its language and promise. Steadman approached his work with resolute deliberateness, his eye on the prize as it were.</p> <p>At HotWired, Steadman had found a philosophical ally in the charismatic and outgoing Joey Anuff, who Steadman had hired as his production assistant. Anuff was often the center of attention — he had a way of commanding the room — but he was often following Steadman’s more silent lead. They would sometimes clash on details, but they were in agreement about one thing. “Ultimately the one thing [Carl and I] have in common is a love for the Web,” <a target="_blank" href="https://archive.vn/20141201133432/http://archive-org.com/page/1027716/2012-12-21/http://www.ojr.org/ojr/workplace/1017862577.php%23selection-417.107-417.181">Anuff would later say</a>.</p> <p>If you worked at HotWired, you got free access to their servers to run your personal site — a perk attached to long days and heated discussions cramped in the corner of the <em>Wired</em> offices. Together, Anuff and Steadman hatched an idea. Under the cloak of night, once everyone had gone home, they began working on a new website, hosted on the HotWired servers. A website that cast off the aesthetic excess and rosy view of technology from their day jobs and focused on engaging and humorous critique of the status quo in a simple format. Each day, the site would publish one new article (under pseudyonyms to conceal author identities). And to make sure no one thought they were taking themselves too seriously, they called their website <em>Suck</em>.</p> <figure><img decoding="async" loading="lazy" width="1024" height="784" src="https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/10/suck-webzine-1997.png?resize=1024%2C784&ssl=1" alt="pastedGraphic_5.png"><figcaption>Suck.com in January 1997 (via <a target="_blank" href="https://web.archive.org/web/19970114135011/http://www.suck.com/" rel="noreferrer noopener">The Web Archive</a>)</figcaption></figure> <p><em>Suck</em> would soon be part of a new movement of webzines, as they were often called at the time. Within a decade, we’d be calling them blogs. Webzines published frequently, daily or several times a day from a collection of (mostly) young writers. They offered their takes on the daily news in politics, and pop culture, almost always with a tech slant. Rarely reporting or breaking stories themselves, webzines cast themselves as critics of the mainstream. The writing was personal, bordering on conversational, filled to the brim with wit and fresh perspective.</p> <p>Generation X — the latchkey generation — entered the job market in the early ’90’s amidst a recession. Would be writers gravitated to elite institutions in big cities, set against a backdrop of over a decade of conservative politics and in the wake of the Gulf War. They concentrated their studies on liberal arts degrees in rhetoric and semiotics and comparative literature. That made for an exceptional grasp of postmodern and literary theory, but little in the way of job prospects.</p> <p>The journalism jobs of their dreams had suddenly vanished; the traditional journalism job for a major publication that was enough to support a modest lifestyle, replaced by freelance work that paid scraps. With little to lose and a strong point of view, a group of writers taught themselves some HTML, recruited their friends, and launched a website. “I was part of something new and subversive and interesting,” writer <a target="_blank" href="https://longreads.com/2018/10/02/webzines-90s-online-media/">Rebecca Schuman would later write</a>, “a democratization of the widely-published word in a world that had heretofore limited its purview to a small and insular group of rich New Yorkers.”</p> <p>By the mid-90’s, there were dozens of webzines to chose from, backed by powerful personalities at their helm, often in pairs like Steadman and Anuff. Cyber-punk digital artist Jamie Levy launched <em>Word</em> with Marissa Bowe as her editor, a bookish BBS aficionado with early web bona fides. Yale educated Stephanie Syman paired up with semiotics major Steven Johnson to launch a slightly more heady take on the zine format called <em>Feed</em>. Salacious webzine <em>Nerve </em>was run by Rufus Griscom and Genevieve Field, a romantic couple unafraid to peel back the curtain of their love life. Suh joined with Shannon to launch <em>UrbanDesires</em>. The Swanson sisters launched <em>ChickClick</em>, and became instant legends to their band of followers. And the list goes on and on.</p> <figure><img decoding="async" loading="lazy" src="https://i2.wp.com/css-tricks.com/wp-content/uploads/2020/10/jamie-levy-early.png?resize=413%2C471&ssl=1" alt="pastedGraphic_6.png" width="413" height="471"><figcaption>Jaime Levy as pictured on Word.com (Credit: <a target="_blank" href="https://jaimelevy.com/press/swing.pdf" rel="noreferrer noopener">JaimeLevy.com</a>)</figcaption></figure> <p>Each site was defined by their enigmatic creators, with a unique riff on the webzine concept. They were, however, powered by a similar voice and tone. Driven by their college experience, they published entries that bordered on show-off intellectualism, laced with navel gazing and cultural reference. Writer Heather Havrilesky, who began her career at <em>Suck</em>, <a target="_blank" href="https://www.theatlantic.com/technology/archive/2016/03/suck-webzine/473853/">described reading its content as</a> “like finding an eye rolling teenager with a Lit Theory degree at an IPO party and smoking clove cigarettes with him until you vomited all over your shoes.” It was not at all unusual to find a reference to Walter Benjamin or Jean Baudrillard dropped into a critique of the latest Cameron Crowe flick.</p> <p>Webzine creators turned to the tools of the web with what Harvilesky would also call a “coy, ironic kind of style” and Schuman has called “weaponized sarcasm.” They turned to short, digestible formats for posts, tailored to a screen rather than the page. They were not tied to regular publishing schedules, wanting instead to create a site readers could come back to day after day with new posts. And <em>Word </em>magazine, in particular, experimented with unique page layouts and, at one point, an extremely popular chatbot named Fred.</p> <p>The content often redefined how web technologies were used. Hyperlinks, for instance, could be used to undercut or emphasize a point, linking for instance, to the homepage of a cigarette company in a quote about deceptive advertising practices. Or, in a more playful manner, when <em>Suck</em> would always link to themselves whenever they used the word “sell-out.” Steven Johnson, co-founder of <em>Feed</em>, would spend an entire chapter in <a target="_blank" href="https://www.amazon.com/Interface-Culture-Technology-Transforms-Communicate/dp/0465036805">his book about user interfaces</a> outlining the ways in which the hyperlink was used almost as punctuation, a new grammatical tool for online writers. “What made the link interesting was not the information on the other end — there was no ‘other end’ — but rather the way the link insulated itself into the sentence.”</p> <p>With their new style and unique edge, webzine writers positioned themselves as sideline critics of what they considered to be corporate interests and inauthentic influence from large media companies like Time Warner. Yet, the most enthusiastic web surfers were as young and jaded as the webzine writers. In rallying readers against the forces of the mainstream, webzines became among the most popular destinations on the web for a loyal audience with nowhere else to go. As they tore down the culture of old, webzines became part of the new culture they mocked.</p> <p>In the generation that followed — and each generation in Internet time lasted only a few years — the tone and style of webzines would be packaged, commoditized, and broadcast out to a wider audience. Analysts and consultants would be paid untold amounts to teach slow to move companies how to emulate the webzines.</p> <p>The sites themselves would turn to advertising as they tried to keep up with demand and keep their writers paid. Writers that would go off to the start their own now-called blogs or become editors of larger media websites. The webzine creators would trade in their punk rock creds for a monkey suit and an IPO. Some would get their 15 minutes. Few sites would last, and many of the names would be forgotten. But their moment in the spotlight was enough to shine a light on a new voice and define a style that has now become as familiar as a well-wielded hyperlink.</p> <hr> <p>Many of the greatest newspaper and magazine properties are defined by a legacy passed down within a family for generations. The Meyer-Graham family navigated <em>The Washington Post</em> from the time Eugene Meyer took over in 1933 until it was sold to Jeff Bezos in 2013. Advance Publications, the owners of Condé Nast and a string of local newspapers, has been privately controlled by the Newhouse family since the 1920s. Even the relative newcomer, News Corp, has the Murdochs at its head.</p> <p>In 1896, Adolph Ochs bought and resurrected <em>The New York Times</em> and began one of the most enduring media dynasties in modern history. Since then, members of the Ochs-Sulzberger family have served as the newspaper’s publisher. In 1992, Arthur Ochs Sulzberger, Jr took over as the publisher from his father who had, in turn, taken over from his father. Sulzberger, Jr., despite his name, had paid his dues. He had worked as a correspondent in the Washington Bureau before making his way through various departments of the newspaper. He put his finger on the pulse of the company and took years to learn how the machine kept moving. And yet, decades of experience backed by a hundred year dynasty wasn’t enough to prepare him for what crossed his desk upon his succession. Almost as soon as he took over, the web had arrived.</p> <p>In the early 1990’s, several newspapers began experimenting with the web. One of the first examples came from an unlikely source. M.I.T. student-run newspaper <em>The Tech </em>launched their site in 1993, the earliest example we have on record of an online newspaper. The <em>San Jose Mercury Times</em>, covering the Silicon Valley region and known for their technological foresight, set up their website at the end of 1994, around the time Pathfinder and HotWired launched.</p> <p>Pockets of local newspapers trying trying their hands at the web were soon joined by larger regional outlets attempting the same. By the end of 1995, dozens of newspapers had a website, including the <em>Chicago Tribune</em> and <em>Los Angeles Times</em>. Readers went from being excited to see a web address at the bottom of their favorite newspaper, to expecting it.</p> <p>1995 was also the year that <em>The New York Times</em> brought in someone from the outside, former Ogilvy staffer Martin Nisenholtz, to lead the new digital wing of the newspaper. Nisenholtz was older than his webzine creator peers, already an Internet industry veteran. He had cut his teeth in computing as early as the late 70’s, and had a hand in an early prototype for Prodigy. Unlike some of his predecessors, Nisenholtz did not need to experiment with the web. He was not unsure about its future. “He saw and predicted things that were going to happen on the media scene before any of us even knew about them,” <a target="_blank" href="https://www.wired.com/2000/02/nisenholtz/">one of his colleagues would later say about him</a>. He knew exactly what the web could do for <em>The New York Times</em>.</p> <p>Nisenholtz also boasted a particular skillset that made him well-suited for his task. On several occasions, he had come into a traditional media organization to transition them into tech. He was used to skeptical reproaches and hard sells. “Many of our colleagues way back then thought that digital was getting in the way of the mission,” <a target="_blank" href="https://www.nytimes.com/2017/12/14/business/media/a-g-sulzberger-new-york-times-publisher.html">Sulzberger would later recall</a>. The <em>New York Times</em> had a strong editorial legacy a century in the making. By contrast, the commercial web was two years old; a blip on someone else’s radar.</p> <p>Years of experience had led Nisenholtz to adopt a different approach. He embedded himself in <em>The New York Times</em> newsroom. He learned the language of news, and spoke with journalists and editors and executives to try and understand how an enduring newspaper operation fits into a new medium. Slowly, he got to work.</p> <p>In 1990, Frank Daniels III was named executive editor of the Raleigh area newspaper <em>News & Observer</em>, which his great-grandfather had bought and salvaged in the 1890’s. Daniels was an unlikely tech luminary, the printed word a part of his bloodline, but he could see the way the winds were shifting. It made him very excited. Within a few years of taking over, he had wired up his newsroom to the Internet to give his reporters next generation tools and network research feeds, and launched an ISP to the greater Raleigh area for would-be computer geeks to buy Internet access (and browse N&O content of course) called NandO.net (<strong>N</strong>ews <strong>and O</strong>bserver).</p> <figure><img decoding="async" loading="lazy" width="557" height="744" src="https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/10/Nando.net_.gif?resize=557%2C744&ssl=1" alt="pastedGraphic_7.png"></figure> <p>As the web began its climb into the commercial world, the paper launched the <em>Nando Times</em>, a website that syndicated news and sports from newswires converted into HTML, alongside articles from the N&O. It is the earliest example we have on the web of a news aggregator, a nationally recognized source for news launched from the newsroom of a local paper and bundled directly alongside an ISP. Each day they would stream stories from around the country to the site, updating regularly throughout the day. They would not be the only organization to dream of content and access merged into a distinctly singular package; your digital home on the web.</p> <p>Money being a driving factor for many of the strategic angles, <em>The Wall Street Journal</em> was among the first to turn to a paywall. The Interactive Edition of the Journal has been for paid subscribers since it launched. It had the effect of standing out in a crowded field and worked well for the subscribers of that publication. It was largely a success, and the new media team at the <em>WSJ </em>was not shy about boasting. But their unique subscriber base was willing to pay for financially driven news content. Plenty would try their hand at a paywall, and few would succeed. The steady drum of advertising would need to work for most online publications, as it had been in the print era.</p> <p>Back at <em>The New York Times</em>, Nisenholtz quickly recognized a split. “That was the big fork in the road,” <a target="_blank" href="https://www.niemanlab.org/2016/01/20-years-ago-today-nytimes-com-debuted-on-line-on-the-web/">he would later say</a>. “Not whether, in my view, you charged for content. The big fork in the road was publishing the content of The Times versus doing something else.”</p> <p>In this case, “doing something else” meant adopting the aggregator model, much like <em>News & Observer</em> had done, or erecting a paywall like <em>The Wall Street Journal</em>. There was even room in the market for a strong editorial voice to establish a foothold in the online portal race. There is an alternate universe in which the <em>New York Times</em> went head to head with Yahoo! and AOL. Nisenholtz and The Times, however, went a different way. They would use the same voice on the web that they had been speaking to their readers with for over a hundred years. When <em>The New York Times</em> website launched in January of 1996, it mirrored the day’s print edition almost exactly, rendered in HTML instead of with ink.</p> <p>Just after launch, the website held a contest to pick a new slogan for the website. Ochs had done the same thing with his readers when he took over the paper in 1896, and the web team was using it to drum up a bit of press. The winner: “All the News That’s Fit to Print.” The very same slogan the paper’s readers had originally selected. For Nisenholtz, it was confirmation that what the readers wanted from <em>The New York Times</em> website was exactly the same thing they wanted when they opened the paper each day. Strong editorial direction, reliable reporting, and all the news.</p> <p>In the future, the Times would not be competing simply with other newspapers. “The News” would be big business on the web, and <em>The New York Times</em> would be competing for attention from newswire services like Reuters, cable TV channels like CNN and tech-influenced media like CNet and MSNBC. The landscape would be covered with careful choices or soaring ambition. The success of the website of <em>The New York Times</em> is in demonstrating that the web is not always a place of reinvention. It is, on occasion, just one more place to speak.</p> <hr> <p>The mid to late 90’s swept up Silicon Valley fervor and dropped it in the middle of Wall Street. A surge of investment in tech companies would drive the media and publishing industry to the web as they struggled capture a market they didn’t fully understand. In a bid for competition, many of the largest tech companies would do the opposite and try their hand at publishing.</p> <p>In 1995, Apple, and later Adobe, funded an online magazine from <em>San Francisco Examiner </em>alumni David Talbot called <em>Salon</em>. The following year, Microsoft hired <em>New Republic </em>writer Michael Kinsley for a similar venture called <em>Slate</em>. Despite their difference in tone and direction, the sites would often be pitted against one another specifically because of their origins. Both sites began as the media venture of some of the biggest players in tech, started by print industry professionals to live solely online.</p> <p>These were webzine-inspired magazines with print traditions in their DNA. When <em>Slate </em>first launched, Kinsley pushed for each structured issue on the website to have page numbers despite how meaningless that was on the screen. Of course, both the concept of “issues” and the attached page numbers were gone within weeks, but it served as a reminder that Kinsley believed the legacy of print deserved its place on the web.</p> <p>The second iteration of webzines, backed by investment from tech giants or venture capital, would shift the timbre of the web’s voice. They would present as a little more grown up. Less webzine, more online magazine. Something a little more “serious,” as it were.</p> <p>This would have the effect of pulling together the old world of print and the new world of the web. The posts were still written from Generation X outsiders, the sites still hosted essays and hit pieces rather than straight investigative reporting. And the web provided plenty of snark to go around. But it would be underscored with fully developed subject matter and a print sensibility.</p> <p>On <em>Salon</em>, that blend became evident immediately. Their first article was a roundtable discussion about race relations and the trial of O.J. Simpson. It had the counter-cultural take, critical lens, and conversational tone of webzines. But it brought in the voice of experts tackling one of the most important issues of the day. Something more serious.</p> <p>The second half of the 1990’s would come to define publishing on the web. Most would be forced to reimagine themselves in the wake of the dot-com crash. But the voice and tone of the web would give way to something new at the turn of the century. An independent web, run by writers and editors and creators that got their start when the web did.</p> <hr> <p>The post <a target="_blank" rel="nofollow" href="https://css-tricks.com/chapter-5-publishing/">Chapter 5: Publishing</a> appeared first on <a target="_blank" rel="nofollow" href="https://css-tricks.com/">CSS-Tricks</a>.</p> <p>You can support CSS-Tricks by being an <a target="_blank" href="https://css-tricks.com/product/mvp-supporter/">MVP Supporter</a>.</p> <div class="fixed"></div> </div> <div class="under"> <span class="categories">Categories: </span><span><a href="http://www.webmastersgallery.com/category/design/" rel="category tag">Designing</a>, <a href="http://www.webmastersgallery.com/category/uncategorized/" rel="category tag">Others</a></span> <span class="tags">Tags: </span><span></span> </div> </div> <div id="pagenavi"> <span class="newer"><a href="http://www.webmastersgallery.com/2020/11/page/7/" >Newer Entries</a></span> <span class="older"><a href="http://www.webmastersgallery.com/2020/11/page/9/" >Older Entries</a></span> <div class="fixed"></div> </div> </div>   <div id="sidebar">  <div id="northsidebar" class="sidebar">  <div class="widget widget_feeds"> <div class="content"> <div id="subscribe"> <a rel="external nofollow" id="feedrss" title="Subscribe to this blog..." href="http://www.webmastersgallery.com/feed/"><abbr title="Really Simple Syndication">RSS</abbr></a> </div> <div class="fixed"></div> </div> </div>  <div id="text-389627311" class="widget widget_text"> <div class="textwidget"><a href="http://feeds2.feedburner.com/webmastersgallery" title="Subscribe to my feed" rel="alternate" type="application/rss+xml"><img src="http://www.feedburner.com/fb/images/pub/feed-icon32x32.png" alt="" style="border:0"/></a><a href="http://feeds2.feedburner.com/webmastersgallery" title="Subscribe to my feed" rel="alternate" type="application/rss+xml">Subscribe for latest Updates</a></div> </div><div id="text-389629461" class="widget widget_text"> <div class="textwidget"><form style="border:1px solid #ccc;padding:3px;text-align:center;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=webmastersgallery', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p>Enter your email address:</p><p><input type="text" style="width:140px" name="email"/></p><input type="hidden" value="webmastersgallery" name="uri"/><input type="hidden" name="loc" value="en_US"/><input type="submit" value="Subscribe" /><p>Delivered by <a href="http://feedburner.google.com" target="_blank" rel="noopener">FeedBurner</a></p></form></div> </div></div>  <div id="centersidebar">  <div id="eastsidebar" class="sidebar">  <div class="widget widget_categories"> <h3>Categories</h3> <ul> <li class="cat-item cat-item-518"><a href="http://www.webmastersgallery.com/category/affiliate-programs/">Affiliate Programs</a> </li> <li class="cat-item cat-item-147"><a href="http://www.webmastersgallery.com/category/design/">Designing</a> </li> <li class="cat-item cat-item-519"><a href="http://www.webmastersgallery.com/category/domain-names/">Domain Names</a> </li> <li class="cat-item cat-item-37"><a href="http://www.webmastersgallery.com/category/e-commerce/">E-commerce</a> </li> <li class="cat-item cat-item-509"><a href="http://www.webmastersgallery.com/category/internet-directories/">Internet Directories</a> </li> <li class="cat-item cat-item-510"><a href="http://www.webmastersgallery.com/category/message-boards/">Message Boards</a> </li> <li class="cat-item cat-item-1"><a href="http://www.webmastersgallery.com/category/uncategorized/">Others</a> </li> <li class="cat-item cat-item-506"><a href="http://www.webmastersgallery.com/category/programming/">Programming</a> </li> <li class="cat-item cat-item-511"><a href="http://www.webmastersgallery.com/category/promotion-and-marketing/">Promotion and Marketing</a> </li> <li class="cat-item cat-item-534"><a href="http://www.webmastersgallery.com/category/scripts-and-programming/">Scripts and Programming</a> </li> <li class="cat-item cat-item-513"><a href="http://www.webmastersgallery.com/category/search-engines/">Search Engines</a> </li> <li class="cat-item cat-item-135"><a href="http://www.webmastersgallery.com/category/social-media/">Social Media</a> </li> <li class="cat-item cat-item-514"><a href="http://www.webmastersgallery.com/category/softwares/">Softwares</a> </li> <li class="cat-item cat-item-515"><a href="http://www.webmastersgallery.com/category/tips-and-tutorials/">Tips and Tutorials</a> </li> <li class="cat-item cat-item-338"><a href="http://www.webmastersgallery.com/category/web-hosting/">Web Hosting</a> </li> <li class="cat-item cat-item-516"><a href="http://www.webmastersgallery.com/category/webmaster-tools/">Webmaster Tools</a> </li> <li class="cat-item cat-item-501"><a href="http://www.webmastersgallery.com/category/webmaster-resources/">Webmasters Resources</a> </li> <li class="cat-item cat-item-3"><a href="http://www.webmastersgallery.com/category/web-design/">Website Design</a> </li> </ul> </div> </div>   <div id="westsidebar" class="sidebar">  <div class="widget widget_links"> <h3>Blogroll</h3> <ul> <li><a href="http://wordpress.org/development/">Development Blog</a></li> <li><a href="http://codex.wordpress.org/">Documentation</a></li> <li><a href="http://wordpress.org/extend/plugins/">Plugins</a></li> <li><a href="http://wordpress.org/extend/ideas/">Suggest Ideas</a></li> <li><a href="http://wordpress.org/support/">Support Forum</a></li> <li><a href="http://wordpress.org/extend/themes/">Themes</a></li> <li><a href="http://planet.wordpress.org/">WordPress Planet</a></li> </ul> </div> </div>  <div class="fixed"></div> </div>  <div id="southsidebar" class="sidebar">  <div class="widget"> <h3>Archives</h3> <ul> <li><a href='http://www.webmastersgallery.com/2024/11/'>November 2024</a></li> <li><a href='http://www.webmastersgallery.com/2024/10/'>October 2024</a></li> <li><a href='http://www.webmastersgallery.com/2024/09/'>September 2024</a></li> <li><a href='http://www.webmastersgallery.com/2024/08/'>August 2024</a></li> <li><a href='http://www.webmastersgallery.com/2024/07/'>July 2024</a></li> <li><a href='http://www.webmastersgallery.com/2024/06/'>June 2024</a></li> <li><a href='http://www.webmastersgallery.com/2024/05/'>May 2024</a></li> <li><a href='http://www.webmastersgallery.com/2024/04/'>April 2024</a></li> <li><a href='http://www.webmastersgallery.com/2024/03/'>March 2024</a></li> <li><a href='http://www.webmastersgallery.com/2024/02/'>February 2024</a></li> <li><a href='http://www.webmastersgallery.com/2024/01/'>January 2024</a></li> <li><a href='http://www.webmastersgallery.com/2023/12/'>December 2023</a></li> <li><a href='http://www.webmastersgallery.com/2023/11/'>November 2023</a></li> <li><a href='http://www.webmastersgallery.com/2023/10/'>October 2023</a></li> <li><a href='http://www.webmastersgallery.com/2023/09/'>September 2023</a></li> <li><a href='http://www.webmastersgallery.com/2023/08/'>August 2023</a></li> <li><a href='http://www.webmastersgallery.com/2023/07/'>July 2023</a></li> <li><a href='http://www.webmastersgallery.com/2023/06/'>June 2023</a></li> <li><a href='http://www.webmastersgallery.com/2023/05/'>May 2023</a></li> <li><a href='http://www.webmastersgallery.com/2023/04/'>April 2023</a></li> <li><a href='http://www.webmastersgallery.com/2023/03/'>March 2023</a></li> <li><a href='http://www.webmastersgallery.com/2023/02/'>February 2023</a></li> <li><a href='http://www.webmastersgallery.com/2023/01/'>January 2023</a></li> <li><a href='http://www.webmastersgallery.com/2022/12/'>December 2022</a></li> <li><a href='http://www.webmastersgallery.com/2022/11/'>November 2022</a></li> <li><a href='http://www.webmastersgallery.com/2022/10/'>October 2022</a></li> <li><a href='http://www.webmastersgallery.com/2022/09/'>September 2022</a></li> <li><a href='http://www.webmastersgallery.com/2022/08/'>August 2022</a></li> <li><a href='http://www.webmastersgallery.com/2022/07/'>July 2022</a></li> <li><a href='http://www.webmastersgallery.com/2022/06/'>June 2022</a></li> <li><a href='http://www.webmastersgallery.com/2022/05/'>May 2022</a></li> <li><a href='http://www.webmastersgallery.com/2022/04/'>April 2022</a></li> <li><a href='http://www.webmastersgallery.com/2022/03/'>March 2022</a></li> <li><a href='http://www.webmastersgallery.com/2022/02/'>February 2022</a></li> <li><a href='http://www.webmastersgallery.com/2022/01/'>January 2022</a></li> <li><a href='http://www.webmastersgallery.com/2021/12/'>December 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/11/'>November 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/10/'>October 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/09/'>September 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/08/'>August 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/07/'>July 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/06/'>June 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/05/'>May 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/04/'>April 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/03/'>March 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/02/'>February 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/01/'>January 2021</a></li> <li><a href='http://www.webmastersgallery.com/2020/12/'>December 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/11/' aria-current="page">November 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/10/'>October 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/09/'>September 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/08/'>August 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/07/'>July 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/06/'>June 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/05/'>May 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/04/'>April 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/03/'>March 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/02/'>February 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/01/'>January 2020</a></li> <li><a href='http://www.webmastersgallery.com/2019/12/'>December 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/11/'>November 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/10/'>October 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/09/'>September 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/08/'>August 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/07/'>July 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/06/'>June 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/05/'>May 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/04/'>April 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/03/'>March 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/02/'>February 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/01/'>January 2019</a></li> <li><a href='http://www.webmastersgallery.com/2018/12/'>December 2018</a></li> <li><a href='http://www.webmastersgallery.com/2018/11/'>November 2018</a></li> <li><a href='http://www.webmastersgallery.com/2018/10/'>October 2018</a></li> <li><a href='http://www.webmastersgallery.com/2018/09/'>September 2018</a></li> <li><a href='http://www.webmastersgallery.com/2018/08/'>August 2018</a></li> <li><a href='http://www.webmastersgallery.com/2018/07/'>July 2018</a></li> <li><a href='http://www.webmastersgallery.com/2018/04/'>April 2018</a></li> <li><a href='http://www.webmastersgallery.com/2018/01/'>January 2018</a></li> <li><a href='http://www.webmastersgallery.com/2017/12/'>December 2017</a></li> <li><a href='http://www.webmastersgallery.com/2017/11/'>November 2017</a></li> <li><a href='http://www.webmastersgallery.com/2017/09/'>September 2017</a></li> <li><a href='http://www.webmastersgallery.com/2017/08/'>August 2017</a></li> <li><a href='http://www.webmastersgallery.com/2017/07/'>July 2017</a></li> <li><a href='http://www.webmastersgallery.com/2017/06/'>June 2017</a></li> <li><a href='http://www.webmastersgallery.com/2017/05/'>May 2017</a></li> <li><a href='http://www.webmastersgallery.com/2017/04/'>April 2017</a></li> <li><a href='http://www.webmastersgallery.com/2017/03/'>March 2017</a></li> <li><a href='http://www.webmastersgallery.com/2017/02/'>February 2017</a></li> <li><a href='http://www.webmastersgallery.com/2017/01/'>January 2017</a></li> <li><a href='http://www.webmastersgallery.com/2016/12/'>December 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/11/'>November 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/10/'>October 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/09/'>September 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/08/'>August 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/07/'>July 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/06/'>June 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/05/'>May 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/04/'>April 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/03/'>March 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/02/'>February 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/01/'>January 2016</a></li> <li><a href='http://www.webmastersgallery.com/2015/12/'>December 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/11/'>November 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/10/'>October 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/09/'>September 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/08/'>August 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/07/'>July 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/06/'>June 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/05/'>May 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/04/'>April 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/03/'>March 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/02/'>February 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/01/'>January 2015</a></li> <li><a href='http://www.webmastersgallery.com/2014/12/'>December 2014</a></li> <li><a href='http://www.webmastersgallery.com/2014/11/'>November 2014</a></li> <li><a href='http://www.webmastersgallery.com/2014/10/'>October 2014</a></li> <li><a href='http://www.webmastersgallery.com/2014/09/'>September 2014</a></li> <li><a href='http://www.webmastersgallery.com/2014/08/'>August 2014</a></li> <li><a href='http://www.webmastersgallery.com/2014/07/'>July 2014</a></li> <li><a href='http://www.webmastersgallery.com/2014/06/'>June 2014</a></li> <li><a href='http://www.webmastersgallery.com/2013/07/'>July 2013</a></li> <li><a href='http://www.webmastersgallery.com/2013/01/'>January 2013</a></li> <li><a href='http://www.webmastersgallery.com/2012/12/'>December 2012</a></li> <li><a href='http://www.webmastersgallery.com/2012/08/'>August 2012</a></li> <li><a href='http://www.webmastersgallery.com/2012/07/'>July 2012</a></li> <li><a href='http://www.webmastersgallery.com/2012/06/'>June 2012</a></li> <li><a href='http://www.webmastersgallery.com/2012/05/'>May 2012</a></li> <li><a href='http://www.webmastersgallery.com/2012/04/'>April 2012</a></li> <li><a href='http://www.webmastersgallery.com/2012/01/'>January 2012</a></li> <li><a href='http://www.webmastersgallery.com/2011/11/'>November 2011</a></li> <li><a href='http://www.webmastersgallery.com/2011/06/'>June 2011</a></li> <li><a href='http://www.webmastersgallery.com/2011/03/'>March 2011</a></li> <li><a href='http://www.webmastersgallery.com/2011/02/'>February 2011</a></li> <li><a href='http://www.webmastersgallery.com/2011/01/'>January 2011</a></li> <li><a href='http://www.webmastersgallery.com/2010/12/'>December 2010</a></li> <li><a href='http://www.webmastersgallery.com/2010/11/'>November 2010</a></li> <li><a href='http://www.webmastersgallery.com/2010/09/'>September 2010</a></li> <li><a href='http://www.webmastersgallery.com/2010/07/'>July 2010</a></li> <li><a href='http://www.webmastersgallery.com/2010/06/'>June 2010</a></li> <li><a href='http://www.webmastersgallery.com/2010/05/'>May 2010</a></li> <li><a href='http://www.webmastersgallery.com/2010/02/'>February 2010</a></li> <li><a href='http://www.webmastersgallery.com/2009/12/'>December 2009</a></li> <li><a href='http://www.webmastersgallery.com/2009/08/'>August 2009</a></li> <li><a href='http://www.webmastersgallery.com/2009/07/'>July 2009</a></li> <li><a href='http://www.webmastersgallery.com/2009/06/'>June 2009</a></li> <li><a href='http://www.webmastersgallery.com/2009/05/'>May 2009</a></li> <li><a href='http://www.webmastersgallery.com/2009/04/'>April 2009</a></li> <li><a href='http://www.webmastersgallery.com/2009/03/'>March 2009</a></li> </ul> </div>  <div class="widget"> <h3>Meta</h3> <ul> <li><a href="http://www.webmastersgallery.com/wp-login.php">Log in</a></li> </ul> </div> </div>  </div>  <div class="fixed"></div> </div>   <div id="footer"> <a id="gotop" href="#" onclick="MGJS.goTop();return false;">Top</a> <a id="powered" href="http://wordpress.org/">WordPress</a> <div id="copyright"> Copyright © 2009-2024 Webmasters Gallery </div> <div id="themeinfo"> Theme by <a href="http://www.neoease.com/">NeoEase</a>. Valid <a href="http://validator.w3.org/check?uri=referer">XHTML 1.1</a> and <a href="http://jigsaw.w3.org/css-validator/check/referer?profile=css3">CSS 3</a>. </div> </div>  </div>  </div>  </body> </html>