Skip to main content

14 posts tagged with "web"

View All Tags

· 2 min read

今年隨著 Firefox OS 退場，工作內容有了不小的改變。年初時嘗試了一些不同的方向，也修了一些 Firefox 界面 bug，後半年則主要專注於開發者工具改進這塊。 以下是我今年主要參與或建立的開源專案。

Jan​

  • Webby send command to your internet assistant through the web

It's playable online

Feb​

Mar​

Apr​

https://gasolin.github.io/aframe-href-component/

May​

  • New Firefox Sites Permission

June​

  • Firefox Password doorhanger

July​

  • Firefox Devtools Inspector

Aug​

Sep​

  • Firefox Devtools Network Monitor

Oct​

  • blog personal tech blog

http://blog.gasolin.idv.tw/

Nov​

Dec​

· 3 min read

After migrated my blog from blogger to github, at the end of 2016, I've migrated my blog and home page to host on github as well.

Both sites are fully stored in github and deployed automatically via Travis CI.

Before auto deploy​

Before apply auto deploy method, the usual workflow to hosting web page on github are 2 steps:

First, user commit changes to local git master branch.

graph LR user(User) master[Local:master] user -- commits* --> master

Then, user run the build process to generate contents for deploy.

graph LR user(User) dist[dist/] user -- build --> dist

Then, use git commands to push generated contents to github gh-pages branch

graph LR user(User) ghpages[Github:gh-pages] user -- deploy --> ghpages

At this time, our source code is still stored in local machine, we have to push the changes to github as well for safety.

graph LR user(User) master[Github:master] user -- push --> master

Of course the manual works can be improved. After apply auto deploy method, all I have to do is commit to github and let the web services do the rest.

After auto deploy​

Here's what my current workflow looks like

graph LR master[Github:master] travis[Travis CI] ghpages[Github:gh-pages] User -- commit --> master master -. auto build .-> travis travis -. auto deploy .-> ghpages

The dot line process are automatically done for you.

Github page auto deploy to rescue​

After auto deploy, I am able to run test, do lint check, and build source with a few changes on .travis.yml(The travis configuration file), the only thing I need to care about is the content. The bonus is github now become my online web page editor. Web page is auto updated after each commit.

All these automation only needs one time setup, which is a pretty good deal to save foreseeable deploy time. For security concern, my current workflow add the github token into Travis environment variables(to let Travis able to commit gh-pages), and make the actual git push quiet to prevent showing the token on Travis.

To not reinvent wheels myself, I distilled the auto deploy scripts and instructions into ghpage-auto-deploy project. you can use it to deploy your next web page as well.

Fork the ghpage-auto-deploy project to get start, feel free to add new issues to send suggestions or pull request to me if you want to imporove it.

· 3 min read

Not like previous article about general workflow on Mozilla Gecko project, This article is like a cookbook that I encountered during debugging Firefox devtools (mostly around inspector and network monitor).

Remote debugging​

According to MDN, first of all you need to go through Developer > Toggle Tools > Toolbox Options > Advance settings to check 2 options:

  • Enable browser chrome and add-on debugging toolboxes
  • Enable remote debugging

Then use Shift+Option+Command+i on Mac or Ctrl+Shift+i on linux to open the remote debugger.

Disable autohide in popup​

Once I'm developing toolbar web extensions or any popup windows, I feel very appreciate this feature.

https://developer.mozilla.org/zh-TW/Add-ons/WebExtensions/Debugging#Disable_autohide

Boost build time via set mozconfig artifact​

Add these settings in mozconfig file

# Enable debug version of the pre-build binary artifact
export MOZ_DEBUG="1"

# Automatically download and use compiled C++ components:
ac_add_options --enable-artifact-builds

# Write build artifacts to:
mk_add_options MOZ_OBJDIR=./objdir-frontend-debug-artifact

If you just develop frontend UI(JS, CSS, XUL, HTML), the artifact build prebuild the C++ and the static part of the code so you can download and link it automatically during mach build, it saves you tremendous build time and helps you move quicker.

You can use the command

./mach build faster

to further boost the build time.

Enable React and other JS debugging message​

Add these settings in mozconfig file

ac_add_options --enable-debug-js-modules

It will turn on React and other JS debugging message. Note that will influence performance while running.

Open devtools and chrome debugger with website​

You may not know its possible to open a website with opened devtool with the command:

./mach run --devtools --jsdebugger www.yahoo.com.tw

Test on Try server​

Mozilla Try Server let you run tests on all supported platforms. You can pick which test set and which platform to run by providing command arguments. Here's what I used for test devtools related bugs on Windows, Mac, and Linux.

try: -b do -p linux64,macosx64,win64 -u mochitest-dt,mochitest-e10s-devtools-chrome -t none --artifact

Add --artifact argument will both save total running time and computing resources.

Tracing Code​

Via global search in editor​

Many modern editor ex sublime, visual studio code provide great support of global search. Ctrl + Shift + f is your good friend.

Via DXR or searchfox​

DXR and searchfox is a code search and navigation tool for large projects like Mozilla-center. It supports full-text and regex searches as well as structural queries.

http://dxr.mozilla.org/

ES6 nits​

Do not use forEach with yield​

forEach is a good way to loop array, but is not compatible with the generator(because the need of implement iterator interface), so if you use yield inside of forEach loop, it will not behave as you expect. The better choice is use for..of loop or map instead.

Try to be functional​

The powerful => arrow syntax sugar is not just for replacing bind(this), it gives the developer a clear way to write more compact code.

For example 

promise.then(function(a , b) {
  return a + b;
});

can be written as 

promise.then((a, b) => a + b);

Misc​

· 2 min read

You may think its pretty hard to setup everything on windows. But after I found chocolatey the process is deadly simple. Chocolatey is the package manager for windows. Like homebrew for Mac, you can use Chocolatey to install all react-native dependencies and let chocolatey setup system PATH for you automatically.

Sounds good? let's install react-native on windows.

The very first step is install chocolatey via [following its instuction]https://chocolatey.org/install).

Then install git, node, android-sdk

C:\> choco install git nvm android-sdk

And you can download the latest node version via command

nvm install 8.4.0

Note that Java Development Kit (JDK) is also installed when you install android-sdk, neat! As I mentioned earlier, the SYSTEM PATH are automatically set so you can run android command on cmd or the alternative to open up the SDK manager after install is complete!

Once you can open android SDK manager, check Getting Started section in React Native doc to find out which android SDK versions to download.

You can also check Chocolatey's package list to install a editor. Since its windows, I'll give Visual Studio Code a try:

c:\> choco install visualstudiocode

Now you are on the fast track to install react-native, its all node related instructions now.

c:\> npm install -g create-react-native-app
c:\> create-react-native-app sample
c:\> cd sample
c:\sample> npm start

Happy coding!

Reference:​