over 8 years ago

Bootstrap offers a great Accordion element but it needs a few patches:

  1. An up and down arrow beside the accordion's title would be nice.
  2. The clickable area is centered around the title text. If you click between the text and the background border, the accordion will not show or hide.
  3. A hide all or show all method would be nice.

I created a JSFiddle: http://jsfiddle.net/p1ok0t51/4/

A few key points to point out,

  1. the up/down arrow switch is enabled by the CSS.

  2. I added the following to both the div.panel-heading and h4 element, so that the clickable area is the entire title div:

data-toggle="collapse" data-target='#collapse2'

The data-toggle="collapse" attribute makes your element clickable, by adding it to the div.title element, the entire div becomes clickable. Thus, when users click in between the title text and the border of the div.title element, the accordion will still respond.

The data-target="#collapse2" attribute will add and remove a class named collapsed when clicked. The CSS in the JSFiddle has different styles when collapsed appear and disappear.

  1. I removed the data-parent="#accordion" attribute to allow show all and hide all. If this attribute is added like in the Bootstrap's example, then only one section can be expanded at anytime.

  2. A great website for looking up Bootstrap icons (if you don't want to use the up/down arrow button), click here: http://glyphicons.bootstrapcheatsheets.com/

Reference:
http://stackoverflow.com/questions/18325779/bootstrap-3-collapse-show-state-with-chevron-icon

 
over 8 years ago

I used Jasny's image upload plugin for Bootstrap to allow users upload images to a server. Later on, I had to populate a page with these uploaded images. Here is how I did it:

<!-- fileinput-exists is used instead of fileinput-new -->
<div class="fileinput fileinput-exists" data-provides="fileinput">
  <div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 200px; height: 150px;">
  <!-- add the following line -->
  <img src="static/thumb.jpg">
  </div>
  <div>
    <span class="btn btn-default btn-file"><span class="fileinput-new">Select image</span><span class="fileinput-exists">Change</span><input type="file" name="..."></span>
    <a href="#" class="btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a>
  </div>
</div>

That's it :)

 
over 8 years ago

Just found a great tool for debugging Django applications, the Django debug toolbar provides a toolbar to your webpage when DEBUG=True. It looks like this:

https://github.com/django-debug-toolbar/django-debug-toolbar

The toolbar will provides a ton of information, such as:

  • The number of database queries made while loading the apge
  • The amount of time it took to load the page (similar to Chrome dev tools' Timeline feature)
  • The content of your Settings file
  • Content of the request and response headers
  • The name and page of each static files loaded along with the current page
  • Current page's template name and path
  • If Caching is used, it shows the content of the cached objects and the time it took to load them
  • Singals
  • Logging messages
  • Redirects

To install it:

pip install django-debug-toolbar

Then, in your settings.py:

INSTALLED_APPS = (
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',  # <- automatically added by Django, make sure it is not missing
    'debug_toolbar',                             # <- add this
    'myapp',                                           # <- your app 
)

# static url has to be defined
STATIC_URL = '/static/'

# pick and choose the panels you want to see
DEBUG_TOOLBAR_PANELS = [
    'debug_toolbar.panels.versions.VersionsPanel',
    'debug_toolbar.panels.timer.TimerPanel',
    'debug_toolbar.panels.settings.SettingsPanel',
    'debug_toolbar.panels.headers.HeadersPanel',
    'debug_toolbar.panels.request.RequestPanel',
    'debug_toolbar.panels.sql.SQLPanel',
    'debug_toolbar.panels.staticfiles.StaticFilesPanel',
    'debug_toolbar.panels.templates.TemplatesPanel',
    'debug_toolbar.panels.cache.CachePanel',
    'debug_toolbar.panels.signals.SignalsPanel',
    'debug_toolbar.panels.logging.LoggingPanel',
    'debug_toolbar.panels.redirects.RedirectsPanel',
]

That's it. Start your server by

python manage.py runser

Load up your page in the web browser, you should see a black vertical toolbar appearing on the right side of your page.

 
over 8 years ago

A very useful GUI for browsing sqlite DB either on Mac or Windows:

http://sqlitebrowser.org/

sqlite browser let you:

  • browse DB content
  • modify DB content
  • execute SQL commands

One thing to note, you can edit the content of your DB using this tool. After you make some modifications, make sure click on 'Write Changes' on the top to apply the changes to the DB.

 
over 8 years ago

RStudio的制作公司提供了一个叫RPubs的网站,该网站可以让用户在RStudio内将自己制作的R Markdown文档上传至该网站以便共享。

分享的方法是:

  1. 在Rstudio里穿件一个R Markdown文档
  2. 文档编写好后,点击上面工具栏里的 Knit HTML (注:确保这个文档的保存地址里没有中文出现。不要使用中文文件夹或者文件名) 3.当HTML生成好后,点击上面的Publish

如果出现下面错误:

Error in function (type, msg, asError = TRUE) : 
SSL certificate problem: unable to get local issuer certificate
Calls: rpubsUpload ... <Anonymous> -> .postForm -> .Call -> <Anonymous> -> fun
Execution halted

官方给出了解决方法

  1. 在Rstudio的命令行里输入
    file.edit('~/.Rprofile')
    
    这时,一个叫.Rprofile的文件会被打开。在里面输入:
    options(rpubs.upload.method = "internal")
    
    然后保存,Session -> Restart R,将R重启。然后再次打开生成好的HTML并Publish就可以了。(别忘了先去官网上注册个账号并登陆)。

P.S. 注意: 所有上传的文档都是公开的,所有人都能看到。

 
over 8 years ago

主题

Soda theme


Predawn theme

Spacegray theme

字体

Dejavu
编程推荐使用它的Sans Mono字体类型

Source code pro
Adobe推出的免费字体,主要用于用户界面上的文字。

 
over 8 years ago

最近刚刚接触到R,在学习过程中发现一个问题。我有一组数据大概是这样:

Year     Percentage
1950        20%
1955        21%
1960        22%
...

在我画图时报错:

> ggplot(china, aes(x = year, y = n)) +
  geom_line()

geom_path: Each group consist of only one observation. Do you need to adjust the group aesthetic?

通过检查变量类型,发现年份数据是Factor类型而不是Numeric类型:

$ year   : Factor w/ 21 levels "1950","1955",..: 1 2 3 4 5 6 7 8 9 10 ...

后来在Stackoverflow上发现了解决方案:

as.numeric(as.character(year))

year这个变量被做了两次转换,第一次是把它从Factor类型转换成Character类型,然后再从Character类型转换成Numeric类型。为什么不能将year直接转换成Numeric类型呢?我尝试了直接转换:

> as.numeric(china$year)
 [1]  1  2  3  4  5  6  7  8  9 10 11 12 13 14 15 16 17 18 19 20 21

原本1950, 1955, 1960 ... 被转换成了1, 2, 3... 这样的问题在于,当你绘图时,X轴上原本应该显示年份,但却被1, 2, 3所代替:

所以为了避免出现这种情况,需要对数据进行两次转换。


刚刚发现了另外一种方法:

ggplot(china, aes(x = year, y = n)) +
  geom_line(aes(group=1))

但需要注意的是,如果要加入X轴坐标的话,需要使用:

scale_x_discrete  #不能使用scale_x_continuous,因为年份数据不是连续性的
 
over 8 years ago

R的安装还是很简单的,在cran上找到下载连接,然后下载安装包就好了。同样,安装后续的Rstudio也是如此。将两个软件都安装好后,试着在Rstudio里安装第三方的Library时,命令行里总是报错:

Solving R error "tar: Failed to set default locale" in Mac OS X
write the following in terminal

有高人给出了解决方法,打开Mac的Terminal,然后输入下面这个命令就好了:

defaults write org.R-project.R force.LANG en_US.UTF-8
 
over 8 years ago

Sublime的大名已经无需我介绍了,首先先介绍如何启用插件安装功能:

  1. 打开Sublime 3,然后按 ctrl+` 或者在View → Show Console
  2. 在打开的窗口里黏贴这个网站上的代码(注意: Sublime 2和3所黏贴的代码不一样,注意选择):https://packagecontrol.io/installation
  3. 安装完成后,按 Ctrl+Shift+p (Windows) / Command+Shift+p (Mac), 输入'Install Packages',之后Sublime会自动下载插件列表,然后弹出一个小的下拉菜单让你填写想要下载的插件名称。

注:

  • 第二步中的网站如果打开困难请翻墙,这年头不翻墙连个程序都没法好好写。
  • 第三步在选择完 Install Packages后,会出现卡住的情况,Sublime最底端的状态栏里会有一个 '=' 符号在来回移动。这个的意思是正在下载插件列表中,请稍后。 插件列表的下载跟墙也有关系,总之不会很快就是了。

接下来是本文重点,前端开发的几个必备插件(越靠后的几个越实用):

CSS3

链接: https://github.com/y0ssar1an/CSS3
简介: 支持CSS3里的语法高亮。(Sublime3里自带的CSS高亮不够用)。安装后, 打开一个CSS文件,然后按照下面GIF操作,将CSS3高亮作为CSS文件的默认高亮:


安装: Ctrl+Shift+P → Package Control: Install Package → CSS3

Sidebar Enhancement

链接: https://github.com/titoBouzout/SideBarEnhancements
简介: 让Sublime的侧边栏多出许多必备功能,如在浏览器中打开,改名,复制文件链接等等


安装: Ctrl+Shift+P → Package Control: Install Package → SideBarEnhancements

Git Gutter

链接: https://github.com/jisaacks/GitGutter
简介: 如果你使用Git做版本控制的话,这个插件可以在行号前标记处哪些行是新加的,删除的和修改过的。


安装: Ctrl+Shift+P → Package Control: Install Package → GitGutter

Bracket Highlighter

链接: https://github.com/facelessuser/BracketHighlighter
简介: 高亮各种括号的起始和结尾


安装: Ctrl+Shift+P → Package Control: Install Package → BracketHighlighter

HTML-CSS-JS Prettify

链接: https://packagecontrol.io/packages/HTML-CSS-JS%20Prettify
简介: 编辑HTML, CSS, JS时,经常会出现缩进不对,代码行不对其的情况。装了这个插件之后,只要按下Ctrl+Shift+h (Windows), Command+Shift+h (Mac), 你的文档就会被整理干净。
安装: Ctrl+Shift+P → Package Control: Install Package → HTML-CSS-JS Prettify

livestyle

链接: http://livestyle.emmet.io/

简介: 这货太神奇了。在调试页面的样式时,经常会打开Chrome自带的开发者工具,然后编辑CSS,等满意了再把CSS代码黏贴回Sublime里。这货允许你在Chrome里修改CSS,然后相对应的在Sublime里的CSS文件就自动更新了!(你更新Sublime里的CSS并保存,打开的网页也会自动更新)

安装: 需要安装两个插件,一个是Sublime的插件,一个是Chrome的插件。
Sublime插件: Ctrl+Shift+P → Package Control: Install Package → LiveStyle
Chrome插件: https://chrome.google.com/webstore/detail/emmet-livestyle/diebikgmpmeppiilkaijjbdgciafajmg

用法: 先重启你的Sublime,然后打开一个CSS文件。然后在Chrome里打开包含这个CSS的HTML页面 → 打开Chrome的开发者工具,工具栏的最后会多出一个 LiveStyle选项:


看下方File mapping里被HTML页面引用的CSS文件会自动和Sublime里打开的同名CSS文件关联起来。如果名字都对的话你就可以在Elements里开始编辑CSS了。编辑好后看下Sublime,该CSS文件会被自动更新。

livereload

链接: http://feedback.livereload.com/knowledgebase/articles/86242-how-do-i-install-and-use-the-browser-extensions

简介: 该软件需要付费($9.99). 这款软件不算是Sublime的插件,但是开发的时候非常必要。功能和上面介绍的livestyle类似,就是源码文件有所改动的话,打开的网页页面也会自动刷新。(但是不支持在网页里直接改源码,然后反向刷新源码文件)软件源码其实是开源的,但是Mac客户端要收费。其实就60块RMB,但是在开发的时候真是省了不少力气。Windows版是测试版,免费。

安装: 需要安装两个部件,一个是Mac客户端,一个是Chrome插件。

Mac客户端:http://itunes.apple.com/us/app/livereload/id482898991?mt=12
Chrome插件: https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei
如果你使用Safari或者火狐,请到这个页面上找相应的插件:http://livereload.com/extensions/

用法: 先将客户端打开,然后在这个窗口里点 '+' 添加你源文件所在的文件夹。然后在Chrome里打开相应的HTML文件,并点击Livereload插件的图标,如果图标里的圆点变成实心,则表明已经和客户端链接完成,可以开始同步修改了。

Emmet

链接: http://docs.emmet.io/abbreviations/syntax/
简介: 通过一套简单的语法让你快速生成大量的HTML代码,比如输入:

div.row>ul>li

然后按TAB会生成:

<div class="row">
    <ul>
        <li></li>
    </ul>
</div>

虽然要背一下语法,但是只需要记忆最常用的几个就好。效率提升杠杠的。

安装:Ctrl+Shift+P → Package Control: Install Package → Emmet

其它:

以下插件要看你的个人需求,视情况而定:

Advanced New File

链接: https://packagecontrol.io/packages/AdvancedNewFile
简介: 通过Sublime里的输入框来新建一个文件。Windows上按Ctrl+alt+n激活,Mac上按Command+alt+n激活。感觉有了SidebarEnhancement后,这个就没啥大用了。
安装: Ctrl+Shift+P → Package Control: Install Package → AdvancedNewFile

Djaneiro

链接: https://github.com/squ1b3r/Djaneiro
简介: 如果你使用Django框架开发,这个插件会添加以下常用的Snippet,帮助你编辑模板的时候少打些字。如果你有Pycharm的专业版,那就不需要这个了。
安装: Ctrl+Shift+P → Package Control: Install Package → Djaneiro
用法: 安装好后会多出一种文件类型 'Djaneiro → HTML (Django)'。输入'if'然后按Tab的话会自动转换为

{% if  %}
    
{% endif %}

请打开它的网站链接,上面有所有支持的命令列表。

Bootstrap 3 Snippets

链接: https://github.com/JasonMortonNZ/bs3-sublime-plugin
简介: 在Sublime里添加了很多常用的Bootstrap 3的快捷。但前提是需要记住这些快捷的名字。。。
安装: Ctrl+Shift+P → Package Control: Install Package → Bootstrap 3 Snippets

Package Sync

链接: https://packagecontrol.io/packages/Package%20Syncing
简介: 可以同步你多台机器上Sublime的配置和安装包。目前还没测试过,但应该能用。


References:

https://www.youtube.com/watch?v=NrYzJz1P4fE
http://limestrap.blogspot.in/2013/09/12-first-bootstrap-3-page-with-sublime.html

 
over 8 years ago

Be yourself. Everyone else is already taken.

From Momentum