Pascal Duez pascalduez

CSS Clip-Path Shape() Based Squircle

Pure CSS Squircle has always been the fantasy of a web developer's good night's sleep. It is possible to clip a div with a custom SVG, but you have to make that SVG, put it on top of your HTML, then reference it inside the CSS, and regenerate it on each resize... It is a nightmare and the performance is horrible. You can go mad and implement a CSS Houdini to render squircle..., while this is mind-blowingly awesome, it doesn't work in Safari, and still not Pure CSS (my nightmare for those who disable JavaScript on their clients...). While there is work underway to add the superellipse() to CSS, the shape() function is now supported on all major

Everything I Know About UI Routing

Definitions

Location - The location of the application. Usually just a URL, but the location can contain multiple pieces of information that can be used by an app
1. pathname - The "file/directory" portion of the URL, like invoices/123
2. search - The stuff after ? in a URL like /assignments?showGrades=1.
3. query - A parsed version of search, usually an object but not a standard browser feature.
4. hash - The # portion of the URL. This is not available to servers in request.url so its client only. By default it means which part of the page the user should be scrolled to, but developers use it for various things.
5. state - Object associated with a location. Think of it like a hidden URL query. It's state you want to keep with a specific location, but you don't want it to be visible in the URL.

If you use server rendering, keep in mind that neither useLayoutEffect nor useEffect can run until the JavaScript is downloaded.

You might see a warning if you try to useLayoutEffect on the server. Here's two common ways to fix it.

Option 1: Convert to useEffect

If this effect isn't important for first render (i.e. if the UI still looks valid before it runs), then useEffect instead.

function MyComponent() {

I bundled these up into groups and wrote some thoughts about why I ask them!

If these helped you, I'd love to hear about it!! I'm on twitter @vcarl_ or send me an email [email protected]

Onboarding and the workplace

https://blog.vcarl.com/interview-questions-onboarding-workplace/

How long will it take to deploy my first change? To become productive? To understand the codebase?
What kind of equipment will I be provided? Will the company pay/reimburse me if I want something specific?

stylable-components

CSS for Components

Example

/* Counter.css */
@import Button from './Button.css';

I made a little styling lib called glam

(some features are in development)

one

let's start off with the simplest use case. we'll make an 'index.html' page, and assume we've setup our js bundler to output bundle.js

	// see here for details
	// https://medium.com/@samgoldman/ville-saukkonen-thanks-and-thanks-for-your-thoughtful-questions-24aedcfed518
	// https://github.com/facebook/flow/issues/7125

	/*
	S = State
	A = Action
	OP = OwnProps
	SP = StateProps
	DP = DispatchProps

	// I'm suggesting we add a new "adopt X from <Y />" syntax to the JSX language
	// it would de-sugar to render prop children, but look and read better than
	// what we currently have. For example:

	// 1.
	// this sugar
	function MyComponent(props) {
	adopt foo from <Bar />;
	return <div>{foo}</div>;
	}

	{
	sourceMaps: false,
	comments: false,
	plugins: [
	["plg-one", {}],
	["plg-two", {opt: false}],
	],
	env: {
	development: {
	sourceMaps: true,

	// Option C:
	// this implementation has a small amount of overhead compared to (a) and (b)
	const React = require('react');

	const counterState = React.createStateReducer({
	initialState: props => ({
	counter: 0,
	divRef: React.createRef(),
	}),
	reducer: (action, state) => {