Monthly archives: January, 2019

Compile/watch/compress scss file to css

brew install sass/sass/sass $ sass –version 1.16.1 sass –watch style.scss ../css/style.css sass style.scss ../css/style.css –style compressed style.scss contains mutilple scss files: @import url(‘https://fonts.googleapis.com/css?family=Lato|Roboto’); @import “reset”; @import “variables”; @import “mixins”; @import “layout”; @import “text”; @import “nav”; @import “content”; @import “forms”; @import “selectBoxIt”; @import “responsive”;   $ sass –watch scss/main.scss:css/main.css Compiled scss/main.scss to css/main.css. Sass is watching …

Sort by field/column of Vue JS data for Laravel Nova

<template> <divv-on:click=”$emit(‘sort-list’, 0.1)”role=”button”class=”sortable-title”> <spanclass=”title”v-html=”title”></span> <spanv-if=”order_type==’desc'”><iclass=”fa fa-arrow-circle-down”aria-hidden=”true”></i></span> <spanv-if=”order_type==’asc'”><iclass=”fa fa-arrow-circle-up”aria-hidden=”true”></i></span> <spanv-if=”order_type==null”><iclass=”fa fa-sort”aria-hidden=”true”></i></span> </div> </template> <script> export default { props: [ ‘title’, ‘order_type’, ], data() { return { // } }, mounted() { // }, methods: { // }, } </script>   Use it in the parent component: import SortableField from “./SortableField” export default { components :{ SortableField …

How to set variable in .map() in ReactJS

render() { this.yearTransactionNum=0; return ( …. {this.props.transactions.length > 0 && this.props.transactions.map((transaction,index) => { if ( this.props.invoiceYear == ‘All’ || transaction.date_formated.indexOf(this.props.invoiceYear) != -1 ) { this.yearTransactionNum++; return ( <React.Fragment> ….. ) else { … } {(this.props.transactions.length > 0 && this.yearTransactionNum == 0) && <div className=’text-center col-md-12 p-5′><i class=”fa fa-exclamation-triangle mr-2″aria-hidden=”true”></i>No Transaction for Year {this.props.invoiceYear}</div> }

How to automatically scroll to the top of the page after render() in React JS

Assume we have a long list page, click a link after scroll down few screens and the new page scroll bar stay at the middle !! How to automatically scroll to the top of the page after render() in React JS componentDidUpdate() { // ReactDOM.findDOMNode(this).scrollTop = 0 // ReactDom.findDOMNode(this).scrollIntoView(); window.scrollTo(0, 0) } Tested and on window.scrollTo(0, 0) works …

Sort array by custom string value and number

        // sort function         function wpd_last_name_sort( $a, $b ) {          $a_last = end(explode(‘ ‘, $a->post_title));          $b_last = end(explode(‘ ‘, $b->post_title));              return strcasecmp( $a_last, $b_last );         }         function wpd_menu_order_sort( $a, $b ) {             $a_last = $a->menu_order;          $b_last = $b->menu_order;          return $a_last > $b_last;         }                     // sort posts         $menu_order_tags = [             ‘cardiothoracic-surgery’, …