boilerplate
Responsive CSS, HTML and JavaScript front-end starting point.
I want to start creating websites again, but I've been out of the HTML scene for a while now. I was just wondering if this is a good skeleton for a website. And if not, what should I change, add and/or remove?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<rel="stylesheet" type="text/css" rel='nofollow' href="css/main.css" />
<meta http-equiv="content-type" content="text/php; charset=utf-8" />
<title>Site Template - Welcome!</title>
</head>
<body>
<div class="Container">
<div class="Header">
</div>
<div class="Menu">
<ul id="nav">
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
</ul>
</div>
<div class="Body">
</div>
</div>
</body>
<footer>
<div class="Footer">
<b>Copyright - 2010</b>
</div>
</footer>
</html>
Source: (StackOverflow)
Hey everyone — HTML5 Boilerplate and HTML5 Reset are two HTML, CSS, and JavaScript templates with a lot of modern best practices built-in. Their goals are largely the same:
- Fast, robust, modern Web development
- HTML5 (duh!)
- Cross-browser normalization (including support for IE6 and mobile browsers)
- Progressive enhancement and graceful degradation
- Performance optimizations
- Not a framework, but the starting point for your next project
Obviously, they're very similar in function. In what ways are their implementations different (for example, perhaps IE-specific CSS fixes are achieved using different techniques)? Are they at all different in scope? It seems like HTML5 Boilerplate is a bit larger (build tools, server configuration, etc.), but it's hard to know where it goes beyond HTML5 Reset when it comes to the actual site that people will see.
Source: (StackOverflow)
I run into this situation often enough for it to be annoying.
Let's say I have a sum type which can hold an instance of x
or a bunch of other things unrelated to x
-
data Foo x = X x | Y Int | Z String | ...(other constructors not involving x)
To declare a Functor instance I have to do this -
instance Functor Foo where
fmap f (X x) = X (f x)
fmap _ (Y y) = Y y
fmap _ (Z z) = Z z
... And so on
Whereas what I would like to do is this -
instance Functor Foo where
fmap f (X x) = X (f x)
fmap _ a = a
i.e. I only care about the X
constructor, all other constructors are simply "passed through". But of course this wouldn't compile because a
on the left hand side is a different type from the a
on the right hand side of the equation.
Is there a way I can avoid writing this boilerplate for the other constructors?
Source: (StackOverflow)
Is anybody out there using Project Lombok for a large scale production system? How does it influence your compile process (i.e. does it do two-pass compilation, slow it down, make it more fragile)?
Source: (StackOverflow)
I have a some simple Java code that looks similar to this in its structure:
abstract public class BaseClass {
String someString;
public BaseClass(String someString) {
this.someString = someString;
}
abstract public String getName();
}
public class ACSubClass extends BaseClass {
public ASubClass(String someString) {
super(someString);
}
public String getName() {
return "name value for ASubClass";
}
}
I will have quite a few subclasses of BaseClass
, each implementing the getName()
method in its own way (template method pattern).
This works well, but I don't like having the redundant constructor in the subclasses. It's more to type and it is difficult to maintain. If I were to change the method signature of the BaseClass
constructor, I would have to change all the subclasses.
When I remove the constructor from the subclasses, I get this compile-time error:
Implicit super constructor BaseClass() is undefined for default constructor. Must define an explicit constructor
Is what I am trying to do possible?
Source: (StackOverflow)
Every time I add a new form to my project, it drops a big glop of boilerplate in the uses clause.
uses
Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms,
Dialogs;
Seriously, who uses the Variants unit on anything resembling a regular basis? I generally end up removing Windows, Messages, Variants, Graphics and Dialogs and never missing them.
That's gotta be coming out of a template file somewhere, but I can't seem to find it. Does anyone know where I can find the template and edit it? I'm using D2009, in case it's changed recently.
Source: (StackOverflow)
A coworker had never heard of this, and I couldn't provide a real definition. For me, it's always been an instance of 'I-know-it-when-I-see-it'.
Bonus question, who originated the term?
Source: (StackOverflow)
I am just curious on how people solve this. I often write the same type of code all the time. For instance:
new Thread() {
//...
//...
//...
//Change this line
//...
//...
}.start();
I keep changing the line where it says "Change this line" and then starting a thread. This change can be one line or a few lines. How would I go about compacting this code?
Source: (StackOverflow)
I'm trying to start a new project, and was looking for the "ultimate" package to kick-start off with for PHP/MySQL/HTML5 development. Tried CodeIgniter first, which was great. Then discovered Twitter Bootstrap, and integrated that in nicely. Finally, found HTML5 Boilerplate, which looked awesome, and saw that some people were putting together mixes of these three.
Was wondering if anyone has actually been able to put together and run an integration of all three well? I see there's a github repo for this: https://github.com/vesparny/codeigniter-html5boilerplate-twitter-bootstrap, but I couldn't find any StackOverflow inquiries on it. Anyone have some experience they could share before I jump in? Didn't want to spend days trying to figure it out, just to find out it would've been easier/better to just stick with pure CodeIgniter or just HTML5BP.
Source: (StackOverflow)
Google has a Python tutorial, and they describe boilerplate code as "unfortunate" and provide this example:
#!/usr/bin/python
# import modules used here -- sys is a very standard one
import sys
# Gather our code in a main() function
def main():
print 'Hello there', sys.argv[1]
# Command line args are in sys.argv[1], sys.argv[2] ..
# sys.argv[0] is the script name itself and can be ignored
# Standard boilerplate to call the main() function to begin
# the program.
if __name__ == '__main__':
main()
Now, I've heard boilerplate code being described as "seemingly repetitive code that shows up again and again in order to get some result that seems like it ought to be much simpler" (example).
Anyways, in Python, the part considered "boilerplate" code of the example above was:
if __name__ == '__main__':
main()
Now, my questions are as follows:
1) Does boilerplate code in Python (like the example provided) take on the same definition as the definition I provided? If so, why?
2) Is this code even necessary? It seems to me like the code runs whether or not there's a main method. What makes using this code better? Is it even better?
3) Why do we use that code and what service does it provide?
4) Does this occur throughout Python? Are there other examples of "boilerplate code"?
Oh, and just an off topic question: do you need to import sys
to use command line arguments in Python? How does it handle such arguments if its not there?
Source: (StackOverflow)
Perhaps a Scala expert with a good sense of style and elegance can help me figure out a nicer way to structure the following code, which has a constructor "push-out" problem.
We start with a simple base class:
class Foo(val i: Int, val d: Double, val s: String) {
def add(f: Foo) = new Foo(i + f.i, d + f.d, s + f.s)
override def toString = "Foo(%d,%f,%s)".format(i,d,s)
}
For type-checking purposes in a complex application, I require a sub-class without any additional state:
class Bar(i: Int, d: Double, s: String) extends Foo(i,d,s) {
override def toString = "Bar(%d,%f,%s)".format(i,d,s)
}
As it stands, when I add two Bars, I only get back a Foo:
val x = new Bar(1,2.3,"x")
val y = new Bar(4,5.6,"y")
val xy = x.add(y)
with the following response in the REPL:
x : Bar = Bar(1,2.300000,x)
y : Bar = Bar(4,5.600000,y)
xy : Foo = Foo(5,7.900000,xy)
How do I get two Bars to add together to form another Bar (rather than a Foo), in an elegant way, without having to copy and paste Foo's add method, as below?
class Bar(i: Int, d: Double, s: String) extends Foo(i,d,s) {
// ugly copy-and-paste from Foo:
def add(b: Bar) = new Bar(i + b.i, d + b.d, s + b.s)
override def toString = "Bar(%d,%f,%s)".format(i,d,s)
}
I have many such Bars (all essentially copies of Foo, but very important for type checking), a cut-and-paste-free solution will pay dividends.
Thanks!
Source: (StackOverflow)
960 grid's clearfix vs HTML5 Boilerplate's clearfix - What's the difference?
Here's the clearfix found in Nathan Smith's 960 grid's css:
/* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */
.clearfix:before,
.clearfix:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
.clearfix:after {
clear: both;
}
/*
The following zoom:1 rule is specifically for IE6 + IE7.
Move to separate stylesheet if invalid CSS is a problem.
*/
.clearfix {
zoom: 1;
}
and here is the clearfix found in Paul Irish's HTML5 Boilerplate:
/* The Magnificent Clearfix: Updated to prevent margin-collapsing on child elements.
j.mp/bestclearfix */
.clearfix:before, .clearfix:after {
content: "\0020";
display: block;
height: 0;
overflow: hidden;
}
.clearfix:after { clear: both; }
/* Fix clearfix: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */
.clearfix { zoom: 1; }
As you can see they are VERY similar. However they are different.
Does anyone have any insight into this?
Which is better and why?
Source: (StackOverflow)
I'm fairly convinced that this isn't possible, but I'm going to ask nonetheless.
In order to make a single-shot subscription to events, I frequently find myself using this (self-invented) pattern:
EventHandler handler=null;
handler = (sender, e) =>
{
SomeEvent -= handler;
Initialize();
};
SomeEvent += handler;
It's quite a lot of boiler-plate, and it also makes Resharper whinge about modified closures. Is there a way of turning this pattern into an extension method or similar? A better way of doing it?
Ideally, I'd like something like:
SomeEvent.OneShot(handler)
Source: (StackOverflow)
I've used the Scrap Your Boilerplate and Uniplate libraries in the Haskell programming language, and I would find that form of generic programming over discriminated unions to be really useful. Is there an equivalent library in the f# programming language?
Source: (StackOverflow)
Honestly, I didn't know how to make the title shorter.
I learnt how to write a jQuery plugin by studying the source of SlidesJS plugin. When I encountered something new, I just asked my good friend Google and most of the times, got a satisfactory answer. Honestly though, I never made much effort. All I know is that $
is (probably) a shorthand jQuery object constructor and that $()
and jQuery()
are the same thing provided jQuery is included.
Recently, though, I tried to understand the science behind jQuery and how to write a good jQuery plugin. I came across a very good article in which the author listed several templates for creating a jQuery plugin. Since the rest were too complex for me to understand, I liked the first one: A Lightweight Start. Now, here is the code for the said template.
/*!
* jQuery lightweight plugin boilerplate
* Original author: @ajpiano
* Further changes, comments: @addyosmani
* Licensed under the MIT license
*/
// the semi-colon before the function invocation is a safety
// net against concatenated scripts and/or other plugins
// that are not closed properly.
;(function ( $, window, document, undefined ) {
// undefined is used here as the undefined global
// variable in ECMAScript 3 and is mutable (i.e. it can
// be changed by someone else). undefined isn't really
// being passed in so we can ensure that its value is
// truly undefined. In ES5, undefined can no longer be
// modified.
// window and document are passed through as local
// variables rather than as globals, because this (slightly)
// quickens the resolution process and can be more
// efficiently minified (especially when both are
// regularly referenced in your plugin).
// Create the defaults once
var pluginName = 'defaultPluginName',
defaults = {
propertyName: "value"
};
// The actual plugin constructor
function Plugin( element, options ) {
this.element = element;
// jQuery has an extend method that merges the
// contents of two or more objects, storing the
// result in the first object. The first object
// is generally empty because we don't want to alter
// the default options for future instances of the plugin
this.options = $.extend( {}, defaults, options) ;
this._defaults = defaults;
this._name = pluginName;
this.init();
}
Plugin.prototype.init = function () {
// Place initialization logic here
// You already have access to the DOM element and
// the options via the instance, e.g. this.element
// and this.options
};
// A really lightweight plugin wrapper around the constructor,
// preventing against multiple instantiations
$.fn[pluginName] = function ( options ) {
return this.each(function () {
if (!$.data(this, 'plugin_' + pluginName)) {
$.data(this, 'plugin_' + pluginName,
new Plugin( this, options ));
}
});
}
})( jQuery, window, document );
I have included the comments so as to refer to them in my questions.
I have a crude idea why window
and document
have been included in the argument of the anonymous function that wraps the plugin (I don't know what else to call it) because it is given in the comments that it sorta kinda shortens the execution time. But how does that work? Any argument of the said anonymous function wrapping the plugin gets passed on to where? And how are these addressed in the plugin?
Normally, I would do $(window).resize(function(){})
but that doesn't work in this case. If I do console.log(window)
inside the Plugin function, it says 'undefined'.
Which brings me to the other question which is: what is undefined? Isn't it a data type that is assigned to an object that isn't defined in the scope? How can it be passed as an argument? Don't the arguments have to be objects? There are a few lines written about this in the comments, but I don't understand a word of it: <so we can ensure that its value is truly undefined> whaaa?
To sum up:
- What indeed is meant by
function($)
?
- Why should I include
window
, document
and undefined
as arguments of function($)
?
- If I do it, how do I access the actual
window
and document
objects?
undefined
what, and why?
Please go easy on me. I never studied programming language as a subject for the express purpose of writing applications. I studied basic C for writing hardware oriented low-level routines for tiny core microcontrollers and that's just about it. I did learn C++ extensively and a bit of Java on my own. Just so you'd know what to expect.
Source: (StackOverflow)