I have recently live coded a pure CSS random rainbow particle explosion. There's a source in the middle of the screen, and rainbow particles shoot out with different speeds at different moments and then fade out. It might seem like the kind of thing that requires a lot of work and code, but it's something I did quite quickly and with only 30 lines of SCSS.
Do you have a client that requires absolutely zero downtime?
How about any sites that have unpredictable traffic? Welcome spikes in visitors that can happen anytime, but can be a big problem for web servers.
You should look at Fully Managed Cloud Hosting on Media Temple. It may be the perfect home for these projects. It's Amazon Web Services hosting, with white-glove support from Media Temple's AWS-certified Cloud Architects. This is instant scaling, super high-performance web hosting that you don't have to manage yourself.
I heard from Alex Goldman of Reply All (a super duper very great podcast with stories loosely originating from the internet):
We're doing a story about people that have names that websites and computers don't seem to like - for example, we spoke to a guy named William Test, and a woman named Katie Test, both of whom can't seem to keep a hotel or airplane booking because the name "test" is flagged by internal systems.
We also spoke to a guy named Christopher Null who had the same problem, and woman named Joan Fread, who can't use paypal because her last name is the same as a PHP command.
I'm curious if there's anyone in the dev community that is thinking about this, and how to deal with it. Is it even considered a problem? Is the population that this affects so small that people don't even think about it?
Erik D. Kennedy:
So if color theory doesn’t provide a solid basis for color in UI design, what does? Let me throw an opinion at ya’: color modifications. It’s the tweaking of color that counts, not the picking of them from the color theory hat.
Ahmad Shadeed with some similar thinking an examples.
Of all the projects I've worked in the last few years, there's one that stands out as my favorite: I wrote a WordPress plugin called Great Eagle (Tolkien reference) that allows my team to install and update themes and plugins from our private Bitbucket repos, via the normal wp-admin updates UI.
This plugin has blasted our dev shop through the roof when it comes to development best practices, in ways we never expected or intended. It forces us to use proper version numbers because now we can't deploy without them. It forces us to store our work in Bitbucket because now we can't deploy without it. It forces us to use the command line en route to deploying our work (by which I simply mean,
git push origin master), which then led to us using phpUnit. Now we can't deploy unless our tests pass. We've arrived at the nirvana of test-driven development, all because we started with the unrelated step of deploying from git.
If this all sounds standard and obvious, great. I'd love a chance to learn from you. If this sounds like exotic rigmarole, guess what? This article is for you.
Ooo. Ooo. It's a trick, that uses CSS.
overflow-wrap property in CSS allows you to specify that the browser can break a line of text inside the targeted element onto multiple lines in an otherwise unbreakable place. This helps to avoid an unusually long string of text causing layout problems due to overflow.
I saw this little web app (live demo) by Das Surma going around the other day. It's funny, but it's also a really compelling demo app for a bunch of modern technologies. I'm sure that's the whole point of it.
- Minimal build process. Just Gulp to use Babel and PostCSS. It's heavy on ES6+ and CSS custom properties.
- Loads of custom elements, like
<tinderforbananas-item>, with the Polymer polyfill for those.
- Icons are super tiny SVG, they look hand-golfed.
- ServiceWorker for offline cache.
- Mobile and performance-first design and interactions.
Maybe it'll be like the HTML5 Boilerplate of the future.
Eric Lawrence has written a pretty scary post about browser security and malicious websites that hope to trick us:
When building applications that display untrusted content, security designers have a major problem— if an attacker has full control of a block of pixels, he can make those pixels look like anything he wants, including the UI of the application itself. He can then induce the user to undertake an unsafe action, and a user will be none-the-wiser.
And the problem is even worse on mobile:
Virtually all mobile operating systems suffer from the same issue– due to UI space constraints, there are no trustworthy pixels, allowing any application to spoof another application or the operating system itself
- I wanted to give it at least a few days of full-time use, but you can't use extensions (yet?). The web is too hard for me to use without 1Password and Ghostery.
- The UI feels fresh and interesting. UI polish seems like an excellent direction for Opera to go. Since moving to Blink they aren't spending (as many) resources on under the hood browser stuff, they might as well polish up the hood itself. It's neat how it uses your desktop background as its background. It's not transparent, though, it's just a duplicate image.
- The pop-out videos are pretty sweet. Safari can do it (awkwardly), but the tray of media in Neon is an upgrade. I don't understand why Chrome and Firefox can't do this... isn't it a macOS level thing?
- Weird bug: doesn't seem like you can ⌘V paste into the address bar?
A URL Scheme is like "http://..." or "ftp://...". Those seem like a very low-level concept that you don't have much control over, but actually, you do! What sounds like an exotic topic is not so exotic at all: we are constantly using different URL Schemes, on any given day. For example when we're clicking a link to an iPhone app that launches the AppStore. Or when a friend sends us a link to a playlist and it opens in the Spotify desktop app.
In the following short tutorial, we'll look at how custom URL schemes work on macOS and iOS.
Looks like a nicely done little system, by José Luis Antúnez for creating presentation slides.
WebSlides makes HTML presentations easy. Just the essentials and using lovely CSS.
An alternative to reveal.js. I like how it utilizes other open source projects.
I always feel like I should be using things like this for my presentations, as someone who normally very much likes working in HTML and CSS. But for some reason, I always reach for Keynote or Slides.com. I think it's a brain-modes thing. When I'm in "I need to work on what I'm going to say at this presentation" brain-mode, I don't want to be messing with markup, I just want to write and maybe pluck at some UI controls.
CSS-Tricks uses and recommends Media Temple web hosting. Their exceptional service and support keep this site fast. Use coupon code CSSTRICKS to save 20% for the first year.Save 20% on Web Hosting
Scott Jehl, explaining one of the performance improvements he made to the Filament Group site:
Inlining is a measurably-worthwhile workaround, but it's still a workaround. Fortunately, HTTP/2's Server Push feature brings the performance benefits of inlining without sacrificing cacheability for each file. With Server Push, we can respond to requests for a particular file by immediately sending additional files we know that file depends upon. In other words, the server can respond to a request for `index.html` with `index.html`, `css/site.css`, and `js/site.js`!
Server push seems like one of those big-win things that really incentivize the switch to H2. We have an article about being extra careful about caching and server push.
I'll be at all the 2017 An Event Apart shows. Coupon code AEACOY will get you $100 off any of them.
Does this little moment strike fear into your heart?
Now forevermore, the spell checker won't catch that misspelled word. Fear not, you can fix it.
initial-letter is a CSS property that selects the first letter of the element where it is applied and specifies the number of lines the letter occupies.
Here's an incomplete list of analytics tools I've personally used: Google Analytics, Alexa, Gauges, FullStory, NewRelic, and Woopra.
Perhaps you've used some others? Mixpanel, Heap, KISSmetrics, Rollbar?
Segment is the data hub that routes your data directly to these analytics tools (and hundreds of others, for advertising, data warehousing, CRM and others). You're still using your favorite tools, but you only have to integrate Segment into your site or apps. Segment then sends all the appropriate data to the other tools.
The 100 most hearted Pens, Posts, and Collections on CodePen from the past year have been calculated and posted!
console.log to find bugs in your code (like me) then this article is written just for you (also me).
I stumbled into an interesting problem the other day. I wanted to animate an element with a random
I'm a particular fan of this style of teaching because it focuses on legibility as much as writing. This ensures that our codebases are friendly to the next developer who comes along, even if it's ourselves.