Trend Talks: Front End Development

Front End

development

react

AngularJS

March 27
blog author

jtsang

Team Lead

It's still early into 2019, and it looks like a promising year for the growth of front-end programming. In this post, I'll list out 5 things I've been reading up on recently and seeing the community talk about.

1. Moving Away From Javascript Libraries in CSS Frameworks

DdQLRSLUQAAU35f.jpg

Bootstrap v5 is on its way to get rid of dependancy of jQuery. Cleaner and less bloated javascript.

Interesting Readings:

https://news.ycombinator.com/item?id=19147466

https://dev.to/winduptoy/a-javascript-free-frontend-2d3e

2. CSS Animations

Screen Shot 2019-03-19 at 11.24.45 AM.png

I have seen more and more tutorials and awesome examples on the web of CSS only animations and creative CSS drawings.

Built with combinations of border-radius, box-shadow, transform, linear-gradient, radial-gradients, and overflow we are so close to making complex designs easier.

Interesting Read:

http://diana-adrianne.com/how/

Examples:

https://codepen.io/joshbader/full/MZMzjr

https://codepen.io/ivorjetski/pen/xMJoYO

3. Grid vs Flexbox

Screen Shot 2019-03-19 at 11.31.47 AM.png

Source: css-tricks.com

Instead of putting them against each other we are moving towards a more co-existing relationship. Knowing when to use each of them is where we want to be.

Interesting Readings:

https://css-irl.info/to-grid-or-to-flex/

https://vgpena.github.io/using-css-grid-the-right-way/

https://css-tricks.com/quick-whats-the-difference-between-flexbox-and-grid/

4. The Rise of Vue.js with React and Angular Still At It

vue.jpg

React still has a much larger share of the market, but Vue.js is still rise and certainly shows no sign of stopping. In fact, Vue has already overtaken its rival for certain metrics such as total GitHub stars.

Interesting Read:

https://2018.stateofjs.com/front-end-frameworks/overview/

5. CSS Variables

Where has this been and its progress. I've been waiting for this and have been using SASS and other processors to achieve this.

Interesting Reading:

https://codyhouse.co/blog/post/how-to-combine-sass-color-functions-and-css-variables

https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties