JavaScript in Plain English·5y10 Best Websites for Practising and Perfecting Front-End Development
10 Best Websites for Practising and Perfecting Front-End Development. Muthu Annamalai Venkatachalam has compiled a list of the 10 best sites to practice your front-end skills. You will reinforce everything you have learned through tutorials and become a more competent front- end developer by using these websites.
DEV·5y10 Google Chrome Extensions you should use as a developer
Here are some of the best Google Chrome extensions for developers. Extensions that make life easier, make you more productive, or perform an essential task better than a dedicated tool. As the vast majority of us use Chrome, it makes sense to consider Chrome extensions. Other browsers are available but Chrome is used by 62.6% of internet users.
Open Source Way·5yA simple CSS trick for dark mode | Opensource.com
The prefers-color-scheme media query works the same way. The user can configure their operating system to use a light or dark theme. I specify different values of CSS variables for both modes and let the user's OS decide. This is the real power of the media query: Providing a consistent user experience from OS to web page.
DEV·5y7 Ways to Escape CSS Hell
Here are the 7 ways to completely center whatever you want with CSS. You can also specify just margin-left: auto and margin-right: auto if you want margins on the top or bottom. Centering with flexbox has a bunch of different alignment classes that are always applied to the parent.
DEV·5yLearn programming by playing games
Coding games are one of the best ways to practice your programming skills. Gamification allows you to learn by playing, which is a distinctive practice to avoid burnout. Here are 10 games that will make the process of learning programming an exciting journey. If I have missed something, please let me know in the comments.
CSS-Tricks·5yScroll Shadows With JavaScript
scroll shadows are when you can see a little inset shadow on elements if (and only if) you can scroll in that direction. You can actually pull it off in CSS, which I think is amazing and one of the great CSS tricks. Except… it just doesn’t work on iOS Safari.
InfoQ·5yFacebook CSS-in-JS Solution Stylex Introduced at React Finland 2021
QCon Plus (November 1-12) and stay ahead of the tech that matters to keep your skills fresh. Facilitating the spread of knowledge and innovation in professional software development. Rosaria Silipo on Codeless Deep Learning and Visual Programming. EBPF enables high-performance tools to connect, manage and secure applications in the cloud.
Hashnode·5yHow to Create Animated Toggle Switches with Just CSS and Implement a Dark Mode Feature
In this article, we'll learn how to make a toggle switch with just CSS. We'll also learn how a pseudo-element is used to inject content into a page. The end result will give you the ability to change a website's theme from a light to a dark mode.
DZone·5yCreating 3D CSS Buttons which Move as you Mouse Over
I was toying with the idea of a 3d button which moves a the user moves their mouse around it. To further this effect, I added some 3d shadows which move in tandem to give the illusion of a button which is sitting off the page, which moves with the user's mouse movements. On mobile, tapping will mimic the hover state at the point you tap.
Smashing Magazine·5yA Guide To CSS Debugging — Smashing Magazine
Debugging in CSS means figuring out what might be the problem when you have unexpected layout results. We’ll look at a few categories bugs often fit into, see how we can evaluate the situation, and explore techniques that help prevent these bugs. A Guide To CSS Debugging.
freeCodeCamp·5yTailwind CSS Components Tutorial – How to get started with Flowbite
Flowbite is an open-source library of web components built with the utility-first classes from Tailwind CSS. It also includes interactive elements such as dropdowns, modals, datepickers. The project is available on Github and it is open source under the MIT License.
CSS-Tricks·5yLess Absolute Positioning With Modern CSS
Each time I work on a component that needs absolute positioning, I ask myself: is it really necessary? I started to notice a few use-cases where using position: absolute isn’t needed. I thought about documenting the use-case that I usually came through while working on front-end projects.
CSS-Tricks·5yConditional Border Radius In CSS
A while ago, I was inspecting facebook.com home page feed to learn and see how they build things out. I noticed a very, very interesting border-radius value for the card component in the main feed. In this article, I will try to highlight the problem, and explain how the solutions work.
Laravel News·5yThe first alpha of Tailwind CSS v3 is now released
Adam Wathan has announced the first alpha release of Tailwind v3. The Tailwind team has been working hard to add some awesome new features and make the existing features even better. Some of my favorite new features include: JIT Mode, scroll-snap utilities, and styling file upload buttons.
Hashnode·5yTips for CSS Responsive design
The first line of code to get started with responsive design is to be placed in the head section of the page. You must start with Responsive Header, placing this code inside the head of the HTML page. For responsive design, the best approach is to design a mobile version of your website first.
freeCodeCamp·5yLearn React by Building an eCommerce Site
React is one of the most popular front-end frameworks for JavaScript. This course will teach you how to use React by building an e-Commerce application with class components. The course covers topics such as component basics, rendering various items in components, parent-to-child component communication, lifecycle methods, forms, and basic routing.
Smashing Magazine·5ySmart CSS Solutions For Common UI Challenges — Smashing Magazine
Writing CSS has probably never been more fun and exciting than it is today. In this post we’ll take a look at common problems and use cases we all have to face in our work and how to solve them with modern CSS. We’ve also just recently covered CSS auditing tools front-end boilerplates and VS code extensions.
Hacker News·5yHow I made Google’s data grid scroll 10x faster with one line of CSS
Google’s “Top linking sites” data grid has major scroll lag. This happens when choosing to display a larger dataset (500 rows) Instead of the default 10 results, the data grid produces 16,000+ DOM elements to display just 500 rows. The DOM is not very performant when containing many elements. And laying out that many elements is costly.
Product Hunt·5yGradientArt - Advanced CSS gradient editor
GradientArt is an advanced online CSS gradient editor. You can design illustrations, patterns, icons, and more using a feature-packed Photoshop-like editor with layering, design tools, and free cloud storage. Embed this post on your site and share it with your friends.
Bootstrap·5yBootstrap 5.1.2
Bootstrap 5.1.2 is here with a handful of improvements across our components. This release includes a fix for an issue that prevented our Sass from compiling properly. Up next is our v5.2.0 release, adding more utility improvements and fixing an issue with how Sass handles re-assigned maps and variables.
DEV·5yThe css chrome dev tool you didnt know of
chrome dev tools has a css overview panel to identify flaws inside your css. You can find it when you open your dev-tools in chrome (F12) and than More options() More > More tools > CSS Overview. In the colors section you can see all the colors you used and it even indicates bad contrasts.
Honeypot·5yHow to Link CSS to HTML
Cascading style sheets are a key component to the modern web, empowering web developers with a language that determines the look and feel of web apps. Browsers make this easy thanks to the HTML <link> tag, it’s simple to link our CSS styles from external files into our pages.
DEV·5yTop 10 articles of the week for beginners👋.
DEV is a community of software developers getting together to help one another out. The software industry relies on collaboration and networked learning. They provide a place for that to happen. Here is the most popular articles published on this platform.Enjoy these articles. Follow me for more articles.