Noisebridge - User contributions [en]

Noisebridge

2012-04-30T16:08:12Z

173.148.128.65:

__NOTOC__ __NOEDITSECTION__

{| width="800px" cellpadding="0" style="color:#000000;border:solid 1px #990000;background-color:#f1f1f1;padding:6px 6px 0px 6px; margin:6px auto 6px auto"
|-valign="top"
|width="100%"|<big><strong>We are Noisebridge</strong></big><p>''Noisebridge is an infrastructure provider for technical-creative projects, collaboratively run by its members. We are [[Incorporation|incorporated]] as a non-profit educational corporation for public benefit. We operate primarily in a 5,600 square-foot space located in the heart of San Francisco. We teach, we learn, we share.'' [[Noisebridge_Vision|Read more about Noisebridge]] or [http://www.youtube.com/watch?v=wamwklXWK4M watch a short video]...</p>
|}


{| width="800px" cellspacing="0" cellpadding="0" style="margin:6px auto 6px auto;padding:0px;font-size:100%;background-color:#f1f1f1;"
|style="border-left:1px solid #990000;border-top:1px solid #990000;border-right:1px solid #990000;"|[[File:Wikibanner-goto-2169.png|link=Getting_Here]]||width="16px" style="background:#ffffff;"| ||style="border-left:1px solid #990000;border-top:1px solid #990000;border-right:1px solid #990000;"|[[File:Wikibanner-get-involved.png|link=:Category:Events]]||width="16px" style="background:#ffffff;"| ||style="border-left:1px solid #990000;border-top:1px solid #990000;border-right:1px solid #990000;"|[[File:Wikibanner-help-out.png|link=Donate_or_Pay_Dues]]
|-valign="top"
|style="padding:0px 6px 3px 6px;border-left:1px solid #990000;border-bottom:1px solid #990000;border-right:1px solid #990000;"|We're located at:<br><center>'''[[Getting Here|2169 Mission St]], San Francisco'''<br>[http://www.openstreetmap.org/?mlat=37.762352&mlon=-122.419372&zoom=16 OpenStreetMap] - [http://maps.google.com/?q=2169+Mission+Street,+94110 Google Maps]<br>2 blocks South of [[Getting_Here#Getting_Here_by_BART | 16th & Mission BART]]</center><ul><li>[[Getting_In | How to get into the space]]</li><li>[[Visitor advice]]</li></ul>||width="16px" style="background:#ffffff;"| ||style="padding:0px 6px 3px 6px;border-left:1px solid #990000;border-bottom:1px solid #990000;border-right:1px solid #990000;"|<ul><li>[[Resources|What we offer]]</li><li>[[:Category:Events|Events and classes]]</li><li>[[Hosting an Event|Host an event]]</li><li>[[Noisebridge Vision | Learn about our vision]]</li><li>[[Mailinglist|<span style="color:red">Join one of our mailing lists</span>]]</li><li>[[#Get_in_Touch|Contact us]]</li></ul>||width="16px" style="background:#ffffff;"| ||style="padding:0px 6px 3px 6px;border-left:1px solid #990000;border-bottom:1px solid #990000;border-right:1px solid #990000;"|<ul><li>[[Noisebridge Membership|Become a member]]! [[Membership/FAQ|FAQ]]!<small><br>Pay monthly sub: [https://www.paypal.com/subscriptions/business=treasurer@noisebridge.net&item_name=Noisebridge%20Monthly%20Dues%20%28Starving%20Hacker%29&cy_code=USD&a3=40&p3=1&t3=M&src=1 $40/mo] [https://www.paypal.com/subscriptions/business=treasurer@noisebridge.net&item_name=Noisebridge%20Monthly%20Dues%20%28Standard%29&cy_code=USD&a3=80&p3=1&t3=M&src=1 $80/mo] [https://www.paypal.com/subscriptions/business=treasurer@noisebridge.net&item_name=Noisebridge%20Monthly%20Dues%20%28Doing%20well%29&cy_code=USD&a3=160&p3=1&t3=M&src=1 $160/mo]</small></li><li>[[Donate or Pay Dues|Make a monthly donation]]!<small><br>[https://www.paypal.com/subscriptions/business=treasurer@noisebridge.net&item_name=Noisebridge%20Monthly%20Donation%20%28Affiliate%20Member%29&cy_code=USD&a3=10&p3=1&t3=M&src=1 $10/mo] [https://www.paypal.com/subscriptions/business=treasurer@noisebridge.net&item_name=Noisebridge%20Monthly%20Donation%20%28Affiliate%20Member%29&cy_code=USD&a3=20&p3=1&t3=M&src=1 $20/mo][https://www.paypal.com/subscriptions/business=treasurer@noisebridge.net&item_name=Noisebridge%20Monthly%20Donation%20%28Affiliate%20Hacker%29&cy_code=USD&a3=40&p3=1&t3=M&src=1 $40/mo][https://www.paypal.com/subscriptions/business=treasurer@noisebridge.net&item_name=Noisebridge%20Monthly%20Donation%20%28Affiliate%29&cy_code=USD&a3=80&p3=1&t3=M&src=1 $80/mo]</small></li><li>[[Donate or Pay Dues|<span style="color:red">'''Other ways to donate!'''</span>]]</li></ul>
|}


{| width="800px" cellspacing="0" cellpadding="0" style="margin:6px auto 6px auto;padding:0px;font-size:100%;background-color:#f1f1f1;"
|-valign="top"
|style="padding:6px;border-left:1px solid #990000;border:1px solid #990000;width:390px;"|<big><strong><center>[[File:Hackupy300.png|center|link=http://hackupy.org]]</center></strong></big>Proudly providing [[Hackupy|hack nights]] for the [https://en.wikipedia.org/wiki/Occupy_movement Occupy Movement] in [http://occupysf.com/ SF], [http://www.occupyoakland.org/ OAK] & [http://occupyberkeley.org/ CAL]. Find [http://hackupy.org other hackerspaces helping].||width="16px" style="background:#ffffff;"| ||style="padding:6px;border:1px solid #990000;width:390px;"|<big><strong><center>[[Five Minutes of Fame]]</center></strong></big>5MoF is our monthly variety talks night. Ten 5 minute talks within an hour. Talks can be shorter, but not longer, than five minutes. Subjects are anything and everything, if you get bored of one, it's ok, it'll be over in less than 5 minutes. Come and join us. <strong>Thursday, March 15th, 8pm! [http://5mof.net/signup Sign up]!</strong>.
|}


{| width="800px" cellpadding="0" style="color:#000000;border:solid 1px #990000;background-color:#f1f1f1;padding:6px 6px 0px 6px;margin:6px auto 6px auto;"
|-valign="top"
|width="100%"|<big><strong>Create With Us!</strong></big><p>Our [[2169_Mission|5,200 square-foot space (483m<sup>2</sup>)]] contains an [[Electronics_Lab|electronics lab]], [[Shop|machine shop]], [[Sewing|sewing/crafting supplies]], [[Classrooms|two classrooms]], [[Conference_Area|conference area]], [[library|library]], [[Darkroom|darkroom]], and [[Kitchen|kitchen]]. [[Diversity|Everyone]] is welcome to use [[Resources|our many resources]]. Find others to create with. Find help with your projects. Help others with their projects. Learn, teach, share. Come to Noisebridge and create!</p> <p>Noisebridge's [[Hours|hours]] are 24 hours a day, 7 days a week. New visitors are welcome any time (all ages, all skill levels), but it's best to visit in the evenings or during an event to make sure we have a volunteer to show you around and make introductions.</p>
|}


[[Image:2169mission.jpg|thumb|right|Front door to our space at 2169 Mission]]
[[Image:Arduinos For Total Newbies workshop.jpg|thumb|right|Arduino for Total Newbies Workshop at Noisebridge]]
[[Image:Noisebridge tools.jpg|thumb|right|A space to learn and create neat things]]
[[Image:Noisebridge_Soldering_Workshop.jpg|thumb|right|Soldering Workshop at Noisebridge]]
[[Image:Noisebridge air.jpg|thumb|right|Members at Noisebridge]]
[[Image:Skittlevodka.jpg|thumb|right|Hacking, it's more than just electronics]]
[[Image:Starfive - q's noisebridge project.jpg|thumb|right|Craft hacking]]
[[Image:ZiP02.fc.jpg|thumb|right|Cover of the current issue of ZiP, a Noisebridge ''Zine in Progress'']]

== Events and Classes ==
'''[[:Category:Events|Full Event Listing]]''' | '''[http://www.google.com/calendar/embed?src=vo3i3c0qtjnkjr2ojasd0ftt8s%40group.calendar.google.com&ctz=America/Los_Angeles Unofficial Google Calendar]'''

[[Represent_Yourself|Represent Yourself!]] An Unconference for Horizontalist Organizers

Happening at Noisebridge March 15-18.

<span style="color:red">''You'' '''don't''' ''need to be a member to take or give a class or workshop at Noisebridge. '''All are welcome!'''''</span> Please see our [[Hosting an Event|events hosting page]] for more details.
{{:Category:Events}}
<span style="color:red">''You'' '''don't''' ''need to be a member to take or give a
class or workshop at Noisebridge. '''All are welcome!'''''</span>

'''Want to host your event at Noisebridge?''' We like seeing classes and talks on interesting things pertaining to various subjects of hacking. Most of all, we like seeing familiar faces. Please participate in the space and our [[Meetings|weekly Tuesday meetings]] to see if we're the right audience for what you want to share before announcing a new event. Additionally, here are some [[Hosting an Event]] tips.

== Info ==

[[Intro Poster]]: How we explain ourselves to new visitors.

[[Resources]]: Stuff in the space -- computer network & servers, project areas, tools, bulk orders from Digikey/McMaster/Mouser.

[[Safety|Safety in the Space]]: What to do in case of an emergency.

[[Press Coverage]]: mentions of Noisebridge in the media (both blog and dead tree).

[[Identity]]: A collection of resources revolving around our identity and logo.

[[Hackerspace Infos]]: Howtos, Background, and friendly Hackerspaces elsewhere.

== Get in Touch ==
* '''Press: Please see our [[Press Kit]] - Includes press contacts, pictures, background info, etc.'''
* [[Contacts]] - General contact details for the space
* [[Mailinglist]] - Best way to keep informed of upcoming events
* [[People]]
* [https://www.facebook.com/group.php?gid=100998755576 Facebook group]
* [http://www.facebook.com/#!/noisebridge Facebook page]
* [[Twitter]]
* [[Zine]] - ''ZiP: Zine in Progress,'' a quarterly publication inspired by Noisebridge, NEW as of January, 2012. Subscribe to the ZiP/zine mailing list and discussion group [https://www.noisebridge.net/mailman/listinfo/zine here]
* [[IRC|IRC channel]] - irc://chat.freenode.net/#noisebridge
* [[Payphone|Call the red payphone]] - This option is temporarily unavailable
* [[MemoryHole|Legal Requests (information removal, etc)]]
* Here is our '''mailing address''' (different from our physical address):<br>
          '''Noisebridge'''<br>
          '''2261 Market Street #235-A'''<br>
          '''San Francisco, CA 94114'''

[[Image:Passport-badge2.png‎|right|link=Passport|Hackerspace Passports accepted here]]
* Or just [[Getting Here|drop by the space]]. We're open almost all the time (24/7), and everyone is welcome -- ''all ages, all skill levels'':<br>
          [[Getting Here|'''2169 Mission St, 3rd floor''']]<br>
          '''San Francisco, CA 94103'''
*Here is a '''[[Map|digital blueprint]]''' of the Noisebridge space as of the end of December, 2011.

== Status ==
'''Noisebridge is up!''' We began building Noisebridge in February 2007. Since December 2007 we've had regular Tuesday meetings, and rented our first physical space as of October 1st 2008. We quickly outgrew our first space and have been at our much larger 5,200 square-foot second location since October 1st 2009. We are a [[Incorporation|tax-exempt 501(c)(3) organization]] as of July 2009, retroactive to October 2008.

Front-end Web Development

2012-04-30T16:07:33Z

173.148.128.65:

__NOTOC__
<div style="width: 45%; min-width: 300px; float: right; background: #efefef; color: #333; padding: 10px;">
== What ==
Learn HTML, CSS and JavaScript - and put them to good use! This class, taught by [[User:JeffreyATW|Jeffrey Carl Faden]], is aimed at beginners who are interested in web development, as well as seasoned professionals looking to brush up on the latest and greatest.

Frontend web development is all about making code that runs in the browser (versus code that runs on the server). There isn't a big focus on web design (creating wireframes and mockups), but we do cover best practices for turning these designs into beautiful code.

== Who ==
This class is for '''everyone'''! '''Complete beginners''' and more experienced developers are welcome at any time. You don't need to wait for the class to start its curriculum over - if you're new to the class, consider coming to the [[#Lecture|lecture]] at 7:30 for a recap.

The space and the class are entirely '''free''' to attend. You do not have to be a Noisebridge member.

Please consider bringing a[ny kind of] laptop.

== When ==
[[#Lecture|Lectures]] start promptly at '''8pm on Mondays''' and go for two hours. There is a half-hour recap starting at '''7:30pm'''. Please try to arrive early as physical space is limited.

[[#Lab|Labs]] start at '''8pm on Thursdays''' and can go up to two hours.

== Where ==
'''[[Noisebridge]]''', 2169 Mission St., San Francisco, 94114 (at 18th St., near 16th St. BART station). [[Getting Here]]

The lecture is currently held in the [[Classrooms#Church|Church classroom]], which is in the back of the space.

The lab is currently held in the [[Classrooms#Turing|Turing classroom]], the room past the wood shop.

Read up on [[Getting_In|getting in]] to the space. TL;DR: ring the bell!

== Keep Informed ==
Join the [[Mailinglist|Noisebridge-announce]] mailing list to be notified of upcoming class topics via email.
</div>
<div style="float: left; min-width: 300px; width: 45%;">
== Lecture ==
Weekly classroom-style presentation on HTML/CSS/JS. The lecture starts every Monday at 8pm. We also have a recap starting at 7:30pm, where we'll cover the (very) basics:
* Explaining "frontend" vs. "backend"
* Discussing tools of the trade
* Explaining the separation between structure, presentation, and behavior
* Writing a basic HTML page
* Styling the page with basic CSS

<div style="background:#eeeeff;padding:0 10px .5em;margin-top: .5em">
=== Class for 2012-04-30: CSS floats ===
This class will focus on floated elements. Floating is the secret sauce behind creating websites with multiple columns, navigation menus, and basically any block element that's aligned to the left or right.

We'll be taking a [http://jeffreyatw.com/static/frontend/series2/class4/mockup.png mockup] that's full of floats and turning it into HTML and CSS. If you've been waiting to see how a frontend web developer does their job from start to finish, this is the class to attend!</div>

=== Previous classes ===
We discuss a different topic in-depth every week. Some previous topics have been:
* CSS positioning (topic for [[Frontend_Web_Development/Notes#Class_for_2011-11-22|2011-11-22]] and [[#Class_for_2012-04-23:_CSS_positioning|2012-04-23]])
* Turning a mockup into HTML and CSS [[Frontend_Web_Development/Notes#Class_for_2011-12-05|(topic for 2011-12-05)]]
* File transfer [[Frontend_Web_Development/Notes#Class_for_2011-12-12|(topic for 2011-12-12)]]
* JavaScript [[Frontend_Web_Development/Notes#Class_for_2011-12-19|(topic for 2012-01-02)]]
* jQuery [[Frontend_Web_Development/Notes#Class_for_2012-01-16|(topic for 2012-01-09, 2012-01-16)]]
* AJAX [[Frontend_Web_Development/Notes#Class_for_2012-01-23|(topic for 2012-01-23)]]
* Turning a professional mockup into HTML and CSS [[Frontend_Web_Development/Notes#Class_for_2012-01-30|(topic for 2012-01-30)]]
* Menus and modals [[Frontend_Web_Development/Notes#Class_for_2012-02-06|(topic for 2012-02-06)]]
* Sign up forms [[Frontend_Web_Development/Notes#Class_for_2012-02-13|(topic for 2012-02-13)]]
* HTML5 elements [[Frontend_Web_Development/Notes#Class_for_2012-02-20|(topic for 2012-02-20)]]
* Mobile websites [[Frontend_Web_Development/Notes#Class_for_2012-02-27|(topic for 2012-02-27)]]
* CSS3 properties [[Frontend_Web_Development/Notes#Class_for_2012-03-05|(topic for 2012-03-05)]]
* Progressive enhancement: cross-browser compatibility and accessibility [[Frontend_Web_Development/Notes#Class_for_2012-03-12|(topic for 2012-03-12)]]
* Web frameworks and other "backend" web development topics (topic for 2012-03-19)
* Hardening Web Applications (http://webapp-hardening.heroku.com/)

=== Future class ideas ===
* CSS grids
* Precompiled code (Less, Sass, Compass, CoffeScript, HAML)

<div style="margin-top: 2em;">

== Lab ==
We also meet for a weekly lab/workshop where we work on an assignment that covers the material learned in the lecture earlier in the week. Those working on their own personal projects are also more than welcome to come and solicit help. Every Thursday at 8pm.
=== [http://jeffreyatw.com/static/frontend/series2/class3/assignment.html Assignment for 2012-04-26] (CSS positioning) ===
</div>
<div style="margin-top: 2em;">

== Resources ==
The [http://docs.google.com/present/view?id=dfjgtf36_41hmtj2td2 short presentation] I use.

* [http://jeffreyatw.com/static/frontend/Frontend%20Mockup%20class%20December%202011.zip Simple three-column HTML and CSS page]
* [http://jeffreyatw.com/static/frontend/class5/answer%20sheet.zip "Noisetwitter" client with commented source]
* [http://jeffreyatw.com/static/frontend/class8/jQuery.zip jQuery slideshow and event listener examples]
* [http://jeffreyatw.com/static/frontend/class12/answersheet.zip "Real-world" web page]
* [http://jeffreyatw.com/static/frontend/class13/html5_elements.zip A page making use of every valid (as of 2012-02) HTML element]

=== [[Frontend_Web_Development/Notes|Notes for Previous Classes]] ===

=== [[Frontend_Web_Development/Assignments|Previous Assignments]] ===
</div>
</div>
[[Category:events]]