Finding a blog site with good code block support - hosting

This has probably been asked before but I can't find any relevant post using the search system.
I'm looking for a site where I could host my own blog. Unfortunately, I found none that have the kind of code block friendliness found on our very own stackoverflow (not one where you have to manually convert < and > into < and >).
If the answer is "there is none, duh!", and I am condemned to install my own blog software, then which one should I use for a "coder blog" -- knowing that I'd like it to be ultra-simple to set up.
Thanks.

I use a combination of BlogEngine.NET, Windows Live Writer and a WLW extension to format/place the code block in my blog.
Scott Hanselman has a blog post about this topic here.
There is a pretty sweet client-side (jQuery-based) code formatter here that you also might want to check out, that sounds blog-software agnostic.

I use appengine and bloog mostly because of this feature (and because I can extend it anyway I want). The good thing is it's relatively easy to set up and free. If your blog makes enough traffic to go over the limit for free accounts chances are you can get your money back from it.

I was pulling my hair out trying to format code on Blogger until I found this handy utility. It's not a perfect solution, but it goes a long way.

This css script might be useful to all - It is not for syntax highlighting but works well for presenting the source code in original format :
<pre style="font-family: Andale Mono, Lucida Console, Monaco, fixed, monospace;
color: #000000; background-color: #eee;
font-size: 12px; border: 1px dashed #999999;
line-height: 14px; padding: 5px;
overflow: auto; width: 100%">
<code style="color:#000000;word-wrap:normal;">
<<<<<<<YOUR CODE HERE>>>>>>>
</code>
</pre>
How to use :
Paste this snippet in text editor,
paste your code in <<<<<<>>>>>> block.
Copy all and
paste to HTML view in blogger(or any other) post editor.
BENEFITS : Simple and easy to use, less configuration, easy to reconfigure, no extra software

Related

How to use react-multi-carousel with typescript

I need a component exactly like below picture.
image code is here but i need that codes for typescript.
and also copy codes not working!
any body can help with an example in https://codesandbox.io/.
thanks a lot
Recently I used react-multi-carousel with typescript.
Maybe that carousel's parent style is like this.
display: flex;
Carousel doesn't work with that style so you should change the parent style.
It's not a problem caused by Typescript
display: block or add this style.
min-width: 400px; max-width: 400px;
it works for me.

How to enable fully expanded breadcrumbs with Sphinx RTD and AutoAPI?

I'm experimenting with the Sphinx AutoAPI to make docs more maintainable. It's doing a great job, except for one thing: breadcrumbs.
Within the docs generated by AutoAPI, breadcrumbs don't work as I'd expect. Instead of adding a linked item at each depth, we get “Docs >> ”, followed by a single linked item.
This is a usability a problem, because you can’t navigate back up to a parent article after clicking into a child.
Note: I'm using the sphinx_rtd_theme, with a custom extrabody block for the header.
I haven't been able to find any documentation for the breadcrumbs in sphinx_rtd_theme.
Before diving into source code, I thought I'd ask if anyone else has seen/fixed this issue before. Thanks!
PS: You can see a draft PR for this work here: https://github.com/great-expectations/great_expectations/pull/1582
Thanks to Steve Piercy for a his helpful tip from the Pyramid project!
I added these lines at the end of my index.rst to activate breadcrumbs.
.. toctree::
:maxdepth: 2
autoapi/index
The breadcrumb links were still formatted like inline code, so I hacked my _static/style.css file like so:
ul.wy-breadcrumbs li code span.pre{
font-size: 16px;
font-family: HKGroteskPro, serif;
font-weight: 400;
color: rgb(155, 89, 182);
}
This styling isn't perfect, but close enough to not be jarring.

What is the easiest Javascript framework for a newbie web developer?

Put your foot inside the boots of an expert developer that is new to web development.
Certainly he will must deal with JavaScript and probably he will encounter a bit of difficulties with choosing a framework for its job.
For general purpose: which one do you suggest if the an easy usage is the first requirements?
I've worked with jQuery, script.aculo.us, and mootools, and I would highly recommend jQuery, which seems to trump a lot of the other frameworks in its ease of use.
For someone who is familiar with HTML and CSS, jQuery fits the paradigm really well, and makes the transition into Javascript very simple.
For example, with html such as this:
<div id="content">
<h2>Heading</h2>
<p class="featured">This content</p>
</div>
You might have CSS selectors that looked like this:
#content {
margin: 0 auto;
width: 760px;
}
#content h2 {
font-size: 110%;
}
#content p.featured {
font-weight: bold;
}
In jQuery, you can manipulate those elements using the same selectors:
$('#content').hide();
$('#content h2').html('New Heading');
$('#content p.featured').css('border', '#cccccc 1px solid');
jQuery also has excellent documentation that can really help a beginner jump right in.
I would also put a vote in for jQuery. I have found it to be simple to use, easy to learn, powerful, well documented, feature rich, extensible and backed by a great community of plugin developers.
See here for a comparison by feature.
In the past three years, I've used Prototype/script.aculo.us and jQuery. From the two, I prefer jQuery.
Generally, everyone uses jQuery these days. I like it pretty well.
You might also check out MooTools. Depending on your past experience, you may find it fits your style better.
I'd personally go with jQuery too. That's what I use these days when I need that sort of thing.
Well documented and a plethora of plugins already available.
From a newbie: I have been using jQuery and it creates big results with only a little skill. The more skill you build with jQuery, the cooler and easier things get.
jQuery supports a lot of selectors, It’s easy to add/remove attributes to any HTML element, makes ajax and json easy to use and has a big helpful community.

h3 tag text/image replacement, does this hurt seo?

I'm trying to "replace" text with an image in all of my h3 tags. I want the image to be in the html to avoid multiple h3 classes as this is being done for a portfolio and there will be about 10 h3 tags on the page. My image is 156x44. My question is, will this be viewed as an attempt to hide, stuff keywords by google for seo purposes? If it will then does anyone know a better way to accomplish this?
CSS:
h3 {
display: block;
width: 156px;
height: 44px;
overflow: hidden;
}
Html:
<h3><img src="images/project001.png" alt="Project 001" />Project 001</h3>
Matt Cutts addresses this question himself over at threadwatch. Pretty much he says to freely do text replacement, just don't try anything spamy like keyword stuffing. Later he clarifies that they:
...flag text that appears to be hidden
using CSS at Google. To date we have
not algorithmically removed sites for
doing that. We try hard to avoid
throwing babies out with bathwater.
So they might not be penalizing sites at all at this time for using CSS to hide text.

How does Google's javascript API get around the cross-domain security in AJAX

How does Google's API make cross-domain requests back to Google, when it's on your website?
They get around it by dynamically injecting script tags into the head of the document. The javascript that is sent down via this injection has a callback function in it that tells the script running in the page that it has loaded and the payload (data).
The script can then remove the dynamically injected script tag and continue.
The accepted answer is wrong. Ben is correct. Below is the actually iframe node pulled off a page using the Google API JavaScript Client.
<iframe name="oauth2relay678" id="oauth2relay678"
src="https://accounts.google.com/o/oauth2/postmessageRelay?
parent=https%3A%2F%2Fwww.example.com.au#rpctoken=12345&forcesecure=1"
style="width: 1px; height: 1px; position: absolute; left: -100px;">
</iframe>
Basic summary of how this works is here: http://ternarylabs.com/2011/03/27/secure-cross-domain-iframe-communication/. On modern browsers they utilize HTML postMessage to achieve communication, and on older browsers, they use a neat multiple-iframe-urlhash-read+write-combination hack. Ternary Labs have made a library which abstracts all the hacky stuff out, essentially giving you postMessage on all browsers.
One day I'll build ontop of this library to simplify cross-domain REST APIs...
Edit: That day has come and XDomain is here - https://github.com/jpillora/xdomain
AFAIK they use IFRAMEs.
Another possibility is to use the window.name transport as described for the dojo framework here
Looks like Google display maps using the <img> tag
I guess they use the JavaScrit library to work out all the co-ordinates and other parameters the src url needs, then insert the <img> tags (along with a million other tags) into your DOM.
The full map is built up with several panes like the HTML below:
<img src="https://mts1.google.com/vt/lyrs=m#248102691&hl=en&src=app&x=32741&s=&y=21991&z=16&scale=1.100000023841858&s=Galile" class="css-3d-layer" style="position: absolute; left: 573px; top: 266px; width: 128px; height: 128px; border: 0px; padding: 0px; margin: 0px;">
(You can paste this HTML into your own web page to see the result)
So Google Maps does NOT use AJAX or anything to get its maps, just plain images, created on the fly. So no Cross Domain issues to worry about...

Resources