| <html> | |
| <head> | |
| <script> | |
| customElements.define("star-wars-planets", class extends HTMLElement { | |
| constructor() { | |
| super(); | |
| this.attachShadow({ mode: "open" }); | |
| } | |
| static get observedAttributes() { return ["loading", "planets"]; } |
I am moving this gist to a github repo so more people can contribute to it. Also, it makes it easier for me to version control.
Please go to - https://github.com/praveenpuglia/shadow-dom-in-depth for latest version of this document. Also, if you find the document useful, please shower your love, go ⭐️ it. :)
Heads Up! It's all about the V1 Spec.
In a nutshell, Shadow DOM enables local scoping for HTML & CSS.
This issue is noted here: https://deliciousbrains.com/wp-migrate-db-pro/doc/ssl-errors/
Original reference for this fix is from: http://stackoverflow.com/questions/26461966/osx-10-10-curl-post-to-https-url-gives-sslread-error/26538127#26538127
php -i | grep "SSL Version"
| input[autocomplete="off"]::-webkit-contacts-auto-fill-button { | |
| visibility: hidden; | |
| display: none !important; | |
| pointer-events: none; | |
| height: 0; | |
| width: 0; | |
| margin: 0; | |
| } |
| // connect() is a function that injects Redux-related props into your component. | |
| // You can inject data and callbacks that change that data by dispatching actions. | |
| function connect(mapStateToProps, mapDispatchToProps) { | |
| // It lets us inject component as the last step so people can use it as a decorator. | |
| // Generally you don't need to worry about it. | |
| return function (WrappedComponent) { | |
| // It returns a component | |
| return class extends React.Component { | |
| render() { | |
| return ( |
The 0.13.0 improvements to React Components are often framed as "es6 classes" but being able to use the new class syntax isn't really the big change. The main thing of note in 0.13 is that React Components are no longer special objects that need to be created using a specific method (createClass()). One of the benefits of this change is that you can use the es6 class syntax, but also tons of other patterns work as well!
Below are a few examples creating React components that all work as expected using a bunch of JS object creation patterns (https://github.com/getify/You-Dont-Know-JS/blob/master/this%20&%20object%20prototypes/ch4.md#mixins). All of the examples are of stateful components, and so need to delegate to React.Component for setState(), but if you have stateless components each patterns tends to get even simpler. The one major caveat with react components is that you need to assign props and context to the component instance otherwise the component will be static. The reason is
Press minus + shift + s and return to chop/fold long lines!
One of the best ways to reduce complexity (read: stress) in web development is to minimize the differences between your development and production environments. After being frustrated by attempts to unify the approach to SSL on my local machine and in production, I searched for a workflow that would make the protocol invisible to me between all environments.
Most workflows make the following compromises:
Use HTTPS in production but HTTP locally. This is annoying because it makes the environments inconsistent, and the protocol choices leak up into the stack. For example, your web application needs to understand the underlying protocol when using the secure flag for cookies. If you don't get this right, your HTTP development server won't be able to read the cookies it writes, or worse, your HTTPS production server could pass sensitive cookies over an insecure connection.
Use production SSL certificates locally. This is annoying
To setup your computer to work with *.test domains, e.g. project.test, awesome.test and so on, without having to add to your hosts file each time.
| [ | |
| {name: 'Afghanistan', code: 'AF'}, | |
| {name: 'Åland Islands', code: 'AX'}, | |
| {name: 'Albania', code: 'AL'}, | |
| {name: 'Algeria', code: 'DZ'}, | |
| {name: 'American Samoa', code: 'AS'}, | |
| {name: 'AndorrA', code: 'AD'}, | |
| {name: 'Angola', code: 'AO'}, | |
| {name: 'Anguilla', code: 'AI'}, | |
| {name: 'Antarctica', code: 'AQ'}, |