WordPress.com Growth Summit | CSS-Tricks
Strategy

WordPress.com Growth Summit | CSS-Tricks


I’m speaking at The Official WordPress.com Growth Summit coming up in August. “Learn how to build and grow your site, from start to scale”, as they say. Lovely, thick, diverse set of speakers. It’s a little bit outside my normal spheres which makes it extra exciting for me. Selena Jackson:

The goal of this event is to inspire, connect you with the tools you need, and help you build your community. Sessions will take place across three tracks: blogging, business, and creative. You can take sessions on any or all tracks

If it interests you, it’s $79, and 20% off that with coupon code ChrisCoyier20.

My session?

CSS-Tricks: Putting WordPress to Work

Chris Coyier’s CSS-Tricks is a popular publication geared to web designers and developers. It’s also very much a business powered by WordPress. Chris will take us behind the scenes at CSS-Tricks, sharing all the ways it takes advantage of WordPress features, on both the technical and business sides.

Selena sent me some interesting questions as well:

What has kept you on WordPress for all these years? How has your website been essential to your growth or success?

It’s true that CSS-Tricks has never been anything but a WordPress site. I’ve never switched platforms or majorly re-architected in any way. But it’s not because of laziness or because I just don’t have any exposure to other methods of website building. I feel fortunate in that I’ve had lots of exposure and experience to different ways to build websites, from JAMstack with static site generators with cloud functions, to CMSs of all sorts, to Ruby on Rails sites, to Python-based sites… all kinds of stuff. All of it has a place.

Part of the equation is that I’m a solo developer for the most part on CSS-Tricks. Just me over here. I don’t have the budget for a fancy development team. But I still want to feel powerful and productive. That’s one of the things that WordPress has given to me. I feel like I can build just about anything on WordPress, and do it in a way that doesn’t feel like a mountain of technical debt that I would struggle to maintain.

Even though there is a decent amount of custom stuff going on, it probably looks like more than it is. Most of the work I do is pretty normcore WordPress development. I use popular well-maintained plugins. I use standard filters. I use the templating system as it was designed. I try to do things “The WordPress Way”, and that means year after year it’s very easy for me to maintain the site and build out what I want to build out. I never worry if I’m going against the grain or that I’m doing anything that puts me at any risk of not being able to upgrade things.

What’s one key thing you want our Growth Summit attendees to take away from your keynote talk/session?

I think my main vibe is going to be sharing just how powerful WordPress can be as a platform to run a publishing business on.

In a crowded and noisy web environment, what did you do to help your website stand out? What’s unique about your story or business?

What I hope we stand out for is the content on the site itself. We strive to be consistent, trustworthy, friendly, and helpful. In a world so laden with misinformation, zero-ethics advertising, and UX-hostile interfaces trying to squeeze everything they can from you, a site that’s just trying to help you understand the web and run a normal business out of it I hope feels as good to other people as it does to me.

Has COVID-19 changed how you use your website — or your approach to your online presence?

Not terribly. I’m finding advertisers pulling back a little bit, and keeping a closer eye on their sponsorship investments. And while I don’t love the idea of seeing those dollars go down, I don’t blame them. It’s smart for any business to make sure their money is well-spent.



Source link

A page layout diagram showing a header stretching across the top of the page, a footer stretching across the bottom of the page, and three columns of content between them: two sidebars to either side, and a main content column in the middle.
Strategy

Accordion Rows in CSS Grid – Eric’s Archived Thoughts


Another aspect of the meyerweb redesign I’d like to explore is the way I’m using CSS Grid rows to give myself more layout flexibility.

First, let’s visualize the default layout of a page here on meyerweb.  It looks something like this:

A page layout diagram showing a header stretching across the top of the page, a footer stretching across the bottom of the page, and three columns of content between them: two sidebars to either side, and a main content column in the middle.

So simple, even flexbox could do it!  But that’s only if things always stay this simple.  I knew they probably wouldn’t, because the contents in those two sidebars were likely to vary from one part of the site to another—and I would want, in some cases, for the sidebar pieces to line up vertically.  Here’s an example:

A page layout diagram showing a header stretching across the top of the page, a footer stretching across the bottom of the page, and three columns of content between them. There is a main content column in the middle which stretches full-height between the header and footer. In the right sidebar, there are three boxes, labeled 'navigation', 'feeds', and 'categories', arranged in that order, top to bottom. In the left sidebar, there is a single box labeled 'archives' that isn’t as tall as the main content column. Its top edge is vertically aligned with the top edge of 'feeds', the second box in the right-hand sidebar.

That’s the basic layout of archive pages.  See how the left sidebar’s Archives lines up with the top of the Feeds box in the right sidebar?  That’s Grid for you.  I thought about lumping the Feeds and Categories into a the same grid cell (thus making them part of the same grid row), which would have meant wrapping them in a <div>, but decided keeping them separate allows more flexibility in terms of responsive rearrangement of content.  I can, for example, assign the Feeds to be followed by Archives and then Categories at mobile sizes.  Or to reverse that order.

More to the point, I also wanted the ability to place things along the bottoms of the sidebars, down near the footer but still next to the main content column, like so:

A page layout diagram similar to the previous diagram, with header and footer, main content column, and the 'archives' box in the left sidebar; and 'navigation, 'feeds', and 'categories' in the right sidebar. This figure adds 'box1' and 'box2' to the bottom of the left sidebar, and 'box3' to the bottom of the right sidebar. The bottom edges of 'box2' and 'box3' are vertically aligned with the bottom of the main column.

An early design prototype for the blog archives put the “Next post” and “Previous post” links in some of those spots, before I moved the links into the bottom of the main content column.  So at the moment, I don’t have anything making use of those spots, although the capability is there.  I could cluster content along the tops and the bottoms of the sidebars, as needed.

But here’s the important thing, and really the point of this article: I’m not rewriting the row structure and grid cell assignments for each page type.  There’s a unified row template applied to the body on every page that uses the Hamonshū design.  It is:

grid-template-rows: repeat(7,min-content) 1fr repeat(3,min-content);

The general idea here is, the first seven rows are sized to be the minimum necessary to contain content inside those rows.  This is also true of the last three rows.  And in between those sets, a 1fr row that takes up the rest of the grid container’s height, pushing the two sets apart.

In the simplest case, where there’s just a header, main content column, and a footer, with nothing in the sidebars (the layout has three columns, remember), the content will fill the rows like so:

A page layout diagram showing a header stretching across the top of the page, a footer stretching across the bottom of the page, and a main content column. There is open space to the sides of the main content column.

Here’s the Grid CSS to make that happen:

header {grid-row: 1; grid-column: 1 / -1;}
footer {grid-row: -2; grid-column: 1 / -1;}
main {grid-row: 2; grid-column: 2;}

Thus: The header fills all of row one.  The content expands row two from its placement in the center column.  The footer fills all of the last row, which is specified via grid-row: -2 (because grid-row: -1 would align its top with the bottom edge of the grid container).  There’s no more content, so all the other min-content rows have no content, so their height is zero.  And there’s no leftover height to soak up, so the 1fr row also has a height of zero.  Seems like a lot of rows specified to no real purpose, doesn’t it?

But now, let’s add some sidebar content to columns one and three; that is, the sidebars.  For example, you might remember this layout from before:

The same as figure 2. To recap: A page layout diagram showing a header stretching across the top of the page, a footer stretching across the bottom of the page, and three columns of content between them. There is a main content column in the middle which stretches full-height between the header and footer. In the right sidebar, there are

Given this setup, we can’t just assign the main content column to grid-row: 2 and leave it at that—it’s going to have to span rows.  Really, it needs to span all but the last, thus ensuring it reaches down to the footer.  So the CSS ends up like this:

header, footer {grid-row: 1; grid-column: 1/-1;}
footer {grid-row: -2;}
main {grid-column: 2; grid-row: 2/-2;}
nav {grid-row: 2; grid-column: 3;}
.archives {grid-row: 3 / span 3;}
.feeds {grid-row: 3; grid-column: 3;}
.categories {grid-row: 4; grid-column: 3;}

And as a result, the rows end up like this:

The same as the previous diagram, but in this case the main content column is taller. Purple dashed lines show where the grid lines are placed in this layout; in particular, they make it clear that the 'navigation', 'feeds', 'categories' boxes in the right-hand sidebar are placed in separate grid rows, and the 'archives' box in the left-hand sidebar spans three grid rows.
Grid-line visualization courtesy the Firefox Web Inspector.

The first set of min-content rows are all gathered up against the bottom of the top part of the layout, and the second set are all pushed down at the bottom.  Between them, the 1fr row eats up all the leftover space, which is what pushes the two sets of min-content rows apart.

I like this pattern.  It feels good to me, having two sets of rows where the individual rows accordion open to accept content when needed, and collapse to zero height when not, with a “blank” row in between the sets that pushes them apart.  It’s flexible, and even allows me to add more rows to the sets without having to rewrite all my layout styles.

As an example, suppose I decided I needed to add a few more rows to the bottom set, for use in a few specialty templates.  Because of the way things are set up, all I have to do is change the row template like this:

grid-template-rows: repeat(7,min-content) 1fr repeat(5,min-content);

That’s everything. I just changed the number of repeats in the second set of rows.  All the existing pages will continue on just fine, no layout changes, no CSS changes.  In the few (currently hypothetical) pages where I need to put a bunch of stuff along the bottom of the main content column, I just plug them in using grid-row values, whether positive or negative.  It all just works.

The same is true if more rows are added to the first set, for whatever reason.  Everything gets managed in a single CSS rule, where you can add rows for the whole site instead of having to write, track, and maintain a bunch of variants for various page types.  (Subtracting rows is harder without causing layout upset, but could still be done in some scenarios.)

As a final note, you’re probably wondering: Is that one 1fr row actually necessary to get a layout like this one?  Not really, no.  Let’s take it out, like this:

grid-template-rows: repeat(11,min-content);

What happens as a result is the rows that aren’t directly occupied by content (the ones that previously collapsed to zero height), but are still spanned by content (the center column), divvy up the leftover space the 1fr row used to consume.  This leads to a situation like so:

The same layout diagram as the previous figure, but with some of the grid rows placed differently.

To the user, there’s no practical difference.  Things go to the same places either way.  You just get the “extra” rows stretching out, instead of being pushed apart by the 1fr row.

I certainly could have left it at that, and it arguably would have been cleaner to do so.  But something about this approach doesn’t sit quite right with me; there’s a tickly feeling in the back of my instinct that tells me there’s a downside to this.  Admittedly, it could be a vestigial instinct from the Age of Floats; I doubtless have many things I still have not unlearned.  On the other hand, it could be something about Grid I’ve picked up on subconsciously but haven’t yet brought into full realization.

If I ever pin the tickle down enough to articulate it, I’ll update the post to include it.

Thanks to Kitt Hodsden and Laura Kalbag for their assistance with this article.



Source link

r/graphic_design - How to handle a logo with a human being represented in it?
Strategy

How to handle a logo with a human being represented in it? :…


I’m doing a logo for a children’s center and though I think it’s stupid, the concern came up for what color the human form should be. The form is morphed with the shape of a tree to represent growth and change. I originally had the body a mahogany red, but then this idea of race was brought up.

What’s the safe way to handle the colors of a logo when a human form is involved?

r/graphic_design - How to handle a logo with a human being represented in it?

Example



Source link

r/graphic_design - Feedback on mock logo for a ridesharing company
Strategy

Feedback on mock logo for a ridesharing company : graphic_de…


Hey everyone! Here is my first design of a mock logo for a fake ridesharing company. The company is not like Uber and Lyft, but rather you can rent your car out to other people which I tried to illustrate in the logo.

Here is the link and I have written out my thought process below: https://imgur.com/a/z7K6h6B

With this company, you can rent your car out to someone else and they will return it when they’re done, similar to Turo. The main logo shape is an outline of a map waypoint. The arrow that loops around is supposed to show that the car is being returned to the same point it was picked up at. And the speedometer in the middle is self-explanatory.

I want the company to be perceived as innovative, approachable, sustainable, and reliable.

Please share your feedback and critiques with me! I am having a hard time finding a matching typeface.

r/graphic_design - Feedback on mock logo for a ridesharing company



Source link

r/graphic_design - Looking for feedback on a mock logo for a ridesharing company! Having a hard time finding a good typeface
Strategy

Looking for feedback on a mock logo for a ridesharing compan…


Hey everyone! Here is my first design of a mock logo for a fake ridesharing company. The company is not like Uber and Lyft, but rather you can rent your car out to other people which I tried to illustrate in the logo.

Here is the link and I have written out my thought process below: https://imgur.com/a/z7K6h6B

With this company, you can rent your car out to someone else and they will return it when they’re done, similar to Turo. The main logo shape is an outline of a map waypoint. The arrow that loops around is supposed to show that the car is being returned to the same point it was picked up at. And the speedometer in the middle is self-explanatory.

I want the company to be perceived as innovative, approachable, sustainable, and reliable.

Please share your feedback and critiques with me!

r/graphic_design - Looking for feedback on a mock logo for a ridesharing company! Having a hard time finding a good typeface



Source link

CMD+Z for Git is Here
Strategy

CMD+Z for Git is Here


Version control with Git has become a “commodity” by now: virtually every software project today uses Git, and virtually every developer knows Git to some extent. This explains why I sometimes hear the following question when I talk about what I do for a living: “A desktop client for Git? Why would I need that? I can do that on the command line!

If I’m lucky, I have a computer next to me when that question hits me. And instead of producing a wordy answer, I do a couple of things in Tower, our desktop client for Git.

Anyone who’s ever performed an “Interactive Rebase” is amazed by how easy that is in Tower: you simply drag and drop to combine commits or reorder them. And anyone who hasn’t yet used “Interactive Rebase” – because it was too complicated and clunky to use on the command line – now understands that it’s a very valuable tool.

Or I might make a mistake: accidentally deleting a branch or messing up a merge in a terrible way. And I’ll simply hit CMD+Z, like I would in a text editor, to undo the mess I just made.

People then start to realize that the real question is not: “Can I get by using Git on the command line?” The more important questions are:

  • Can I use all of Git’s power? (Even the advanced features that might be hard to use, but that can be very valuable…)
  • Can I work with Git in a productive way? (Not having to look up parameters, not spending too much time on my workflows…)
  • Can I work with Git in an easy way? (Without having to think about it too much…)

We – a small team of just 9 people – have spent the last 10 years answering those questions by building Tower.

How to Undo Mistakes

One of Git’s greatest features is that it allows you to undo almost anything. However, it requires quite some experience to know how exactly to undo your particular kind of mess: a failed merge has to be cleaned up differently than a deleted branch!

After working on this for a long time, Tower now allows you to undo virtually anything – simply by pressing CMD+Z! (Note: the “Undo” feature is a quite recent addition and first available in the Mac version of Tower. It will soon come to Windows, too).

No matter if you messed up a merge, inadvertently deleted a branch, discarded a valuable local change, published a branch on a remote too soon, or simply committed something that you shouldn’t have – your lifesaver is as simple as “CMD+Z”, and it’s always available.

The Power of Interactive Rebase

Interactive Rebase is a wonderful example of Git’s more powerful features. It allows you to…

  • edit old commits (both their messages as well as their changesets!)
  • combine multiple commits into one
  • reorder commits
  • …and even delete commits you don’t need anymore!

All of these can help a lot to keep a code base clean and structured. But being a very powerful tool, Interactive Rebase is also an example of a Git feature that is quite complicated to use!

Many beginners are scared away by this complexity – meaning that, of course, they will miss out on the benefits of the feature! Many experienced developers know and use Interactive Rebase; but since the feature is hard to use, it costs them a lot of time and/or they make mistakes from time to time.

Knowing this, we had two goals for integrating Interactive Rebase into Tower: on the one hand, we wanted to reduce as much of its complexity as possible. And on the other hand, we wanted to make the feature easily accessible.

The result is that Interactive Rebase is now integrated right into the “Commit History” and accessible via simple drag & drop and menu options:

Countless developers that wouldn’t have used Interactive Rebase at all on the Command Line are now using it on a daily basis in Tower.

Quick Actions

Almost independent of its size, working in a code base means spending a lot of time searching: for example for a certain branch (out of lots of branches) or a certain file (out of lots of files).

Tower allows you to do most of your daily tasks without sifting through data – and even without taking your hands off the keyboard. The “Quick Action” dialog takes almost any input and allows you to simply act on it:

  • Give it a branch name and it will offer to do a checkout.
  • Give it a file name and it will offer to show it in the File History.
  • Give it a commit hash and it will offer to show that commit’s details.

Being able to perform many tasks right from the keyboard, without having to search and sift through loads of data, can make life as a developer a lot easier.

Solving Conflicts with Confidence

Everyone hates that moment when a merge (or rebase) stops and leaves you with a bunch of conflicts ? Multiple questions then quickly enter the poor programmer’s mind:

  • What are my changes? What are someone else’s?
  • What actually happened?
  • Why me?

While, admittedly, Tower cannot answer all of those questions, it offers a special “Conflict Wizard” that helps make the situation much more understandable:

You can easily see where changes came from and can solve the conflict simply by choosing which version to go with (or jump into a dedicated merge tool). It makes things a lot easier when merge conflicts are visualized in this way, instead of being an abstract mess.

Becoming More Productive

When building and improving Tower, we’re always striving to make things easier for our users – and to make them more productive. Let’s take some examples of where this shows in Tower:

  • No More Passwords, Tokens, SSH Keys: You can easily connect your GitHub / GitLab / Bitbucket / Azure DevOps accounts with Tower. Once connected, you never have to wrestle with passwords, authentication, tokens, usernames, and SSH Keys anymore. Cloning and interacting with a remote repository, then, is a matter of just a click.
  • Single-Line Staging & Discarding: There’s a golden rule in version control: when you make a commit, you should only include changes from a single topic (and not mix multiple topics in a commit, thereby making it extremely hard to understand what actually happened). With the ability to stage / unstage / discard individual chunks and lines from your changes, Tower enables you to create granular, precise commits.
  • A New Diff Viewer: In a very recent update, we gave our internal Diff Viewer a complete overhaul. It now highlights inline changes, allows you to show/hide whitespace changes, can display the complete file, and is completely customizable with themes!
  • Automations for the Boring Stuff: Tower takes care of much of the grunt work around Git. To take just two examples: neither do you have to regularly fetch new updates from the remote, nor do you have to remember to stage uncommitted changes before pulling/switching branches/merging… Tower does that automatically for you.

When I think about the favorite applications I use myself, they all have some things in common: they make life easier for me, they make me more productive, and they enable me to do advanced stuff that I’d have a hard time doing without them. I’m glad and grateful that many of our users consider Tower to be one of their favorite apps!

If you want to give Tower a try, just download it from our website and test it 30 days for free. And if you are a student or teacher, you can use Tower for free!



Source link

r/webdev - What are the likely origins of requests looking for sql resources on my static site.
Strategy

What are the likely origins of requests looking for sql reso…


I assume it is either it’s an attempt by some bot to find vulnerabilities on my site, or it’s a security tool like crawler.ninja doing research. The site is static, so there’s no chance of hacking it in this manner.

Just curious, does anyone else have odd requests to their site? In the past I’ve seen a bunch of requests show up in my analytics just to advertise an SEO service. Which is clever but very annoying.

r/webdev - What are the likely origins of requests looking for sql resources on my static site.



Source link

Just A Silly Sticker (Feedback)
Strategy

Just A Silly Sticker (Feedback)


Just A Silly Sticker (Feedback)

I got bored, and since I'm going to be moving away from Cali soon(ish), I thought I'd make a Cali sticker. (The sticker would be just the CALIFORNIA lettering, I just put a background so it was easier to see)

https://preview.redd.it/u8vb0dqjnic51.png?width=5879&format=png&auto=webp&s=b9758da6ba45ed868244622afdc3e03b19fa0e8a

submitted by /u/Carooosa
[comments]



Source link

The Modern Way to Implement Animations on the Web Using GSAP...
Strategy

The Modern Way to Implement Animations on the Web Using GSAP…


The trend of web animations started with GIF animations and at that time it was the easiest way of implementing animations on the web.

But, the problem with GIF is that it doesn’t have variable transparency and doesn’t support an alpha channel. Therefore, all pixels are either fully opaque or completely transparent.

The Dawn of Flash Web Animations

After the GIFs, came Flash web animations which brought new capabilities, like animations with sound and interactivity.

But there is a downside to this approach as well.

1.) This approach requires a flash plugin installed on the browser to run.

2.) It doesn’t run well on mobile devices.

Web Animation Today

Today, we have different needs for web animations. The animation should be smooth, light, interactive, and ought to work on all devices.

For that, HTML5, CSS3, JavaScript, and SVG (scalable graphics) seem to be the best solution (for web animation). Using these modern web technologies and languages will help tackle most, but not all, of the above problems.

Why Animations Are Important for the User Experience?

Web animation can engage and hold people’s attention longer than a static web page and help communicate an idea or concept more clearly and effectively. Excellent web animation conveys a story behind every bit of movement. It’s all about bringing animation to life with meaning and “soul”.

Web animation should be smooth, meaningful, and support the visitor’s journey. The web designer/animator needs to be aware of how the animation fits into the user experience, try to predict likely user flows, and then support it in a meaningful way.

GSAP + ScrollMagic Animation – VanillaJs

This blog is for all those UI developers who saw those elegant and cool SVG/UI animations online and wondered– what is this crazy shit? How can I implement this in my code?

Well, don’t worry, this article will help you with that.

In this blog, we will discuss & learn about the two powerful animation libraries, GSAP (Greensock Animation API) & ScrollMagic. With the help of these two libraries, one can create complex (yet elegant) animations.

So let’s start right away. We will create a sushi animation that will help us understand the working of GSAP & Scrollmagic.

CodeSandbox link: https://codesandbox.io/s/sushi-animation-vanilla-js-2pcei?fontsize=14&hidenavigation=1&theme=dark

Steps That We Will Be Following:

  1. File/Folder structure for Sushi animation project
  2. Include GSAP in your project
  3. Include ScrollMagic in your project
  4. Intro to GSAP & its usage in the project
  5. Intro to ScrollMagic & its usage in the project

File/Folder Structure

  1. Create a new folder with the name sushi-animation. Then create index.html, main.js, styles.css files inside the sushi animation folder.
  2. Copy & paste below code in your index.html file.

3. Copy and paste the below code in your styles.css

4. Copy the SVG code from sushi-animation.svg file& paste it inside sushi-animation div.

Include GSAP in Your Project

Add GSAP CDN link in your project

Include ScrollMagic in Your Project

Add ScrollMagic CDN link in your project

GSAP and Its Usage in the Project

Greensock Animation Platform(GSAP) is a JS library from which you can create seamless & custom configurable animations for your web-based products.

What Is the Timeline in GSAP?

Timeline manages the sequencing & timing of the events in an efficient way by acting as a container for tweens & other timelines.

Create GSAP timeline with default options.

What Are Tweens in GSAP?

A tween provides a single movement in animation.

Now, we have to add tweens in our GSAP timeline

Use GSAP in Sushi Animation Project

At this point, your sushi is ready with GSAP Animation.

If you want to play your animation infinitely then you can add repeat: -1 parallel to the default options in the timeline.

But it’s not over yet, we have one more thing to do

Remember ScrollMagic??

Yes, now we are going to implement ScrollMagic on GSAP.

Now you must be wondering what ScrollMagic is and why we are using it ??

ScrollMagic and Its Usage in the Project

ScrollMagic is a Javascript library that plays animations on scroll or scrollbar.

Sounds interesting, huh?

Usage in Sushi Animation Project

Finally, your Sushi is ready.

Now can cook delicious sushi by just scrolling into the browser.

CodeSandbox Link:- (https://codesandbox.io/s/sushi-animation-vanilla-js-2pcei?fontsize=14&hidenavigation=1&theme=dark)

Reference Links

Want to implement these libraries in your ReactJs & Angular Project?

You will find the source code below:

ReactJs – https://github.com/Personal-Practise-Projects/43-Animations/tree/master/03-ReactJs

Angular – https://github.com/Personal-Practise-Projects/43-Animations/tree/master/02-Angular



Source link