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
Building Reusable Angular Components: Best Practices Components are the basis of modern SPAs (Angular, Vue, React). They are the simplest building blocks of SP applications. A SPA app is a tree of components, it starts with the root component, going up spreading into multiple branches. Before we continue with the main topic of this article — “how to write reusable Angular components”, let’s take a quick look at a great tool that actually lets you share and collaborate on individual reusable components. Bit helps you and your team develop, share and collaborate on individual components. Let’s see a scenario where re-usable components come in handy to help us in our project. It comes that A has a very nice UI for listing music files. B: “Yo, A just came across your music app, I like the UI” A: “Thanks Bee” B: “I’m building a music-sharing app and would like to use your UI” A: “No p” Now if A’s app is not reusable, he will find it hard to share the UI interface to B. Many things are wrong with this component. Business logicUI presentation
React Redux Tutorial for Beginners  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 What Does Modular Architecture in Angular Even Mean? If you used the CLI to generate your Angular app, the generator would have created the bare-bones application with a root and an app.component.ts file that houses your main application module. The root — or app.module.ts — is the file that kickstarts the process of running your Angular app. Everything begins in this file, and without it, your Angular app won’t be able to run. In the root module, it will contain all the imports that link back to everything you’ll end up using. Then we have the feature module, aka the rest of your Angular application. To have modular code is to group a particular idea together. There are multiple ways to grouping ideas, and in Angular’s case, the suggested scope for modules are based on sets of certain characteristics and functionality. Routing The idea behind a routing module is to centralize all your routes in one place rather than have them spread out across multiple files. Routed Officially, it’s called a routed module. Domain Service Widget
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
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 firstname.lastname@example.org (Web Applications Working Group) File bugs (w3.org's Bugzilla) Editors Dimitri Glazkov, Google, <email@example.com> Hayato Ito, Google, <firstname.lastname@example.org> Authors Dominic Cooney, Google, <email@example.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.