Release 2.6.0 · atlassian/react-beautiful-dnd · GitHub

Drag and drop for mobile web📱with #reactjs just got a lot more beautiful🤘

  • We have really sweated the details to bring you a drag and drop experience that works out of the box which is initiative for users, respects standard touch interactions as much as possible, and looks amazing .
  • These are used to start and manage part of the touch interactions.
  • Styles are applied by default to s to facilitate a better touch device drag and drop experience.
  • Getting dragging working on touch devices is no easy feat.
  • The quality of this release would not have been possible without close examination of how others have already tackled this problem.

react-beautiful-dnd – Beautiful, accessible drag and drop for lists with React.js
Continue reading “Release 2.6.0 · atlassian/react-beautiful-dnd · GitHub”

Framework Event Listeners

View and Remove JS Event Listeners in @ChromiumDev Tools:  by @umaar #JavaScript #ReactJS

  • You can view JavaScript event listeners in the Events Listeners pane within the Elements Panel.
  • You see all registered event listeners on the inspected element, for example , , etc.
  • This is useful for quickly figuring out whether a JS event listener is the cause of an unexpected bug.
  • As a solution, if you check the ‘Framework Event Listeners’ checkbox, DevTools can resolve the original code (e.g. your source code).
  • Note: I have only tested the ‘Framework Event Listeners’ feature with jQuery.

Chrome DevTools – View and remove JavaScript event listeners – Subscribe to Dev Tips to get these in your inbox
Continue reading “Framework Event Listeners”

JavaScript: The beauty of arrow functions – LeanJS – Medium

JavaScript: The beauty of arrow functions  #react #arrowfunctions #es6 #javascript #reactjs

  • JavaScript: The beauty of arrow functionsArrow functions are an awesome ES6 language feature for a number of reasons, but we believe there are 3 key reasons they really shine:They are more conciseThey allow for implicit returnsThey get their “this” value from the context, meaning it comes from the callerLet’s look at some ES5 vs ES6 code:In the above code example we compare the ES5 and ES6 way of grabbing some values from an array of objects.More ConciseThe most striking thing is the amount of code, less code means less probability of introducing errors.
  • Secondly it’s obvious that our arrow function has improved readability here, it’s also more declarative.
  • Being concise and declarative with code is especially important when working in teams, it saves time and improves outcomes.Implicit returnsThe ability to return values implicitly builds upon the first point, we no longer need to add extra syntax such as the {} and return keyword if they are not needed.
  • So context is simply the one who is calling the function.If this isn’t clear, have a play with the code yourself here: why is getting the “this” value from the context useful?Before we had to bind our functions explicitly to make sure they had the right “this” value:We can of course continue doing this, but now we have a more concise way of doing the same thing:Summing upUsing arrow functions allows us to use a more concise and declarative syntax while eliminating the need for us to bind them explicitly.
  • There are of course a few more things to know about arrow functions which are beyond the scope of this post.

Arrow functions are an awesome ES6 language feature for a number of reasons, but we believe there are 3 key reasons they really shine: In the above code example we compare the ES5 and ES6 way of…
Continue reading “JavaScript: The beauty of arrow functions – LeanJS – Medium”

Release information (7/29/2017, v0.8.12) – Boostnote – Medium

  • Release information (7/29/2017, v0.8.12)v0.8.12 was released at 29th July.The main points of this time are as follows.Add trash canAdd search box in Editor modeAdd link among notesI’m going to explain them one by one.Trash canTrash I merged this feature since Februaly.You can reference the above a gif image to get how to use it.Search box in added this feature which had been a lot of request before.
  • It uses an official addon of CodeMirror.Although you can call the box by Ctrl(Cmd)-F, some are different from similer ones which we often use in browser such as Google Chrome.
  • So I list up them below on account of specifications of CodeMirror.ShortcutsMore about them.And also I added the prompt of vim-mode so you can use it by / in normal mode.Search in vim-modeLink among notesLink among notesLink among notes is a feature of jumping by a link such as in Preview mode.Furthermore, you can get the link in InfoButton which was added on this update.InfoPanelNOTE: Moving to aother folder is not supported for now.ImprovementThis is about other improvements.I changed Ctrl-U to Ctrl-K because it was not fixI fixed peripheral of inseration PRsThese are all the PRs which was merged from v0.8.11 to v0.8.12.
  • Design improvements were by kazup, release operations were by kohei_takata.

I added this feature which had been a lot of request before. It uses an official addon of CodeMirror. Although you can call the box by Ctrl(Cmd)-F, some are different from similer ones which we often…
Continue reading “Release information (7/29/2017, v0.8.12) – Boostnote – Medium”

Add React.js Explorer to Chrome with React Developer Tools

Add #ReactJS explorer to Chrome with React Developer Tools:  #JavaScript

  • This feature is built right into Chrome and it lets developers inspect pages and edit or remove elements right from within the browser.
  • Facebook’s team created the React.js library which abstracts a layer for frontend developers to reuse certain UI elements.
  • And now, with React Developer Tools you can inspect these element hierarchies and edit them right on the page.
  • You can also study the different states and the paths of object trees including which elements are above & below other elements.
  • In the sidebar, you can browse through props and states which let you study the behavior of other elements in that same tree.

Every web developer should already know about the amazing Chrome Developer Tools. This feature is built right into Chrome and it lets developers inspect pages
Continue reading “Add React.js Explorer to Chrome with React Developer Tools”

Easier Upgrades Thanks to Git

  • As a conclusion, I would say, enjoy the feature and feel free to suggest improvements, report issues and especially send pull requests .
  • If we had embedded the implementation in the local-cli, you wouldn’t be able to enjoy this feature when using old versions of React Native.
  • $ npm install – g react – native – git – upgrade $ cd MyProject $ react – native – git – upgrade 0.38 .
  • The react-native-git-upgrade is provided so anyone can enjoy this improved experience today while using older versions of React Native.
  • The patch contains all the changes made in the React Native templates between the version your app is using and the new version.

None of those options is ideal. By overwriting the file we lose our local changes. By not overwriting we don’t get the latest updates.
Continue reading “Easier Upgrades Thanks to Git”

React v15.4.0

React v15.4.0 - #reactjs Blog

  • React DOM Server (include React in the page before React DOM Server) Dev build with warnings: react-dom-server.js Minified build for production: react-dom-server.min.js
  • In React 15.4.0, we are finally moving React DOM implementation to the React DOM package.
  • import React from ‘react’ ; export default class MyInput extends React .
  • Another thing to watch out for is that React DOM Server is now about the same size as React DOM since it contains its own copy of the React reconciler.
  • Blog GitHub React Native Acknowledgements

We didn’t announce the previous minor releases on the blog because most of the changes were bug fixes. However, 15.4.0 is a special release, and we would like to highlight a few notable changes in it.
Continue reading “React v15.4.0”