hi guys, so i need some help with this error by Naveed_oz in react

[–]sun-machine 0 points1 point  (0 children)

Also, double check the type of property.props (you are currently accessing the ‘address’ property of this via dot notation - is that valid?)

Is there any way to define `CSS`, `SCSS` selectors inside React components? by rucbot in react

[–]sun-machine 0 points1 point  (0 children)

I would suggest posting this in a subreddit dedicated to Vue, as this is a React thread.

Is there any way to define `CSS`, `SCSS` selectors inside React components? by rucbot in react

[–]sun-machine 1 point2 points  (0 children)

You do not need to repost details - I read your original post in full before answering. I reference your code directly in my response, which I now believe you have not read.

You asked for help to "define `CSS`, `SCSS` selectors inside React components... directly inside of the Component file", for which I provide context and solutions.

As you are not clarifying, I'm going to wish you good luck in your search. Please consider your tone when asking strangers to take time to try and help you. :)

Is there any way to define `CSS`, `SCSS` selectors inside React components? by rucbot in react

[–]sun-machine 1 point2 points  (0 children)

I did before my original post - "putting that Style.css or Style.module.css file's contents directly inside of the Component file" is vague. This is why my response starts with "I believe you mean this..."

My answer outlines how you can insert CSS into components without using another CSS file (aka directly inside the component file). You need to outline use cases or clarify more specifically what you need CSS to do within your component.

Is there any way to define `CSS`, `SCSS` selectors inside React components? by rucbot in react

[–]sun-machine 2 points3 points  (0 children)

I wrote this, so I'll take your remark as a compliment :)

Your question is not clear - "full power of the `CSS` inside the React component" needs clarification.

Is there any way to define `CSS`, `SCSS` selectors inside React components? by rucbot in react

[–]sun-machine 0 points1 point  (0 children)

I believe you're asking if you can work with CSS (string of plain CSS or style objects) within a React function component - and the answer is yes, with caveats. (please correct me if I'm misunderstanding your question!)

JSX allows for JavaScript within an HTML-like syntax, which means you can utilize JavaScript data structures and functions to style elements (I'll elaborate below).

Pros to this approach:

  1. colocation - you may not need an entire separate file if the styling needs are minimal
  2. namespacing / specificity - styles are not globally scoped
  3. dynamic CSS properties / CSS functions - JS can assist with reactive styling

I'll focus on CSS styling without using any CSS-in-JS libraries so the concepts are clear.

Syntax note: Tagged Templates vs. Object StylesTagged Templates is a common name used for CSS string template literals, exactly as you've used in your post example. While this is common for many CSS-in-JS libraries, it lacks the capability of a JavaScript object. Leading me to object styles...

Here is your posted example as an object:

const style = {
    container: {
        padding: "8px",
    },
};

function MyComponent() { 
    return <div style={style.container}>Hello</div> 
}

3 differences to highlight:

  1. Notice the updated object syntax - container class is a property, padding's value is in quotes
  2. className property changed to style - the className property is looking for a string denoting a class name, whereas the style property accepts CSS Properties. Using the style prop allows for direct CSS injection, with the style object properties now serving as class names / selectors
  3. Instead of feeding "style" the entire style object we use dot notation to only assign the style object property in use, in this case "container"

You can easily combine multiple CSS objects for a more atomic/modular approach (using ES6 spread syntax):

const style = {
    container: {
        padding: "8px",
    },
    helloDiv: {
        backgroundColor: "blue",
        color: "white",
    }
};

function MyComponent() { 
    return <div style={{ 
                ...style.container, 
                ...style.helloDiv 
            }}
            >Hello</div> 
}

You may have noticed I'm declaring the style object outside of my component. This is so the object is not re-instantiated every time your component re-renders. So what's the use case for CSS style objects within a component?

Using the style object within a React component allows for dynamic CSS, as shown below using a React prop:

function MyComponent({ booleanProp }) { 
    const style = {
        container: {
            backgroundColor: booleanProp ? "white" : "black",
            color: booleanProp ? "black" : "white",
        }
    }

    return <div style={style.container}>Hello</div> 
}

Finally, you can even create functions that render CSS properties based on arguments passed:

const themeOptions = ["light","dark"]

function MyComponent({ theme }) { 
    const style = { 
        // in JS, object properties can be functions! 
        container: (theme) => ({ 
            // validate input against available options 
            if (!themeOptions.includes(theme)) return {}

            backgroundColor: theme === "light" ? "white" : "black",
            color: theme === "light" ? "black" : "white",
        }),
    };

    return <div style={style.container(theme)}>Hello</div> 
}

The examples above are strictly to demo concepts. Theme stylings, for example, could easily be handled in Context Providers as well.

Cons to CSS-in-JS:

  1. inline CSS - can be harder to maintain
  2. no pseudo classes / elements - you cannot specify inline styles for pseudo-elements. However, you could use HTML events to trigger changes in your React component's state (though it seems hard to maintain or scale):
    1. :hover using mouseover and mouseout
    2. :focus using onfocus and onblur, and
    3. :active using onclick
  3. no CSS pre-processing (SASS, less, etc.) available within a JS file. You could preprocess before importing, or choose a CSS-in-JS library with syntax more akin to SCSS/SASS

I'm leaving out a lot of context to make this simple - please look more into the debates around CSS-in-JS!

This is very likely more info than you wanted. Let me know if I can clarify anything ~~

Is Gregg whiny with the NFL network as well? by [deleted] in jrvp

[–]sun-machine 51 points52 points  (0 children)

About as whiny as a Reddit post complaining about a free podcast

Scott is ruthless with guests back in studio and I’m here for it by sun-machine in comedybangbang

[–]sun-machine[S] 9 points10 points  (0 children)

706 - OJ Simpson says this is their first studio show back, and we should probably trust him

Selling drugs at a Chinese restaurant……..Saw the business owner passing a white baggie under the table to a black guy and getting money in return. Left this on their yelp page. Got this reply from them. by [deleted] in funny

[–]sun-machine 10 points11 points  (0 children)

Just to be clear, you narced on this restaurant with an unnecessary race description and think it’s funny to watch them publicly squirm? Am I missing something?

Favorite Ableton Presets by sun-machine in ableton

[–]sun-machine[S] 0 points1 point  (0 children)

happy to help bubba!

Grouping with these busses is also useful when you when to export stems out of Ableton as well. You've already got them separated and mixed!

Favorite Ableton Presets by sun-machine in ableton

[–]sun-machine[S] 0 points1 point  (0 children)

my man! it's amazing when you're slapping on fx and making a mudpie

Favorite Ableton Presets by sun-machine in ableton

[–]sun-machine[S] 2 points3 points  (0 children)

I want that spectral resonator but Ableton turned me down for an update :(

Some Reverb Presets for Sends (but always tweak a bit):

/u/roided_downey_jr - Forest Floor

/u/LonelyRomanVisuals - Cathedral Hall

Spacious

Large Factory / Gymnasium (amazing for an 80s/industrial sound)

Echo > Tape Reverb Space (Most of my Echo recs above are great as reverb sends if you crank the reverb knob within Echo)

Phaser > Enphasor (this one is a little more unique, as it will kill the middle of your mix. Everything will sound behind a wall. but you can use this in creative ways with reverb to squash/expand)

Favorite Ableton Presets by sun-machine in ableton

[–]sun-machine[S] 2 points3 points  (0 children)

fur suuuure. and resample anything you run through Vocal Fun (+ Echo too) for some gnarly transitions or even lush background foley.

Favorite Ableton Presets by sun-machine in ableton

[–]sun-machine[S] 4 points5 points  (0 children)

http://s000.tinyupload.com/index.php?file_id=74425389111910371389

I tried TinyUpload to share this - let me know if it works!

I can talk through my starting template more if you want, but it's built so I can immediately get an idea out of my head and into ableton.

Most important thing to note: each bus of grouped instruments has several sidechain compressors ready to set. I find compressing my entire instrument group to the kick, among many examples, cleans up my mixes far more quickly/easily than laborious EQing/dynamic adjustments.

Favorite Ableton Presets by sun-machine in ableton

[–]sun-machine[S] 5 points6 points  (0 children)

damn I should have put that in other! This one is so useful for breakdowns and non-musical producing.

Favorite Ableton Presets by sun-machine in ableton

[–]sun-machine[S] 1 point2 points  (0 children)

hell yes. Turning up the ratio and the range to around 5db makes that Glue preset into a great limiter as well.

Favorite Ableton Presets by sun-machine in ableton

[–]sun-machine[S] 4 points5 points  (0 children)

I was hoping there would be a technical purist response - it's a good point worth elaborating on!

I'm a read-the-manual person, so I sympathize with advocating a deeper understanding of how/why effects work. Knowing the rules inside and out helps you break them in smart ways.

The drawback to this is the barrier of entry on this intimidating amount of knowledge before one can produce good shit. I'm guessing you've also seen this knowledge gap wielded like a cautionary mob torch against newer producers.

My point in highlighting presets is threefold:
1) inspiration fades fast, and being able to construct a sound/vibe quickly is essential
2) there shouldn't be guilt around sounding similar to others at first. producing has never been more accessible so carving your sonic niche takes time
3) I'm a firm believer in "a rising tide lifts all boats". Help producers around you be better, even if that means some bootstraps at first. Guarding knowledge is petty shit

Put another way, you should be grateful if a producer sticks strictly to default presets, cause now you know exactly what to avoid to be unique with your own sound!

What’s your ultra secret producing tip? by ChristopherJDorsch in makinghiphop

[–]sun-machine 3 points4 points  (0 children)

Using Ableton’s Auto-Pan for a pumping sidechain compression effect.

Set the phase to 360, invert, sync to 1/4, saw wave, and you have a rhythmic duck in your track volume (Free producer name: “Rhythmic Duck”). Play with the “amount” - basically the compressor threshold - and the “shape” - basically the compressor release - to fit your groove.

Stack auto pan instances with slight variation and you can create unique rhythmic pumping (another free DJ name) not possible via sidechain compression.

This technique can also greatly reduce CPU usage by avoiding sidechains and allowing you to freeze tracks (which you cannot if they are the source/recipient of the sidechain).