Container queries land in stable browsers

Limbaje de Programare HTML & CSS
,
1

Ca un fel de completare pentru subiectul ăsta: e grozav să fii pe frontend în 2023 :smiley:

2 Likes
2

In sfarsit, nu mai trebuie sa folosesc chestii de genu in cativa ani :slight_smile:

WooCommerceSalesTracking.MediaQuery = {

  _registeredEvent : false,
  _eventThrottle   : 100,
  _eventThrottleTimeout : false,

  _propertyMap : {
    xx_large   : 1632,
    x_large    : 1312,
    large      : 992,
    medium     : 767,
    med_small  : 640,
    small      : 480
  },

  Init : function() {
    if( this._registeredEvent )
      return;

    let objectInstance = this;

    jQuery(window)
      .off( 'resize.wcc_media_query' + ' orientationchange.wcc_media_query' )
      .on( 'resize.wcc_media_query' + ' orientationchange.wcc_media_query', function() {
        if( objectInstance._eventThrottleTimeout !== false )
          clearTimeout( objectInstance._eventThrottleTimeout );

        objectInstance._eventThrottleTimeout = setTimeout( function() {
          objectInstance._eventTriggered();

          objectInstance._eventThrottleTimeout = false;
        }, objectInstance._eventThrottle );
      });

    this._registeredEvent = true;
  },

  _componentRegistered : function( componentContainer ) {
    this.__setContainerAttributes( componentContainer );
  },

  _eventTriggered : function() {
    let objectInstance = this;

    jQuery.each( WooCommerceSalesTracking._components.instanced, function( component_name, components ) {
      jQuery.each( components, function( component_index, component ) {
        if( typeof component.container === 'undefined' )
          return true;

        objectInstance.__setContainerAttributes( component.container );
        objectInstance._templateLoaded( component.container, component_name );

        if( typeof component.__onWindowResize === 'function' )
          component.__onWindowResize();
      });
    });
  },

  _templateLoaded : function( container, component_name ) {
    let objectInstance = this;

    container.find( '[data-woocommerce-sales-tracking-media-query-breakpoints]:not([data-woocommerce-sales-tracking-component])' ).each( function() {
      let parent = jQuery(this).parents( '[data-woocommerce-sales-tracking-component]:first' );

      if( typeof parent.attr( 'data-woocommerce-sales-tracking-component' ) !== 'undefined'
          && parent.attr( 'data-woocommerce-sales-tracking-component' ) !== component_name )
        return true;

      objectInstance.__setContainerAttributes( jQuery(this) );
    });
  },

  __setContainerAttributes : function( container ) {
    let container_width = container.width(),
        query_min_width = '';

    jQuery.each( this._propertyMap, function( alias, _width_target ) {
      if( _width_target <= container_width )
        query_min_width += ( query_min_width === '' ? '' : ' ' ) + alias;
    });

    container.attr( 'data-woocommerce-sales-tracking-media-query-breakpoints', query_min_width );
  },

};
3

E nasol sa fi front-end dev in 2023. Pana acum cativa ani nu exista pozitia asta, iar acum sunt n framework-uri de css si m de js. Si trebuie sa stii si ceva backend ca sa comunici eficient.

4

În 2007 eram angajat, în România, ca frontend developer, deci nu știu cât de adevărată e afirmația ta :slight_smile:

5

In 2007 front-end dev insemna sa stii html. CSS era bonus.

6

Detaliile job-ului sunt mai puțin importante.

E ca și cum ai spune că în anii '70 nu existau programatori pentru că nu aveau SSD-uri sau ecrane 5k…

7

css era si in 2007
atunci cred ca primeai un psd[1] si il transformai in pagina web. Si iti faci cruci sa mearga pe IE.

  1. format nu partid. :troll: ↩︎