Browser | Austin Drupal Development and Support | Drupal Development Austin

Posts Tagged:browser

rfp-robotRFP ROBOT: Website Request for Proposal Generator

The time has come for a new website (or website redesign), which means you need to write a website request for proposal or web RFP. A Google search produces a few examples, but they vary wildly and don’t seem to speak really to your goals for developing or redesigning a new website. You need to write a website RFP that will clearly articulate your needs and generate responses from the best website designers and developers out there. But how?

Have no fear, RFP Robot is here. He will walk you through a step-by-step process to help you work through the details of your project and create a PDF formatted website design RFP that will provide the information vendors need to write an accurate bid. RFP Robot will tell you what info you should include, point out pitfalls, and give examples.


Building Battleship in CSS

This is an experiment to see how far into an interactive experience I can get using only CSS. What better project to attempt than a game? Battleship seemed like a good challenge and a step up from the CSS games I’ve seen so far because it has the complexity of multiple areas that have to interact with two players. Wanna see the complete game? View Repo View Demo Oh, you wanna learn how it works? Let’s dig in. I could tell right away there was going to be a lot of repetitive HTML and very long CSS selectors coming, so I set up Pug to compile HTML and Less to compile CSS. This is what all the code from here on is going to be written in. Interactive elements in CSS In order to get the game mechanics working, we need some interactive elements. We’re going to walk through each…

Read More →

Practical CSS Scroll Snapping

CSS scroll snapping allows you to lock the viewport to certain elements or locations after a user has finished scrolling. It’s great for building interactions like this one: Live Demo Browser support and basic usage Browser support for CSS scroll snapping has improved significantly since it was introduced in 2016, with Google Chrome (69+), Firefox, Edge, and Safari all supporting some version of it. This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.DesktopChromeOperaFirefoxIEEdgeSafari69No6311*18*11Mobile / TabletiOS SafariOpera MobileOpera MiniAndroidAndroid ChromeAndroid Firefox11.0-11.2NoNoNoNo60 Scroll snapping is used by setting the scroll-snap-type property on a container element and the scroll-snap-align property on elements inside it. When the container element is scrolled, it will snap to the child elements you’ve defined. In its most basic form, it looks like this: <div class=’container’> <section class=’child’></section> <section class=’child’></section> <section class=’child’></section> … </div>…

Read More →

The possibilities of the color-adjust property

The Open Web continues to show up in places we would have never originally expected to find it: our phones, televisions, watches, books, video game consoles, fast food menus, gas pumps, elevators, cars—even our refrigerators. By not making too many or too strict assumptions about how the web should be used, it remains flexible and adaptable. These qualities have allowed it to outperform closed technologies like Flash and Silverlight. With the web’s growth comes new features to better accommodate its new form factors and use cases. One feature I’m excited about is the color-adjust property, proposed in CSS Color Module Level 4. It is an acknowledgement that the web will continue to show up on devices that have less-than-stellar displays. There are two values for color-adjust: economy and exact. A value of exact tells the browser it shouldn’t make adjustments to the colors declared in the stylesheet: .card { background-color:…

Read More →

Static sites should be the default

Let’s define a “static” site to mean that each page is just a regular old HTML file sitting in directory. In other words, if you visit /about-us in a browser, then you’re sent the HTML file that lives at /about-us/index.html which contains the entire page. Source: https://www.phase2technology.com/feed/

Switch font color for different backgrounds with CSS

Ever get one of those, “I can do that with CSS!” moments while watching someone flex their JavaScript muscles? That’s exactly the feeling I got while watching Dag-Inge Aas & Ida Aalen talk at CSSconf EU 2018. They are based in Norway, where WCAG accessibility is not a just good practice, but actually required by law (go, Norway!). As they were developing a feature that allows user-selectable color theming for their main product, they faced a challenge: automatically adjusting the font color based on the selected background color of the container. If the background is dark, then it would be ideal to have a white text to keep it WCAG contrast compliant. But what happens if a light background color is selected instead? The text is both illegible and fails accessibility. They used an elegant approach and solved the issue using the “color” npm package, adding conditional borders and automatic…

Read More →

Browser painting and considerations for web performance

The process of a web browser turning HTML, CSS, and JavaScript into a finished visual representation is quite complex and involves a good bit of magic. Here’s a simplified set of steps the browser goes through: Browser creates the DOM and CSSOM. Browser creates the render tree, where the DOM and styles from the CSSOM are taken into account (display: none elements are avoided). Browser computes the geometry of the layout and its elements based on the render tree. Browser paints pixel by pixel to create the visual representation we see on the screen. In this article, I’d like to focus on the last part: painting. All of those steps combined is a lot of work for a browser to do on load… and actually, not just on load, but any time the DOM (or CSSOM) is changed. That’s why many web developers tend to partially solve this by using…

Read More →

Extending Your App Beyond the Web with Electron

At Viget, we have a constant stream of projects that provide us with new challenges and interesting opportunities. We have a wide array of tools to help us accomplish any client’s needs, but sometimes a client has a problem that we have never solved before. Instead of forcing the client to change their needs to meet our skillset, this inspires us to find the right tool for the job. Recently, we had the opportunity with an application that seemed like a typical browser-based project, but had a few key elements that stuck out as a candidate to build on Electron. Hold up, What is Electron? Electron is an application wrapper for Javascript projects. With Electron you can create a typical web-based project that uses HTML, CSS and Javascript and package it to be installed as an application on a computer. This means that instead of visiting the application from within…

Read More →

Sticky, Smooth, Active Nav

Just like the title says! Here’s a sidebar navigation bar that… Uses sticky positioning. It stays on the screen when it can, but won’t overlap the header, footer, or ever make any of it’s links inaccessible. Scrolls smoothly to the sections you click to. Activates the current nav based on scroll position (it’s a single page thing). See the Pen Sticky, Smooth, Active Nav by Chris Coyier (@chriscoyier) on CodePen. Sticky It’s easy to toss position: sticky; top: 0; on something. But for it to work, it’s gotta be within a taller parent element. So, the unordered list (<ul>) within the navigation (<nav>) works great here. Thanks to the CSS grid layout, the <nav> is as tall as the <main> content area. However, note that that we also gotta position: -webkit-sticky; for iOS. I also tossed in a magic number for the vertical media query so that it doesn’t stick…

Read More →

Let’s make a form that puts current location to use in a map!

I love shopping online. I can find what I need and get most things for a decent price. I am Nigerian currently working and studying in India, and two things I dread when shopping online are: Filling out a credit card form Filling out shipping and billing address forms Maybe I’m just lazy, but these things are not without challenges! For the first one, thanks to payment processing services like PayPal and e-wallets, I neither have to type in my 12-digit credit card number for every new e-commerce site I visit, nor have to save my credit card details with them. For the second, the only time-saving option given by most shopping websites is to save your shipping address, but you still have to fill the form (arrghh!). This is where the challenge is. I’ve had most of my orders returned because my address (which I thought was the right…

Read More →

New in Basecamp 3: Image Galleries

At Basecamp, we write a lot—from announcements to pitches, and everything in between.Quite often, we’re presenting something that has a Before and After, like a mockup or interface design that’s been revised. Until now, this was always kind of frustrating. Basecamp only supported full-width images, so it could be difficult to quickly compare two images at once.Today we’ve added support for side-by-side image galleries inside written posts!This is a subtle but substantial change: galleries support and enhance your writing by making it more fluid, expressive, and precise. They’re great for sharing screenshots, comparisons, mockups, sketches, photos, and so on.Here’s how it works.Creating a GalleryIn any rich text field in Basecamp 3, you can make a gallery of images by uploading multiple images at the same time. You can do that in the file-browser dialog, or by dragging and dropping files into Basecamp directly.Dragging images to make a galleryWhen you do that, Basecamp will automatically group the images…

Read More →

The trick to viewport units on mobile

Viewport units have always been controversial and some of that is because of how mobile browsers have made things more complicated by having their own opinions about how to implement them. Case in point: should the scrollbar be taken into account for the vw unit? What about a site’s navigation or page controls — should those count in the calculation? Then there are physical attributes of the devices themselves (hello, notch!) that can’t be overlooked. First, a little context The spec is pretty vague about how viewport units should be calculated. With mobile devices, we’re often concerned with the vertical height, so let’s look specifically at viewport height (vh): vh unit Equal to 1% of the height of the initial containing block. So yeah, no clear guidance there when it comes to handling device and browser-specific differentiations. vh was initially calculated by the current viewport of your browser. If you…

Read More →

abc to SVG

Here’s a little example that Jeremy Keith used to use in his talks. It’s stuck with me as one of the coolest examples of progressive enhancement and Technology Being CoolTM around. There is this musical notation format called abc. They don’t capitalize it. Kinda like npm, which I guess makes sense as it isn’t an acronym. But it is the name of something so it’s super awkward. Ughakdhk. Anyway. The format itself is really cool. It’s super simple and text-based. Here’s the example from their homepage: X:1 T:Speed the Plough M:4/4 C:Trad. K:G |:GABc dedB|dedB dedB|c2ec B2dB|c2A2 A2BA| GABc dedB|dedB dedB|c2ec B2dB|A2F2 G4:| |:g2gf gdBd|g2f2 e2d2|c2ec B2dB|c2A2 A2df| g2gf g2Bd|g2f2 e2d2|c2ec B2dB|A2F2 G4:| A little like YAML, I suppose. That’s the music for that whole song. It’s not loaded with all the possibilities of sheet music; it’s just notes and timing. Enough to communicate a folk/traditional song, which is primarily…

Read More →

On xlink:href being deprecated in SVG

A reader wrote in to tell me we should update our articles about SVG <use> elements. The attribute we always use for them, xlink:href, is deprecated. Indeed, MDN says: That’s pretty strong language, hence the reader’s warning. This is a bit surprising to me, as the SVG 2 thing got a little weird. It looks like it did become a Candidate Recommendation though. So… <!– This is old –> <svg> <use xlink:href=”#whatever” /> </svg> <!– This is new –> <svg> <use href=”#whatever” /> </svg> I like it. But does it actually work? Lemme fork my little old demo and change all the references. In a quick run through of what I have easy access to: Chrome 67 Firefox 61 Safari 11 Edge 17 IE 11 iOS 11 ✅ ✅ 🙅‍♂️ ✅ ✅ 🙅‍♂️ Better than I thought! But enough 🙅‍♂️ no-go’s there that up and switching everything seems far too…

Read More →

YOOtheme Pro Review: Strong Theme and Page Builder for WordPress and Joomla

Meta: This YOOtheme review focuses on YOOtheme Pro features, functionalities and the corresponding pricing, plus overall efficacy. For now, forget about all the fancy sales language you know. Or your products’ amazing and exceptional features. There’s only one thing that will make your traffic stay immediately they land on your site. Yes, you’re dead right. It all comes down to your web design. And the numbers are astonishing. Basically, 94% of your traffic would not trust a site with poor design. Chances are, they’ll just leave to engage other businesses with better-designed sites. That’s why I’ve always been extremely keen about the themes and templates I adopt for my sites, especially if they come from third-party providers. Speaking of which, WordPress users have always been lucky when it comes to this. We have a wide range of options to choose from, including dedicated theme providers, and page-builders that also come…

Read More →

Sometimes `sizes` is quite important.

Paraphrased question from email: I just read your article Responsive Images: If you’re just changing resolutions, use srcset. In the age of “responsive websites,” srcset does not help in certain situations. For example, I have a popular products slider. On mobile, I have one image per slide where the images are 320px wide. On desktop, I have six images per slide where each is 160px wide. So the desktop images are smaller on desktop, not bigger. How do I handle this situation with srcset? I tried to be careful with that post title: “If you’re just changing resolutions, use srcset.” In this case, we’re changing the size of the images not just at certain resolutions, but at specific breakpoints as well, which means we’re also going to need to use the sizes attribute to get the most out of responsive images. The entire job of the sizes attribute is to…

Read More →

Build a state management system with vanilla JavaScript

Managing state is not a new thing in software, but it’s still relatively new for building software in JavaScript. Traditionally, we’d keep state within the DOM itself or even assign it to a global object in the window. Now though, we’re spoiled with choices for libraries and frameworks to help us with this. Libraries like Redux, MobX and Vuex make managing cross-component state almost trivial. This is great for an application’s resilience and it works really well with a state-first, reactive framework such as React or Vue. How do these libraries work though? What would it take to write one ourselves? Turns out, it’s pretty straightforward and there’s an opportunity to learn some really common patterns and also learn about some useful modern APIs that are available to us. Before we get started, it’s recommended that you have an intermediary knowledge of JavaScript. You should know about data types and…

Read More →

Did you know that style and script tags can be set to display: block?

The other night, Amit Patel mentioned that you can set script tags in HTML to display: block with CSS and then edit that code inline with the contentEditable attribute. This means that you can then see it all update live in the browser as you type. Shortly after, Marius Gundersen replied that you can do this with the style tag as well. All of this is such a weird concept to me that I just had to make a demo to see if it worked: <p data-height=”550″ data-theme-id=”1″ data-slug-hash=”46b115ccbe34d51e2bf1ebfda04438de” data-default-tab=”result” data-user=”robinrendle” data-embed-version=”2″ data-pen-title=”contentEditable tags” class=”codepen”>See the Pen contentEditable <style&rt; tags by Robin Rendle (@robinrendle) on CodePen. And it does, as strange as that might be! All you need to do is add the contentEditable attribute to the style tag and make sure it’s set to display: block like so: <p>content goes here</p> <style contenteditable> p { color: black; } </style>…

Read More →

View Source

I remember seeing this Tom Dale tweet a while back. It’s literally about the browser’s ability to look at the HTML of the document you’re looking at as it first arrived. Now the tweet is stirring up a new round of conversation. Jonathan Snook has kind of a baby bear take: We have the ability to inspect the original HTML source along with its interpreted representation. We have the ability to inspect the source of JavaScript and CSS files mapped from its minified and optimized versions. We have the ability to inspect rendering pipelines. We have the ability to stop and step through JavaScript execution line by line. The increasing complexity of tools doesn’t negate the need for those earlier, simpler tools, though. The sites some build may be simple static sites, befitting of a simple View Source. The sites some build may be compiled and bundled and requiring tools…

Read More →

Adding Particle Effects to DOM Elements with Canvas

Let’s take a look at how to make web pages more visually capable by combining the freedom of <canvas> with HTML elements. Specifically, we will be creating a basic HTML-to-particle effect, but the same technique could be used for many kinds of effects. Before we begin, feel free to grab the source code in the repo. View Repo Create the initial element First, let’s create an HTML element to build on. I’m using a simple styled button, but it really could be any HTML element. See the Pen DOM to Canvas #1 by Zach Saucier (@Zeaklous) on CodePen. A modern browser like Chrome, Firefox, or Edge is required to view these demos. But how can we get a canvas to “see” this element so that we can manipulate each pixel using canvas? In order to make that to happen, we will essentially need to take a snapshot of our HTML…

Read More →

Back to Top