Что нового в Java 20?

Если говорить про удобство синтаксиса - то Котлин это уже всё имеет и в более "красивом" виде. Единственное, что switch в джаве умеет больше, чем when в котлине.

Например пример с точкой

if (o instanceof Point(int x, int y)) {

System.out.println(x+y);

}

на котлине будет более естественнен с использованием встроенной функции-расширения apply, которая делает p this внутри apply

data class Point(val x: Double, val y: Double)

val p = Point(0.0, 1.0) as Any
if (p is Point) p.apply {

println(x+y)

}

p.s. { } - это базовая пустая лямбда в котлине

p.p.s. если последним аргументом функции является литерал лямбды, то его можно передать в функцию после аргументов в круглых скобках и если в круглых скобках нечего передавать, то их можно опустить.

Смысл жизни, или чего мы хотим на самом деле

Тоже согласен, что все наши действия исходят из базовой программы размножения, на которую накладываются слои других программ, более адаптированных к текущим реалиям.

Эмулируем React useState в обычном JS (via data-attributes & css selectors)

Спасибо, посмотрел доки, похоже виртуальный домик остался как концепция, но не как реализация.

Эмулируем React useState в обычном JS (via data-attributes & css selectors)

Доброго времени суток! setState здесь напрямую не показан, но есть функция которая переключает стейт - это toggleExpand(). При желании можно добавить функцию setExpand(expanded), которая будет иметь аналогичный функционал, но строго выставлять состояние, беря его из аргумента expand. Например:

function setExpand(expanded){
  const element = document.getElementById('component')
  element.dataset.expanded = expanded
}

Эмулируем React useState в обычном JS (via data-attributes & css selectors)

Да, я уже кажется понял, что это слишком простые вещи для хабра, наверное не стоило из этого статью делать. Насчёт element.style.display - мне хотелось изобразить именно как я это пишу в реакте и как бы вынести функционал показа/скрытия в отдельную сущность что ли) И так я добавил div который может иметь только 2 описанных мною класса.

Эмулируем React useState в обычном JS (via data-attributes & css selectors)

Доброго времени суток! useState хранит состояние: должен ли показываться некий дополнительный контент на странице или нет.

Я описал поведение программы с помощью реакта (как это обычно в нём делается с помощью состояния компоненты) и с другой стороны воспроизвёл то же самое поведение но без реакта. На работе мне пришлось делать форму, у которой по нажатию кнопки должны раскрываться/скрываться некоторые поля. Но пришлось делать мне это на чистом JS, и тут пришла в голову идея удобно использовать data-атрибуты & css селекторы в связке с удобными классами-обёртками (.expandableContent & .collapsableContent). Мне показалось, что эта идея может быть полезна другим разработчикам и я решил написать свою первую статью, так что прошу не судить уж совсем строго.

Эмулируем React useState в обычном JS (via data-attributes & css selectors)

Подошёл в зеркало посмотрелся, никаких непониманий на лице не нашёл. Реакт перерисовывает Virtual DOM в зависимости от состояния и пропсов. Так же здесь движок браузера перерисовывает в зависимости от состояния data-атрибутов. Если у вас своё видение, то вместе с несогласием с моим мнением прошу его в студию. Я только рад буду узнать поглубже ключевые моменты, которые вы освоили благодаря своему опыту :)

Эмулируем React useState в обычном JS (via data-attributes & css selectors)

Возможно, но здесь я привожу сравнение между реактом и ванильным джаваскриптом. Я лично считаю этот материал полезным use case использования data-атрибутов. Ну и наконец статья полностью соответствует заголовку, так что вы не обязаны читать это, если вам не интересно, но уверен, многим эта статья покажется полезной.

Еще один способ использовать SVG в React. На этот раз удобный

Не знаю насчёт лучшего способа, но для себя я нашёл такой способ.

Способ позволяет менять РАЗМЕР иконки и любые другие цвета и свойства (надо для них CSS Custom properties написать, это несложно).
Файл SVG:

<svg xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 100 100">
    <!-- Delete width and height of <svg> tag, only viewBox is needed -->
    <!-- If you specify there fill or stroke, they will be default -->

    <!-- DO NOT PUT COMMENTS ABOVE <svg> TAG - it creates extra element-->

    <!-- USING CSS VARIABLES -->
    <style>
        :root {
            --first-circle-color: red;
            --second-circle-color: black;
            --third-circle-color: green;
            --rect-color: blue;
        }
    </style>


    <!--
        Delete all fill and stroke in children
        in order them to take fill and stroke from parent <svg> tag.
        Set stroke="none" or fill="none" if you want to disable them.
        (!!! if you not set them, then they can draw with defaults)
    -->
    <rect x="16" y="57" width="68" height="16" stroke="none" fill="var(--rect-color)" />
    <circle cx="25.5" cy="40.5" r="9.5" stroke="none" fill="var(--first-circle-color)" />
    <circle cx="50.5" cy="40.5" r="9.5" stroke="none" fill="var(--second-circle-color)" />
    <circle cx="74.5" cy="40.5" r="9.5" stroke="none" fill="var(--third-circle-color)" />

</svg>

Файл компоненты React:

import React, {useLayoutEffect, useRef} from 'react'
import { ReactComponent as SomeSvgSvg } from 'src/assets/icons/some-svg-4.svg'

// USING CSS VARIABLES

const SomeSvgIc4 = (
    {color1, color2, color3, color4, size}
        : {color1:string, color2:string, color3:string, color4:string, size?:number}) => {

    const svgRef = useRef<SVGSVGElement>(null)
    useLayoutEffect(()=>{
        const svg = svgRef.current
        if (svg) {
            svg.style.setProperty('--first-circle-color', color1)
            svg.style.setProperty('--second-circle-color', color2)
            svg.style.setProperty('--third-circle-color', color3)
            svg.style.setProperty('--rect-color', color4)
        }
    },[color1,color2,color3,color4])

    return <SomeSvgSvg ref={svgRef}
        style={{ width: size, height: size, maxWidth: '100%', maxHeight: '100%' }}
    />
}
export default SomeSvgIc4

Использование:

{/* ... */}
<div style={{height:200, width:200, background: 'yellow'}}>
	<SomeSvgIc4 color1={"gold"} color2={"red"} color3={"blue"} color4={"green"} />
</div>
<div>
	<SomeSvgIc4 
		color1={"gold"} color2={"red"} color3={"blue"} color4={"green"} 
		size={200}
	/>
</div>
{/* ... */}

Код взял из своего тестового реакт проекта, где иногда тестирую фичи реакта

https://github.com/RainFourth/react-ts-test/blob/main/src/components/SvgIcons/SomeSvgIc4.tsx