Ricard's Social

19 posts13 participants7 posts today

Ana Tudor 🐯Want to give a responsive irregular shape depending on text content/ viewport rounded corners? Here's a super simple pure <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> + <a href="https://mastodon.social/tags/SVG" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#SVG</a> <a href="https://mastodon.social/tags/filter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#filter</a> demo on <a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@codepen</a> doing it <a href="https://codepen.io/thebabydino/pen/KwKGrjR" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codepen.io/thebabydino/pen/KwKGrjR</a>Heavily commented. See also <a href="https://mastodon.social/@anatudor/114185324674119212" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://mastodon.social/@anatudor/114185324674119212</a> for details about some of the filter primitives.<a href="https://mastodon.social/tags/svgFilter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#svgFilter</a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#code</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#coding</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#frontend</a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#web</a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#dev</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDevelopment</a> <a href="https://mastodon.social/tags/concave" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#concave</a>

Ana Tudor 🐯Here's a simple image stack with an `--ang` rotation around an `--xy` point (both pseudo-random, generated & set inline via Pug) + a 3D entry animation (click Run to run it again).Live on <a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@codepen</a> <a href="https://codepen.io/thebabydino/pen/qEBJpRb?editors=0100" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codepen.io/thebabydino/pen/qEBJpRb?editors=0100</a><a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://mastodon.social/tags/3D" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#3D</a> <a href="https://mastodon.social/tags/filter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#filter</a> <a href="https://mastodon.social/tags/cssFilter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssFilter</a> <a href="https://mastodon.social/tags/animation" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#animation</a> <a href="https://mastodon.social/tags/cssAnimation" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssAnimation</a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#code</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#coding</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#frontend</a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#web</a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#dev</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDevelopment</a> <a href="https://mastodon.social/tags/CodePen" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CodePen</a>

Ana Tudor 🐯Because I keep seeing `position: absolute` + lots of of offset + size + transform + sometimes even margin properties to stack + middle align the stacked items... you can easily do it with 3 <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> properties!<a href="https://mastodon.social/@anatudor/113774781963966085" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://mastodon.social/@anatudor/113774781963966085</a><a href="https://mastodon.social/tags/cssLayout" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssLayout</a> <a href="https://mastodon.social/tags/cssGrid" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssGrid</a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#code</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#coding</a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#web</a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#dev</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDevelopment</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#frontend</a>

Ayo🎉 Web Component Base (WCB) by Ayo Ayco (<a href="https://social.ayco.io/@ayo" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@ayo</a>) | <a href="https://ayos.blog/wcb/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://ayos.blog/wcb/</a><a href="https://social.ayco.io/tags/webdev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webdev</a> <a href="https://social.ayco.io/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#frontend</a> <a href="https://social.ayco.io/tags/webcomponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webcomponents</a>

Ana Tudor 🐯Flip card on hover, flip back on hover out...... but on touchscreens, flip it on click and then flip it back on second click!A mostly <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> solution, using <a href="https://mastodon.social/tags/3D" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#3D</a> transforms, variables, grid, pointer MQ + a little bit of <a href="https://mastodon.social/tags/JS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#JS</a>.Because somebody asked how to do it <a href="https://www.reddit.com/r/css/comments/1jm0a7v/comment/mk7zmd5/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://www.reddit.com/r/css/comments/1jm0a7v/comment/mk7zmd5/</a>Live demo on <a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@codepen</a>: <a href="https://codepen.io/thebabydino/pen/MYWPeer" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codepen.io/thebabydino/pen/MYWPeer</a> <a href="https://mastodon.social/tags/cssGrid" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssGrid</a> <a href="https://mastodon.social/tags/cssVariables" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssVariables</a> <a href="https://mastodon.social/tags/JavaScript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#JavaScript</a> <a href="https://mastodon.social/tags/css3D" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css3D</a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#code</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#coding</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#frontend</a> <a href="https://mastodon.social/tags/cssLayout" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssLayout</a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#web</a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#dev</a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDevelopment</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDev</a>

Ana Tudor 🐯Can't believe this quick little thing made this week's <a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@codepen</a> Spark!codepen.io/thebabydino/pen/GgRryoa<a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://mastodon.social/tags/SVG" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#SVG</a> <a href="https://mastodon.social/tags/filter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#filter</a> <a href="https://mastodon.social/tags/svgFilter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#svgFilter</a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#code</a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#web</a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#dev</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDevelopment</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#coding</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#frontend</a>

Luke HarbyOh and for my day job I'm a <a href="https://infosec.exchange/tags/FrontEnd" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#FrontEnd</a> <a href="https://infosec.exchange/tags/JavaScript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#JavaScript</a> developer. I've built lots of sites over the years and have particularly enjoyed working with Tumblr. Here's one I'm particularly proud of <a href="https://studiomalarkey.co.uk/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://studiomalarkey.co.uk/</a>(This is also the studio I share with Jessica my wife and our friend Sam).

Ana Tudor 🐯No JS <a href="https://mastodon.social/tags/fluid" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#fluid</a> animation. The animation is created in <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a>, where I'm animating the values of two custom properties back and forth. `feTurbulence` creates the background, `feDisplacement` map uses the CSS-animated input to make it move.My take on this question <a href="https://www.reddit.com/r/webdev/comments/1izlhkw/comment/mfedw8s/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://www.reddit.com/r/webdev/comments/1izlhkw/comment/mfedw8s/</a><a href="https://mastodon.social/tags/SVG" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#SVG</a> <a href="https://mastodon.social/tags/svgFilter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#svgFilter</a> <a href="https://mastodon.social/tags/filter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#filter</a> <a href="https://mastodon.social/tags/cssGradient" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssGradient</a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#code</a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#web</a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#dev</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDevelopment</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#coding</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#frontend</a> <a href="https://mastodon.social/tags/cssVariables" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssVariables</a>

Ricard Torres🎙️ 🆕 Frontend Coffee BreakEpisode 39: Best practices, standards and guidelinesWe discuss how we work with guidelines, standards and best practices at Cognizant Netcentric. Including our very own ESLint and Stylelint open source configurations.Do you follow any guidelines when coding FE?Video and audio: <a href="https://frontend.coffee/s1/39" target="_blank" rel="nofollow noopener noreferrer" translate="no">https://frontend.coffee/s1/39</a><a href="https://ricard.social/tags/Podcast" class="mention hashtag" rel="tag">#Podcast</a> <a href="https://ricard.social/tags/Frontend" class="mention hashtag" rel="tag">#Frontend</a> <a href="https://ricard.social/tags/WebDevelopment" class="mention hashtag" rel="tag">#WebDevelopment</a>

Ricard Torres"Styling <details>: Horizontal Accordion"➡️ <a href="https://codepen.io/web-dot-dev/pen/XWvBZNo" target="_blank" rel="nofollow noopener noreferrer" translate="no">https://codepen.io/web-dot-dev/pen/XWvBZNo</a><a href="https://ricard.social/tags/WebDevelopment" class="mention hashtag" rel="tag">#WebDevelopment</a> <a href="https://ricard.social/tags/Frontend" class="mention hashtag" rel="tag">#Frontend</a> <a href="https://ricard.social/tags/CSS" class="mention hashtag" rel="tag">#CSS</a> <a href="https://ricard.social/tags/HTML" class="mention hashtag" rel="tag">#HTML</a>

Ricard TorresJust learned of the existence of the "Speculation Rules API"➡️ <a href="https://developer.mozilla.org/en-US/docs/Web/API/Speculation_Rules_API" target="_blank" rel="nofollow noopener noreferrer" translate="no">https://developer.mozilla.org/en-US/docs/Web/API/Speculation_Rules_API</a><a href="https://ricard.social/tags/WebPerformance" class="mention hashtag" rel="tag">#WebPerformance</a> <a href="https://ricard.social/tags/WebDevelopment" class="mention hashtag" rel="tag">#WebDevelopment</a> <a href="https://ricard.social/tags/Frontend" class="mention hashtag" rel="tag">#Frontend</a>

Ricard Torres🆕 FE Coffee Break Episode 38: Morals, ethics and being eco-friendly as a FE DeveloperWe discuss the moral of working for certain industries, how can we be more green (spoiler: it's web performance) as developers, as well as open source.Audio: <a href="https://frontendcoffeebreak.transistor.fm/s1/38" target="_blank" rel="nofollow noopener noreferrer" translate="no">https://frontendcoffeebreak.transistor.fm/s1/38</a>Video: <a href="https://www.youtube.com/watch?v=WiO_pn4QhCk" target="_blank" rel="nofollow noopener noreferrer" translate="no">https://www.youtube.com/watch?v=WiO_pn4QhCk</a><a href="https://ricard.social/tags/Frontend" class="mention hashtag" rel="tag">#Frontend</a> <a href="https://ricard.social/tags/Podcast" class="mention hashtag" rel="tag">#Podcast</a> <a href="https://ricard.social/tags/WebDevelopment" class="mention hashtag" rel="tag">#WebDevelopment</a>

Ricard Torres:safari: Safari works on this thing before any other vendor can't catch up with scroll driven animations? :css3: Well, thanks... I guess.➡️ <a href="https://webkit.org/blog/16214/background-clip-border-area/" target="_blank" rel="nofollow noopener noreferrer" translate="no">https://webkit.org/blog/16214/background-clip-border-area/</a><a href="https://ricard.social/tags/Frontend" class="mention hashtag" rel="tag">#Frontend</a> <a href="https://ricard.social/tags/CSS" class="mention hashtag" rel="tag">#CSS</a> <a href="https://ricard.social/tags/Safari" class="mention hashtag" rel="tag">#Safari</a> <a href="https://ricard.social/tags/WebDevelopment" class="mention hashtag" rel="tag">#WebDevelopment</a>

Ricard TorresAI assistance panel | Chrome DevTools | Chrome for Developers➡️ <a href="https://developer.chrome.com/docs/devtools/ai-assistance" target="_blank" rel="nofollow noopener noreferrer" translate="no">https://developer.chrome.com/docs/devtools/ai-assistance</a><a href="https://ricard.social/tags/WebDevelopment" class="mention hashtag" rel="tag">#WebDevelopment</a> <a href="https://ricard.social/tags/Frontend" class="mention hashtag" rel="tag">#Frontend</a> <a href="https://ricard.social/tags/Google" class="mention hashtag" rel="tag">#Google</a> <a href="https://ricard.social/tags/Chrome" class="mention hashtag" rel="tag">#Chrome</a>

Ricard Torres:javascript: "nullish coalescing assignment operator"➡️ <a href="https://www.trevorlasn.com/blog/javascript-nullish-coalescing-assignment-operator" target="_blank" rel="nofollow noopener noreferrer" translate="no">https://www.trevorlasn.com/blog/javascript-nullish-coalescing-assignment-operator</a><a href="https://ricard.social/tags/Frontend" class="mention hashtag" rel="tag">#Frontend</a> <a href="https://ricard.social/tags/WebDevelopment" class="mention hashtag" rel="tag">#WebDevelopment</a> <a href="https://ricard.social/tags/JavaScript" class="mention hashtag" rel="tag">#JavaScript</a>

Ricard TorresYou're a Frontend Dev :css3: :html5: :javascript: In your experience working with designers...Do they use container queries or still use media queries in their provided designs / style guides?<a href="https://ricard.social/tags/Frontend" class="mention hashtag" rel="tag">#Frontend</a> <a href="https://ricard.social/tags/WebDevelopment" class="mention hashtag" rel="tag">#WebDevelopment</a>

Ricard Torres👨‍💻 Was excited to try and implemented the new and shiny Popover API <a href="https://developer.mozilla.org/en-US/docs/Web/API/Popover_API" target="_blank" rel="nofollow noopener noreferrer" translate="no">https://developer.mozilla.org/en-US/docs/Web/API/Popover_API</a>When I couldn't position it relative to my parent element I came across this post from <a href="https://front-end.social/@hdv" class="u-url mention">@hdv</a> 👀 <a href="https://hidde.blog/positioning-anchored-popovers/" target="_blank" rel="nofollow noopener noreferrer" translate="no">https://hidde.blog/positioning-anchored-popovers/</a>Which very well explains we can't use Popovers as tooltips for now without JS :blobcat_sadlife: We need to wait until we have Anchor Positioning in CSS in all browsers <a href="https://caniuse.com/css-anchor-positioning" target="_blank" rel="nofollow noopener noreferrer" translate="no">https://caniuse.com/css-anchor-positioning</a>I'm very disappointed 😞 <a href="https://ricard.social/tags/CSS" class="mention hashtag" rel="tag">#CSS</a> <a href="https://ricard.social/tags/WebDevelopment" class="mention hashtag" rel="tag">#WebDevelopment</a> <a href="https://ricard.social/tags/Frontend" class="mention hashtag" rel="tag">#Frontend</a> <a href="https://ricard.social/tags/HTML" class="mention hashtag" rel="tag">#HTML</a>

Ricard Torres"nasa/openmct""A web based mission control framework" written using <a href="https://ricard.social/tags/Vue" class="mention hashtag" rel="tag">#Vue</a> (<a href="https://ricard.social/tags/JavaScript" class="mention hashtag" rel="tag">#JavaScript</a>)➡️ <a href="https://github.com/nasa/openmct" target="_blank" rel="nofollow noopener noreferrer" translate="no">https://github.com/nasa/openmct</a><a href="https://ricard.social/tags/Frontend" class="mention hashtag" rel="tag">#Frontend</a> <a href="https://ricard.social/tags/NASA" class="mention hashtag" rel="tag">#NASA</a> <a href="https://ricard.social/tags/WebDevelopment" class="mention hashtag" rel="tag">#WebDevelopment</a>

Ricard Torres"Why Google Sheets ported its calculation worker from JavaScript to WasmGC | web.dev""Calculations in Google Sheets were initially done on the server, then on the client in JavaScript, and now on the client in WebAssembly Garbage Collection. This case study explains how and why."➡️ <a href="https://web.dev/case-studies/google-sheets-wasmgc" target="_blank" rel="nofollow noopener noreferrer" translate="no">https://web.dev/case-studies/google-sheets-wasmgc</a><a href="https://ricard.social/tags/JavaScript" class="mention hashtag" rel="tag">#JavaScript</a> <a href="https://ricard.social/tags/Frontend" class="mention hashtag" rel="tag">#Frontend</a> <a href="https://ricard.social/tags/WebDevelopment" class="mention hashtag" rel="tag">#WebDevelopment</a>

Ricard Torres"Ecma International approves ECMAScript 2024: What’s new?""On 26 June 2024, the 127th Ecma General Assembly approved the ECMAScript 2024 language specification, which means that it's officially a standard now. This blog post explains what's new."➡️ <a href="https://2ality.com/2024/06/ecmascript-2024.html" target="_blank" rel="nofollow noopener noreferrer" translate="no">https://2ality.com/2024/06/ecmascript-2024.html</a><a href="https://ricard.social/tags/JavaScript" class="mention hashtag" rel="tag">#JavaScript</a> <a href="https://ricard.social/tags/Frontend" class="mention hashtag" rel="tag">#Frontend</a> <a href="https://ricard.social/tags/WebDevelopment" class="mention hashtag" rel="tag">#WebDevelopment</a>

Recent searches

Search options

Administered by:

Server stats:

#Frontend