Category Archive for: html

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.


Oxygen – The WordPress Visual Site Builder for Real Designers?

WordPress page builders are generally shunned by those who know how to code. They are generally bloated and slow. And you are offered very limited customization options. But what if there was a visual site builder meant for advanced, professional website designers? It turns out there is! It’s called Oxygen, and it’s quickly becoming the tool of choice for WordPress web designers. Notice that with Oxygen, you design your entire site – content, headers, footers, menus, etc. It totally replaces your WordPress theme. All pages are constructed from fundamental HTML elements – section, div, h1…6, p, span, a, img, and a few more. Then, you visually edit CSS properties to get everything looking the way you want. So unlike a typical page builder, you can design anything. It’s like hand-coding, but visually. Think Webflow, but for WordPress. To integrate with WordPress and design layouts for posts, custom post types, archives,…

Read More →

Using the Paint Timing API

It’s a great time to be a web performance aficionado, and the arrival of the Paint Timing API in Chrome 60 is proof positive of that fact. The Paint Timing API is yet another addition to the burgeoning Performance API, but instead of capturing page and resource timings, this new and experimental API allows you to capture metrics on when a page begins painting. If you haven’t experimented with any of the various performance APIs, it may help if you brush up a bit on them, as the syntax of this API has much in common with those APIs (particularly the Resource Timing API). That said, you can read on and get something out of this article even if you don’t. Before we dive in, however, let’s talk about painting and the specific timings this API collects. Why do we need an API for measuring paint times? If you’re reading…

Read More →

(An Interview About) imgix Page Weight

Imgix has been a long-time display ad sponsor here on CSS-Tricks. This post is not technically sponsored, I just noticed that they released a tool for analyzing image performance at any given URL that is pretty interesting. We know web performance is a big deal. We know that images are perhaps the largest offender in ballooning page weights across the web. We know we have tools for looking at page performance as a whole. It seems fairly new to me to have tools for specifically analyzing and demonstrating how we could have done better with images specifically. That’s what this Page Weight tool is. Clearly this is a marketing tool for them. You put in a URL, and it tells you how you could have done better, and specifically how imgix can help do that. I’m generally a fan of that. Tools with businesses behind them have the resources and…

Read More →

Jacksonville, FL – Drupal Global Training Days 2017

Start:  2017-09-09 09:00 – 17:00 America/New_York Organizers:  Jitesh Doshi Event type:  Training (free or commercial) Full day of Drupal 8 training Saturday, Sep 9, 2017, 6:00 PM UNF Building 15, Room 22031 UNF Dr Jacksonville, FL 4 Drupalers Attending We are celebrating Drupal Global Training Days 2017 on September 9th with a full day of Drupal 8 training which is free and open to public at University of North Florida.Drupal 8 TrainingThis is a full day of training on Drupal 8 CMS.Drupal 8 is the CMS platform (Content Management System) that lets you build complex web sites and web applicati… Check out this Meetup → What: Drupal Global Training Day – Learn Drupal 8 CMS When: Saturday, September 9, 2017 – 9am to 5pm Cost: free, no cost Organized by: JAX Drupal User Group (Jacksonville, Florida) Where: University of North Florida, Jacksonville, FL – Building 15, Room 2203 How to register?: See…

Read More →

More CSS Charts, with Grid & Custom Properties

I loved Robin’s recent post, experimenting with CSS Grid for bar-charts. I’ve actually been using a similar approach on a client project, building a day-planner with CSS Grid. It’s a different use-case, but the same basic technique: using grid layouts to visualize data. (I recommend reading Robin’s article first, since I’m building on top of his chart.) Robin’s approach relies on a large Sass loop to generate 100 potential class-names, even though less than 12 are used in the final chart. In production we’ll want something more direct and performant, with better semantics, so I turned to definition lists and CSS Variables (aka Custom Properties) to build my charts. Here’s the final result: See the Pen Bar chart in CSS grid + variables by Miriam Suzanne (@mirisuzanne) on CodePen. Let’s dig into it! Markup First Robin was proposing a conceptual experiment, so he left out many real-life data and accessibility…

Read More →

CSS Utility Classes and “Separation of Concerns”

Adam Wathan takes us on a journey through the different ways we can approach HTML and CSS. This is a really great read that I bet will resonate with a lot of you, whether or not you agree with where he ends up. Here’s a particularly interesting bit where he specifically calls out “separation of concerns” as being a straw man: You either have separation of concerns (good!), or you don’t (bad!).This is not the right way to think about HTML and CSS. Instead, think about dependency direction. There are two ways you can write HTML and CSS: CSS that depends on HTML … In this model, your HTML is restyleable, but your CSS is not reusable. HTML that depends on CSS … In this model, your CSS is reusable, but your HTML is not restyleable. It occurs to me that there are fairly large contingents heading in both directions…

Read More →

The Difference Between Explicit and Implicit Grids

Grid Layout finally gives us the ability to define grids in CSS and place items into grid cells. This on its own is great, but the fact that we don’t have to specify each track and we don’t have to place every item manually makes the new module even better. Grids are flexible enough to adapt to their items. This is all handled by the so called explicit and implicit grid. All code samples in this post are accompanied by images in order to display grid lines and tracks. If you want to tinker with the code yourself, I recommend you download Firefox Nightly because it currently has the best DevTools to debug grids. Explicit Grids We can define a fixed number of lines and tracks that form a grid by using the properties grid-template-rows, grid-template-columns, and grid-template-areas. This manually defined grid is called the explicit grid. An explicit grid…

Read More →

The Best Way to Implement a “Wrapper” in CSS

Sometimes the first bit of HTML we write in a new document is an element that wraps everything else on the page. The term wrapper is common for that. We give it a class, and that class is responsible for encapsulating all visual elements on the page. I’ve always struggled to with the best way to implement it. I found a related thread on StackOverflow that has more than 250,000 views, so obviously I’m not the only one wondering! I’ll sum up my latest thoughts in this article. Before we dive into it, let’s first examine the difference between the “wrapper” and the “container”. “Wrapper” vs “Container” I believe there is a difference between wrapper and container elements. In programming languages, the word container is generally used for structures that can contain more than one element. A wrapper, on the other hand, is something that wraps around a single object…

Read More →

Making Better HTML Tables

Inspired Magazine Inspired Magazine – creativity & inspiration daily Strangely enough, one of the most difficult web technologies to master is one of the earliest ones to be available for the browser after plain text and images. The problem is even greater today with so many different device types that need to be thought about. Perfect tables are nearly impossible to create unless they contain so few items that no problems are likely to be triggered. The kinds of errors that can arise include: Text wrapping incorrectly Justification errors Table rendering off screen Scroll problems Row height errors Column width errors General ugliness or untidiness In this article we’ll take a look at how to avoid problems like that, so your tables have the best chance of creating a good impression. Avoidance strategies to avoid Because tables are so difficult to get right, some people try to avoid using them.…

Read More →

Science Writer/Editor – Lawrence Livermore National Laboratory (LLNL) – Livermore, CA

Experience with HTML, CSS, XML/XSL, and/or Drupal. Coordinate complex production jobs, often with a publication team of editors, designers, animators, web…From Lawrence Livermore National Laboratory (LLNL) – Sat, 05 Aug 2017 06:55:35 GMT – View all Livermore, CA jobs Source: http://rss.indeed.com/rss?q=Drupal+Developer

How We Solve CSS Versioning Conflicts Here at New Relic

At first the title made me think of Git conflicts, but that’s not what this is about. It’s about namespacing selectors for components. Ultimately, they decided to use a Webpack loader (not open source, it doesn’t appear) to prefix every single class with a hashed string representing the version. I guess that must happen in both the HTML and CSS so they match. Lots of folks landing on style-scoping in one way or another to solve their problems. It makes me think about another smaller-in-scope issue. Say you have an alternate version of a header that you’re going to send to 5% of your users. It has different HTML and CSS. Easy enough to send different HTML to users from the server. But CSS tends to be bundled, and it seems slightly impractical to make an entirely different CSS bundle for a handful of lines of CSS. One solution: add…

Read More →

Creating Photorealistic 3D Graphics on the Web

Before becoming a web developer, I worked in the visual effects industry, creating award-winning, high-end 3D effects for movies and TV Shows such as Tron, The Thing, Resident Evil, and Vikings. To be able to create these effects, we would need to use highly sophisticated animation software such as Maya, 3Ds Max or Houdini and do long hours of offline rendering on Render Farms that consisted of hundreds of machines. It’s because I worked with these tools for so long that I am now amazed by the state of the current web technology. We can now create and display high-quality 3D content right inside the web browser, in real time, using WebGL and Three.js. Here is an example of a project that is built using these technologies. You can find more projects that use three.js on their website. Some projects using three.js As the examples on the three.js website demonstrate,…

Read More →

Separate Form Submit Buttons That Go To Different URLs

This came up the other day. I forget where, but I jotted it down in my little notepad for blog post ideas. I wrote it down because what I was overhearing was way over-complicating things. Say you have a form like this: <form action=”/submit”> <!– inputs and stuff –> <input type=”submit” value=”Submit”> </form> When you submit that form, it’s going to go to the URL `/submit`. Say you need another submit button that submits to a different URL. It doesn’t matter why. There is always a reason for things. The web is a big place and all that. I web searched around for other ways people have tried handling this. One way was to give up on submitting to different URL’s, but give each submit button a shared name but different value, then check for that value when processing in order to do different things. <input type=”submit” name=”action” value=”Value-1″> <input…

Read More →

Making A Bar Chart with CSS Grid

I have a peculiar obsession with charts and for some reason, I want to figure out all the ways to make them with CSS. I guess that’s for two reasons. First, I think it’s interesting that there are a million different ways to style charts and data on the web. Second, it’s great for learning about new and unfamiliar technologies. In this case: CSS Grid! So this chart obsession of mine got me thinking: how would you go about making a plain ol’ responsive bar chart with CSS Grid , like this: See the Pen CSS Grid Chart Final by Robin Rendle (@robinrendle) on CodePen. Let’s take a look at how I got there! The fast and easy approach Since Grid can be confusing and weird at first glance, let’s focus on making a really hacky prototype to begin with. To get started we need to write the markup for…

Read More →

Simple Server Side Rendering, Routing, and Page Transitions with Nuxt.js

A bit of a wordy title, huh? What is server side rendering? What does it have to do with routing and page transitions? What the heck is Nuxt.js? Funnily enough, even though it sounds complex, working with Nuxt.js and exploring the benefits of isn’t too difficult. Let’s get started! Server side rendering You might have heard people talking about server side rendering as of late. We looked at one method to do that with React recently. One particularly compelling aspect is the performance benefits. When we render our HTML, CSS, and JavaScript on the server, we often have less JavaScript to parse both initially and on subsequent updates. This article does really well going into more depth on the subject. My favorite takeaway is: By rendering on the server, you can cache the final shape of your data. Instead of grabbing JSON or other information from the server, parsing it,…

Read More →

​Edit your website, from your website

Stuck making “a few easy changes” to the website for someone? Component IO makes it quick and simple for you or your team to make edits (even for non-technical users). You can manage content with a WYSIWYG editor or instantly update HTML, CSS, and JavaScript right from your website. Make changes faster, empower your team, and avoid redeployment bugs. Works with every web technology, from WordPress to Rails to React. Join hundreds of projects already using Component IO, with a free tier and plans from $7.95/mo. It’s built to make web development easier for everyone. Try it free Direct Link to Article — Permalink ​Edit your website, from your website is a post from CSS-Tricks Source: CssTricks

Playing with Shadow DOM

About a year ago, Twitter announced it would start displaying embedded tweets with the shadow DOM rather than an <iframe>, if the browser supports shadom DOM? Why? Well, speed is one reason. They say: Much lower memory utilization in the browser, and much faster render times. Tweets will appear faster and pages will scroll more smoothly, even when displaying multiple Tweets on the same page. Why the choice? Why is it necessary to use either iframes or shadow DOM? Why not just inject the content onto the page? It’s a totally understandable need for control. An embedded Tweet should look and behave just exactly like an embedded Tweet. They don’t want to worry about the styles of the page bleeding in and messing that up. An <iframe> makes style scoping very easy. Point the src of the iframe at a URL that displays what you want an embedded tweet to…

Read More →

Back to Top