Data, Maps, Usability, and Performance

API canvas d3 data geo GeoJSON html5 image JavaScript json maps mysql PHP WordPress

Results for tag: css

20 Free Clean and Minimalist Portfolio WordPress Themes for Seamless Web Development

If you are an artist, photographer or other creative personality, running a portfolio site is essential. Otherwise, what’s the purpose of doing your job if you don’t show your achievements to the world? If you share this point of view, then our blog post today should prove useful to you. Ordering a custom-made design can cost you a fortune. If you are on a limited budget or simply not ready to spend much on a custom-made design, then a freemium website template is just what you need to achieve success.

Today, we have handpicked 20 beautifully designed free portfolio WordPress themes that you can safely download and use for different purposes. Why did we decide to share a compilation of WP themes, you might ask? Well, the answer is simple. According to CMS Usage Statistics by BuiltWith, the WordPress market share has reached 49.47%, and this percentage is only expected to grow with time. The world’s most popular companies have chosen WP from among thousands of other Content Management Systems with which to build their sites. For instance, TechCrunch, The New York Times, Coca-Cola France, Fortune, The New Yorker, and many other well-known names have trusted their online presentation to WordPress. So, if you want your business to gain international recognition, then choosing WP for building an online portfolio would be the right solution.
Read more

CodeMirror vs Ace Editor

online code editors

There are a lot of online code editors out there and I have aggregated 30 Code Playgrounds in the past. There are also mini code editors, all kinds of browser editors, and some cool ways to write, save, and preview code with developer tools. Since HTML, CSS, and JS is all processed on the client side it makes sense to bring code editing to the browser. Today, I am going to take a look at two JavaScript libraries that enable online code playgrounds with all kinds of code editing features: CodeMirror and Ace Editor. I am also going to create my own mini code playground with these tools to see which one I like more.
Read more

Clip Map Images on Text Background

images on text with css background

I was looking at my clipping map tiles example where I clipped some imagery behind a word created with GeoJSON paths and wondered if I could just use a normal font which would clip a photo using css background URL attribute. It would be cool to see how map tiles can be rendered as CANVAS tiles, combined into a single canvas, converted into an image, and then applied in a CSS background attribute to clip imagery behind text. Instead of converting text to GeoJSON paths, I want to make an online tool that does all the magic for me with regular text, CSS, and CANVAS.
Read more

Amazing CSS Demos

CSS Experiments

Since my previous post covered some cool JavaScript visualizations, I also wanted to talk about some amazing CSS demos. I am focusing on CSS only, especially CSS3, where you really have the power to create interesting experiments and animations. Just take a look at these CSS shadow experiments or how about some CSS patterns? Simurai also has some awesome CSS experiments. Below you will find a list of some amazing pure CSS demos:
Read more

30 Code Playgrounds and Sharing Tools

code toolbox

Most people know about jsFiddle because it is an amazing tool that allows you to quickly test and share small pieces of code. No wonder my jsFiddle examples post is getting a ton of traffic. But, there are many other awesome web based sandbox testing tools that you might find useful. Did you know that there are SQL and NodeJS sandboxing tools out there? It is so convenient to quickly mess around with code online and collaborate with other programmers. Below you will find some of the best free code playgrounds and sandboxing tools for testing, debugging and sharing your code snippets (I put my favorites in bold).
Read more

HTML5 Starter Frameworks and Boilerplates

HTML5 Boilerplate

The HTML5 Boilerplate is a really popular staring place for front-end development today and I have to agree that it is pretty awesome. You can also select a mobile version and a boilerplate for emails. Personally, however, I like to start with much less. This boilerplate has many things (htaccess file, robots.txt, polyfills) that I am not really concerned about when just stating out; I want something simple. If you click on the “Get Custom Build” link, it takes you to Initializr, which then let’s you generate the HTML5 boilerplate customized to your liking. I love the various things you can select, like Bootstrap, and all the things you can deselect. I highly recommend using Initializr as a starting point, but below I will cover many more options to consider when choosing a boilerplate.
Read more

10 CSS Examples from Dabblet

Dabblet Examples

Have you used Dabblet yet? It is a similar service to jsfiddle and codepen but just focused on CSS and HTML. It describes itself as an interactive CSS playground and code sharing tool that saves to GitHub. It looks pretty cool but I don’t really understand why you wouldn’t just use JSfiddle or another service that also allows HTML and CSS plus more, like JavaScript. I doubt it will take off but I would like to share 10 cool examples that I have found on Dabblet:
Read more

Best Programming Cheat Sheets

Web Development Cheat Sheets

Cheat Sheets on Web Development are a great way to quickly look up information. I was not aware that there are many really good programming-related cheat sheets out there for many subjects in different formats. Lots of topics, from JavaScript, jQuery, CSS, and HTML to Perl, mySQL, Regex, and even more specific subjects like mod_rewrite, Google Analytics parameters, and object oriented design. In terms of format, I think PDF’s are best because they are nice to view and easy to print. Over time, I have collected some of the best Programming Cheat Sheets and the links below will take you straight to the PDF version of these awesome references:
Read more