9 CSS in JS Libraries you should Know in 2019 Let’s get started. You can read this recommended discussion to help you make a good decision, and here’s a very cool comparison of projects. Good luck! 1. An idea born in an Australian Whisky bar turned into an 18K stars project, widely adopted in the community. Styled-components are created by defining components using the ES6 template literal notation. Tip: Styled-components can also be combined with Bit, to share them between apps and develop in a visual playground. Also check out: Stylable by Wix-Eng which is still in development. 2. At 6.5K stars and created by FormidableLabs, Radium is defined as “A toolchain for React component styling”. Radium lets you bundle up styles with your React components, coupling javascript, html, and styling together. 3. Aphrodite is a framework-agnostic CSS-in-JS library with support for server-side rendering, browser prefixing, and minimum CSS generation. 4. 5. Note: the project is no longer actively maintained! 6. 7. 8.
slick - the last carousel you'll ever need Set up your HTML markup. <div class="your-class"><div>your content</div><div>your content</div><div>your content</div></div> Move the /slick folder into your project Add slick.css in your <head> <link rel="stylesheet" type="text/css" href="slick/slick.css"/> // Add the new slick-theme.css if you want the default styling <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/> Add slick.js before your closing <body> tag, after jQuery (requires jQuery 1.7 +) Initialize your slider in your script file or an inline script tag When complete, your HTML should look something like: NOTE: I highly recommend putting your initialization script in an external JS file.
How to integrate Prettier with ESLint and stylelint by Abhishek Jain or How to never worry about code styling again ESLint and stylelint are really amazing tools that allow you to enforce coding patterns among your teams. This has many benefits, like outputting better and more consistent code, getting rid of useless diffs in commits (newline, indentation, et al.) among many others. But over time, this can prove to be a bit of a hassle among the developers of a team, who find it an extra mental burden to manually add semicolons, newlines, indentations, etc just to conform to the lint rules. Prettier can be set up to automatically format your code according to some specified rules. However, you don’t want to create a new Prettier config file, since you already have all the formatting related rules specified in your ESLint and stylelint config files. Let’s now dive into a step by step of how to set this all this up, and also how to format all of your existing code according to the lint rules. PART 1: Formatting the existing codebase Step 1
Web Components with Stencil.js — is it the best way to create reusable UI elements in 2018? The ability to develop universal, framework and library agnostic UI elements that can be shared among different projects and teams seems to be the perfect medicine for at least part of what we call a framework churn in modern front end world. Ever since I’ve started working as a web developer I witnessed a number of elements and interactions that can be abstracted away to a reusable code, but differences between frameworks and their implementation details were making it cumbersome… Web components seem to be an answer. But wait, what are the web components? Web Components is a suite of different technologies allowing you to create reusable custom user interface components — with their functionality encapsulated away from the rest of your code — and utilize them in your web apps. Millions of people around the world already use this technology every day. A few words about technologies involved Shadow DOM Styling Custom Elements Polymer
SortableJS Features Simple list example Item 1 Item 2 Item 3 Item 4 Item 5 Item 6 Shared lists Cloning Try dragging from one list to another. Disabling Sorting Try sorting the list on the left. Handle Item 1 Item 2 Item 3 Item 4 Item 5 Item 6 Filter Try dragging the item with a red background. Filtered Thresholds Try modifying the inputs below to affect the swap thresholds. Examples Grid Example Item 7 Item 8 Item 9 Item 10 Item 11 Item 12 Item 13 Item 14 Item 15 Item 16 Item 17 Item 18 Item 19 Item 20 Nested Sortables Example NOTE: When using nested Sortables with animation, it is recommended that the fallbackOnBody option is set to true. Item 1.1 Item 2.1 Item 2.2 Item 3.1 Item 3.2 Item 3.3 Item 3.4 Item 2.3 Item 2.4 Item 1.2 Item 1.3 Item 1.4 Item 1.5 Comparisons jQuery-UI Dragula Framework Support
React Redux Tutorial for Beginners [2019] December 13, 2018 - Edit this Post on GitHub Even though I have written a book about Redux in React, it may be too heavy on the subject for someone who wants only to try out a React Redux tutorial. That’s why I extracted this chapter from my book to be read as a tutorial for beginners on my website for free to learn the basics about Redux and Redux in React. And who knows, if you want to dig deeper into the topic, you can still try out my book about Redux in React called Taming the State in React to learn more advanced techniques, best practices and enhancing libraries for Redux. If you are a React beginner, I highly recommend you to get yourself comfortable with React in the first place. How to learn X with React Redux? Before we get started, one thing should be clear: This React Redux tutorial for beginners only involves React, Redux and a bit of Redux’s ecosystem. My recommendations on how to learn these other solutions on top of React Redux: The data flow goes in one direction. ...
iamkun/dayjs: ⏰ Day.js 2KB immutable date library alternative to Moment.js with the same modern API EditorConfig, Prettier et ESLint sur VS Code Lors du développement d’un projet, il arrive souvent de partir sur de mauvaises bases en termes d’indentation et de normes de code. Pour y remédier, il existe des outils qui permettent de palier à ce genre de désagrément. Avant de commencer, vérifiez que vous avez Node et NPM installés sur votre machine à l’aide de la commande node –v && npm –v ainsi que VS Code code –version. Puis instanciez un nouveau projet avec la commande npm init –y. EditorConfig EditorConfig permet d’avoir des styles de codes uniformes dans des projets où plusieurs développeurs interviennent sur les mêmes fichiers. VS Code Pour prendre en compte ce fichier dans VS Code, il faut installer le plugin officiel “EditorConfig for VS Code” (CTRL + SHIFT + X). Configuration A la racine de votre projet, modifiez le fichier “.editorconfig” avec le contenu ci-dessous. root = true [*] indent_style = tab indent_size = 2 end_of_line = lf charset = utf-8 trim_trailing_whitespace = true insert_final_newline = true Prettier Installation
reLift-HTML | reLift-HTML Redefining reusability at an enterprise scale using Web Components Web Components coming to our rescue Web Components are collection of web platform APIs that allow you to create custom, reusable and encapsulated HTML tags to work in web pages and web applications. These components are built on specifications released by W3C which work with almost all the modern web browsers. Since, these web components are built on native platform APIs, they provide an excellent cross framework support. Web Components are set on four specifications: 1. 2. 3. 4. Let’s dive into creating our first web component — a reusable Input Textbox. Note: Modern browsers, still don’t understand ES6, hence we’ll have to transpile our ES6 code to ES5 before packing it all up in our npm package and publishing it. As we see in the above code snippet, all the web components have to extend the base HTMLElement class. enables shadow root on the web component. The above code snippet will register the web component to the browser and now our custom web component is ready to use.
How Redux Works: A Counter-Example After learning a bit about React and getting into Redux, it’s really confusing how it all works. Actions, reducers, action creators, middleware, pure functions, immutability… Most of these terms seem totally foreign. So in this post we’re going to demystify how Redux works with a backwards approach and a very simple React + Redux example that I think will help your understanding. As in the what does Redux do post, I’ll try to explain Redux in simple terms before tackling the terminology. If you’re not yet sure what Redux is for or why you should use it, read this explanation of Redux and then come back here. First: Plain React State We’ll start with an example of plain old React state, and then add Redux piece-by-piece. Here is a counter: And here’s the code (I left out the CSS to keep this simple, so it won’t be as pretty as the image): As a quick review, here’s how this works: Quick Setup If you’d like to follow along with the code, create a project now: On to the React Redux Example Hey! Action
RE:DOM – Tiny turboboosted JavaScript library for creating user interfaces How to properly set up Nuxt with ESLint and Prettier in VSCode With JavaScript being a dynamic and loosely-typed programming language problems and errors can potentially stay undetected for a very long time. To analyze code and to find errors, JavaScript applications are typically executed. This however, is a complete waste of processing power and hinders a fast development process. As an alternative, static analysis tools can be used. Setting up linting and formatting requires 3 steps: Installing the needed development dependenciesInstalling VSCode extensions (needed for error highlighting etc.)Actually configuring ESLint to make it support .vue files and to integrate code formatting To install the development dependencies we issue the following command inside the root directory of our project: npm install eslint babel-eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue eslint-loader prettier -D The next step is to install some extensions, to enable error highlighting and automatic fixes. That’s it! Happy Coding!
Introduction to Web Components W3C Working Group Note 24 July 2014 This version Latest version Latest editor's draft Previous version Revision history Participate Discuss on public-webapps@w3.org (Web Applications Working Group) File bugs (w3.org's Bugzilla) Editors Dimitri Glazkov, Google, <dglazkov@chromium.org> Hayato Ito, Google, <hayato@google.com> Authors Dominic Cooney, Google, <dominicc@google.com> Copyright © 2014 W3C® (MIT, ERCIM, Keio, Beihang), All Rights Reserved. Abstract This document is a non-normative reference, which provides an overview of Web Components. Status of This Document This section describes the status of this document at the time of its publication. Work on this document has been discontinued and it should not be referenced.