background preloader

Don't Overthink It Grids

Don't Overthink It Grids
The vast majority of websites out there use a grid. They may not explicitly have a grid system in place, but if they have a "main content area" floated to the left a "sidebar" floated to the right, it's a simple grid. If a more complex layout presents itself, people often reach for a grid framework. They assume grids are these super difficult things best left to super CSS nerds. That idea is perpetuated by the fact that a lot of the grid systems they reach for are very complicated. Here's how I build grids. Context A block level element is as wide as the parent it's inside (width: auto;). Columns Let's start with a practical and common need: a main content area being 2/3 the width and a sidebar being 1/3 the width. <div class="grid"><div class="col-2-3"> Main Content </div><div class="col-1-3"> Sidebar </div></div> To make them next to each other, we just need to float them and apply widths. and individual width like this: That's the whole premise of not overthinking grids. Clearing Context Related:  Code / Web Development

10 Interview Questions Every JavaScript Developer Should Know — JavaScript Scene Good to hear: Classes: create tight coupling or hierarchies/taxonomies.Prototypes: mentions of concatenative inheritance, prototype delegation, functional inheritance, object composition. Red Flags: No preference for prototypal inheritance & composition over class inheritance. Learn More: 4. OOP Pros: It’s easy to understand the basic concept of objects and easy to interpret the meaning of method calls. OOP Cons: OOP Typically depends on shared state. FP Pros: Using the functional paradigm, programmers avoid any shared state or side-effects, which eliminates bugs caused by multiple functions competing for the same resources. FP also tends to favor declarative and denotational styles, which do not spell out step-by-step instructions for operations, but instead concentrate on what to do, letting the underlying functions take care of the how. Red flags: 5. This is a trick question. Rarely, almost never, or never. Any other response. 6. There is more than one type of prototypal inheritance: 7. 8.

960 Grid System Learn to Code: 13 Tips that Could Save You Years of Effort — JavaScript Scene Learn to Code: 13 Tips that Could Save You Years of Effort When you’re new to coding, it can be hard to know where to start, and it’s easy to get sucked down paths that could waste a whole lot of your time and money. I’m Eric Elliott, author of “Programming JavaScript Applications” (O’Reilly), development team leader, JavaScript instructor, and public speaker. Forget university programs.

Frameworks for Designers These days, “framework” is quite a buzzword in web development. With JavaScript frameworks like the Yahoo User Interface library, jQuery, and Prototype getting a lot of attention and web application frameworks like Rails and Django getting even more, it seems like everyone is using some kind of framework to build their sites. But what exactly is a framework? What is a framework? So that we’re all on the same page, let’s agree—at least for the duration of this article—on this definition of “framework”: a set of tools, libraries, conventions, and best practices that attempt to abstract routine tasks into generic modules that can be reused. To be clear, we’re not necessarily talking about something that is built, packaged, and released to the public. A framework for designers#section2 Chances are, you can benefit from a similar abstraction of CSS code for your web design process. What sorts of things can be abstracted? A “mass reset” of default browser styles. What’s the real world benefit?

The Joel Test: 12 Steps to Better Code by Joel Spolsky Wednesday, August 09, 2000 Have you ever heard of SEMA? It's a fairly esoteric system for measuring how good a software team is. The neat thing about The Joel Test is that it's easy to get a quick yes or no to each question. A score of 12 is perfect, 11 is tolerable, but 10 or lower and you've got serious problems. Of course, these are not the only factors that determine success or failure: in particular, if you have a great software team working on a product that nobody wants, well, people aren't going to want it. 1. 2. If the process takes any more than one step, it is prone to errors. For this very reason, the last company I worked at switched from WISE to InstallShield: we required that the installation process be able to run, from a script, automatically, overnight, using the NT scheduler, and WISE couldn't run from the scheduler overnight, so we threw it out. 3. Read more about daily builds in my article Daily Builds are Your Friend. 4. 5. 6. 7. 8. 9. 10. 11. 12.

W3Fools Takes on W3Schools W3Schools is one of the oldest and most popular web development tutorial sites on the Web. But it has its share of critics. Today, 46 of those critics launched W3Fools, a site dedicated to criticizing W3Schools. The site's authors note that although there are resources they believe are better, "W3Schools has put a lot of effort into positioning itself at the top of search results and, despite our efforts (such as the PromoteJS initiative), appears to be there to stay." Here are the resources W3Fools recommends as alternatives: I linked to W3Schools' JavaScript tutorial in our 6 Free JavaScript E-Books and Tutorials post. W3Fools is calling on W3Schools to wikify its tutorials so that readers can fix mistakes. There is a thread on the W3Schools forum discussing W3Fools. W3Schools did not respond to our request for comment. Update: W3Schools has responded.

Complete Newbie Guide To Build CentOS Server To Host Websites - ServerMom This is the ultimate guide how to build, setup and config CentOS-based unmanaged web server on VPS or Dedicated servers. Very complete tutorials for newbie. Going back to my vision with this blog: to help newbies with no knowledge at all how to build a working live server to host a production website in an unmanaged server without having to use Control Panel software like WHM/cPanel, Kloxo, and so on. I posted an index page of all my tutorials regarding Ubuntu server building, so I gonna make this page as an index of all basic tutorials to build server running OS. Before you proceed, these are basic skills you have to master or at least know part of it: – How to use Putty (Windows) – Mac and Linux use Terminal – Most popular and common commands use in SSH-ing a server 1. All essential things you have to do in the first time to build a web server on CentOS 6. 2. How install and setup Apache and PHP on CentOS VPS or Dedicated server. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. A.

Just Enough Angular for Designers - One Hungry Mind The Intro I recently gave a talk at ngVegas 2015 called Turn Your Designers Into Deathstars with Angular where I make the case that we need to make designers first class citizens in AngularJS. UPDATE: A huge shoutout to my designer buddy Jordan Stoddard for hand drawing all of the sweet graphics for this post! A major portion of this talk was focused on teaching “just enough” Angular so that a designer could get started. I wanted to dedicate an entire blog post to covering these concepts so that someone new to Angular or someone with a strong design background would have a resource to help them get started. I posted six exercises at the link below that I would encourage anyone new to Angular to go through. The Exercises Everything is an Object HTML exists to visually represent some object that exists in the “real” world. Separating the HTML markup from the actual object it represents is one of the most fundamental steps for learning Angular. Exercise 01: Data Binding 01 Data Binding 02 ngModel

Must See JavaScript Dev Tools That Put Other Dev Tools to Shame — JavaScript Scene What Are Dev Tools? Developer tools are a collection of software that makes life easier for developers. Traditionally, we’ve thought of them primarily as the IDE, linter, compiler, debugger, and profiler. But JavaScript is a dynamic language, and along with its dynamic nature comes a need for more runtime developer tooling. JavaScript has this in spades. For the purposes of this article, I’m going to include runtime tooling, and even a couple libraries that enhance runtime developer visibility and debugging. TL;DR quick list: About the Tools Your dev life is going to center around two things: The editor, and your runtime environment (e.g., the browsers, platforms, and devices you’re coding for). The Editor: I started my dev career using big, massively integrated IDEs like Borland IDE, Microsoft Visual Studio (check out the open source Visual Studio Code), Eclipse, and WebStorm. I also use vim for quickie edits from the terminal. To use it with Babel, I use the following `debug.js` script:

Related: