optimizing svg images

Inkscape – the free open source alternative to Illustrator – automatically saves files as svg [scalable vector graphics]. Once you save your file, go to this editor which is the SVG Editor and upload your svg file. Click on Optimize and it will optimize your svg file. At the bottom right of the editor you will see the original size and then the optimized file which you can then download.

 

optimized

If you want the editor on your desktop, you may download it also from github.

If you are using illustrator, then you need to “save as” svg and when the panel opens, and optimize at will. You may also get the SVG code from it.

Once you get the final code whether from Inkscape or in Illustrator you can copy xml code to your site and animate or customize it at will. Note that in Inkscape there is also an xml editor under Edit menu. In addition, svg could be opened in a regular text editor and you will view the code there.

You may learn more about optimizing and using svg for animation on this site.

how to get started with Git

git-logoGit – if you still don’t know what it is – is a “collaboration, code review, and code management for open source and private projects”. It is being used increasingly in project management and team work in development. Of course there is much more to Git than what I wrote here – but this is only to get you started.

Git to get you started:

 

  • Install Git and use all default configurations. To get a good install go to http://git-scm.com/downloads
  • Go to the folder you have created on your desktop for your project by typing $ cd desktop [or whatever the path to your folder is]
  • Write $ git init to initiate that folder
  • set your user name and e-mail address. This is important because every Git commit uses this information, and it’s immutably baked into the commits you start creating:
  • $ git config –global user.name”John Doe”$ git config –global user.email johndoe@example.com
  • Git comes with a terminal and a GUI. When in doubt, use the GUI [though I don’t recommend it].
  • In windows, you may right click on the desktop and the Git menu will show up.
  • In Macs just go to utilities and find the Terminal.
  • Configure your default text editor eg
    $ git config –global core.editor emacs
  • You may head over to documentation http://git-scm.com/book/en/v2/Getting-Started-First-Time-Git-Setup and/or you may also try codeschool’s Git https://try.github.io/levels/1/challenges/
  • To check what’s happening on git all the time, type
    $ git status
  • To make a new directory that is a Git repository specify the directory:
    $ git init “directoryname”
  • Now you can start adding files to Git
    $ git add “filename” or to add entire directory $ git add . [note the period at the end which means add all]
  • To add a directory that is in some folder on your desktop just type
    $ git add pathtodirectory
    $ git add desktop/webs/somefolder/yourfolder/
  • Now we want to commit adding them to our repository:
    $ git commit –m “adding files” [if you don’t write the –m it will ask you for an your text editor’s name and if it doesn’t find one it will not commit].
  • To put files to the server – create an account on github.com
  • You may create a new repository on it or you may just leave it empty.
  • Push your files to github by writing:

               git remote add origin https://github.com/yourlogin/nameofrepo.git
git push -u origin master

  • It will ask you for the login and password for your github. Write them down. If you don’t see the password being written, that’s because it is a hidden password [duh!]
  • Now you’re done!

 

 

jquery, css3 and html5 tips

Here are some helpful tips, tools and code for jquery, css3 and html5:

  1. – a new design tool
  2. Supersized background slideshow jquery plugin
  3. animated background headers
  4. Tooltip Styles Inspiration
  5. Alerts… but awesome. 🙂
  6. Freebie photography, tools, and other stuff
  7. CSS3 pre fix tool
  8. CSS3 Icons
  9. interactive infographics
  10. Make the most of your design with hero headers
  11. cheat sheets for design
  12. 10 basic tips about responsive design [really good]
  13. Toolbar.js
  14. html5 use responsibly
  15. 44 Free Responsive website templates

privacy matters

The Free Software Foundation is currently engaging in several campaigns that we should all join.

There is the Privacy Pack from Reset the Internet

And finally there is the Tor Challenge from EFF