May 2018

Hello folks! This week was good. Last week I learnt about building themes and this week I actually implement these. In this blog I’ll explain about building dynamic themes. Introduction A theme and browser extension functionality cannot be defined in one package. One can, however, programmatically include a theme in an extension using the Theme API and those themes are called dynamic themes. I made one dynamic theme where themes are changing according to the time of day. After that I added an additional functionality using browser action. So, a user can add an alarm to it’s forefox page using browser action button.After setting alarm( in hours), whenever the hour matches with the alram time hour, the page produces a sound and theme is changed for one minute. After one minute the theme is again resumed with the particular day time theme. It was fun making this. :-) Getting Started First you need to create a manifest.json file within your main folder. This file specify basic metadata and theme components. My manifest.json file looks as follows- manifest.json Here “permissions” is necessary to request “theme” for building Dynamic themes. For including browser action, we add “browser_action” in manifest.json. But what is browser action? A browser action is a button that your extension adds to the browser’s toolbar. The button has an icon, and may optionally have a popup whose content is specified using HTML, CSS, and JavaScript. Here the popup content is specified in “alarm.html”. In this pop up you can set alarm ( in hours). Next, you need to build a JSON object containing the information about your theme. See the example below- Theme that appears when alarm hours matches with the current time( written in alarm.js file). Day, night themes ( written in background.js file)- Lastly, pass the JSON object in a theme.update() call as shown below- So, building a dynamic theme is fun. All you need is to keep some points in mind and tada~ theme is built. :-D I would like to attach a GIF of the dynamic theme. Note that I am writing this blog during day time, so the GIF has day theme along with an alarm theme which user can set at any hour. At the end, I would like to thank my awesome mentor Les Orchard. :-) He is assigning some cool stuffs to me and answers all my doubts. :-D Thanks for reading. If you are having any suggestions or thoughts on this, be sure to leave a comment. :-) Bye Bye :-D

lmorchard starred ChrisCindy/node-web-console

Hi there! My first week of Outreachy internship with mozilla was as good as expected. I got LDAP credentials. But wait, what does that mean? It means you get mozilla specific email address, own profile at mozilla Phonebook, access to all mozilla websites, access to their slack/ircCloud account and what not? You get to take part in their team meetings too which is pretty cool. :-) So, the first day of my internship started with a warm welcom from the community and my mentor Les Orchard. My mentor is an awesome person. :) He gave me an outline of what work he expects me to do. So, I started with learning about building themes ( both static and dynamic). I would like to give a rough idea about what I leant. Theme is something that enables you to change the look of the browser. You should have a little idea about WebExtension API before building a theme. So, theme can be static or dynamic. STATIC THEMES- We can’t share static themes with other users. Creating a static theme is simple. You need to include image inside a folder ( same folder where manifest.json [Web extension] file is present).In manifest.json file “theme” is the main object which consist of “images,”color” etc. Static image themes can consist of single or multiple images.We can also build static animated images. DYNAMIC THEMES- We can share static themes with other users. Dynamic theme uses theme API for controlling theme using JS code. For including theme API fiirst you need to request “theme” permission in the extension’s manifest.json file. Then you build a JSON object same as static theme and lastly you pass the JSON object in a theme.update() call. Whatever I have written above might be a confusing to you. Don’t worry! My next week work is based on implementing “building themes” and I will write an elaborated blog with some code snippet. :-) Lastly, I would like to thank Les Orchard for guiding me and also for inviting me to attend weekly Firefox Color meeting on Vidyo. It was very nice meeting Wil, John, Marnie and all members of FireFox Color team. It feels grate when cool people like them acknowledge your presence even when you have nothing much to say. :-) Thank you! :-D

lmorchard starred iodide-project/iodide

lmorchard starred Kyria/EFTParser

Ingredients 2 oz. rye whiskey 1 oz. Campari 1 oz. dry vermouth Lemon twist, for garnish

lmorchard starred jwilm/alacritty