htpy is a library that makes writing HTML in plain Python fun and efficient, without a template language.
Alpine AJAX is an Alpine.js plugin that enables your HTML elements to request remote content from your server. Use it to build straight-forward, robust, interactive websites.
The new CSS Color 4 specification has added the new oklch() notation for declaring colors. In this post, we explain why this is important for design systems and color palettes.
The oklch() functional notation expresses a given color in the Oklab color space. oklch() is the cylindrical form of oklab(), using the same L axis, but with polar Chroma (C) and Hue (h) coordinates.
I want to make emoji bigger than the text that surrounds them. At my age and eyesight, it can be difficult to tell the difference between 😃, 😄, and 😊 when they are as small as the text.
Is there a way to use CSS to increase the font size of specific characters without having to wrap them in an extra <span> or similar?
Yes! Although it is a bit of a hack.
Render JavaScript-rendered page as HTML using headless Chrome
RT @mathias: Did you know that using target=_blank for user-supplied links is a security risk?
rel=noopener is here to help.
pyquery allows you to make jquery queries on xml documents. The API is as much as possible the similar to jquery. pyquery uses lxml for fast xml and html manipulation.
This is not (or at least not yet) a library to produce or interact with javascript code. I just liked the jquery API and I missed it in python so I told myself “Hey let’s make jquery in python”. This is the result.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width">
<meta charset="utf-8">
<!--
Created using JS Bin
http://jsbin.com
Copyright (c) 2014 by jakearchibald (http://jsbin.com/honawo/5/edit)
Released under the MIT license: http://jsbin.mit-license.org
-->
<title>JS Bin</title>
<style id="jsbin-css">
body, html {
height: 100%;
margin: 0;
padding: 0;
}
p {
padding: 0 30px;
margin: 0;
font-family: Georgia, serif;
font-size: 100px;
font-size: 8vw;
box-sizing: border-box;
line-height: 1.4;
text-align: center;
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.5s ease-in-out;
filter: alpha(opacity=0);
pointer-events: none;
}
.active {
opacity: 1;
filter: alpha(opacity=100);
pointer-events: auto;
}
.technique-1 { / the best one /
display: -webkit-flex;
-webkit-align-items: center;
-webkit-justify-content: center;
display: flex;
align-items: center;
justify-content: center;
}
.technique-2 {
height: auto;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.technique-3 {
display: table;
}
.technique-3 > span {
display: table-cell;
vertical-align: middle;
}
.technique-4 { / yeah, this one is weak /
font-size: 4vw;
line-height: 100vh;
}
</style>
A simple, in-browser, markdown-driven slideshow tool.
Carousels exist to keep people from beating the shit out of each other in meetings. via @sara_ann_marie #wdd13
Some critics haven't grasped the coolness of : search ALL the docs, offline, in browser. Disconnect wifi, still works