Monday, May 25, 2020

How to write Javascript in Rails 6 | Webpacker, Yarn and Sprockets

VUECONF US 2019 | Vue 3: What I'm Most Excited About with Chris Fritz





Below is a Youtube comment by: Prashanth Krishnamurthy 

Here's an outline of the video. Vue 3 - harder, better, faster, stronger.Trends - Simpler and more explicit. List of things that Chris Fritz is excited about: 1. Reactivity caveats are gone. You can do this now - arr[index] = newVal; 2. Multiple root nodes
3. Simpler transparent wrappers How do you write a custom component today for a 'super-powered' input box?
v-model="searchText" placeholder="Search" @keyup.enter="search" The actual component ..
{{ label }}
Compare this to a more concise component. {{ label }}

4. No more automatic attribute inheritance. Explicitly pass arguments using v-bind="$attrs" You don't have to use inheritAttrs: false (since it will never be true).

5. v-on will compile to attributes. E.g @keyup compiles to on-keyup. Just v-bind = "$attrs" ($attrs will incl. all non-emitted listeners) No more $listeners. No more .native modifier for v-on.

6. v-model will compile to attributes. Again, just v-bind = "$attrs". No more overriding the native input event. No more model option.

7. Smarter v-model on components If you want to move 'select' to a component. {{ choice }}

You will use -
The corresponding component code is simpler... {{ choice }}


8. Simpler render functions
render(h) { return h(BaseInput, { modelValue: this.searchText, onModelUpdate: newValue => { this.searchText=newValue; }, class: this.$style.searchInput, placeholder: 'Search' }) } Vue3 migration will be easier through automatic migrations (where the intent is clear).

Saturday, May 23, 2020

VS Code customize sidebar

https://stackoverflow.com/questions/35774918/vs-code-customize-sidebar

The only ways to scale various parts of the UI currently are through the overall zoom level (window.zoomLevel) and the editor's font size (editor.fontSize).


Tuesday, May 19, 2020

Linux Productivity Tools

ThoughtWorks Tech Radar 2020

Figma - collaborative design tool like Invision, Sketch

Figma
Adopt

Figma has demonstrated to be the go-to tool for collaborative design, not only for designers but for multidisciplinary teams too; it allows developers and other roles to view and comment on designs through the browser without the desktop version. Compared to its competitors (e.g., Invision or Sketch) which have you use more than one tool for versioning, collaborating and design sharing, Figma puts together all of these features in one tool that makes it easier for our teams to discover new ideas together. Our teams find Figma very useful, especially in remote and distributed design work enablement and facilitation. In addition to its real-time design and collaboration capabilities, Figma also offers an API that helps to improve the DesignOps process.

Followers

Blog Archive