teleren/devto huggingface dataset:
Image Preloading in CSS
Tags: tech, frontend
Published: 2018-10-05 19:11:02

---
title: Image Preloading in CSS
published: true
tags: tech,frontend
canonical_url: http://dangerisgo.com/blog/2013/02/22/image-preloading-in-css.html
---

Something that I hadn’t thought about in a while was image preloading in css. The other day I sent [Matt](http://busticated.org) a code review because the way he was preloading an image was causing some odd behavior. We talked about it and could not think of a good solution, or better preload option so I removed his preload CSS (below).

```css
html {
    background: url(/path/to/image.jpg) no-repeat -1000px;
}
```

In most cases, I think this method would work but in our case, it was causing pages with short content to have an unstyled block of white on the bottom of the page. I wasn’t sure how to tell him to fix this, we really didn't want to go the old JS route but could not find a way to do this in CSS.

Then for no reason, I was poking around the source of [http://foundation.kr](http://foundation.kr) and found this little gem that made total sense to me.

```css
body:before {
    content: url() url() ...;
    display:none;
}
```

My first thought was “Oh my gosh this is amazing!”. Then I started wondering if the image would download because `display:none`. I updated our code to use this method of preloading and IT WORKED! I grabbed Matt and showed him and he asked the same question I did about the display property. Because the image url is the content of the pseudo-element it gets downloaded regardless of the display property. Unlike background images which don’t get downloaded until the image display is something other than none.

And the best part about this method is you can have as many `url()` in the content and they will all get downloaded!
How We Grew Out of Bootstrap
Tags: cheezburger, tech, frontend
Published: 2018-10-05 19:09:20

---
title: How We Grew Out of Bootstrap
published: true
tags: cheezburger,tech,frontend
canonical_url: http://dangerisgo.com/blog/2013/02/14/how-we-grew-out-of-bootstrap.html
---

When we started our redesign of the Cheezburger network we had the daunting task of building a front-end framework that met the needs of not only our developers but our vast network of sites. After many meetings, grueling discussions and attempts at DIY we finally choose [twitter] [Bootstrap](http://getbootstrap.com). It was the ‘it’ framework and had just reached its 2.0 milestone, so why not?

Going into this we had no idea how to take bootstrap and make it Cheezburger. We initially tried to “extend” Bootstrap by overriding styles in our own chzboot library. This proved to be less than ideal since we were duplicating code for everything we wanted to extend. Eventually, we merged our changes with Bootstrap core and forfeited any upgrade path to newer versions.

Our own pseudo fork of Bootstrap has worked well throughout. However, as our design has changed and matured we have begun to migrate away from the Bootstrap core components and build our own. It was nice to have Bootstrap to fall back on when we needed a quick UI treatment for something, but now we have our own style guide and documentation around what components to use and how to use them. If something isn’t in the style guide then we need to build and add it to the bucket of things that can be reused later.

It has become difficult to develop our own components along with maintaining existing Bootstrap based components. Finding parity between what Bootstrap offers and the needs of our sites is the one thing that has effectively driven us away from continuing to use Bootstrap as our core foundation. We have talked about completely removing anything Bootstrap from our code and rewriting components, but that is a task that isn’t logical at this time. Eventually, as we continue to mature our code Bootstrap will play less of a role.

Ultimately we grew out of bootstrap not because it’s a bad framework but because we grew up, we started needing things that were not in its core. We changed so much it didn’t make sense to continue to maintain a connection to the core library. We have maintained many of the naming and structural conventions that bootstrap employs but we don’t rely on its library of UI elements.

One thing I didn’t mention, when we made the decision to use Bootstrap over creating our own I pushed for it out of fear of “re-inventing the wheel”†. Throughout this experience I have come to believe you should not fear re-inventing the wheel, you should fear using a round wheel when you need a square one.

<small>† I don’t want to speak for <a href="http://twitter.com/b_sted">@b_sted</a>, <a href="http://twitter.com/marthakelly">@marthakelly</a>, or <a href="http://twitter.com/trademark">@trademark</a> but this was my biggest fear going into the redesign.</small>
Select A Character in a String with PHP
Published: 2021-01-28 21:47:53

---
title: Select A Character in a String with PHP
published: true
date: 2013-02-01 12:00:00 UTC
tags: 
canonical_url: 
---

I love finding little thing in PHP that I did not know before. They are generally not important or advanced but it's still very interesting. Here are a few I found recently:

Select a character with a string without using substr etc:

```
$string = '1234';
echo $string[1]; // 2

```

Another one i found was "\_\_halt\_compiler", it's one of the ones i have no real use for but interesting nonetheless. It basically stops the PHP compiler so you can just output HTML from then on without any more server resources being used.

```
__halt_compiler();

```

I shall no doubt find a lot more of these, and i will have no use for any of them more than likely.

<!--kg-card-end: markdown-->
Connecting to SQL over TCP/IP with Entity Framework
Tags: entityframework, csharp, sql
Published: 2013-01-31 22:35:00

---
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/y9hxcwi5y92j6zfcxbjx.jpg
title: Connecting to SQL over TCP/IP with Entity Framework
slug: connecting-to-sql-over-tcp-ip-with-entity-framework
date: 2013-01-31 22:35
tags:
 - entity-framework
 - csharp
 - sql
---
So this has caused me quite a headache, but I've finally managed to get it working. Code First Entity connecting to remote SQL server.

First the model classes:

    public class Blog
    {
        public int BlogId { get; set; }
        public string Name { get; set; }

        public virtual List<post> Posts { get; set; }
    }

    public class User
    {
        public int UserId { get; set; }
        public string DisplayName { get; set; }
    }

    public class Post
    {
        public int PostId { get; set; }
        public string Title { get; set; }
        public string Content { get; set; }

        public int BlogId { get; set; }
        public virtual Blog Blog { get; set; }

        public int UserId { get; set; }
        public virtual User User { get; set; }
    }

And the context that holds them together, notice how it has a connection string name in the constructor:

    public class BlogContext : DbContext
    {
        public BlogContext() : base("name=BlogContextConnection") { }

        public DbSet<blog> Blogs { get; set; }
        public DbSet<post> Posts { get; set; }
        public DbSet<user> Users { get; set; }
    }

Which relates to this connection string, which was quite a pain to get working. Note that this is using SqlClient not EntityClient:

    <connectionStrings>
      <add name="BlogContextConnection"
            providerName="System.Data.SqlClient"
            connectionString="Server=SERVER;Database=Blog;Integrated Security=False;User Id=USER;Password=PASSWORD;" />
    </connectionStrings>

Of course, you can connect with windows auth if you wish, but I'm doing this over networks LAN and internet so I'm not using integrated security. Just yet.
Regular Expression Tester Extension
Tags: visualstudio11, regex
Published: 2013-01-31 22:34:00

---
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/y9hxcwi5y92j6zfcxbjx.jpg
title: Regular Expression Tester Extension
slug: regular-expression-tester-extension
date: 2013-01-31 22:34
tags: 
 - visual-studio-11
 - regex
---
Currently on a bit of an extension trawl, to think that I've lived in the dark ages for the past year or so.

This one a lot of people will probably already have but here to go, Regular Expression Tester extension - so you can check your regex as you write it. Amazing.

Get it here:
[http://visualstudiogallery.msdn.microsoft.com/bf883ae3-188b-43bc-bd29-6235c4195d1f](http://visualstudiogallery.msdn.microsoft.com/bf883ae3-188b-43bc-bd29-6235c4195d1f)
Making Visual Studio 2012 look nice
Tags: visualstudio11
Published: 2013-01-28 22:31:00

---
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/y9hxcwi5y92j6zfcxbjx.jpg
title: Making Visual Studio 2012 look nice
slug: making-visual-studio-2012-look-nice
date: 2013-01-28 22:31
tags: 
 - visual-studio-11
---
So in line with my 2013 new years resolution to pull my finger out and become the developer I'm supposed to be, I have been checking out some of the new .NET stuff that is floating around nowadays. I'm loving most of it, some of the features of C# 3.0 and 4.0 I already know and use, but some of them are actually pretty awesome.

*One thing that isn't awesome is Visual Studio 2012 (Visual Studio 11).*

![Visual Studio 11 is ugly.](http://i.imgur.com/0zyvP5c.jpg)

I've been using VS since I was like 10, I had Visual Basic 6.0. I then moved up to Visual Studio .NET which introduced this new world of .NET applications. VB6 moved to VB.NET, people kept talking about something called C#.NET, and ASP.NET - all these dot nets. I was dubious at first but soon embraced it, by 2006 I was learning C# and using Visual Studio 2005. At some point I moved up to 2008, and it looked just how it should. The way Visual Studio had always looked.

But then I tried VS2010. My god, the dark colours, the changes, your eyes just focused on the editor and the rest was dark. It was horrible, at first. But then slowly you think actually it's not so bad, and then you like it, and then you love it. Visual Studio 2010 looked amazing.

And then Visual Studio 2012 hits. Hits, skids, and misses the mark that is.

I have yet to find one thing I like about it. I don't like the way it looks. I don't like the icon. I don't like the caps. I don't like the colours. It's ugly, it's blocky, it's a thousand steps back in the evolution.

But there is a fix, and I'm pretty happy with the way it's worked out.

**1. The first thing you want to do is install Visual Studio 2012 Color Theme Editor, found here:**
[http://visualstudiogallery.msdn.microsoft.com/366ad100-0003-4c9a-81a8-337d4e7ace05](http://visualstudiogallery.msdn.microsoft.com/366ad100-0003-4c9a-81a8-337d4e7ace05)

Install that extension and restart your visual studio. It'll prompt you to select a theme, take a look at them, but I chose Blue - the theme for VS2010.

**Update:** I have removed the links to the NiceVS extension as it just causes crashes, and also to the icon as, well, I guess I've just got used to the purple one.

Congratulations, you (should) now have a Visual Studio 2012 installation that doesn't make your eyes bleed... too much.
It has been another while.
Tags: general
Published: 2013-01-24 22:29:00

---
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/y9hxcwi5y92j6zfcxbjx.jpg
title: It has been another while.
slug: it-has-been-another-while
date: 2013-01-24 22:29
tags: 
 - general
---
It has been a while since my last blog post, around 12 months. I've had a busy year and done a lot of things. `[redacted]`, and done quite a bit of design work, learning Illustrator and In Design. I haven't done as much real coding as I would have liked. My Raspberry Pi sits on top of my home server and hasn't even been turned on yet.

But that's going to change.

I have decided to choose a specialisation. Too long have I spent my IRL talent points in all talent trees. It is time I chose a specialisation and started becoming an expert, rather than just a jack of all trades.

I will be posting here more often, will probably give this blog a nice update, and a lot more code as well!

Stay tuned random internet surfers, whoever you are, I will be sharing with you some gold nuggets over the next 12 months!

usque ad proximam tempus, amici .. until next time.
Prevent Emacs from killing "git commit" on C-g
Tags: emacs
Published: 2020-06-15 17:40:48

---
title: Prevent Emacs from killing "git commit" on C-g
published: true
date: 2013-01-20 00:00:00 UTC
tags: emacs
canonical_url: https://lepovirta.org/posts/2013-01-20-prevent-emacs-from-killing-git-commit-on-c-g.html
---

If you use Emacs and Git, you might have noticed that pressing control + G (`C-g`) while typing a commit message kills the whole commit process. Here’s how you can work around it.

<!--more-->

`C-g` in Emacs is used for cancelling commands. It also sends a SIGINT signal to Emacs. The signal is also passed to the parent process, git, which causes git to end the whole process.

The workaround is to prevent the signal from getting to git. One such way is to call Emacs within a shell script. Shells typically ignore SIGINT signals. Here’s an example of such script:

``` shell
#!/bin/sh -i
/usr/bin/emacs -nw "$@"
```

Here shell script starts in an interactive mode, calls `/usr/bin/emacs`, and passes all the script’s parameters to Emacs. Save the script somewhere in your `$PATH` (for example `$HOME/bin/emacs.sh`), and make git use the script as its editor:

```
$ git config --global core.editor emacs.sh
```

The same workaround works for Mercurial, too. Change the editor for hg:

```
$ hg config --config ui.editor emacs.sh
```

If you want to use the script as an editor for all the command line programs, just change the `EDITOR` and `VISUAL` environment variables in your shell’s initialization files:

``` shell
export EDITOR="emacs.sh"
export VISUAL="$EDITOR"
```

Sources:

  - <http://www.cons.org/cracauer/sigint.html>
Ctrl-Meta-Space in iTerm2
Tags: emacs, macos
Published: 2020-06-15 17:41:16

---
title: Ctrl-Meta-Space in iTerm2
published: true
date: 2013-01-19 00:00:00 UTC
tags: emacs, macos
canonical_url: https://lepovirta.org/posts/2013-01-19-ctrl-meta-space-in-iterm2.html
---

In Emacs, there’s a handy command called `mark-sexp`. It marks the rest of the current s-expression from the cursor’s position. It’s mapped to `C-M-SPC` (ctrl + meta + space) by default, which is compatible with terminal applications.

However, if you have option key mapped to `+Esc` in iTerm2, pressing ctrl + option + space is interpreted as meta + space instead. To fix this, you need to add an additional keybinding to your session’s key bindings.

<!--more-->

1.  In iTerm2, open: Preferences \> Profiles \> some session you wish to edit \> Keys.
2.  Add a new key binding by pressing the “+” button.
3.  Select the “Keyboard Shortcut” field, and press ctrl + option + space.
4.  Select “Send Hex Code” in the “Action” list.
5.  Type “0x1b 0x00” to the field below the list.
6.  Click OK and close the preferences window.

`C-M-SPC` now works in all the new terminal windows that use the edited session. You can also make the same changes for running terminals by editing the running session.
Using SignalR with RequireJS
Tags: tech, javascript
Published: 2018-10-05 19:13:04

---
title: Using SignalR with RequireJS
published: true
tags: tech,javascript
canonical_url: http://dangerisgo.com/blog/2012/11/09/using-signalr-with-requirejs.html
---

If you don’t know about SignalR and RequireJS

- [https://github.com/SignalR/SignalR](https://github.com/SignalR/SignalR)
- [http://requirejs.org](http://requirejs.org)

When I was building my app with SignalR and RequireJS there were two steps I needed before stuff would work.

## 1. Setup dependencies

I needed to wrap all my SignalR javascript so they will work properly with RequireJS.

```javascript
require.config({
    paths: {
        jquery: 'jquery-1.8.2.min'
    },
    shim : {
        "jquery.signalR-0.5.3": ['jquery'],
        "/signalr2/hubs": ['jquery', 'jquery.signalR-0.5.3'],
    }
});
```

Using the great shim feature of RequireJS 2. I can use non-AMD compatible scripts with RequireJS without manually wrapping them in define() statements. I also set the path for jquery because it is a named module and is required by the SignalR scripts.

## 2. Fix SignalR $.connection.hub.start()

I am calling SignalR’s $.connection.hub.start() from within a $(document).ready(). Even before I started using RequireJS to load my scripts this worked fine. However, after moving to RequireJS this stopped working. Why? basically, SignalR will by default delay starting your connection until the page has completely loaded. Enter the `waitForPageLoad` option on $.connection.hub.start(). This tells SignalR if you want to wait for the page to load before starting your connection which in my case I don’t. Simply set that option to `false` and it will start the connection when invoked instead of waiting. This fixed my issues and SignalR and RequireJS started playing nice together. Note: I am also using a callback on start() to make sure my connection has been established before using my server methods.

```javascript
$(document).ready(function () {
    $.connection.hub.start({waitForPageLoad:false},function () {
        // callback code
    });
});
```
Google's Mod_Pagespeed
Published: 2021-01-28 21:48:32

---
title: Google's Mod_Pagespeed
published: true
date: 2012-10-23 12:00:00 UTC
tags: 
canonical_url: 
---

> mod_pagespeed speeds up your site and reduces page load time. This open-source Apache HTTP server module automatically applies web performance best practices to pages, and associated assets (CSS, JavaScript, images) without requiring that you modify your existing content or workflow.

When I was in the process of setting up my new VPS, I decided I would try out mod\_pagespeed (conveniently it had just come out of beta a few days earlier). It turns out, it's very easy to set up and very easy to use.

First of all, you need to download the correct package at:

```
https://developers.google.com/speed/docs/mod_pagespeed/download

```

Once you have downloaded it, its as simple as running:

```
dpkg -i mod-pagespeed-*.deb
apt-get -f install
Or for CentOS you run
yum install at # if you do not already have 'at' installed
rpm -U mod-pagespeed-*.rpm

```

The default install includes things such as the minification of CSS and js files and also the combining of CSS files (js can be enabled too). Inline images, CSS, and js is also enabled by default, which allows these types of files to be included in the main HTML layout if they are small enough to justify doing so. This will save requests to the server for more files.

As well as the defaults, i decided to enable a few none default options in the config file:

```
/etc/apache2/mods-available/pagespeed.conf
The ones i decided to enable where the following:
ModPagespeedEnableFilters inline_preview_images # Load low quality images before loading high quality ones
ModPagespeedEnableFilters resize_images # Resize the images before serving them (These are then cached in Varnish)
ModPagespeedEnableFilters insert_image_dimensions # If any image does not have width, height set, then insert them
ModPagespeedEnableFilters combine_javascript # Combine javascript files into one file
ModPagespeedEnableFilters collapse_whitespace # Minify the HTML output of the page
ModPagespeedEnableFilters resize_mobile_images # Resize smaller images on mobile
ModPagespeedEnableFilters remove_comments # Remove comments from JS,CSS and HTML files.

```

Some are not 100% ready for production but the risk value of them is quite low.

From initial tests, it seems to have reduced the page load by about 1/3. Which on a small site may not be a lot, but on a big site with a lot of images etc, this could be a huge saving in bandwidth costs, and also a lot nicer experience for the user.

<!--kg-card-end: markdown-->
Copy SSH Keys to Server
Published: 2021-01-28 21:49:04

---
title: Copy SSH Keys to Server
published: true
date: 2012-10-12 12:00:00 UTC
tags: 
canonical_url: 
---

When you wish to log in to a server without having to enter a password, all you need to do is log in with SSH. However I do not know why, but it took me hours to find a simple way to do this a few years ago.

First of all, you need to generate your SSH keys using the following:

```
ssh-keygen
```

From this point, I generally just hit enter and use the defaults. You can set a password, but that can get annoying.

Now you need to copy the SSH keys to the server you wish to log in to. I have found many ways to do this, but none have been as simple as the following:

```
ssh-copy-id username@server.com
```

You will then be asked for your password for the last time. Once this has complete, you will be able to login to the server using just:

```
ssh username@server.com
```
<!--kg-card-end: markdown-->
Simple Memcache In PHP
Published: 2021-01-28 21:49:26

---
title: Simple Memcache In PHP
published: true
date: 2012-10-07 12:00:00 UTC
tags: 
canonical_url: 
---

In the past year or so I have been using caching more and more. It has become a massive part of my job, and pretty much the whole site depends on it, and without it, things would start to fall over very quickly.

Here is a basic example of using Memcache in PHP:

```php
$cache = new Memcache;
$cache->connect('127.0.0.1', 11211);

function getPosts()
{
    $cache_key = 'getPosts';
    $posts = $cache->get($cache_key);

    if ($posts === false) {
        $posts = DB::query('SELECT * FROM posts');
        $cache->set($cache_key, $posts);
    }

    return $posts;
}

```
<!--kg-card-end: markdown-->
Install Varnish Cache on cPanel Server
Published: 2021-01-28 21:41:43

---
title: Install Varnish Cache on cPanel Server
published: true
date: 2012-09-29 12:00:00 UTC
tags: 
canonical_url: 
---

I have had issues installing [Varnish Cache](http://scottymeuk.in/Joxt) on a cPanel VPS for some time. The main reason is because of the way cPanel deals with the Apache vhost files. It separates them all out into different files for each domain, which makes things very hard when you need to edit them.

Recently, i found a solution for this, and that is the plugin named ApacheBooster. It takes away the pain of installing Varnish on a cPanel server, and makes things a hell of a lot quicker to get setup.

This has helped me reduce the amount of time the images load quite dramatically, and it has also meant that my VPS has more free resources for PHP etc.

To install ApacheBooster on a cPanel server, do the following:

```
wget http://prajith.in/downloads/apachebooster.tar.gz
tar -zxf apachebooster.tar.gz
cd apachebooster
sh install.sh

```

If you have any questions or problems, please let me know in the comments below.

<!--kg-card-end: markdown-->