r/webdev - Writing a .htaccess file so Phusion Passenger can find the entry point of my application
Strategy

Writing a .htaccess file so Phusion Passenger can find the e…


Hello,

I’m trying to deploy a web application on Dreamhost. It’s the first time I’m doing a manual deploy; as I’m used to deploying on Heroku instead.

Kind of surprised how much Heroku handholds the deployment process; so deploying the backend on Dream has been quite a challenge (SSH, installing Node, syncing DB with phpMyAdmin).

So Dreamhost uses Phusion Passenger to run Node JS applications.

Their requirement is that the entry point is app.js, and this needs to be configured with a .htaccess file.

I’ve never written a .htaccess file before, and I can’t seem to find a good tutorial for it.

I was wondering if anyone can shed some light on how to start, or what to write. My FTP folder structure is below, and here is also a screenshot of instruction from their documentation. Where should the .htaccess file go?

Thanks in advance

mywebsite.com (folder)
  public (folder)
    app.js
r/webdev - Writing a .htaccess file so Phusion Passenger can find the entry point of my application



Source link

Avatar of Erin Lindford
Strategy

Why I Love Tailwind


Tailwind is an atomic CSS framework that has taken the frontend world by storm. It gives developers without a deep understanding of design the ability to build visually gorgeous, modern user interfaces.

If you have not seen it before, here is the canonical Tailwind example from their original homepage:

<div class="shadow-lg flex bg-white rounded-lg p-6 leading-normal">
  <img class="h-24 w-24 rounded-full mx-auto mx-0 mr-6" src="avatar.jpg" />
  <div class="text-center text-left">
    <h1 class="text-lg">Erin Lindford</h1>
    <h2 class="text-purple-500">Customer Support</h2>
    <p class="text-gray-600">erinlindford@example.com</p>
    <p class="text-gray-600">(555) 765-4321</p>
  </div>
</div>
Avatar of Erin Lindford

Erin Lindford

Customer Support

erinlindford@example.com

(555) 765-4321

Many people think Tailwind is cool because it uses atomic CSS. Here is the thing though: Tailwind is awesome despite using atomic CSS, not because of it.

The key to Tailwind

We have had atomic CSS frameworks for almost a decade but none of them have been as critically acclaimed as Tailwind. What makes it different?

The key to Tailwind’s popularity is the painstakingly constructed system of design tokens at the core of the framework. The system’s carefully selected constraints give developers just the right guardrails. They make it obvious whether a choice is good or bad by offering only discrete steps.

This does require some design taste, but most frontend engineers I know have developed that over the years of building user interfaces. Tailwind’s system lets them turn that taste into implementation without requiring a lot of design skill — it helps them cross “the gap”.

Tailwind’s system is a masterpiece of design. I, and many other developers all around the world, feel empowered by and love it.

The problem with Tailwind

The atomic CSS framework is basically a delivery mechanism that allows developers to apply the system to their UIs. It’s undeniable that it has a fantastic developer experience: once you get used to the custom vocabulary you feel like you are flying!

  • Users still have to add a separate setup for the custom CSS they inevitably need (coined “bailwind”). You cannot get by on just Tailwind in the real world. Not having a dedicated place for custom styles in the same system can cause maintenance issues down the line.

  • Due to file-size considerations, Tailwind does not include all variants (e.g. hover:, sm:) for all utilities by default. It leaves it to you to manually configure which ones you need for every single CSS property.

  • Atomic CSS is not ideal for performance. No tooling can extract the per-page critical CSS, so you end up shipping more CSS to the browser than necessary. The bigger and more dynamic the app, the more unnecessary code you will ship.

Tailwind without the downsides

Brent Jackson, the creator of one of the original atomic CSS libraries, said it best in his post on atomic CSS:

“This methodology was created before React was released and was intended for use in template-based user interfaces, including Rails and PHP. It was never designed for functional component-based UI and doesn’t take advantage of this new paradigm.”

Now, here is the thing: you can have your cake and eat it too. You can use Tailwind’s marvelous system and fantastic developer experience without the downsides of atomic CSS.

Let me illustrate. Here is the canonical Tailwind example built with twin.macro and React:

import "twin.macro"

const Card = () => (
  <div tw="shadow-lg md:flex bg-white rounded-lg p-6 leading-normal">
    <img tw="h-16 w-16 md:h-24 md:w-24 rounded-full mx-auto md:mx-0 md:mr-6" src="avatar.jpg" />
    <div tw="text-center md:text-left">
      <h1 tw="text-lg">Erin Lindford</h1>
      <h2 tw="text-purple-500">Customer Support</h2>
      <p tw="text-gray-600">erinlindford@example.com</p>
      <p tw="text-gray-600">(555) 765-4321</p>
    </div>
  </div>
)
Avatar of Erin Lindford

Erin Lindford

Customer Support

erinlindford@example.com

(555) 765-4321

Unsurprisingly, the result looks identical — we are still using the same system after all. Even the code looks the same, except that we use the tw prop instead of the class attribute!

However, under the hood this automatically compiles the class names to the actual CSS they refer to (with the css prop):

import "twin.macro"

<div tw="text-center md:text-left" />



import "styled-components/macro"

<div 
  css={{
    textAlign: "center",
    "@media (min-width: 768px)": {
      "textAlign":"left"
    }
  }}
/>
  • Extending your elements with custom styles is as simple as using the css prop, no extra separate setup required to “bailwind”:

    import "twin.macro"
    
    <div
      tw="text-center md:text-left"
      css={{`
        &:hover { 
          background-image: url("/bg.png");
        }
      `}}
    />
    
  • You can use all variants in all combinations with all utilities allowing for even more expression within the system. Since twin.macro runs at build-time, you don’t have to worry about configuration or file size:

    import "twin.macro"
    
    <div tw="sm:hover:first:bg-black">...</div>
    
  • You get fully automatic critical CSS extraction and code splitting. Users will only load exactly the styles they need for the page they requested — nothing more and nothing less! CSS performance does not get better.

The ideal setup for both developer and user experience!

Lesson: use twin.macro to leverage Tailwind’s marvelous system and developer experience without the downsides of atomic CSS.

Rather than taking two steps forward with Tailwind’s system and one step backward with atomic CSS, let’s take five steps forward. Together.





Source link

Let’s Create a Lightweight Native Event Bus in JavaScript
Strategy

Let’s Create a Lightweight Native Event Bus in JavaScript


An event bus is a design pattern (and while we’ll be talking about JavaScript here, it’s a design pattern in any language) that can be used to simplify communications between different components. It can also be thought of as publish/subscribe or pubsub.

The idea is that components can listen to the event bus to know when to do the things they do. For example, a “tab panel” component might listen for events telling it to change the active tab. Sure, that might happen from a click on one of the tabs, and thus handled entirely within that component. But with an event bus, some other elements could tell the tab to change. Imagine a form submission which causes an error that the user needs to be alerted to within a specific tab, so the form sends a message to the event bus telling the tabs component to change the active tab to the one with the error. That’s what it looks like aboard an event bus.

Pseudo-code for that situation would be like…

// Tab Component
Tabs.changeTab = id =&gt; {
  // DOM work to change the active tab.
}
MyEventBus.subscribe("change-tab", Tabs.changeTab(id));

// Some other component...
// something happens, then:
MyEventBus.publish(&quot;change-tab&quot;, 2);  

Do you need a JavaScript library to this? (Trick question: you never need a JavaScript library). Well, there are lots of options out there:

Also, check out Mitt which is a library that’s only 200 bytes gzipped. There is something about this simple pattern that inspires people to tackle it themselves in the most succincet way possible.

Let’s do that ourselves! We’ll use no third-party library at all and leverage an event listening system that is already built into JavaScript with the addEventListener we all know and love.

First, a little context

The addEventListener API in JavaScript is a member function of the EventTarget class. The reason we can bind a click event to a button is because the prototype interface of <button> (HTMLButtonElement) inherits from EventTarget indirectly.

Source: MDN Web Docs

Different from most other DOM interfaces, EventTarget can be created directly using the new keyword. It is supported in all modern browsers, but only fairly recently. As we can see in the screenshot above, Node inherits EventTarget, thus all DOM nodes have method addEventListener.

Here’s the trick

I’m suggesting an extremely lightweight Node type to act as our event-listening bus: an HTML comment (<!-- comment -->).

To a browser rendering engine, HTML comments are just notes in the code that have no functionality other than descriptive text for developers. But since comments are still written in HTML, they end up in the DOM as real nodes and have their own prototype interface—Comment—which inherits Node.

The Comment class can be created from new directly like EventTarget can:

const myEventBus = new Comment('my-event-bus');

We could also use the ancient, but widely-supported document.createComment API. It requires a data parameter, which is the content of the comment. It can even be an empty string:

const myEventBus = document.createComment('my-event-bus');

Now we can emit events using dispatchEvent, which accepts an Event Object. To pass user-defined event data, use CustomEvent, where the detail field can be used to contain any data.

myEventBus.dispatchEvent(
  new CustomEvent('event-name', { 
    detail: 'event-data'
  })
);

Internet Explorer 9-11 supports CustomEvent, but none of the versions support new CustomEvent. It’s complex to simulate it using document.createEvent, so if IE support is important to you, there’s a way to polyfill it.

Now we can bind event listeners:

myEventBus.addEventListener('event-name', ({ detail }) => {
  console.log(detail); // => event-data
});

If an event intends to be triggered only once, we may use { once: true } for one-time binding. Other options won’t fit here. To remove event listeners, we can use the native removeEventListener.

Debugging

The number of events bound to single event bus can be huge. There also can be memory leaks if you forget to remove them. What if we want to know how many events are bound to myEventBus?

myEventBus is a DOM node, so it can be inspected by DevTools in the browser. From there, we can find the events in the Elements → Event Listeners tab. Be sure to uncheck “Ancestors” to hide events bound on document and window.

An example

One drawback is that the syntax of EventTarget is slightly verbose. We can write a simple wrapper for it. Here is a demo in TypeScript below:

class EventBus<DetailType = any> {
  private eventTarget: EventTarget;
  constructor(description = '') { this.eventTarget = document.appendChild(document.createComment(description)); }
  on(type: string, listener: (event: CustomEvent<DetailType>) => void) { this.eventTarget.addEventListener(type, listener); }
  once(type: string, listener: (event: CustomEvent<DetailType>) => void) { this.eventTarget.addEventListener(type, listener, { once: true }); }
  off(type: string, listener: (event: CustomEvent<DetailType>) => void) { this.eventTarget.removeEventListener(type, listener); }
  emit(type: string, detail?: DetailType) { return this.eventTarget.dispatchEvent(new CustomEvent(type, { detail })); }
}
    
// Usage
const myEventBus = new EventBus<string>('my-event-bus');
myEventBus.on('event-name', ({ detail }) => {
  console.log(detail);
});

myEventBus.once('event-name', ({ detail }) => {
  console.log(detail);
});

myEventBus.emit('event-name', 'Hello'); // => HellonHello
myEventBus.emit('event-name', 'World'); // => World

The following demo provides the compiled JavaScript.


And there we have it! We just created a dependency-free event-listening bus where one component can inform another component of changes to trigger an action. It doesn’t take a full library to do this sort of stuff, and the possibilities it opens up are pretty endless.



Source link

r/webdev - FREE JavaScript Bootcamp with 12+ Projects and Exercises
Strategy

FREE JavaScript Bootcamp with 12+ Projects and Exercises : w…


I recently completed a JavaScript Tutorial series that covers most of the fundamentals that one needs to get started with JavaScript. The planning of the content, recording them, adding exercises, interview questions and projects to it really took a lot of effort to record them.

This tutorial series contain around 72 videos that covers Modern JavaScript.

????????Covers most of the concepts of Modern JavaScript

????????It includes little exercises for practice

????????Includes 12+ Projects with a 10 JavaScript Projects in 2 Hours video where we create 10 awesome JavaScript projects in a little less than 2 hours where I cover different ways of building our projects like OOPS, MVC pattern etc.

Here are some of the pictures for the series if that interests you !

r/webdev - FREE JavaScript Bootcamp with 12+ Projects and Exercises

A CoronaVirus Tracking Application with Reverse Geocoding and Geolocation features

r/webdev - FREE JavaScript Bootcamp with 12+ Projects and Exercises

Building your own Async Await using Generators

r/webdev - FREE JavaScript Bootcamp with 12+ Projects and Exercises

Promise – race, all and allSettled methods

and a big one:

r/webdev - FREE JavaScript Bootcamp with 12+ Projects and Exercises

10 JavaScript projects in 2 hours

If that interests you, I would love to see you onboard.

Thanks everyone for your time !

Here is the link for the complete playlist. I will constantly be updating stuff in this playlist.

Demystifying JavaScript Tutorials For Beginners + PROJECTS included (2020) – YouTube



Source link

r/webdev - How can you achieve this kind of Grid Layout in CSS?
Strategy

How can you achieve this kind of Grid Layout in CSS? : webde…


Hello, so I know Grids would be perfect for this, allow me to try and explain what specifically I want to achieve.

So you can see this Grid has 2 columns, however, the items on the 2nd column have random heights. The problem I’m facing is if a Grid Item from Column #1 is larger, then the Grid Item that is on the same exact row will also match that height.

If I add other Grid Items on the next row, then there will end up being a gap between Grid Item that is in Row 1, Column 2 and Row 2 Column 2.

I would like to have these items fill in the gap. I’m not sure how to achieve this due to how the heights are with Grids.

r/webdev - How can you achieve this kind of Grid Layout in CSS?



Source link

It's all relative. | CSS-Tricks
Strategy

It’s all relative. | CSS-Tricks


I remember sitting in the back seat of our family’s Subaru station wagon. I was six and this was long before child carseats were a thing. My dad was at the wheel and my mom played 20 Questions with me while we drove to some vacation spot I can’t even remember.

It was my mom’s turn as she and I played 20 Questions. She had an object in mind and I was asking the questions.

“Is it big?” I asked.

“Relative to what?” my mom replied.

This was the pattern throughout the entire game. I asked a question and my mom answered with a question about relativity.

“You can ask questions when it’s my turn to think of an object,” I’d say.

“If you’re asking if the thing is as big as a mountain, the answer is no. But next to ant, yes, it is big.”

This year has been a long stretch of re-learning what it means to think relatively. How long of a stretch? It’s relative, I suppose. But as 2020 comes to a close, I can almost hear my mom asking me the same question, whether it’s at work or in my personal life.

“Relative to what?” she asks.


My mind jumps to relative units in CSS when I hear the word “relative.” I’m sure many of you are the same. I reach for things like em, rem and % all the time in my work. I only started using them to be cool when I first learned about them (whenever that was). I didn’t even know there was a real difference between em and rem. I thought they had something to do with retina screens.

Of course, that was a long time ago. (How long? It’s relative.) I now know that relative units are relative to the thing they reference. 2rem is going to evaluate one way on a site with a root font size of 16px and another for a site at 24px. Same deal with percentages. 50% inside a 400px container means something different than 50% inside a 1200px container.

So, now, when I find myself assigning size values to elements, I first having a little dialogue with my mom.

“This element is 5.25em.”

“Relative to what?” she asks.


I’ve also learned that thinking relatively requires a little perspective. And, no, this has nothing to do with CSS perspective (although I could probably try to make that connection). Thinking in relative terms means momentarily stepping out of your own shoes and seeing things from something else’s vantage point.

I say “something” because I think about this most when writing code. Whenever I’m working on the pieces of a component, I have to be mindful of the context—or perspective—of where they sit. Why? Because the pieces mean different things in different contexts and those contexts are relative to the component that contains them.

When is an <h2> just an <h2>? Hardly ever. It might be the post name. Or perhaps the heading for a widget. Maybe it’s the heading for a card component. As front-enders, we name those things according to the perspective of the component. From the perspective of a post, an <h2> means (and probably looks) something different from the perspective of, say, a card.

.post {}
.post__title {}

.widget {}
.widget__title {}

.card {}
.card__title {}

Naming things is hard. I often find myself thinking, “Ack! What the heck should I call this thing?”

“Relative to what?” my mom interjects.


I could go on and on. The truth is that thinking in terms of relativity is just as important to the code we write as it is to a game of 20 Questions, or even our personal lives. And in a year where we’ve been upended by so many competing forces, thinking along these lines can offer solace and wisdom in the midst of what has been stressful and frustrating for many of us—relatively, of course.

  • “This is stressing me out.” Relative to what?
  • “I have so much to do.” Relative to when?
  • “I suck as JavaScript.” Relative to whom?
  • “I hate the place I work.” Relative to where?

It’s easy to get caught up in absolutes. Relativity forces us to see things differently.



Source link

Unconventional Stock Image Sources | CSS-Tricks
Strategy

Unconventional Stock Image Sources | CSS-Tricks


This year, I learned that there is a wide world of free stock imagery available beyond Unsplash and Pexels. You see, I’ve been working on designing WordPress themes this year, and all images need to be compatible with the GPL. Unsplash and Pexels both have free and open licenses, but unfortunately, aren’t compatible. Many other free stock photos sites don’t have the highest quality photos, so I’ve had to get creative about where I get the imagery I use in my mockups.

I discovered the solution to my stock imagery problem, ironically, on Unsplash. I started noticing photos from sources like the British Library, Birmingham Museums Trust, and Library of Congress. Who often has archives of public domain imagery? Libraries, museums, and governments. The sites are never a site like Unsplash, but they work well if you have the time and patience to dive through their archives. Plus? You can find some pretty cool photography, art, and illustrations that have a very different vibe than most stock photo resources.

Libraries

There are tons of libraries with license-compatible digital archives, such as the New York Public Library, Library of Congress, The State Library of New South Wales, National Library of Ireland, and many more. Try seeing if a major city with your state has a digital archive. Libraries are great for old photos, advertisements, and illustrations that I’ll use in portfolio site designs.

Museums

Many museums have started digitizing their collections in the past few years, such as the Smithsonian’s National Museum of Asian Art, the Met, and the Art Institute of Chicago. As the museums are often digitizing the work themselves, they have the luxury of releasing the images into the public domain. Museums are a fantastic resource for art, and for photos of objects like ceramics and jewelry that work well in e-commerce mockups.

Governments

US Government agencies like NASA tend to release a ton of their own media for public use, and I’ve discovered that space images look great in blog post mockups. Need some COVID photos? The CDC’s got you covered. Need some black & white nature photos? Check out the National Park Service’s “Open Parks Network.” 


Finding high-quality, totally free stock imagery can be a huge hassle. But I’ve found, with some creativity and some patience, there are far more options than I knew!



Source link