New Hexo Theme

For long time, I have to use the default theme landscape, because I always want to make a very magnificence theme which may require far more out of my toolbox and ability. Until now, I decide to make this blog a pure programming and technology oriented. So I decided to develop an brief and clear theme. That is the theme timeline.

This theme is made from ground. Almost everything, I have to learn from hexo official site, where its document is not very detailed. To save time, I made a decision that I would use the technology which I already handled of. So this theme is designed with Adobe Edge Reflow CC, made with less, ejs and a little jquery. Also, I use grunt to build a early preview version to check the design and some css styles. In fact, it’s not a good practice to develop a hexo theme.

It is worth to talk about the interesting things when developing this theme, Some of these may have someone to not make a mistake.

This theme is design with Adobe Edge Reflow CC, this means I’ll to make a responsive design at very first. so I’ll have to develop with both desktop and mobile screen. Luckly, Chrome has a emulator can provide different device screen size to preview the result. But when I previewed with that, All of my fonts became very big (almost scaled 3 times bigger) and the content were out of screen on mobile devices. Debug this wasted a lot of time until I found I missed a meta tag to declare the viewport and initial-scale factor.

Then I add this meta tag then everything looks good.

1
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

To make the navigation bar more accessible on mobile devices. I want to make a drawer navigator which may be very similar to the drawer of Android app. At first, I made this very jquery, write some code and debug, this was time waste. Then I found a method called checkbox hack which is far more easy to create a navigator drawer and with no javascript need! The mystery is you can make a invisible checkbox (whether make it opacity=0 or move it out of screen) and then attach one or more labels with it, these labels are clickable and styleable. Another key technology is general sibling selectors which make it possible to use the :checked pseudo class to define a different styles for the drawer and backdrop element based on the checkbox state.

it is almost like this:

1
2
3
4
<input type="checkbox" id="drawer-toggle">
<label for="drawer-toggle" class="drawer-label">Drawer Button</label>
<div class="drawer"></div>
<label for="drawer-toggle" class="backdrop"></label>

1
#drawer-toggle {
    opacity: 0;
    position: absolute;
}

.drawer-label {
    // you can make any styles what you want your drawer toggle button to be.
}

.drawer {
    transition: transform 0.2s ease-out;
    transform: translate3d(-100px, 0, 0); // we move the drawer out of screen when initialized.
    position: fixed;
    top: 0;
    left: 0;
    width: 100px;
    height: 100%;
}

.backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

// then came the interesting part.

#drawer-toggle:checked ~ .drawer {
    transform: translate3d(0, 0, 0);
}

#drawer-toggle:checked ~ .backdrop {
    display:block;
}

This technology has very good browser compatibility. even with IE9 but If you want to be compatible with the older browser, You may consider a javascript version. But I don’t care.

After I almost complete the styles and layout development and began to convert html to ejs template. I finally found a project called hexo-theme-unit-test. Which is actually a sample blog with every type of post. What I need is copy may theme into its themes folder. and modify the _config.yml. But, when I run the command hexo server it didn’t work! After tried serveral times, I found this unit-test project lack some dependency declarations in its package.json. This would result in the ejs template not being rendered. after installed the dependencies. it works well. If you want to develop a theme, you should work with this project, no need to config a grunt task. and write a pure html file.

This hexo theme is still in development, some pages and functions are not available, the styles need to be tweaked, I’ll continue work with this.

Comments

Make Action Bar Overlay work with ListView or GridView

ActionBar pattern is widely used since Honeycomb released. As the action bar actually take space of your limited screen, you may need make the action bar semi-transparent to save some space. ActionBar API provide an method to overlay your action bar on your screen content. as the training material mentioned:

Just add a style windowActionBarOverlay and set it true. The snippet is copied from android developer.

1
2
3
4
5
6
7
8
9
10
<resources>
<!-- the theme applied to the application or activity -->
<style name="CustomActionBarTheme"
parent="@android:style/Theme.AppCompat">
<item name="android:windowActionBarOverlay">true</item>

<!-- Support library compatibility -->
<item name="windowActionBarOverlay">true</item>
</style>

</resources>

But the training material from android developer site isn’t use an ListView or GridView with ActionBar overlay. When you just follow its instruction to set paddingTop on your ListView or GridView. You may not get expected effect. the scrolling content is just cut from the air. like the left side show on the figure.

clipToPadding and scrollBarStyle Protip

To achieve the right effect like the right side. Android Developers Official G+ page give a tip on G+ https://plus.google.com/+AndroidDevelopers/posts/LpAA7q4jw9M

Add an attribute android:clipToPadding to your ListView or GridView and set it false. then you can set your paddingTop on your ListView or GridView as your ActionBar height.

1
2
3
4
<ListView

android:clipToPadding="false"
android:scrollbarStyle="outsideOverlay" />

Comments

Remove Verbose Log In Production

android.util.Log is a very useful class to help developer debug their application. But when in production release. Any verbose log (Log.v) should be removed properly to prevent annoying user or leak some information.

You can simply commented those Log.v out or Using a ProGuard to remove any verbose log statements directly from the bytecode of your compiled JAR executable. This method is described in Christopher’s answer in the StackOverflow post

The easiest way is to run your compiled JAR through ProGuard before deployment, with a config like:

1
2
3
-assumenosideeffects class android.util.Log {
public static int v(...);
}

That will — aside from all the other ProGuard optimisations — remove any verbose log statements directly from the bytecode.

Comments

自己改的Brackets用的Monokai主题,参考Webstorm配色

因为之前被人推荐过Brackets,自己也试用了一下,总体感觉还是不错的。虽然跟现在正在试用Webstorm比起来要弱一些,不过对于不太严重依赖IDE的人来说,作为前端开发编辑器来说还是很出色的。

由于Brackets基于webkit写成的,所以可以按照开发web的方法来编写插件。而Themes插件则利用CodeMirror来编写主题。 不过里面自带的Monokai过于鲜亮,加上Brackets在Mac下有字体渲染bug(后面会解释如何修复这个问题),所以我决定按照Webstorm的monokai主题配色方案来修改一个Brackets的monokai主题。

不过修改起来才发现,Brackets的功能还是略弱,比如不能按照语言来定义颜色,不能区分很具体的变量用法(比如未使用的局部变量),在修改配色的时候首先照顾javascript,然后才是css,所以css最后效果和正常的monokai差距较大,是个遗憾之处。

总的来说修改之后的monokai主题有以下优点:

  • 和默认的monokai-dark-soda相比,对比度降低了一些,不那么刺眼了,虽然还是优点略亮。
  • 此外还解决了mac下字体显示的问题

效果预览:

JS代码效果:

JS代码效果

HTML代码效果:

HTML代码效果

CSS代码效果:

CSS代码效果

下载地址:

https://gist.github.com/lordfriend/858e369f8e9f7cd9861c

欢迎试用与反馈bug

使用方法:

  • 安装Brackets的Themes扩展:https://github.com/MiguelCastillo/Brackets-Themes
  • 然后打开扩展的文件夹(Help菜单->show Extensions Folder),进入user/themes/theme,然后将下载的monokai-webstorm.css放到里面,重启Brackets,在Themes菜单里选择monokai-webstorm主题即可。

如何修复mac下字体显示问题

mac下字体显示问题是因为brackets自己加了一个 -webkit-font-smoothing: antialiased 属性导致的。 这个属性本来是为了让windows下字体显示更平滑,不过 antialiased 这个值在mac下却导致了字体显示变成点阵一样的效果。 解决办法就是使用 subpixel-antialiased 值来代替默认值。

如果你要定义自己的主题。那么在 .CodeMirror里加上这样一句就可以了:

1
2
3
.CodeMirror {
-webkit-font-smoothing: subpixel-antialiased;
}
Comments
NEWER POSTS OLDER POSTS