Archive for year: 2019

Original Source: https://www.sitepoint.com/vue-development-environment/?utm_source=rss

If you’re going to do any serious amount of work with Vue, it’ll pay dividends in the long run to invest some time in setting up your coding environment. A powerful editor and a few well-chosen tools will make you more productive and ultimately a happier developer.

In this post, I’m going to demonstrate how to configure VS Code to work with Vue. I’m going to show how to use ESLint and Prettier to lint and format your code and how to use Vue’s browser tools to take a peek at what’s going on under the hood in a Vue app. When you’ve finished reading, you’ll have a working development environment set up and will be ready to start coding Vue apps like a boss.

Let’s get to it!

Want to learn Vue.js from the ground up? This article is an extract from our Premium library. Get an entire collection of Vue books covering fundamentals, projects, tips and tools & more with SitePoint Premium. Join now for just $9/month.

Installing and Setting Up Your Editor

I said that I was going to be using VS Code for this tutorial, but I’m afraid I lied. I’m actually going to be using VSCodium, which is an open-source fork of VS Code without the Microsoft branding, telemetry and licensing. The project is under active development and I’d encourage you to check it out.

It doesn’t matter which editor you use to follow along; both are available for Linux, Mac and Windows. You can download the latest release of VSCodium here, or download the latest release of VSCode here and install it in the correct way for your operating system.

Throughout the rest of this guide, for the sake of consistency, I’ll refer to the editor as VS Code.

Add the Vetur Extension

When you fire up the editor, you’ll notice a set of five icons in a toolbar on the left-hand side of the window. If you click the bottom of these icons (the square one), a search bar will open up that enables you to search the VS Code Marketplace. Type “vue” into the search bar and you should see dozens of extensions listed, each claiming to do something slightly different.

The post How to Set Up a Vue Development Environment appeared first on SitePoint.

Original Source: https://www.smashingmagazine.com/2019/08/writing-modes-layout/

Writing Modes And CSS Layout

Writing Modes And CSS Layout

Rachel Andrew

2019-08-06T14:00:00+02:00
2019-08-06T12:07:02+00:00

In this article I am going to take a look at the CSS writing-mode property. However this is not an article about the practical or creative application of this property. Instead, I want to demonstrate why understanding writing modes is so important, even to those of us who rarely need to change the writing mode of a page or component. The support of multiple writing modes is key to the way that our new layout methods of Flexbox and Grid Layout have been designed. Understanding this can unlock a better understanding of how these layout methods work.

What Are Writing Modes?

The writing mode of a document or a component refers to the direction that text flows. In CSS, to work with writing modes we use the writing-mode property. This property can take the following values:

horizontal-tb
vertical-rl
vertical-lr
sideways-rl
sideways-lr

If you are reading this article on Smashing Magazine in English then the writing mode of this document is horizontal-tb, or Horizontal Top To Bottom. In English sentences are written horizontally, the first letter of each line starting on the left.

A language such as Arabic also has a horizontal-tb writing mode. It is written horizontally, top to bottom, however Arabic script is written right to left, and so sentences in Arabic start on the right.

Chinese, Japanese and Korean are written vertically, with the first character of the first sentence being top right. Following sentences being added to the left. Therefore the writing mode used is vertical-rl. A vertical writing mode running from right to left.

Mongolian is also written vertically, but from left to right. Therefore, should you want to typeset Mongolian script you would use the writing mode vertical-lr.

The other two values of writing-mode are designed more for creative purposes than for typesetting vertical scripts. Using sideways-lr and sideways-rl turns text sideways – even characters normally written vertically and upright. The values unfortunately are only supported in Firefox at the moment. The following CodePen shows all of the different values of writing-mode, you will need to use Firefox if you want to see the sideways-* ones in action.

See the Pen [Writing Mode demo](https://codepen.io/rachelandrew/pen/dxVVRj) by Rachel Andrew.

See the Pen Writing Mode demo by Rachel Andrew.

Writing Modes can be used when creating a document that uses a language written using that writing mode. They can also be used creatively, for example to set a heading vertically down the side of some content. In this article however, I want to take a look at the impact that supporting vertical languages, and the possibility of vertical text, has on CSS layout, and across CSS in general.

Before I do so, if you are interested in the use of writing modes for vertical text, here are some useful resources.

The W3C Internationalization site has a wealth of useful information. Read about RTL scripts and vertical text.
Jen Simmons wrote an excellent article about CSS Writing Modes which also includes several examples from print of these modes in use.
Thoughts on the world and our writing systems – Chen Hui Jing
Vertical Typesetting With Writing Mode revisited – Chen Hui Jing
The writing-mode property on MDN

The Block And Inline Dimensions

When we change the writing mode of a document, what we are doing is switching the direction of the block flow. Therefore it quickly becomes very useful for us to understand what is meant by block and inline.

One of the first things we learn about CSS is that some elements are block elements, for example a paragraph. These elements display one after the other in the block direction. Inline elements, such as a word in a sentence display one after the other in the inline direction. Working in a horizontal writing mode, we become used to the fact that the block dimension runs top to bottom vertically, and the inline dimension left to right horizontally.

As block and inline elements relate to the writing mode of our document however, the inline dimension is horizontal only if we are in a horizontal writing mode. It doesn’t relate to width, but instead to inline size. The block dimension is only vertical when in a horizontal writing mode. Therefore it doesn’t relate to height, but to block size.

Logical, Flow-relative Properties

These terms, inline size and block size are also used as the names of new CSS properties designed to reflect our new writing mode aware world. If, in a horizontal writing mode you use the property inline-size instead of width, it will act in exactly the same way as width – until you switch the writing mode of your component. If you use width that will always be a physical dimension, it will always be the size of the component horizontally. If you use inline-size, that will be the size in the inline dimension, as the below example shows.

See the Pen [width vs. inline-size](https://codepen.io/rachelandrew/pen/RXLLyd) by Rachel Andrew.

See the Pen width vs. inline-size by Rachel Andrew.

The same is true for height. The height property will always be the size vertically. It relates to how tall the item is. The block-size property however gives the size in the block dimension, vertically if we are in a horizontal writing mode and horizontal in a vertical one.

As I described in my article “Understanding Logical Properties And Values”, there are mappings for all of the physical properties, those which are tied to the dimensions of the screen. Once you start to think about it, so much of CSS is specified in relation to the physical layout of a screen. We set positioning, margins, padding and borders using top, right, bottom, and left. We float things left and right. Sometimes tying things to the physical dimension will be what we want, however increasingly we are thinking about our layouts without reference to physical location. The Logical Properties and Values specification rolls out this writing mode agnostic way of working right across CSS.

Writing Modes, Grid and Flexbox

When our new layout methods landed on the scene, they brought with them an agnostic way of looking at the writing mode of the component being laid out as a flex or grid layout. For the first time people were being asked to think about start and end, rather than left and right, top and bottom.

When I first started to present on the subject of CSS Grid, my early presentations were a rundown of all of the properties in the specification. I mentioned that the grid-area property could be used to set all four lines to place a grid item. The order of those lines was not however the familiar top, right, bottom and left we use to set all four margins. Instead, we need to use top, left, bottom, right – the reverse of that order! Until I understood the connection between grid and writing modes, this seemed a very odd decision. I came to realise that what we are doing is setting both start lines, then both end lines. Using top, right, bottom and left would work fine if we were in a horizontal writing mode, turn the grid on its side however and that makes no sense. If we use grid-area: 1 / 2 / 3 / 5; as in the pen below the lines are set as follows:

grid-row-start: 1; – block start
grid-column-start: 2 – inline start
grid-row-end: 3 – block end
grid-column-end: 5 – inline end

See the Pen [grid-area](https://codepen.io/rachelandrew/pen/zgEEQW) by Rachel Andrew.

See the Pen grid-area by Rachel Andrew.

Flexbox Rows And Columns

If you use flexbox, and add display: flex to a container, your items will display as a row as the intial value of the flex-direction property is row. A row will follow the inline dimension of the writing mode in use. Therefore if your writing mode is horizontal-tb a row runs horizontally. If the text direction of the current script is left to right then items will line up starting from the left, if it is right to left they will line up starting on the right.

Use a vertical writing mode however, such as vertical-rl and flex-direction: row will cause the items to lay out vertically, as the inline direction is vertical. In this next CodePen all of the examples have flex-direction: row, only the writing mode or direction has changed.

See the Pen [flex-direction: row](https://codepen.io/rachelandrew/pen/XvezrE) by Rachel Andrew.

See the Pen flex-direction: row by Rachel Andrew.

Add flex-direction: column, and the items layout in the block dimension of your writing mode. In a horizontal writing mode the block dimension is top to bottom, so a column is vertical. With a writing mode of vertical-rl a column is horizontal. As with the previous example, the only difference between the below flex layouts, is the writing mode being used.

See the Pen [flex-direction: column](https://codepen.io/rachelandrew/pen/RXLjbX) by Rachel Andrew.

See the Pen flex-direction: column by Rachel Andrew.

Grid Auto-placement

When using auto-placement in grid, you will see similar behavior to that in flex layout. Grid items auto-place according to the writing mode of the document. The default is to place items in rows, which will be the inline direction – horizontally in a horizontal writing mode and vertically in a vertical one.

See the Pen [Grid auto-placement row](https://codepen.io/rachelandrew/pen/eqGeYV) by Rachel Andrew.

See the Pen Grid auto-placement row by Rachel Andrew.

Try changing the flow of items to column as in the example below. The items will now flow in the block dimension – vertically in a horizontal writing mode and horizontally in a vertical one.

See the Pen [Grid auto-placement column](https://codepen.io/rachelandrew/pen/xvXPby) by Rachel Andrew.

See the Pen Grid auto-placement column by Rachel Andrew.

Grid Line-placed Placement

Line-based placement also respects writing mode. The lines of our grid start at 1, both for rows and columns. If we position an item from column line 1 to column line 3, and are in a horizontal writing mode with a left to right direction, that item will stretch from the left-most column line across two grid tracks horizontally. Thus spanning two columns.

Change the writing mode to vertical-rl and column line 1 will be at the top of the grid, the item spanning two tracks vertically. Still spanning two columns, but the columns are now running horizontally.

See the Pen [Margins: adjacent siblings](https://codepen.io/rachelandrew/pen/mNBqEy) by Rachel Andrew.

See the Pen Margins: adjacent siblings by Rachel Andrew.

Alignment In Grid And Flexbox

One of the first places many people will have come into contact with the way Flexbox dealt with writing modes, would be when aligning items in a flex layout. If we take the flex-direction: row example above, and use the justify-content property to align all of the items to flex-end the items move to the end of their row. This means that in a horizontal writing mode with left to right direct the items all move to the right, as the end of that row is on the right. If the direction is right to left they all move to the left.

In the vertical writing mode they move to the bottom, assuming there is space for them to do so. I have set an inline-size on the components in this example to ensure that we have spare space in our flex containers to see the alignment in action.

Alignment is a little easier to understand in grid layout, as we always have the two axes to play with. Grid is two-dimensional, those two dimensions are block and inline. Therefore, you can remember one rule if you want to know whether to use the properties that begin with align- or those which begin with justify-. In grid layout the align- properties:- align-content, align-items, align-self are used to do block axis alignment. In a horizontal writing mode that means vertically, and in a vertical writing mode horizontally.

Once again we don’t use left and right or top and bottom, as we want our grid layout to work in exactly the same way no matter what the writing mode. So we align using start and end. If we align to start on the block dimension, that will be top when in horizontal-tb, but will be right when in vertical-rl. Take a look in the example below, the alignment values are identical in both grids, the only difference is the writing mode used.

See the Pen [Margins: adjacent siblings](https://codepen.io/rachelandrew/pen/jgGaML) by Rachel Andrew.

See the Pen Margins: adjacent siblings by Rachel Andrew.

The properties justify-content, justify-items,justify-self are always used for inline alignment in grid layout. That will be horizontal in a horizontal writing mode and vertical in a vertical writing mode.

See the Pen [Margins: adjacent siblings](https://codepen.io/rachelandrew/pen/RXLjpP) by Rachel Andrew.

See the Pen Margins: adjacent siblings by Rachel Andrew.

Flexbox alignment is complicated somewhat by the fact that the main axis can be switched from row to column. Therefore in flexbox we need to think about the alignment method as main axis versus cross axis. The align- properties are used on the cross axis. On the main axis all you have is justify-content due to the fact that in flexbox we deal with items as a group. On the cross axis you can use align-content in cases where you have multiple flex lines AND space in the flex container to space them out. You can also use align-items and align-self to move the flex items on the cross axis in relationship to each other and their flex line.

See the Pen [Flexbox alignment](https://codepen.io/rachelandrew/pen/YmrExP) by Rachel Andrew.

See the Pen Flexbox alignment by Rachel Andrew.

For more on alignment in CSS layout see my previous Smashing Magazine articles:

How To Align Things In CSS
Everything You Need To Know About Alignment In Flexbox

Writing Mode Awareness And Older CSS

Not all of CSS has fully caught up with this flow-relative, writing mode agnostic way of working. The places where it has not start to stand out as unusual the more you think of things in terms of block and inline, start and end. For example in multi-column layout we specify column-width, which really means column inline-size, as it isn’t mapped to the physical width when working in a vertical writing mode.

See the Pen [Multicol and writing-mode](https://codepen.io/rachelandrew/pen/pMWdLL) by Rachel Andrew.

See the Pen Multicol and writing-mode by Rachel Andrew.

As you can see, writing modes underpin much of what we do in CSS, even if we never use a writing mode other than horizontal-tb.

I find it incredibly helpful to think about CSS layout in this writing mode agnostic way. While it is perhaps a little early to be switching all of our properties and values to logical ones, we are already in a flow-relative world when dealing with new layout methods. Having your mental model be one of block and inline, start and end, rather than tied to the four corners of your screen, clarifies many of the things we come across when using flexbox and grid.

(ra)

Original Source: https://www.webdesignerdepot.com/2019/08/20-best-new-portfolios-august-2019/

It’s August, which means the rain is finally slowing down, and I have a chance to get my roof fixed. While I wait here under a literal tarp-fort that I hung up in my office, I thought I might as well compile some of the best recent portfolios for you all to look at.

We have a mix of sites this month, both colorful and, shall we say, color-minimalist. We’ve got more than a few specimens of one-column layouts, and some superb CSS Grid-based affairs. 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.

Mike Harrison

Mike Harrison’s portfolio is all about “big”: big text, big pictures, and a great big “M” that all fill up big screens (and yes, the small ones too). It’s dead simple, eye-catching, and might have a little bit of a blue thing going on. (It’s subtle, but it’s there [/sarcasm])

I sure would like it if the logo mark in the header took you back to the home page, like most sites do, but otherwise we have a solid (blue) first site for this list.

Platform: WordPress

Rules Creative

Who needs a power-point-style site when there’s actual 3D graphics to be had? Rules Creative uses both 3D and pseudo-3D effects combined with some light brutalism(?) to create a brash, but lovely-looking site. And it’s the first site this month to use yellow effectively, so it gets bonus points from me.

They could use a bit more contrast for the navigation menu at the bottom, perhaps, but it’s otherwise great.

Platform: Contentful

PWNK Digital

PWNK Digital brings more 3D WebGL graphics, a whole lot of pink, and a cyberpunk aesthetic, which makes their logotype alone very clever. The rest of the site is brilliantly atmospheric, whether you’re browsing through their work or their social feeds. It’s a great showcase of what can be achieved with WebGL and 3D graphics on the web in general.

Platform: Static Site (I think)

Caleb Barclay

Caleb Barclay’s site has that monospaced-type and thin borders look that was everywhere for a while. Combined with the pastels and grays, along with some light animation, the whole things is pleasant to browse through while listening to piano covers of ‘90s pop hits. I know that’s a bit specific, but it’s true.

It’s also another great example of what the Webflow platform can do. I do still prefer custom coding my sites, but man, the drag and drop builders are getting better.

Platform: Webflow

Zomorrodi Associates

The site for Zomorrodi Associates is a sleek, monochromatic design that makes excellent use of mild animation, for the most part, but hits you with a couple of big ones in just the right places. I kind of love the “broken” effect that they’re applied to a couple of elements, including their logo.

Platform: WordPress

Brightscout

Brightscout’s portfolio uses clean type, tons of futuristic vector illustrations, and a general aesthetic that I sort of remember seeing from the better designers on DeviantArt right as Web 2.0 was slowing down. Don’t get me wrong, I love it, and I love the way their using the green tones. If just using green made a company eco-friendly, these guys could have fixed the rainforest already.

Platform: WordPress

Rootsy

Rootsy has more pastels and grays to look at, but it’s mostly a brighter design. It’s also got a layout that works fantastically on larger screens, which I always like to see. As one-page portfolios go, this one feels downright elegant and sophisticated, while still managing to feel a bit techy.

Platform: Static Site

Kervin Tan

Kervin Tan’s portfolio has a lovely background animation, a good dark layout, and generally just looks pretty. Go look at the pretty thing.

Platform: Static Site

Isaac Powell

By contrast, Isaac Powell’s website is a lot brighter, though also very pretty. Go look at the other pretty thing. Well, I’ll admit that their approach to case studies is also pretty solid. They still let the images do most of the talking, but there’s a enough text to give you a feel for how they approach problems.

Platform: Statis Site

Ashley Sheekey

Ashley Sheekey’s portfolio looks less like a classic website, and more like a very elegant database. Nerd that I am, this does it for me. There’s something about that typography, grid-based organization, and the use of filters that just makes me happy.

Besides, when you have as much work to show off as Ashley does, filters just make sense. Someone please hold me down and tell me my own site doesn’t need filters. Oh, and do click on the “About” page, because I wasn’t kidding about that typography.

Platform: Static Site (I think)

Netbluez

Netbluez’ portfolio is modern, colorful, and it has lovely illustrations to boot. This one-pager keeps things mostly pretty simple, but then, I’m never going to get over how much my inner five-year-old likes space stuff. I love my minimalism, but I also like seeing designers go nuts with the illustration and graphics.

Platform: Static Site

Wesley van ’t Hart

This portfolio, well… I’ve seen a lot of minimalism in my admittedly limited time, but not many go for this much white space unless they have no content to speak of. Here, the white space is embraced, loved, and very well-used to frame a simple—but by no means empty—portfolio.

Platform: Static Site

Guillame Colombel

Guillame Colombel’s portfolio goes for the slideshow on the home page as their primary method of showing off their work. In general, animation is used to show off the images, and keep things looking fancy. And well, it does look fancy.

Platform: Static Site

EVERGIB

Want to see what CSS Grid can do for you? Look no further than the layout over at EVERGIB, with its print-like feel, and generally great use of white space. It’s a simple site, but simplicity is hard, and I get excited for the future of the web every time I see something this well-built.

Platform: WordPress

Stereo

Stereo is a site with smooth animation, a beautiful palette, and gorgeous type. It is a bit odd though, to have the navigation menu on the home page scrolling across the screen marquee-style (you can drag it manually, too, to get the link you want). It’s not an approach I’d recommend to everyone, but it’s certainly striking… and usable enough for short menus.

Plus, they managed to work memes into their actual website design in a way that made sense and amused me. I’m genuinely impressed with that.

Platform: WordPress

Christian Coan

Christian Coan’s portfolio is another one that leans hard into the use of yellow, but the real star of the show is that typography. I’m not sure I would have put the actual work all the way at the bottom, myself, but this one-pager is just that pretty.

Platform: Static Site

Kev Adamson

Not gonna lie, I am in love with Kev Adamson’s site for nostalgia reasons. It’s a bit ’90s, a bit early 2000s, and all built with more modern development techniques. I’m never going to say that we should all go back to skeuomorphism, but maybe some of us could, sometimes. This Kev person certainly can, I think.

Plus, they’re an illustrator. The aesthetic totally works.

Platform: Custom CMS

Cam Dales

Cam Dales’ portfolio is a fine example of both highly modern minimalism, and one-column layouts. It stands as a reminder that sometimes, when you’ve got very simple content, there’s no need to over complicate your design.

Platform: Cargo Collective, Backdrop

Studio 313

Studio 313 is coming in hot with a modern aesthetic, fantastic type, gradients, and A PUG WITH SUNGLASSES IT’S SO CUTE I WANT HIM BUT THEY HAVE SO MANY HEALTH PROBLEMS… and I have cats anyway. They’d go full Garfield on that poor thing.

It could use a bit more text contrast in places, but overall this site has quirky personal touches all over it, while still maintaining a professional image. That’s an approach I can respect.

Platform: WordPress

Kévin Chassagne

Kévin Chassagne’s portfolio is living (or at least functioning) proof that you can have and elegant, fancy website with great-looking animation, that also works without JavaScript. Sure, you don’t see the fancy ripples in the background, but everything important and functional still functions.

Sure, it’s a one-page portfolio with links to external sites, but my point stands. Content can load without JS. Oh, and I should probably mention that the site has fairly sold typography, and that I adore the color scheme. In this age of digital screens, it’s literally easy on the eyes.

Platform: Static Site

And you know what? If I’m honest, a part of me will really miss this tarp fort when it’s gone. It’s a fort. In my grown up office. Everyone should have one.

Source

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;}

Original Source: https://www.sitepoint.com/sitepoint-premium-new-releases-smashing-6-graphql-react-native/?utm_source=rss

We’re working hard to keep you on the cutting edge of your field with SitePoint Premium. We’ve got plenty of new books to check out in the library — let us introduce you to them.

Smashing Book 6: New Frontiers In Web Design

It’s about time to finally make sense of all the front-end and UX madness. Meet Smashing Book 6, with everything you need to know about web design. From design systems to accessible single-page apps, CSS Custom Properties, CSS Grid, Service Workers, performance patterns, AR/VR, conversational UIs and responsive art direction.

➤ Read Smashing Book 6: New Frontiers In Web Design.

Working with GraphQL and React Native

In this tutorial, we’re going to demostrate the power of GraphQL in a React Native setting by creating a simple coffee bean comparison app. So that you can focus on all of the great things GraphQL has to offer, Jamie has put together the base template for the application using Expo.

➤ Read Working with GraphQL and React Native.

And More to Come…

We’re releasing new content on SitePoint Premium regularly, so we’ll be back next week with the latest updates. And don’t forget: if you haven’t checked out our offering yet, take our library for a spin.

The post SitePoint Premium New Releases: Smashing 6 + GraphQL & React Native appeared first on SitePoint.