After the Introduction, its time to build things! We will basically lay out a basic UI for the playground and learn how to render our code in the sandbox.
Continue reading “Creating the Environment To Write Code and Render in Realtime”
Tag: javascript
Building Your Own HTML, CSS, JS Realtime Playground
Many months ago I built this site called CSSDeck. Its an interesting app where you can write your HTML, CSS, JS code inside few code editors that gets rendered and displayed in realtime in an output area (sandbox). Similar to JSFiddle, yeh! But the intent was a bit different. Instead of aiming for a playground where people could just create testcases, I wanted to build a community of people who would create some cool creations with their CSS3 and Javascript skills and all I would do is feature them on the Home Page of the site. Whatever people submit shows up in their profile page which means they can share their profile link with anyone and show off how awesome they are.
Continue reading “Building Your Own HTML, CSS, JS Realtime Playground”
HTML5 Fullscreen Background Video with CSS and JS (Plugin/Library)
Fullscreen background videos that autoplay right when the webpage loads (above the fold) has become quite a popular trend these days. Personally I think a fullscreen good quality video that autoplays does increases engagement for the users/customers. It should be kept in mind that the story of the video must be relevant to the brand. These days we’re surrounded by loads of videos on social networks like FB and Twitter as well which autoplay (but is muted of course). Analytical studies have also reported higher engagement due to this.
Continue reading “HTML5 Fullscreen Background Video with CSS and JS (Plugin/Library)”
Getting Started with React – Setting up the Development Environment
React (also React.js or ReactJS) is a JavaScript library for building user interfaces developed by Facebook & Instagram. It is not a full blown framework like Angular or Ember or even Backbone.js. It is a very simple View library which can replace the V in any other client-side MVC framework, i.e., you can use Backbone and React together for instance. In fact a lot of people are already doing that. Although when combined with a design pattern like Flux, you can totally give up on an MVC framework for your client-side architecture and happily develop apps with just React in conjunction with the Flux application architecture. React encompasses some interesting concepts too like Virtual DOM, uni-directional reactive data flow, etc. but don’t worry we’ll discuss all those much later when you’re already comfortable with the library and hacking your way through it.
Continue reading “Getting Started with React – Setting up the Development Environment”
Compiling Next Generation JavaScript (ES6, ES7, React) in Browser with Babel 6 and Above
Babel is an amazing tool for writing ES6 (ES2015), ES7 (ES2016), JSX, etc. code that finally gets compiled (or transpiled) into JavaScript (mostly ES5 as of now) that can be executed by most browsers. So basically you can use JS features like classes, promises, etc. without worrying about the browser support as Babel will eventually convert all your code into browser-understandable program.
JavaScript Fire onSubmit Event Handler Programmatically by Calling form.submit()
Unless you code your web pages in vanilla javascript, you’ll probably not notice this but when you do it’ll quite baffle you that the event listener you attach to a form’s submit event using addEventListener or onSubmit will not be invoked when you submit the form directly like this – form.submit().
Continue reading “JavaScript Fire onSubmit Event Handler Programmatically by Calling form.submit()”
Passing Data Across Components with Contexts (childContextTypes, getChildContext(), contextTypes) in ReactJS
Using React Contexts we can communicate across a hierarchy of Components. To understand this, think of a widget represented by a View component which has lots of child view components. You might use/re-use this component and want to pass certain properties or attributes that are relevant to different child components affecting the overall state (look and behaviour) of the main component in combination. Now one way to achieve this is by using props. But imagine passing an attribute all the way down from the parent to a child at the 5th level in the hierarchy. At every component level the property passed from the parent will have to be accessed (this.props.propName) and further passed down. This can get really messy. So let’s see how contexts can be used to pass data across components in a much elegant manner.