Update 15 — August — 2018: Chrome has shipped CSS Scroll Snap Points specs and will be enabled by default as of Chrome 69, Web Developers can now use this feature on all of Edge, Chrome, Firefox and Safari 🎉.

Update 01 — April — 2018: Fixed some typos — Broke down the problems of traditional carousel into clearer points — broke down the advantages of Snap Points into clearer points — Added future work I will be doing on this topic.

The mobile web has been making a lot of progress in the last year or two and I have happily replaced few native apps on my phone with their web alternatives and today I’m a full-time user of Twitter Lite and Instagram PWA.

For a long time the responsive mobile web has been hierarchical however, native apps has flattened the vertical hierarchies in their main views and implemented a very popular pattern sometimes called “horizontal paging” which provides the users with an efficient horizontal navigation from one tab to another using a simple left or right gestures and makes the relevant data or content in different app screens more accessible.

Not to my surprise, Twitter and Instagram PWAs — that I use daily as I mentioned earlier and they are 2 of my all-time favourite web apps — have brought in their native apps like navigation bars. Also not to my surprise, there is no swipe gesture and the absence of swipe gestures is not an app limitations but unfortunately a web platform limitation in my opinion.

Traditional Web “Carousel” Problems

The traditional, cross-browser carousel problems starts with the implementation requirements:

• A wrapper with overflow hidden.
• A wide wrapper of (number of screens*screen width) pixels.
• A minimum of 7 different events listeners: mousedown, mouseup, mouseleave, mousemove, touchstart, touchend, touchmove.
• On mouse or touch move we translate the wider container.
• CSS will-change:transform and whatever other magic we got and can add there to make that transition as smooth as possible.

Following those steps should give us a decent carousel with 50 bugs or so that is probably good enough for a hero banner but if we want to use it for an app views that have complex children layout, posts lists, comments, images, etc.. it will not do an amazing job for many reasons:

• Code complexity caused by having to deal with 7 different mouse and touch JavaScript events.
• If any children elements are meant to receive mouse or touch events, deciding if the parent should propagate or act first can be tricky and a further assistance form pointer-events and touch-events might be helpful to allow or block specific elements from receiving mouse or a touch events at some cases.
• Determining where the transition has to stop can also be tricky especially for different size children or on the container’s resize where the children size might change in which case a JavaScript recalculation is required.

CSS Scroll Snap Points To The Rescue

CSS scroll snap points module helps us specify where a container’s scroll port should stop after the scrolling operation has been completed, read more about it on MDN and check Can I Use for browser compatibility. It is coming along nicely in all major browsers, the only no-support flags are in Chrome but the good news it’s being actively and almost daily worked on, check out the bug smashing progress here (Go Chrome!).

Few Problems CSS Scroll Snap Points Will Solve

• Reduce the JavaScript code complexity as there’s no need to listen to mouse or touch events anymore.
• More efficient way to respond to children elements mouse & touch events since the parent does not require them anymore, there is no need to check on whether the parent wrapper has to respond or propagate.
• Ability to deal effortlessly with different size children or after children widths changes due to a container resize for example. CSS Snap Points will always snap to the begging of the child element or to any point we specify using scroll-snap-coordinate property without needing to calculate the element’s widths.

Simple CSS Only Swipe Views Demo

If you using Edge, Safari or FireFox you can try my swipe views pen with CSS Snap Points:

Alternatively, you can check out this video I recorded of that pen:

CSS Snap Points Look Promising

Snap Points seem to have everything I need to replace a 100 lines of carousel code that needed 7 different JavaScript events and a bunch of math and logic with literally 4 lines of CSS and the results are certainly more natural and performant.

overflow-x: auto;
scroll-snap-coordinate: 0 0;
scroll-snap-points-x: repeat(100%);
scroll-snap-type: mandatory;

Advanced Usage: CSS Grid with CSS Snap points

CSS Grid + CSS Snap Points = 0 JavaScript, 0 CSS Media Query Responsive Swipe Views

CSS Grid has brought a lot of flexibility and magic to the way browser layout works, here’s a pen where I made a fully responsive Swipe Views (Carousel) with CSS Grid and Snap Points where neither JavaScript nor CSS media queries are required to achieve the responsiveness.

Thumbs Up

In my opinion, Snap Points seems to be an option for building Swipe Views that can make browsing a lot of web apps’ home screens and consuming their content a more fluent experience and can also help us get rid of tens of lines of JavaScript code if all we needed was a simple minimal web carousel.

I have plans to experiment further more with them in the near future and learn more about their “cons” in real-world applications. I will also experiment with building a performant dynamic carousel and then will most likely publish a part 2 post as a follow-up.

Until then, if you have experimented with CSS Snap Points module, have a comment or anything to add to this post please comment below!

Thank you for reading 💚.

A Content Management System (CMS) is one of the very first tech investments a lot of companies make, and no matter how large the business is or what kind of CMS they choose, product & marketing teams need an effortless and safe way to author new components with their ever evolving ideas in order to serve their customers better and deliver more value.

Traditionally, this is done by building those components as styled Java or PHP templates depends what CMS you have, which I believe is still the best way to deliver most of the typical content blocks where there’s lot of words and images and a minimal amount of UI interactions, but when a CMS component is rich with UI interactions building that in vanilla JavaScript with the server rendered HTML can be a little tedious and modern JavaScript UI libraries like Preact, React, Svelte, Vue can actually be a better way to tackle this problem and improve the Developer Experience, Productivity and Testability.

The Advantages of Client Side Widgets

Building a client side widgets and deploying it as a static file make a lot of sense in some use cases that look similar to those:

Rich UI Interactions

If a widget is big on fetching data from external or 3rd party APIs and has a very dynamic interface and possibly client side data filters, dropdowns, sliders etc.. utilising a modern UI library will keep you highly productive by providing a functional approach to build and reuse elements, also by giving you a bunch of compatible off the shelf open source modules to import and use or just get some inspiration from.

Domain-wide Reusability

Client side widgets can be served through your CDN and can be reused not only across the CMS pages, but also across the business’ different websites and web apps.

Lazy Loading

CMS pages are rendered on the server and that gives us a quick fast first paint with ready content, loading client side rendered widgets asynchronously that will progressively enhance the page without being a blocker.

Fast Independent Releases

Releasing a feature or a fix to my employer’s CMS for example takes a lot of time as there are release slots you have to check and book one a few days in advance, while a client side widget deployed as a static file and served over the CDN has helped us deploy as much and as often as we wanted.

Build in Isolation and Leverage Modern Tools

Some enterprise CMS are a few years old, and it’s very common to see a lot of JS files, grunt tasks and the answer to what’s your existing front-end architecture question is “No architecture really, just jQuery and stuff”. Building in isolation with all what modern tools has to offer such as hot module reloading, es harmony modules tree shaking is a win for both of the developers and the project.

Utilise a Shared Component Library

There are few popular Open Source frameworks like Storybook and Styleguidist for building, documenting and showcasing a set of elements and components that can be reused across all your widgets.

Progressive Widgets Architecture (PWA) with Preact

There are many reasons that make Preact an ideal library to build those widget, some of them are:

Tiny Library Size (Portability)

Preact’s tiny size will leave you a lot of room for your app’s code even when it’s bundled in your widget. It is only 3Kb, just around the size of the fetch polyfill.

Great Performance on Mobile

Preact provides some very satisfying results when testing and benchmarking its performance on mobile devices where JavaScript libraries usually struggle the most. Preact is light weight in size and engineered as a browser-first library, where there is minimal abstraction and no browser events rewrites, all those combined have helped Preact reduce the overhead and improve the performance for mobile browsers.

Size and performance are quite important as the CMS host page might be fast or slow, might contain a ton of other JavaScript, render blocking tracking scripts, etc.. so providing a widget that is as light and as fast as possible is a critical key in progressively enhancing the CMS pages and the whole experience.

Easy to Pick Up

It doesn’t matter if a frontend developer is experienced in P\React or not, what makes picking up Preact fairly easy is the identical ES6 API to React’s API and lifecycle methods (up until latest stable) and there are some excellent blog posts, examples and tutorials developers can learn from.

Ecosystem

Preact ecosystem has a lot of packages and modules to support a lot of common needs, it is also worth mentioning that you can utilise all react ecosystem modules and they will be fully compatible with your preact code via preact-compat. (PS: preact-compat will add 4.8 KBs).

Rendering in the CMS Page DOM

Looking at this simple widget as an example, you can easily tell we need to give ourself a better API and more flexibility:

And Then There Was Preact-habitat

Preact-habitat is just an extension to Preact’s render function where I decided to provide more API. The concept of Preact habitat is pretty straight forward and can be summarised as

• Scan the DOM when the widget’s script is loaded.
• Re-scan again when DOM is fully loaded.
• Allow host CMS page to pass props via HTML.
• Stay < 1KB.

Preact-habitat Implementation Details

Walking through the implementation details of preact-habitat, here’s a code snippet for our simple HelloWidget component with an option I have exposed inline the widget and mount it inside the script tag’s direct parent

Now that we have option inline set to true, to integrate this widget in your host CMS all we need to do is… use the script!

There are few other API options like like `clean:true` in case there was a default loading animation provided by the host CMS and you want to clear it before the widgets mounts:

Passing Props, Preact.h Trick & Render Function

The host CMS page developers will certainly love to be able to pass down some custom data that are relevant to that specific page, in preact-habitat all you need to do is add a script tag of type text/props with a valid JSON in it, just like the following:

The first step of implementing this feature from scratch is getting the text/props script’s content and parse the JSON to JS object

What makes passing the JS Object pretty easy is Preact’s pragma h function that accepts 2 parameters, first one is the function or ES6 Class component we want to render and the 2nd one is you might have guessed, the props! (You can learn more about Preact’s h function here)

and the previous snippet is what I have utilised in preact-habitat as the following:

Thumbs Up

Rewriting is expensive and progressive enhancements are a good way to go around improving both of the user and developer experience, there are few ideas I look forward to bringing later this year like rendering in the Preact widgets in a shadow root which offers a pretty neat CSS encapsulation, but since Shadow DOM haven’t landed in all major browser and the polyfills are a little expensive I chose to wait a little longer, another thing you might want to look at if you are going to use Preact widgets extensively in your project is dynamic widget imports via webpack contextual require, this is a very neat trick Jason Miller has introduced to me once and I believe it is quite useful.

Some resources I recommend looking at:

• Preact Shadow Root: https://github.com/developit/preact-shadow-root
• Preact with React Styleguidist: https://github.com/styleguidist/react-styleguidist/tree/master/examples/preact
• Preact CLI and Preact CLI’s widgets template

Follow me on twitter or star preact-habitat on Github if you would like to keep up to date with my latest work on this!

Thank you for reading 💜.

The beginning

At first, I considered teaching Syrian refugees from all over the world a skill that they could easily monetize as employees or even as freelancers. But then I thought all Syrians could benefit from this course (even those who still live in their home country that’s been plagued by war for the past six years). Then I went even further and decided everyone who wants to be a JavaScript programmer and speaks Arabic could join in, irrespective of the country they’re from and of where they are currently located.

Why JavaScript?

The first reason for this is that I am completely in love with JavaScript. Building applications in JavaScript is basically what I’ve been doing every day for the past few years and I’m enjoying it even more as I’m witnessing it evolving and getting bigger and better. Secondly (and perhaps the more important reason) is that JavaScript is incredibly versatile and it is the FUTURE. With it, you can write apps for web, iOS and Android mobile platforms as well as OSX, Linux, and Windows computers.

Nowadays, almost no one asks web application developers about their university degree: all that employers want to know is what you can actually do and whether you’ve got some apps in your portfolio to show. And when you can write a clean JavaScript code, even as a beginner, you’re halfway in through the door. Plus, JavaScript can not only land you a full-time job, but also countless freelancing lucrative gigs. According to a recent 2016 StackOverflow survey, up to 69% of software developers are self-taught and they still make more money than some computer science graduates.

Leveraging the power of learning

Today’s worldwide social crisis started by the Arab revolutions seems to be hopeless, especially for the people who had to flee their homes and acclimate to new countries where they don’t speak the language and they find it hard to get employment.

But anyone can become fluent in JavaScript — it’s a universal language in a very high demand right now. My plan is to empower people with a fundamental skill and thus help them reach their true potential. I know that after a few lessons, most of the passionate students will fall in love with JavaScript just like I did and will continue this journey with me.

Last, but not least, I am convinced that learning is the engine that will set things in motion for people who can’t seem to find their way in the brand new world they’ve been thrown in. Acquiring such an in-demand skills is the best and fastest way for them to get jobs and integrate in their new societies.

Meet the teacher

My name is Zouhir, I was born and raised in Syria. I’m currently a Consultant Software Engineer based at the Commonwealth Bank of Australia, the country’s leading bank. But more important than my job is my passion for science and for education. At the age of 17, I won a national web programming award and I was a physics pioneer for two years in a row before that.

I strongly believe that my passion for the right kind of education is what put me on the path that I am now and that I absolutely love, so it is time for me to give something back. I am a fluent Arabic, English and JavaScript speaker and I am more than happy to combine these three skills in order to help people who desperately need some stability in their lives right now.

The process

When I first had this idea, I didn’t think that I would get such an amazing and overwhelming response.

Zouhir on Twitter

I'll be teaching Syrians\Syrian refugees JavaScript remotely for free, explained mostly in Arabic. please RT http://zouhir.org/js-classes

My initial announcement was re-tweeted over 185 times in the first 24 hours. People that I admire a lot supported my initiative: the founder of Elastic, CouchDB and JSConfeu maker and O’Reilly book author Eric Elliott are just three of them — thank you, guys, your support means the world to me!

In the same 24 hours, I already got 35 responses from people who are serious about learning JavaScript and want to commit. I am so happy to see the interest this has generated, more than I had ever hoped it would. So, my initiative seems bound to turn into something much bigger. I plan to setup a platform where we can all communicate, exchange information and get to know each other — I can no longer simply rely on Skype, as I had planned. Plus, I will create video courses in Arabic, I’ll translate some must-see ones in English and create written scripts, as well.

Please know that I’ve already started working on this, it just might take a bit more than I initially anticipated. I will keep you posted with my progress on this blog, so be sure to check in frequently.

Thanks again for all your support!

I’ve finally arrived here on Medium and I’m really excited to share with you all some of my random JavaScript & Software Engineering thoughts, my code experiments, challenges I face and work I do.

In a very brief introduction about myself, my name is Zouhir Chahoud and it happens that I’m writing this post from Sydney, Australia. I crafted my first HTML page when I was 14 and fell in love with the JavaScript snippets I pasted into my website (I still remember the add to homepage snippet, add to bookmarks one and animated shapes around the cursor too!). I built a bunch of personal, local and high school websites while learning JavaScript on my dial up connection and earned a national award in Web Development when I was 17, added it to the shelf where I had 2 other national awards in physics for school students. Work wise, My JavaScript code can be found in many high profile websites and web applications for McDonalds Arabia, Dubai International Film Festival and many others.. Currently I’m working on one of the enterprise systems at Australia’s leading bank.

Finally, the main reason I’m here is the JavaScript community. I have learned a lot from them and found myself inspired by some of their work as well as getting more creative when bouncing my ideas off theirs, so thank you JS community and looking forward to our future work, collaboration and discussions!