Liked https://www.instagram.com/p/CRRGJA4p4V7/
Login " Instagram
Liked https://astro.build/blog/introducing-astro
Introducing Astro: Ship Less JavaScript
There's a simple secret to building a faster website just ship less.
Unfortunately, modern web development has been trending in the opposite directiontowards more. More JavaScript, more features, more moving parts, and ultimately more complexity needed to keep it all running smoothly.
Today I'm excited to publicly share Astro: a new kind of static site builder that delivers lightning-fast performance with a modern developer experience. To design Astro, we borrowed the best parts of our favorite tools and then added a few innovations of our own, including:
- Bring Your Own Framework (BYOF): Build your site using React, Svelte, Vue, Preact, web components, or just plain ol' HTML + JavaScript.
- 100% Static HTML, No JS: Astro renders your entire page to static HTML, removing all JavaScript from your final build by default.
- On-Demand Components: Need some JS? Astro can automatically hydrate interactive components when they become visible on the page. If the user never sees it, they never load it.
- Fully-Featured: Astro supports TypeScript, Scoped CSS, CSS Modules, Sass, Tailwind, Markdown, MDX, and any of your favorite npm packages.
- SEO Enabled: Automatic sitemaps, RSS feeds, pagination and collections take the pain out of SEO and syndication.
This post marks the first public beta release of Astro. Missing features and bugs are still to be expected at this early stage. There are still some months to go before an official 1.0 release, but there are already several fast sites built with Astro in production today. We would love your early feedback as we move towards a v1.0 release later this year.
Getting Started
Starting a new project in Astro is easy:
mkdir new-project-directorycd new-project-directorynpm init astronpm installnpm startHow Astro Works
Astro works a lot like a static site generator. If you have ever used Eleventy, Hugo, or Jekyll (or even a server-side web framework like Rails, Laravel, or Django) then you should feel right at home with Astro.
In Astro, you compose your website using UI components from your favorite JavaScript web framework (React, Svelte, Vue, etc). Astro renders your entire site to static HTML during the build. The result is a fully static website with all JavaScript removed from the final page. No monolithic JavaScript application required, just static HTML that loads as fast as possible in the browser regardless of how many UI components you used to generate it.
Of course, sometimes client-side JavaScript is inevitable. Image carousels, shopping carts, and auto-complete search bars are just a few examples of things that require some JavaScript to run in the browser. This is where Astro really shines: When a component needs some JavaScript, Astro only loads that one component (and any dependencies). The rest of your site continues to exist as static, lightweight HTML.
In other full-stack web frameworks this level of per-component optimization would be impossible without loading the entire page in JavaScript, delaying interactivity. In Astro, this kind of partial hydration is built into the tool itself.
You can even automatically defer components to only load once they become visible on the page with the :visible modifier.
This new approach to web architecture is called islands architecture. We didn't coin the term, but Astro may have perfected the technique. We are confident that an HTML-first, JavaScript-only-as-needed approach is the best solution for the majority of content-based websites.
Embracing the Pit of Success
A well-designed system makes it easy to do the right things and annoying (but not impossible) to do the wrong things
Jeff Atwood
Falling Into The Pit of Success
Poor performance is often framed as a failure of the developer, but we respectfully disagree. In many cases, poor performance is a failure of tooling. It should be difficult to build a slow website.
Astro's main design principle is to lead developers into what Rico Mariani dubbed "the pit of success". It is our goal to build every site "fast by default" while also delivering a familiar, modern developer experience.
By building your site to static HTML by default, Astro makes it difficult (but never impossible = ) to build a slow site.
Long-Term Sustainability
Astro is built by the team of open source developers behind Snowpack and Skypack, with additional contributions from the community.
Astro is and always will be free. It is an open source project released under the MIT license.
We care deeply about building a more sustainable future for open source software. At the same time, we need to support Astro's development long-term. This requires money (donations alone aren't enough.)
We're inspired by the early success of projects like Tailwind, Rome, Remix, Ionic, and others who are experimenting with long-term financial sustainability on top of Open Source. Over the next year we'll be exploring how we can create a sustainable business to support a 100% free, open source Astro for years to come.
If your company is as excited about Astro as we are, we'd love to hear from you.
Finally, I'd like to give a HUGE thanks to the 300+ developers who joined our earliest private beta. Your feedback has been essential in shaping Astro into the tool it is today. If you're interested in getting involved (or just following along with development) please join us on Discord.
Liked https://www.instagram.com/p/CP6lF7eDdB2/
Login " Instagram
Liked https://www.instagram.com/p/CP5KHBYF7Rn/
Login " Instagram
Liked https://baserow.io/
Open source online database.
Are your projects, ideas or business processes unorganized or unclear? Do you have many tools for one job? With Baserow you decide how you want to structure everything. Whether youre managing customers, products, airplanes or all of them. If you know how a spreadsheet works, you know how Baserow works.
Software tailored to your needs instead of the other way around. Clear and accessible data by all your team members. Never unorganized projects, ideas and notes anymore.
- One interface for everything.
- Easily integrate with other software.
- Collaborate in realtime.
- Unlimited rows.
- Fast!
Easily create custom plugins with our boilerplate or use third party ones. Because Baserow is built with modern and proven frameworks it feels like a breeze for developers.
- Built with Django and Nuxt.
- Open source.
- Self hosted.
- Headless and API first.
- Works with PostgreSQL.
- Supports custom and third party plugins.
Liked https://thanaverage.xyz/
Than Average
Imagine you are in a room with 100 strangers,
Imagine they're similar to your peers and neighbours.
Based solely on your own instinct, perceptions,
and self-reflection, answer the following questions.
ThanAverage is a small unscientific investigation into how we value and compare ourselves to each other.
Built badly by Fred Wordie
Oh No
than average?
of participants also think they than average.
Liked https://thanaverage.xyz/
Than Average
Imagine you are in a room with 100 strangers,
Imagine they're similar to your peers and neighbours.
Based solely on your own instinct, perceptions,
and self-reflection, answer the following questions.
ThanAverage is a small unscientific investigation into how we value and compare ourselves to each other.
Built badly by Fred Wordie
Oh No
than average?
of participants also think they than average.
Liked https://twitter.com/SystemErrorKaye/status/1390607781309423617
JavaScript is not available.
I hear pictures aren't being cropped anymore.. Check out this neat mountain range. pic.twitter.com/PUUkrOrMVt
— Kaye (@SystemErrorKaye) May 7, 2021
Liked https://twitter.com/momodraws/status/1391670485054803971
JavaScript is not available.
5 years ago this week I moved from Dundee, Scotland to Porto, Portugal. I miss my Friday morning bacon roll and Irn Bru but hey all in all I'm pretty happy going somewhere possible to get an actual tan every now and then
— Momo (@momodraws) May 10, 2021
Liked https://craftcms.com/accessibility/custom-focus-indicators-with-css-variables
Custom Focus Indicators with CSS Variables
on
We’ve been working to improve focus styles within Craft’s control panel lately, and will be sharing what we’re learning along the way. Here’s the third and final post of a three-part series on visible focus indicators.
This post will present a method of styling an offset outline type focus indicator using box-shadow and CSS variables.
This method will meet the following criteria:
Skip to the demo of the final result or read on for a walkthrough of how this was achieved.
There are many ways to add an outline around an element with CSS. The simplest ways are probably using outline or border, but box-shadow is often used to style focus indicators. It's a bit hacky, but using box-shadow currently offers several benefits that often make it the preferred method of adding an outline.
outline #
The outline property is used for default focus indicators in browsers. It offers customizability in color, style, width, and offset (and radius in Firefox). outline isn't usually used for styling, so there's less chance of styling conflicts.
This is the most sensible property to use to add outline styles, as long as the styling limitations are acceptable. For one thing, it isn't possible to create a focus outline with multiple colors. Additionally, the outline's shape won't necessarily match the element, which might look a little strange in some cases. For example, a round button will still have a square outline.
border offers customizability in color, style, width, and radius.
As with outline, multiple colors can't be used. The main drawback to using border is that it takes up space, which means the element might be misaligned, or shift when it's focused.
pseudo-elements #
It would be possible to apply multiple outlines or borders on an element by styling their pseudo-elements (e.g. :before and :after). Unfortunately, not all focusable elements can have pseudo-elements, so this is not a reliable method.
box-shadow #
box-shadow is not the most obvious method of applying an outline style, but it has several benefits: it doesn't take up space, it matches the element's shape, and it can take multiple colors.
There isn't a way to set the distance between an element and its box-shadow, but it can be faked by adding a box-shadow of the same color as the background the element is on. CSS variables make this easier to accomplish.
We'll start by setting the initial values for the focus ring color and the background color.
:root {
--focus-ring-color: #0e44af;
--background-color: #fff;
}
Next, since we'll be adding our own focus styles with box-shadow, we'll want to hide the browser's default outline focus style. Instead of completely removing the outline by setting outline: none, we'll set outline-color: transparent. This will hide the outline while ensuring it's still visible in Windows high contrast mode.
Sarah Higley has an excellent blog post with this and other tips on Windows high contrast mode.
:focus {
outline-color: transparent;
}
We're also going to set the outline-style to solid. This is to ensure the default browser focus style in Edge, which has 2 colors, doesn't show.
:focus {
outline-color: transparent;
outline-style: solid;
}
Now we'll add our box-shadow outline. This style leaves a gap around the focus element with the same color as the last set background color, and a focus ring with the last set focus ring color.
As long as the focus ring color has sufficient contrast against the background color, this will meet the focus visible success criteria.
:focus {
outline-style: solid;
outline-color: transparent;
box-shadow: 0 0 0 2px var(--background-color),
0 0 0 5px var(--focus-ring-color);
}
Finally, we'll add some different background colors. The box-shadow's gap color will always match the focused element's background color since we're setting the background color by modifying the --background-color CSS variable.
.bg-color {
background-color: var(--background-color);
}
.bg-color--vanilla {
--background-color: #fff8e9;
}
.bg-color--strawberry {
--background-color: #ffeae8;
}
.bg-color--chocolate {
--background-color: #ecdad4;
}
Result #
Here's a CodePen demo with the final result! You can test out the focus styles by tabbing through the buttons.