freeCodeCamp·4yHarvard CS50 – Free Computer Science University Course
Harvard CS50 is one of the most popular beginner computer science courses in the world. The course teaches students how to think algorithmically and solve problems efficiently. Topics include abstraction, algorithms, data structures, encapsulation, resource management, security, software engineering, and web programming.
Changelog·4y7 Cool HTML Elements Nobody Uses
The progress element is the semantically correct way of displaying progress bars. The meter element is progress on steroids. The abbr element allows you to add an autocomplete suggestions to your input elements. map & area map and area allow you to create image maps.
freeCodeCamp·4yWeb Layouts – How to Use CSS Grid and Flex to Create a Responsive Web Page
The aim of every web layout is to reduce confusion, enhance usability and give your users an enjoyable experience. Some of the main elements of a layout are navigation, menus and content. In web and front-end development, having a layout in mind ahead of building can help you decide on what CSS layout module to use.
Community Picks·4yBuilding a Micro-frontend Framework
Micro-frontend architecture is a design approach in which a front-end app is decomposed into individual, semi-independent “microapps’ working loosely together. The idea is that the individual microapps within a macroapp (as we shall call the composed, top-level app) are analogous to the various iframes. There is still a long laundry list of issues to be aware of when using iframe.
Vercel·4yIntroducing OG Image Generation: Fast, dynamic social card images at the Edge – Vercel
Vercel OG Image Generation is a new library for generating dynamic social card images. This approach is 5x faster than existing solutions by using Vercel Edge Functions, WebAssembly and a brand new core library for converting HTML/CSS into SVGs. The engagement rate of Tweets that embed a card is 40% higher.
freeCodeCamp·4yEvent Bubbling in JavaScript – How Event Propagation Works with Examples
Event Bubbling is a concept in the DOM (Document Object Model) It happens when an element receives an event, and that event bubbles up (or you can say is transmitted or propagated) to its parent and ancestor elements. To prevent event bubbling, you use the stopPropagation method of the event object. When handling events, an event object is passed to the handling function. When handling an event event is passed.
Community Picks·4yA Complete Introduction to Web Components in 2022
Frameworks allow developers to create web components where the content, styling, and functionality can be defined in a single JavaScript file. Standard Web Components can add browser functionality, which is difficult to achieve in. The class requires a method named connectedCallback() which is invoked when the element is added to a document: class HelloWorld extends HTMLElement.
freeCodeCamp·4yThe Best Programming Language to Learn – Beginners Guide to Coding
Coding is one of the most valuable skills to learn today. Coding involves telling a computer what to do using a language both humans and machines understand. HTML and CSS are markup languages, and you use them to create static web pages.
Community Picks·4yIntroduction to WebC
WebC is a new tool for serializing custom elements at build time. It aggregates component-level CSS and JavaScript, allowing developers to keep their styles and scripts together with the markup as single file components. WebC supports scoped styles via the webc:scoped attribute, which you add to your <style> tag.
LogRocket·4yUsing CSS to hide scrollbars without impacting scrolling
The scrollbar in the browser allows the user to scroll up and down on the page without having to take their hands off the keyboard or trackpad. Hiding the scrollbar will create a smoother scrolling experience and remove some distractions from your site’s overall layout. In IE (Internet Explorer) and Edge, the syntax for hiding a scrollbar is a bit different from WebKit-based browsers like Opera, Chrome and Safari. The syntax for hide a scroll bar is a little different.
DZone·4y5 Web Accessibility Myths
Many websites which exist today are not accessible. This causes people with disabilities, especially those who use assistive technologies, to not interact with the web effectively. We examine some myths which can stop companies and individuals from investing in proper web accessibility efforts. Join the DZone community and get the full member experience.
freeCodeCamp·4yCSS Flexbox Explained – Complete Guide to Flexible Containers and Flex Items
CSS Flexbox gives you the tools to create basic and advanced website layouts in flexible and responsive ways. This tutorial discusses everything you need to know to use Flexbox like a pro. A flex container is an HTML element whose display property's value is flex or inline-flex. Use flex-direction: column-reverse to reverse the browser's layout direction. Try it on StackBlitz.
30 seconds of code·4y30 seconds of code
30 seconds of code is much better at presenting HTML in a consistent manner. But default browser styles are not particularly great in most cases, which is why there are tons of CSS resets out there. Here's my opinionated CSS reset, along with an explanation of why I chose to include each rule.
Community Picks·4yServer Side Rendering (SSR) vs. Client Side Rendering (CSR) vs. Pre-Rendering using Static Site Generators (SSG) and client-side hydration.
A comprehensive guide to the concepts of Traditional Server Side Rendering (SSR), Static Rendering, SSR at build time, and Static Site Generators (SSG) and client-side hydration. In SSR the HTML components of the webpage are generated on the server-side, and then returned to the browser. In Client side rendering (CSR) the HTML parts of the website is generated in the browser. The browser must fully download the JS bundle.
asayer·4yGet started with Bulma CSS in 5 minutes
Bulma CSS is ready to use, accelerating UI development and making reusable UI components easier. Bulma can be accessed directly through a cloud CDN provider like jsDelivr and Node.js. The technology offers 419 Sass variables in 4 different levels that can be access and customized and customized. Let’s see the output after adding some sass variables to the file.
LogRocket·4yCreating visualizations with D3 and TypeScript
This tutorial will show you how to create visualizations using D3 and TypeScript. We will host the code on CodePen for maximum interactivity as a stylistic decision. We can do this by calculating the area’s width and height along with the margins. These values addsvg to the HTML body and specify a transformation. In this case, it's a translate operation to place g undersvg.
CSS-Tricks·4yHow to Safely Share Your Email Address on a Website | CSS-Tricks
We want to make it hard for bots to get our email addresses, but as simple as possible for normal users. With these few lines of JavaScript we decode the email address and set the href attribute in the HTML link. We are using the atob method to decode a string of Base64-encoded data. An alternative is to use some basic encryption algorithm like the Caesar cipher. It is fairly straightforward to implement in JavaScript. It's more complicated for bots.
codemagic·4yHow to build a Chrome extension with Flutter Web
Google Chrome extensions are small programs that extend Chrome’s functionality. Google Chrome has a standardized API through which extensions can perform various tasks. In this tutorial, we are going to learn how to make a Chrome extension using Flutter Web. To add a background script to a Flutter Chrome extension, add a new file background script and add an explicit width and height to the index. The background script needs explicit permission to run in the browser.
CSS-Tricks·4yUsing Web Components With Next (or Any SSR Framework) | CSS-Tricks
Web Components with Next (or Any SSR Framework) can be used with any JavaScript framework. The problem is the lack of support for server-side rendering (SSR) There is something called the Declarative Shadow DOM (DSD) in the works, but current support for it is pretty minimal. The code to make Web Components do what they need to do won't actually run until hydration occurs. We’ll look at running that code.
CSS-Tricks·4yState of CSS 2022 Survey Now Open | CSS-Tricks
The State of CSS survey recently opened up. The survey has been running since 2019, so that’s going to be four years (ancient in front-end years!) of data to see if certain features are gaining momentum. Lea Verou is new to the bunch and lead the survey.
Community Picks·4yTailwind CSS static navbar with shadow on scroll for Vue applications
Tailwind is now a staple of my product building toolkit, and it fits so well with Vue/Nuxt, Tailwind and Firebase. For most of my projects I want that smooth shadow under the navbar - here's the code I use to achieve it. Extending makes sense if you're doing something multiple times over and over, like cards or alerts.
