Tag Archives: CSS

How to create a stroke around a number with CSS

I recently had to find out how to do this while working on a site a couple weeks ago and thought I’d share. So, what we’re making is this.

Screen Shot 2014-10-26 at 9.25.07 PM

HTML

https://gist.github.com/anonymous/f92fdf33d279c725f435

From the above HTML you can see we first create three layers:

  1. a background (black solid background with rounded corners)
  2. a stroke (a white circle)
  3. another inner-circle with a number in it (black circle inside of the white one

CSS

https://gist.github.com/anonymous/45ad0a806120d297f5db

There are essentially three layers here. The background is an obvious one. The stroke is a white background <div> that is made into a circle with border-radius and some padding. This allows us to fit the inner circle (also a <div> made into a circle)  into the previous white circle which creates the illusion of a stroke with some padding. So, black square, white circle (with padding), black circle.

You can fiddle with this.

Hash 1.1: IRC/HipChat-like chat system built on PHP, jQuery, HTML, & CSS

First off, this is my first post about Hash, a “secret” chat project I’ve been working on to replace my personal IRC woes (mainly IRC logging). Don’t get me wrong, I love IRC, but I also love HipChat, but I hate that HipChat list closed….you get the point. Plus I needed something dead simple, no logins, no signups, just chat…

Hash is a simple IRC-like, HipChat-like (mainly in that it has persistent chat), (PHP, jQuery, HTML/CSS)-based chat system. So anyone can use a Hash install to use.

Screenshot showing Hash collecting nick and hash names

Here’s how it works. All you do is create a room (which I call a hash, because you hash things out), and pick a nick. No login. No password, in fact two people (at the moment) could use a single nick or login as many. Then, chat. Notifications let you know when something new is said. Chat history is persistent.

It’s developer friendly, which only really means it’s easy to create rooms, share them, and assign people nicks because the chat uses ?hash=&nick= to start the person loading the hash off with a hash and a nick. Easy for inviting clients into chat rooms by just giving them a link.

Hash 1.1 will continue to make small improvements to make Hash more useful. I have been using it, and it appears to be stable enough to use, again for private purposes. Not sure about public use yet, but I need it for a few new things, and so 1.1 will get those features.

You can try out Hash on my site where you can make a hash and start chatting away with someone else. I’d love to see people use it and give feedback.

Want to help? Check out Hash on Github. There are some issues that need some help.

Aubrey’s gVim 0.1, Vim/gVim for editing/coding HTML, CSS, PHP & Javascript

Note: A newer version of Aubrey’s gVim is available.

This project arises out of my desire to make gVim/Vim work for me as an HTML, PHP, CSS & Javascript developer. As I continue to make it better and better, for me, I am going to release editions of my gVim/Vim as an install-able application for Windows called Aubrey’s gVim. I’m being the change I’d like to see in the world, and I was looking for a Vim that acted more like my Vim.

My goal is to make gVim/Vim act as comfortably as possible as an HTML, PHP, CSS and Javascript editor. Previous editors I have used were Notepad++, Komodo Edit, Textmate, and Sublime Text. I have customized Vim to be a replacement for them and I have also customized Vim to function like them, in terms of common editor usage. This means my gVim/Vim is not your typical Vim configuration. It has been configured to work more like the previous editors I had used before while obtaining the strengths of Vim.

Features and Configurations

  • Code Indentation using preserveindent, copyindentfiletype indent off
  • Tabs over Spaces
  • Tab width of 4
  • Zen Coding
  • Surround blocks of code with text
  • Autoclose HTML Tags
  • Autocomplete "'{[(, etc
  • Pathogen for Plugins
  • Select Mode <Shift>+<Up|Down|Left|Right> selects in Visual Mode
  • Consolas font
  • Visual Tabs
  • Folds Disabled
  • Edit PHP files with embedded HTML, CSS and JavaScript code and highlighting
  • Jellybean Color Theme
  • Insert mode at start, use <ESC> to enter command mode.
  • Arrow keys preferred over hjkl
  • No swap or backup files created
  • Shifting blocks of code using <Tab> and <Shift>+<Tab>
  • Designed to fill a 1366 X 768 screen on startup
  • Start NERDTree using <Alt>-<N>
  • Snippets using snipMate (activated using <Tab>)

Download

Currently Aubrey’s (my) gVim/Vim works only on Windows (the platform I am currently using Vim on).

aubreysgvim-0.01.exe [Installation File]

Installation

[iframe src=”http://www.youtube.com/embed/_yFdwBIMo8E” width=”100%” height=”340″]

I have no clue how the installation will act on your system, though I have tested the install on virtual machines on different platforms, and it has worked well. The only hitch is that you will get a warning when you first launch Aubrey’s gVim asking you to register it with your systems registry. You can see how the installation works in this video.

Diving into Vim/gVim on Windows; How I customized Vim to edit HTML, CSS, Javascript and PHP w/ ZenCoding, SnipMate, Surround and DelimiMate

Different Flavors of Vim

I have released my gVim configuration as an installable application for windows, check it out: Aubrey’s gVim

It all started with an annoyance with Notepad++, the CTRL+Y (Redo) key was not working and a NetTuts screencast. About two months ago I complained about VIM, yet I still have an itch to use it.  I spent all day yesterday trying to get Vim going, and today I find myself frustrated again. Vim is very customizable, something I really like. But, that customization should ‘just work,’ hell I can’t even get a plugin installed correctly!

I installed a few different forks of Vim (called Cream) and a few vimrc/plugin combinations. But, I have currently reverted to base install gVim/Vim for Windows and started fresh. I will share my finding below.

[adsense metakey=”adsense-1″]
  • This video helped me figure out plugins and how Vim uses folders and files. I used this video as a guide to install (and understand) pathogen and install ZenCoding.
  • I copied the content (extracted on my desktop) of Zencoding.zip to the bundle folder. This should automatically load your plugin since I installed pathogen.
  • Loaded gVim and typed div
  • ZenCoding gave me hell, real hell, because I couldn’t figure out how to expand the abbreviations. But, after a little digging around, I found out <c-y> means type: CTRL+Y then a comma (,). I have a feeling Vim explanations like this are going to cause me not to use Vim. It worked though.
  • I opted to install more plugins, starting with snipMate.
  • I started installing most of the plugins mentioned in this post, or in this post under the ‘Most of the bundles are git submodules facilitating easy updating and configuration’ section. Note, I did not opt to use the Ultimate Vim config, just the plugin suggestions he was giving.
    • The first was the colors. Once I installed it into the bundle folder, I could use (in gVim) the command “:color bluegreen”. For a list of the color schemes, I found this.
      • I had to edit my c:Program FilesVim_vimrc file and added “color bluegreen”.
      • Note: there is a menu, but it does not save the theme you are using as permanent.
    • Then I got to tcomment, and discovered (once I followed the install directions, not putting it in my bundle folder) that it seems to have installed in C:Program FilesVimvimfilesbundleColorSamplerPackautoload, which is kind of weird.
    • I installed HTML AutoCloseTag, but not with the bundle way, that did not work. I followed the install directions (putting it in C:Program FilesVimvimfilesftplugin) and it worked. I typed <body> and it would </body> and put my cursor in the middle.
      • I added au FileType xhtml,xml,php so c:/Program Files/Vim/vimfiles/ftplugin/html_autoclosetag.vim to my _vimrc file to make it work in PHP files also, because often I an doing PHP/HTML coding in a single PHP file.
    • At this point I was starting to feel comfortable with Vim plugins (finally!)
    • I installed delimitMate, which gives you auto completion of ",',[,{,( etc. I used the bundle method for that and downloaded the zip file; I did not use Git.
    • At this point, I was happy with the plugins I had.
  • Now I wanted to start customizing my _vimrc file. I found this post, which gave me a good look at the things I could customize.
    • At this point I was actually editing my _vimrc file using gVim.
    • I noticed CTRL+V worked for paste! Although I did want to use Vim, I did not want to ignore my normal keys. CTRL+C,V,X, etc and the arrows.
    • Here is what I pasted into my _vimrc file:
      set autoindent
      set smartindent
      set tabstop=4
      set shiftwidth=4
      set showmatch
      set guioptions-=T
      set vb t_vb=
      set ruler
      set incsearch
      set virtualedit=all
    • Again, I had to do a :w! to write the file in Vim since it was in C:Program FilesVim.
    • I found this _vimrc file which had a lot of custom things I wanted. I added these to my _vimrc file. I did not overwrite my _vimrc file, just took what I wanted out of it.
      set number
      set guifont=Consolas:h10.5
      "set guioptions+=b "show horizontal scroll bar
      set ttyfast
      set ignorecase
      set list
      set listchars=tab:>-,trail:-
      set showmode
    • Then I noticed all the ~backup files that were getting created, annoying! I added set backupdir=c:temp to my _vimrc file and they were all stored in c:temp. I like the idea of having a backup, just not in the folder I am working in.

And now to see how it goes. I am going to create a separate post for this, but I am going to ZIP up my Vim folder and offer it as a start-off solution. I am probably going to use Vim/gVim for a couple days to edit HTML, CSS, Javascript and PHP and see if it works well first.

Hackers Anthem

If you’re hacker you will understand these (without clicking on links!). I call it the Hackers Anthem, and I wrote it today just thinking about what it means to be a ‘hacker’ nower-days. I want to start a project and GPL this and allow others to add to it.

  • I can make money by using tubes that get hit on all day.
  • I blog that Haiti and mail is not hexed and mail, and that si` es yes is not in Spanish, but in English.
  • Many will benefit once they reddit.
  • I build stand hard tables, and it’s helped me to spread my handle throughout the Twitterverse.
  • I live out of backpacks and drink java and my office is always open.
  • I only get charged low payments, under two dollars, to work at Pikes Peak!
  • I press word with.each(key).chain.
  • I know the only function(‘of a function(is to be a function(){for (i<3; to style selectors on a dark canvas && a bespin theme; plus plus) I know Code is Poetry;})’){that returns nothing sometimes.}
  • I’ll Google php.net all day determined to make my F5 fade away, because that’s the life (of a) hacker.
  • Let me take command and I’ll have a shell of a good time!
  • I’ll samba and share the good vi -b before I | exit.
  • I make cookies that taste like wowsers, that I virtually tested until I’m, finally refreshed.
  • I’ll do 6-8 which are not that great. But, I’ll do 9, but not 10, and never have to do it again.
  • I’ll get a little foxy and shine my chrome while I’m on Safari.
  • You are in hell when you try and navigate for seven points though.
  • I’ll get people who hate this.style love this.style.
  • I have faced the books have a pro for a while.
  • In word, hackers unyte when I hit enter there, but I’m never 🙂 when I copy from there.