Big Banks Are Once Again Taking Risks With Complex Financial Trades, Report Says

After the 2008 financial crisis, rules required much greater transparency on the sale of credit default swaps. But a loophole allows banks to evade regulation by offloading the trades to foreign subsidiaries.

Are banks exploiting a loophole in U.S. rules that allows some derivatives traders to escape federal regulation? “We’ve seen this movie already,” said the report’s author, Michael Greenberger.

(Image credit: Shannon Stapleton/Reuters)


20 Best New Portfolios, June 2018

Welcome back, Readers. It’s June, and if I got paid extra for every instance of the word “minimalist” in this article, I could probably afford to vacation in Canada. Well, my point is that minimalism is the general theme of this month, because that’s what it has all come down to: various forms of minimalism.

Still, within that descriptor, there’s a fair amount of variety to be had here. Enjoy.

Note: I’m judging these sites by how good they look to me. If they’re creative and original, or classic but really well-done, it’s all good to me. Sometimes, UX and accessibility suffer. For example, many of these sites depend on JavaScript to display their content at all; this is a Bad Idea™, kids. If you find an idea you like and want to adapt to your own site, remember to implement it responsibly.

Bruno Ferdinand

Bruno Ferdinand is a designer with strong type skills and the nearly-obligatory hipsterish tendencies we see a lot of nowadays. The guy does simple, beautiful, and kind of rustic design rather well.

Platform: JS app


Yumpic is a portfolio site featuring – and you might have guessed this – photos and videos of food. They specialize in food-related digital content for anyone who wants to make the perfect Instagram account, and also (read: actually mostly) for people who make money off their food. The actual portfolio work is artfully interspersed with illustration and playful touches, which definitely sets the right mood,in my opinion.

Platform: WordPress

Duane Dalton

Duane Dalton’s portfolio pretty strongly reflects his print-focused work, being minimalist and asymmetrical. It’s one of the simpler sites on this list, but no less visually pleasing for that.

Platform: Static Site

Kenta Toshikura

Kenta Toshikura’s website is one of those minimalist-looking presentation-style sites. As is par for the course in cases like these, I’d not look too closely at the usability, but the visuals and general aesthetic style are just plain pretty, darnit. In particular, there’s this touch of 3D-feeling typography that catches my eye.

Platform: Static Site

Ellen Mandemaker

I’m not precisely sure what Ellen Mandemaker makes, precisely, but my best guess is art. And art is what you get from the get go: you’ll see a collage of it to begin with, and then a simple and orderly portfolio that promptly and efficiently throws you into the deep end. It’s one of those portfolios that made me think “I’m not entirely sure what I’m looking at, but I like it.”

Platform: Static Site

No Plans

No Plans is a one-page portfolio that keeps things fairly simple, preferring a clean design and a decidedly serif-friendly way of doing things. Also, they indent some of their paragraphs. I know, right? You hardly ever see that these days.

Platform: WordPress


I’ll never be a fan of sites that change your cursor, but everything else about Lab101 is pretty solid. The overall aesthetic is minimalist and modern, with some interesting touches of 3D animation on the “Contact” page.

Platform: WordPress

Studio Bjørk

Studio Bjørk has a thing for monochromatic palettes, diagonal lines, and horizontal layouts. And you know what? It works out pretty darned well for them. There’s also a significant bit of animation, great type, and some background video here and there, all combining to make a site that a marketer would call dynamic. Oh,

[Sighs.] Fine, I’ll call it dynamic, too. It just sounds so much like marketer-speak that I didn’t want to say it.

Platform: Static Site

Juul Hondius

I often make reference to magazine-style designs ion this article series, but Juul Hondius’ portfolio is one of the more interesting examples I’ve seen lately. It looks like an old, ooold magazine, complete with small spacing issues and slightly cramped text, combined with beautiful and striking photography.

Those might technically be “issues”, but the design as a whole hits me with a very specific sense of nostalgia that just sells the imagery to me. Besides, it’s a photographer’s site. How badly do you want to read the text anyway?

Platform: Static Site

Thu-Van Tran

Thu-Van Tran’s website has one main theme that makes it visually interesting: layers. Every page is loaded on top of the home page like one piece of paper overlaying another. It’s like a paper prototype come to life. Combined with the sheer simplicity of layout, and strong typographic choices, it stands out.

Platform: Static Site

Aristide Benoist

Aristide Benoist’s portfolio combines a grid-based aesthetic with warping animations to striking effect. While most of the text could and certainly should be bigger, the visual theme of this site is enough to make you look, at least. Whether it’s interesting enough to make you grab your glasses will greatly depend on the user.

Platform: Static Site


Datagif love their sans-serif type, and apparently spicing up standard layouts with geometric flourishes and animation. This one’s not going to blow your mind, but it looks good, even kind of playful for all the corporate aesthetic it has. Give it a look.

Platform: Static Site (I think)


Oh, Handsome takes me back maybe five years or so. The large serif type, the darkened photos as backdrops, all those barely visible straight lines. Did we just go back to the early days of flat design? Well, it’s both nostalgic, nearly perfectly executed, and a pleasure to browse.

Platform: Static Site


Sister’s agency site is living proof that any design style, even the once super-artsy minimalism-with-asymmetry trend, can be given an almost corporate flair. And that’s not a criticism. Corporate-feeling front end design tends to be modern and devastatingly effective in its simplicity, and the same is true here.

Not a fan of those occasional modal pop-ups, though. That’s a corporate trend that can go straight to hell.

Platform: WordPress

Makers and Allies

Makers and Allies is a branding studio in the finest tradition of hipster design studios, but with a lot more motion design added to the mix. It evokes just the right balance of rustic aesthetics with the modern technical competence we expect. Or at least the animation we expect. Whatever, it looks good, even if some of the text could use more contrast.

Platform: WordPress

Bipolar Studio

Bipolar Studio combines motion graphics with a pretty modernist aesthetic style, and good old fashioned big type. Their work basically is video, so it’s they use a lot of it in their design. I do like the little “stats” section at the end of each project page, detailing what it took to complete each project.

It’s just that, and I can’t believe I’m saying this, but the logo could be bigger. With type that thin, it should be.

Platform: Static Site and/or JS App

Akins Parker

Akins Parker’s agency site wasn’t made with Powerpoint, but it’s presentational design in its purest form. You go to see this one for the graphics, not for the usability.

Platform: Static Site

Ian Jones

Ian Jones’ portfolio is another site to embrace the visual grid theme. But unlike many other sites, the visual representation of the grid is only visible when his work is on the page. It’s a dead-simple approach, but it looks calm and professional, and I can’t fault that.

Platform: Static Site

Michael Uloth

Michael Uloth is a rare talent indeed. When he’s not literally singing opera, he builds minimalist-yet-beautiful websites for artsy people. His own site is no exception.

Platform: Static Site and/or JS App

Lasse Fløde

Lasse Fløde is a photography studio with a striking one-page portfolio. Lovers of white space should definitely enjoy this one, as it employs that asymmetrical almost collage-style so favored by many photography portfolios these days. Simple and effective.

Platform: Static Site

Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5!


p img {display:inline-block; margin-right:10px;}

.alignleft {float:left;}

p.showcase {clear:both;}

body#browserfriendly p, body#podcast p, div#emailbody p{margin:0;}

Learning Gutenberg: What is Gutenberg, Anyway?

Gutenberg is the new React-driven SPA editing experience in WordPress. Oh wait, a string of buzzwords doesn’t count for a viable explanation of software? We’re going to unpack that string of buzzwords as we explain what Gutenberg is.

Article Series:

  1. Series Introduction

  2. What is Gutenberg, Anyway? (This Post)

  3. A Primer with create-guten-block (Coming Soon!)

  4. Modern JavaScript Syntax (Coming Soon!)

  5. React 101 (Coming Soon!)

  6. Setting up a Custom webpack (Coming Soon!)

  7. A Custom “Card” Block (Coming Soon!)

First, a before-and-after screenshot might drive home the idea for you:

<img src="; srcset=",w_1000,f_auto,q_auto/v1525993775/gutenburg-1-1_dkxcb7.png 1000w,,w_887,f_auto,q_auto/v1525993775/gutenburg-1-1_dkxcb7.png 887w,,w_612,f_auto,q_auto/v1525993775/gutenburg-1-1_dkxcb7.png 612w,,w_200,f_auto,q_auto/v1525993775/gutenburg-1-1_dkxcb7.png 200w" sizes="(min-width: 1850px) calc( (100vw – 555px) / 3 )

(min-width: 1251px) calc( (100vw – 530px) / 2 )

(min-width: 1086px) calc(100vw – 480px)

(min-width: 626px) calc(100vw – 335px)

calc(100vw – 30px)” alt=”” />

On the left, the editor as it exists pre-Gutenberg. On the right, with Gutenberg enabled via plugin.

Buzzword #1: Editing Experience

Gutenberg is a redesign of the WordPress WYSIWYG editor.

The editor in WordPress has traditionally been that single WYSIWYG field, (the blob of content) that saves the entire content of the post to the post_content database table. Gutenberg doesn’t change this: it saves all the post content to the post_content table to be retrieved by calling the_content() in our PHP templates.

So yeah, Gutenberg is just a redesign of the editor… but it’s a travesty to call Gutenberg just a redesign of the editor! It is so much more than that!

Gutenberg introduces an entirely new way of thinking about content in WordPress. It not only gives developers a native way to handle content in chunks (we’ll actually be referring to them as blocks, which is their official name), it enables end-users to create rich, dynamic page layouts with WordPress out of the box. Without Gutenberg, this would likely require a hoard of third-party plugins (read: shortcode vomit and server strain) as is currently the case with what will be known as the WordPress “Classic” editor.

For the purposes of this article and our learning, know this: Gutenberg does not change how WordPress functions at its very core. It is 99% a change to the editor’s user interface. Hitting “Publish” still saves content to post_content-there’s just a lot more opportunity to craft the user experience of writing and editing content.

Buzzword #2: SPA

Translation: Gutenberg is a Single Page Application within WordPress.

In a Single Page Application (SPA) an application runs on a single page load, and subsequent interactions are driven 100% by JavaScript and Ajax requests.

Note the “within WordPress’ part of the above statement-Gutenberg does not (currently) impact any part of WordPress beyond where one would normally see the editor. In essence, Gutenberg replaces the WYSIWYG, TinyMCE editor with an SPA.

This means that writing content in Gutenberg is fast and satisfying, and I wish I could say my (limited) experience with developing blocks has been the same. For our journey, this SPA business means slow page loads during development (we are loading a lot of JavaScript), obscure and frustrating console errors, and npm modules for days.

Of course, that’s a glass-half-empty look at the situation. Glass half-full? It feels really good when something works. The wins are few and far between at first, but stick with it!

Buzzword #3: React-driven

Translation: Yes, Gutenberg is built in React. That’s probably not going to change anytime soon, if ever.

There was some #hotdrama back in September-October of 2017 about choosing a framework for WordPress since Facebook added a patent clause to React. But after major backlash from open source communities, including WordPress (which, ahem, powers ~30% of websites), Facebook changed it back.

As of January this year (2018) there were still whispers that a framework decision for core is pending, but until we get official word from the powers that be, let’s look at the facts.

  • Gutenberg is in active development.
  • Themes and plugins are in active development preparing for Gutenberg.
  • All of that is happening in React.

I’m putting my money on React, and if that changes, great! I’ll have React on my resume and get on to learning whatever its replacement may be.

Important Resources

  1. The GitHub repo – This is mainly for searching issues when they come up during development to see if they have already been filed.
  2. The Gutenberg Handbook – This is where the official Gutenberg documentation lives.


While the Gutenberg project is far enough along that there will not be any major infrastructural changes, we must remember that Gutenberg is brand new software in active development and anything could happen. Why not be on the front lines? This is exciting stuff.

The WordPress community has already begun to take up the task of creating tools, tutorials, case studies, courses, and community-contributed resources.

That being said, you may search a question that hasn’t been asked before. At some point, you will probably find yourself reading the Gutenberg source code for documentation, and you may find the existing documentation to be out of date. You may test out an example from a two-week-old tutorial only to find it uses a deprecated API method.

If you do come across something you feel is not as it should be, research and report the issue on GitHub, ask about it in the #core-editor channel of the WordPress Slack, or alert the author of the aforementioned out-of-date blog post. And if it’s documentation that’s a problem, you can always fix it yourself!

Setting Up

Now, I’d like for you to set up a development environment so that we can continue this discussion with more context. Do these things:

  1. Set up a local WordPress install, however you choose to do that-this can be an existing project, or a fresh install. Just something that can be very broken for demo purposes.
  2. Activate a relatively simple theme. Twenty Seventeen will work just fine. The only thing your theme needs to have is a call to the_content(); in its post and page templates, and most out-of-the-box themes do.
  3. Install Gutenberg. You can find it in the plugin repository. This version is quite far along and updated regularly, so we don’t need to worry about working from a development build.
  4. Activate the Gutenberg plugin and create a new post.

If you haven’t run a WordPress site locally before, check out this guide. We strongly recommend that you download something like MAMP, XAMPP, or similar if this is your first time.

Let’s Explore

You should have something a lot like this:

<img src="; srcset=",w_1000,f_auto,q_auto/v1520046139/gutenberg-tutorial-basic_rjldeq.png 1000w,,w_794,f_auto,q_auto/v1520046139/gutenberg-tutorial-basic_rjldeq.png 794w,,w_643,f_auto,q_auto/v1520046139/gutenberg-tutorial-basic_rjldeq.png 643w,,w_452,f_auto,q_auto/v1520046139/gutenberg-tutorial-basic_rjldeq.png 452w,,w_200,f_auto,q_auto/v1520046139/gutenberg-tutorial-basic_rjldeq.png 200w" sizes="(min-width: 1850px) calc( (100vw – 555px) / 3 )

(min-width: 1251px) calc( (100vw – 530px) / 2 )

(min-width: 1086px) calc(100vw – 480px)

(min-width: 626px) calc(100vw – 335px)

calc(100vw – 30px)” alt=”A screenshot of a mostly blank post in Gutenberg with the title “Great Post”” />

A mostly blank post in Gutenberg. Typing / reveals the block selector.

As in the above image, typing a / reveals a list of blocks. Erase that / and on the right you should see a + that, when clicked, will reveal an additional listing of blocks, organized by category.

<img src="; srcset=",w_1000,f_auto,q_auto/v1520046337/gutenberg-block-libary_irsprc.png 1000w,,w_775,f_auto,q_auto/v1520046337/gutenberg-block-libary_irsprc.png 775w,,w_627,f_auto,q_auto/v1520046337/gutenberg-block-libary_irsprc.png 627w,,w_444,f_auto,q_auto/v1520046337/gutenberg-block-libary_irsprc.png 444w,,w_200,f_auto,q_auto/v1520046337/gutenberg-block-libary_irsprc.png 200w" sizes="(min-width: 1850px) calc( (100vw - 555px) / 3 )

(min-width: 1251px) calc( (100vw - 530px) / 2 )

(min-width: 1086px) calc(100vw - 480px)

(min-width: 626px) calc(100vw - 335px)

calc(100vw - 30px)" alt="Screenshot of a blank Gutenberg post with a view of the blocks library" />

A different view of blocks, this time organized by category.

Notice the panel on the right with tabs for both "Document" and "Block." The "Block" tab is known as the block inspector, and gives us a nice area for block specific options like so, for the paragraph block:

<img src="; srcset=",w_1000,f_auto,q_auto/v1520046479/gutenerberg-block-inspector_qyykpj.png 1000w,,w_618,f_auto,q_auto/v1520046479/gutenerberg-block-inspector_qyykpj.png 618w,,w_200,f_auto,q_auto/v1520046479/gutenerberg-block-inspector_qyykpj.png 200w" sizes="(min-width: 1850px) calc( (100vw - 555px) / 3 )

(min-width: 1251px) calc( (100vw - 530px) / 2 )

(min-width: 1086px) calc(100vw - 480px)

(min-width: 626px) calc(100vw - 335px)

calc(100vw - 30px)" alt="A screenshot of a blank Gutenberg post with a graphic indicating the block inspector area on the right." />

The block inspector reveals customization options for a specific block.

I recommend playing around with your post for a few more minutes and testing out the different types of blocks. Keep an eye on that inspector sidebar to see what customization options each block offers. All of these blocks you see now are included in a a library of core blocks and can be a reference point for creating custom blocks (which we will do in the next part of this series!).

After you've created a post populated with five-ish blocks of varying kinds, save and publish the post, then take a look at it from the front end. Nice!

Now, let's do something crazy. Deactivate Gutenberg from the Plugins screen. Go back to the edit screen for that post, and you should see something like this, in the "Classic" editor:

<img src="; srcset=",w_1000,f_auto,q_auto/v1520046686/gutenberg-blocks-classic_ltxf86.jpg 1000w,,w_897,f_auto,q_auto/v1520046686/gutenberg-blocks-classic_ltxf86.jpg 897w,,w_692,f_auto,q_auto/v1520046686/gutenberg-blocks-classic_ltxf86.jpg 692w,,w_491,f_auto,q_auto/v1520046686/gutenberg-blocks-classic_ltxf86.jpg 491w,,w_200,f_auto,q_auto/v1520046686/gutenberg-blocks-classic_ltxf86.jpg 200w" sizes="(min-width: 1850px) calc( (100vw - 555px) / 3 )

(min-width: 1251px) calc( (100vw - 530px) / 2 )

(min-width: 1086px) calc(100vw - 480px)

(min-width: 626px) calc(100vw - 335px)

calc(100vw - 30px)" alt="" />

Blocks, as they are saved in the database.

What are all these comments? Those are blocks! They map one to one with the blocks you chose when creating the post.

Under the hood, blocks are chunks of HTML identifiable by their surrounding HTML comments. In the example above, you'll notice a few of the block names, i.e. wp:block-name are accompanied by JSON, such as the second paragraph block. When I specified some customization options in the block inspector, these were stored along with the block identifier so that now, when I reactivate Gutenberg, my settings won't be lost; they are saved right alongside the block definition itself.

Before you reactivate the plugin, however, view the post again from the front end. Did you lose some styling? I did.

Go ahead and reactivate the Gutenberg plugin, and double check the editor to make sure your blocks are still intact. Because of those HTML comments, they should be!

Now, let's poke around and see where these styles are coming from. When I inspect my paragraph block from the front end, I see a few inline styles-a result of options selected in the block inspector-as well as some structural styles from what appears to be a style.css file enqueued by the Gutenberg plugin (after 5.0 is released, remember, this will be just from WordPress, not a plugin).

<img src="; srcset=",w_1000,f_auto,q_auto/v1520047346/gutenberg-style-path_armnyb.png 1000w,,w_789,f_auto,q_auto/v1520047346/gutenberg-style-path_armnyb.png 789w,,w_619,f_auto,q_auto/v1520047346/gutenberg-style-path_armnyb.png 619w,,w_448,f_auto,q_auto/v1520047346/gutenberg-style-path_armnyb.png 448w,,w_200,f_auto,q_auto/v1520047346/gutenberg-style-path_armnyb.png 200w" sizes="(min-width: 1850px) calc( (100vw - 555px) / 3 )

(min-width: 1251px) calc( (100vw - 530px) / 2 )

(min-width: 1086px) calc(100vw - 480px)

(min-width: 626px) calc(100vw - 335px)

calc(100vw - 30px)" alt="A view of the style inspector showing a path to a stylesheet from the Gutenberg plugin folder" />

Inspecting the styles from the front end, we see there are styles coming from Gutenberg itself

Now, try inspecting that paragraph block from the editor view. You should see the same set of inline styles and the same p.has-paragraph selector applied to the block from the editor view. Interesting!

This introduces the fact that blocks can have shared styles between the theme's front-end and the editor. Pre-Gutenberg, we had theme, or front-end, styles, and we could separately enqueue an editor-style.css to add CSS to the WordPress admin area. Now, however, our blocks share styles between the front-end and the editor view pretty much by default.

Glass half-full perspective: this allows us to craft a content view for publishers that is much closer to what they will see on the front end. They will no longer need to hit the Preview button a dozen or more times to view small content changes before publishing.

Glass half-empty perspective: This could create more work for us-as designers and developers, we now have an editor experience to create in addition to the front-facing website! And we have to figure out which styles are shared between the two. However, I would argue that with a well thought-out design and front end strategy, this won't be as much of an issue as you'd think.

Umm... Where's the JavaScript?

We're going to need JavaScript to create a block in Gutenburg. So let's make a block already! That's the focus of the next post in this series.

Article Series:

  1. Series Introduction

  2. What is Gutenberg, Anyway? (This Post)

  3. A Primer with create-guten-block (Coming Soon!)

  4. Modern JavaScript Syntax (Coming Soon!)

  5. React 101 (Coming Soon!)

  6. Setting up a Custom webpack (Coming Soon!)

  7. A Custom "Card" Block (Coming Soon!)

The post Learning Gutenberg: What is Gutenberg, Anyway? appeared first on CSS-Tricks.

Foreword for CSS In Depth

Keith Grant recently released a brand new book on CSS: CSS in Depth. If you’re looking for a book focused specifically on learning CSS, you’ve found it. I was happy to write the foreword for it, which I’ll republish here.

“A minute to learn… A lifetime to master.” That phrase might feel a little trite these days, but I still like it. It was popularized in modern times by being the tagline for the board game Othello. In Othello, players take turns placing white or black pieces onto a grid. If, for example, a white piece is played trapping a row of black pieces between two white, all the black pieces are flipped and the row becomes entirely white.

Like Othello, it isn’t particularly hard to learn the rules of CSS. You write a selector that attempts to match elements, then you write key/value pairs that style those elements. Even folks just starting out don’t have much trouble figuring out that basic syntax. The trick to getting good at CSS, as in Othello, is knowing exactly when to do what.

CSS is one of the languages of the web, but it isn’t quite in the same wheelhouse as programming. CSS has little in the way of logic and loops. Math is limited to a single function. Only recently have variables become a possibility. Rarely do you need to consider security. CSS is closer to painting than Python. You’re free to do what you like with CSS. It won’t spit out any errors at you or fail to compile.

The journey to getting good at CSS involves learning everything CSS is capable of. The more you know, the more natural it starts to feel. The more you practice, the more easily your brain will reach for that perfect layout and spacing method. The more you read, the more confident you’ll feel in tackling any design.

Really good CSS devs aren’t deterred by any design. Every job becomes an opportunity to get clever, a puzzle to be solved. Really good CSS devs have that full and wide spectrum of knowledge of what CSS is capable of. This book you have is part of your journey to being that really good CSS dev. You’ll gain that spectrum of knowledge necessary to getting there.

If you’ll permit one more metaphor, despite CSS going on a couple of decades old, it’s a bit like the wild wild west. You can do just about whatever you want to do, as long as it’s doing what you want. There aren’t any hard and fast rules. But because you’re all on your own, with no great metrics to tell you if you’re doing a good job or not, you’ll need to be extra careful. Tiny changes can have huge effects. A stylesheet can grow and grow and become unwieldy. You can start to get scared of your own styles!

Keith covers a lot of ground in the book, and every bit of it will help you become a better CSS developer and tame this wild wild west. You’ll deep dive into the language itself, learning what CSS is capable of. Then, just as importantly, you’ll learn about ideas around the language that level you up in other ways. You’ll be better at writing code that lasts, is understandable, and performant.

Even seasoned devs will firm up their skills here. If you find yourself reading about something that you already know, you’ll firm up your skills, affirm your knowledge, and find little “oooo” bits that surprise you and extend that base.

Here’s that link to buy it again.

The post Foreword for CSS In Depth appeared first on CSS-Tricks.