サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
ドラクエ3
coding.smashingmagazine.com
Ruby is a great language. It was designed to foster happiness and productivity in developers, all the while providing tools that are effective and yet focused on simplicity. One of the tools available to the Rubyist is the RubyGems package manager. It enables us both to include “gems” (i.e. packaged code) that we can reuse in our own applications and to package our own code as a gem to share with
Responsive SVG icons can be used in a lot of ways. In this article, Ilya Pukhalski digs deeper into Joe Harrison’s responsive icons technique and explores what can be done with SVGs. If you haven’t seen Joe Harrison’s responsive icons technique yet, you’ll most probably be impressed as much as I was when I first discovered it. In this article, I’d like to explore what we can do with SVG beyond “tr
In this article, Mark McDonnell will go over the techniques required to build a command line tool using Node.js and PhantomJS (this is just one example of the sort of command line tools you can develop with Node.js’ many features). Always consider automating the process with a CLI tool the next time you find yourself performing a repetitive task. In this article, we’ll go over the concepts and tec
At present, jQuery is the de facto library for working with the document object model (DOM). It can be used with popular client-side MV* frameworks (such as Backbone), and it has a ton of plugins and a very large community. As developers’ interest in JavaScript increases by the minute, a lot of people are becoming curious about how native APIs really work and about when we can just use them instea
You want to be lean and you want to be agile by using technologies that will help you succeed in the short and long term. And those technologies are not always easy to pick out. Full-stack JavaScript hits all the marks. You’ve probably seen it around. With JavaScript, you can create scalable, maintainable applications, unified under a single language. There’s no doubt, it’s a force to be reckoned
After a decade of JavaScript library work, the progressive-enhancement revolution, the advent of polyfills, and the effort to birth the “Web Components” and “Shadow DOM” specifications have taught us surprising lessons: In every period, being able to use features in both high- and low-level forms has always been desirable. HTML is great, until it isn’t. And JavaScript-only has predictable drawback
Events can be triggered on any part of a document. They don’t just start and end in one place; they flow though the document. This life cycle is what makes DOM events so extensible and useful. As developers, we should understand how DOM events work, so that we can harness their potential and build engaging experiences. In this article, Wilson Page will introduce the basics of working with DOM even
The :user_id part is called a dynamic segment because the corresponding user ID will be injected into the URL. So, it will look like /users/3/edit, where 3 is the user with the ID of 3. You can define either a route or a resource. Keep in mind that a resource is a group of routes and that it allows routes to be nested. A resource also resets the nested naming convention to the last resource name,
In this article, CJ Gammon talks about the CSS Regions specification, which provides new options for web designing. We are largely constrained by the layout features available to us. Content placed inside a container will often extend the container vertically. If a design requires elements to remain a certain height, then our options are limited. In these cases, we can only add a scroll bar or hid
Today, Mike Cunsolo will show us how to use Grunt in a project to speed up and change the way you develop websites, looking briefly at what Grunt can do, before jumping into how to set up and use its various plugins. Then he will explain how to build a simple input validator, using Sass as a preprocessor, how to use grunt-cssc and CssMin to combine and minify our CSS, how to build our compressed a
In this article, Zeno Rocha presents a series of workflows in Alfred that will boost your productivity! A collection of great tricks to automate your work. Hopefully, some will speed up your workflow. Maybe they will even inspire you to share some of your hidden secrets of productivity. Good developers are always looking for ways to be faster and to automate their workflows. Today, we present a se
When it comes to CSS, Thierry Koblentz is convinced that the only way to improve how to author style sheets is by moving away from the sacred principle of “separation of concerns”. CSS authors thrive on styling documents entirely through style sheets, an approach that has been sanctified by the CSS Zen Garden project (what most developers consider to be the standard for how to author style sheets)
In the first part of this series, we discussed Backbone.Marionette’s Application. This time around, we’ll discuss the module system that is included in Backbone.Marionette. Modules are accessible through the Application, but modules are a very large topic and deserve an article dedicated to them. In the first part of this series, we discussed Backbone.Marionette’s Application. This time around, we
In this article, we will explore an alternative approach to styling Web documents. With the use of “intelligent” selectors, we’ll cover how to query the extant, functional nature of semantic HTML in such a way as to reward well-formed markup. If you code it right, you’ll get the design you were hoping for. Heydon Pickering hopes that employing some of these ideas will make your workflow simpler an
Web helps designers and developers find the best inspiration and resources for their projects. Even though there are different tutorials and tips available online, Oleg Solomka feels that HTML5 canvas techniques are missing the most. Good news: he had the chance to fulfill this wide gap. In this article, Oleg would like to share his experience and story of how he brought the “Jelly Navigation Menu
In this article, Stephen Shaw introduces a technique for perfect horizontal and vertical centering in CSS, at any width or height. The techniques works with percentage-based width/height, min-/max- width, images, position: fixed and even variable content heights. This article was updated on January 31, 2019 to update the below provided information. The old information is not wrong, however is the
Backbone.js provides structure to JavaScript applications, but it leaves a lot of design patterns and decisions up to developers who end up running into common problems when they first begin developing in Backbone.js. In this article, Phillip Whisenhunt will explore different design patterns that you can use in your Backbone.js applications, and he’ll look at many of the common gotchas that trip u
We’re constantly refining two interfaces simultaneously: one for visitors who load the website, the other for developers who have to tackle the code in the future. But we shouldn’t forget that developers are users, too. Therefore, our convention for naming and organizing files is critical if we are to ensure active development in the future. But do we really design the partials, files and director
Extensive use of media queries is not a viable long-term solution. Media queries do not allow for reusable modules that adapt based on their containers’ size. Responsive Web design has inspired us to think beyond device classifications and to use media queries to adapt a layout to the browser’s viewport size. But this deviates from the hierarchical structure of CSS and characterizes elements relat
When the mockups for the new Financial Times application hit our desks in mid-2012, we knew we had a real challenge on our hands. Many of us on the team (including me) swore that parts of interface would not be possible in HTML5. Given the product team’s passion for the new UI, we rolled up our sleeves and gave it our best shot. We were tasked with implementing a far more challenging product, with
Flexible box layout is a new box model optimized for UI layout, and it makes a lot of tasks much easier, or even possible at all. Flexbox’s repertoire includes the simple centering of elements, the expansion and contraction of elements to fill available space, and source-code independent layout, among others abilities. Flexbox (or flexible box layout) is a new box model optimized for UI layout. As
Backbone.js is quickly becoming the most popular framework for building modular client-side JavaScript applications. To help you tap the full potential of Marionette, Joseph Zimmerman prepared an entire eBook full of useful hands-on examples! To help you tap the full potential of Marionette, we’ve prepared an entire eBook full of useful hands-on examples which is also available in the Smashing Lib
A lightbox is one of those tools that work great on the desktop but often fail on small mobile devices. These days, finding a plugin that is responsive and that displays content right away is hard. For this reason, I created Magnific Popup, an open-source lightbox plugin focused on performance. A lightbox is one of those tools that work great on the desktop but often fail on small mobile devices.
This article is packed with a number of quirks and issues you should be aware of when working with CSS3 transitions. Please note that I’m not showing any workarounds or giving advice on how to circumvent the issues discussed. This article is packed with a number of quirks and issues you should be aware of when working with CSS3 transitions. Please note that I’m not showing any workarounds or givin
Zen Coding is a revolutionary plugin that has helped many developers through the years and has now reached a new level: Emmet. The most productive and time-saving text-editor plugin you will ever see. By instantly expanding simple abbreviations into complex code snippets, Emmet can turn you into a more productive developer. Emmet, previously known as Zen Coding, is the most productive and time-sav
One of Bootstrap’s appeals is that it just works. It’s a significant time-saver when starting a website, so much so that major organizations such as NBC, NASA and the White House are adopting it. And it empowers even the non-designers among us to turn out something decent. But what if your company logo is a different shade of blue? Not to worry. You don’t have to stick with the defaults. In this a
In this article, Jordan Moore is going to discuss a few of the lesser practiced elements that are quietly becoming part of the responsive Web design ecosystem under the umbrella of responsible Web design, a design that has been evolving rapidly ever since Ethan Marcotte coined the term two years ago. Since then, techniques have emerged, become best practices and formed part of our ever-changing me
Print continues to be treated somewhat cursorily by most Web designers, who tend to be obsessed with pixels rather than printers. In the real world, a significant portion of people rely on pages printed from websites for reference: there’s still something about having a physical sheet of paper in one’s hands, even in this age of digital saturation. Web developers can take several steps to bridge t
Everyone likes stuff that moves about on the Web, right? Remember how you cried joyful tears when you first used ? I do. I nearly sobbed all the water out of my body as I gazed upon “JAKE’S COOL WEBSITE” bobbing back and forth in uppercase serif. Of course, we’re more mature as an industry these days. We’ve learned that users don’t want websites to look like a CSI console having a personal crisis;
次のページ
このページを最初にブックマークしてみませんか？
『【 フリー素材・ブラシ ★ 】 - Smashing Magazine - For Professional Web Designe...』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
