As a lead front end developer at Pearson I was responsible for multiple
projects using latest technologies: HTML5, CSS3 (SASS/LESS), ReactJS,
Angular, JQuery, Node. The projects included:
rebrand of Pearson websites globally, including US, UK, Corporate etc, that included a
complete rebuild of the theme from
the ground up using HTML5, CSS3, LESS, JS, JQuery, as well as
configuration of CQ AEM templates, designs and folder structures.
That project involved extensive use of Javascript, as I only had limited
possibility of changing the AEM's predefined components HTML
markup.
maintaining and creating websites globally, for example https://brand.pearson.com/
(internal website for brand
management)
My latest React app for Pearson is AEM Styles Preview App - an application
that allows content editors to change the CQ AEM component styles
instantly, with ability to preview the current available styles.
URL: http://frontend-developer.com/styles-preview/, source code
here. The app has been tested on live AEM sites and works as
expected. The reason for creating it was to make editors lifes easier, as
until now there was no AEM build-in option to preview all the
components styles at once, but instead, editors needed to reload the
page after each time any style was applied to see the result. With the
app implemented, it can be all done in an instant. The app takes the list
of all available styles for all components and applies them to the
selected component, opening a React app overlay on top of the page,
showing how the component would look with variations of different
styles applied to it. Moreover, the app allows users to set the selected
styles, so they do not need to do it in AEM - this is achieved via AJAX call,
using the component's data available in the page source.
The app is built using ES6 and it's state is held in the Redux store. Each
component has separate instance of the app that is run on click of the
'Styles preview' button. The initial state of the app is gathered from the
source of the page.