Bliblidotcom - Reintroduction BEM CSS
•Download as PPTX, PDF•
2 likes•1,542 views
BEM is a naming convention that makes front-end code easier to understand and maintain. It stands for Block, Element, Modifier. A Block is a standalone component, an Element is a dependent part of a Block, and a Modifier changes the appearance or behavior of a Block or Element. BEM has simple rules for naming classes with prefixes and separators to identify each part. Applying BEM helps code be modular, flexible, and support partial loading. It also works well with component-based frameworks like React and Vue. Real-life examples from Blibli Travel and a sample framework demonstrate how to implement BEM.
Report
Share
Report
Share
Recommended
BEM - CSS, Seriously
An in depth introduction to the BEM methodology and how to use it in the wild. The slides cover the key concepts of Block-Element-Modifier as well as their usage in HTML and CSS. Furthermore the presentation covers on how BEM can solve well-known CSS challenges.
CSS - OOCSS, SMACSS and more
An introduction to the changing world of CSS. Slides from Brisbane Web Designer Meetup 13 March 2013.
The benefits of BEM CSS
The document discusses the benefits of using Block Element Modifier (BEM) methodology for CSS architecture. It begins with an introduction to BEM, explaining the concepts of blocks, elements, and modifiers. It then discusses some of the practical benefits of BEM such as reducing CSS specificity issues, improving decoupling of HTML and CSS, and enabling automation through predictable class naming. It addresses some potential criticisms of BEM like long class names but argues that BEM can be used effectively on projects of any size. Finally it shares some BEM tools and techniques including approaches for handling multiple modifiers on a single element.
BEM it! Introduction to BEM
This document provides an introduction to the BEM (Block, Element, Modifier) methodology for organizing HTML, CSS, and JavaScript code in a consistent and modular way. It explains the basic concepts of BEM including blocks, elements, and modifiers. It also discusses how to implement BEM through CSS naming conventions and provides examples. Best practices for using BEM with HTML, CSS, JavaScript, file structure, and build processes are covered. The goal of BEM is to provide a common semantic framework for building user interfaces and managing front-end code.
OOCSS, SMACSS or BEM?
This is a overview of the most popular CSS methodologies being used today. It covers examples and workflows using tools like sass and gulp.
BEM it! Introduction to BEM methodology
This document provides an introduction to the BEM (Block, Element, Modifier) methodology for organizing HTML, CSS, and JavaScript code in a consistent semantic structure. It explains that BEM aims to address the lack of a unified semantic model across frontend technologies by introducing a common naming convention based on blocks, elements, and modifiers. It then details BEM's core concepts and provides examples and best practices for implementing BEM in HTML/CSS and JavaScript.
Learn SUIT: CSS Naming Convention
http://inarocket.com
Learn SUIT fundamentals as fast as possible. What is SUIT (Components, descendents, modifiers, states, and utilities), SUIT syntax, how it works with a real example, etc.
BEM It! for Brandwatch
The document introduces the BEM (Block, Element, Modifier) methodology for organizing CSS, HTML, and JavaScript code into reusable components. It describes BEM as a semantic model that defines blocks, elements, and modifiers to structure interfaces. Blocks are standalone parts of an interface, elements are integral parts of blocks, and modifiers define block/element properties or states. The document provides examples of BEM naming conventions and discusses benefits like improved reusability, reduced specificity issues, and serving as a common language for designers and developers.
Recommended
BEM - CSS, Seriously
An in depth introduction to the BEM methodology and how to use it in the wild. The slides cover the key concepts of Block-Element-Modifier as well as their usage in HTML and CSS. Furthermore the presentation covers on how BEM can solve well-known CSS challenges.
CSS - OOCSS, SMACSS and more
An introduction to the changing world of CSS. Slides from Brisbane Web Designer Meetup 13 March 2013.
The benefits of BEM CSS
The document discusses the benefits of using Block Element Modifier (BEM) methodology for CSS architecture. It begins with an introduction to BEM, explaining the concepts of blocks, elements, and modifiers. It then discusses some of the practical benefits of BEM such as reducing CSS specificity issues, improving decoupling of HTML and CSS, and enabling automation through predictable class naming. It addresses some potential criticisms of BEM like long class names but argues that BEM can be used effectively on projects of any size. Finally it shares some BEM tools and techniques including approaches for handling multiple modifiers on a single element.
BEM it! Introduction to BEM
This document provides an introduction to the BEM (Block, Element, Modifier) methodology for organizing HTML, CSS, and JavaScript code in a consistent and modular way. It explains the basic concepts of BEM including blocks, elements, and modifiers. It also discusses how to implement BEM through CSS naming conventions and provides examples. Best practices for using BEM with HTML, CSS, JavaScript, file structure, and build processes are covered. The goal of BEM is to provide a common semantic framework for building user interfaces and managing front-end code.
OOCSS, SMACSS or BEM?
This is a overview of the most popular CSS methodologies being used today. It covers examples and workflows using tools like sass and gulp.
BEM it! Introduction to BEM methodology
This document provides an introduction to the BEM (Block, Element, Modifier) methodology for organizing HTML, CSS, and JavaScript code in a consistent semantic structure. It explains that BEM aims to address the lack of a unified semantic model across frontend technologies by introducing a common naming convention based on blocks, elements, and modifiers. It then details BEM's core concepts and provides examples and best practices for implementing BEM in HTML/CSS and JavaScript.
Learn SUIT: CSS Naming Convention
http://inarocket.com
Learn SUIT fundamentals as fast as possible. What is SUIT (Components, descendents, modifiers, states, and utilities), SUIT syntax, how it works with a real example, etc.
BEM It! for Brandwatch
The document introduces the BEM (Block, Element, Modifier) methodology for organizing CSS, HTML, and JavaScript code into reusable components. It describes BEM as a semantic model that defines blocks, elements, and modifiers to structure interfaces. Blocks are standalone parts of an interface, elements are integral parts of blocks, and modifiers define block/element properties or states. The document provides examples of BEM naming conventions and discusses benefits like improved reusability, reduced specificity issues, and serving as a common language for designers and developers.
CSS For Backend Developers
This handy “spellbook” prepared by our Frontend Developer Marta to provide guidance through the basic principles of CSS!
Learn BEM: CSS Naming Convention
http://inarocket.com
Learn BEM fundamentals as fast as possible. What is BEM (Block, element, modifier), BEM syntax, how it works with a real example, etc.
Style and Selector
This document discusses CSS style sheets and selectors. It begins with an introduction to CSS and its uses. It then covers CSS syntax, the different ways to insert CSS (inline, internal, external), and different types of selectors (element, id, class). Examples are provided for each topic. The document concludes with an assignment to create a webpage about movies using various CSS selectors and techniques learned in the document.
CSS pattern libraries
This document discusses best practices for creating CSS pattern libraries. It recommends starting with the smallest reusable components and building up to larger page-level templates. Key aspects covered include using a naming convention based on modules, modifiers and descendants; avoiding overly specific class names; and including utility classes to add single styles without new classes. The document also provides examples of how to structure and name classes for common interface patterns.
Introduction to HTML and CSS
This document summarizes a knowledge sharing session on HTML and CSS basics. It covers topics like HTML tags and structures, CSS rules and selectors, the CSS box model, positioning, sprites, and hacks for dealing with browser inconsistencies. The session introduced fundamental concepts for using HTML to structure content and CSS for styling and layout, providing examples for common tags, selectors, properties and techniques. It aimed to give attendees an overview of the core building blocks of HTML and CSS.
CSS
All you need to know about CSS:
Selectors
Value Processing
Cascading
Box Model
Visual Formatting Model
Block Formatting Context
Stacking Context
At-Rules
Units
Presentation with examples:
http://rawgit.com/vzhidal/HTML-CSS-Training-Presentations/master/css-basics.html
How to manage a big scale HTML/CSS project
The document outlines steps for managing a large-scale web project, including gathering visual elements as a reference, organizing sketches, choosing a markup base to build upon, separating CSS into basic, adaptation, and theme layers, and creating modular and reusable code to establish a solid markup foundation for future work. The end result is a framework of partials that programmers can use to build out pages and repeated elements, providing code reusability and separate responsibilities for integrators and programmers on the team.
Lab#5 style and selector
This document discusses CSS (Cascading Style Sheets) syntax and selectors. It explains the different ways to apply styles to HTML elements using inline styles, internal style sheets, and external style sheets. It also describes the three main CSS selectors - element, id, and class selectors. The element selector styles elements based on the tag name. The id selector selects individual elements using the id attribute. The class selector selects elements that share the same class attribute. Students are assigned to create a webpage presenting their two favorite movies using these CSS selectors.
Html & Css presentation
html & css powerpoint slide show for presentation. Here, basic concept of css using with html. a webpage decorated by css.
HTML- Hyper text markup language.
CSS- Cascading Style sheet.
Bang gia ong nhua ppr 2 lop
Bảng giá ống nhựa PPR 2 lớp Tiền Phong, giá cạnh tranh giao hàng nhanh, ĐT/Zalo 0933320468 hãy liên hệ với chúng tôi để được báo giá nhanh https://vikivn.com.vn/bang-bao-gia-ong-nhua-tien-phong-moi-nhat-2020
HTML/HTML5
This document provides an overview of HTML, CSS, and JavaScript. It discusses how HTML is used to define the structure and layout of web pages using markup tags, how CSS is used to style web pages, and how JavaScript can be used to add interactive elements. It also covers common HTML tags for headings, paragraphs, lists, and other content sections. Key elements like <head> and <body> are explained along with common tags used in each section.
ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)
The document discusses the differences between ePub 2 and ePub 3 formats. ePub 3 includes new features such as support for HTML5, CSS3, SVG, audio and video, JavaScript, and alternative navigation documents. It also describes layout types in ePub including reflowable and fixed layout. Fixed layout does not reflow content to fit different screens and may require metadata for proper display on devices.
Css position
The document discusses the CSS position property, which specifies the type of positioning for an element. There are four position values - static, relative, fixed, and absolute. Elements are then positioned using top, bottom, left, and right properties. These positioning properties work differently depending on the position value. The document provides examples and explanations of each position value.
Introduction to Javascript
This document discusses Dynamic HTML (DHTML) and JavaScript. It defines DHTML as the combination of HTML, JavaScript, CSS, and the DOM to create animated and interactive web pages. It describes the DOM as a standard for accessing and manipulating HTML and XML documents as tree structures. The chapter then explains JavaScript and how it can be used with the DOM to dynamically access and update HTML content, structure, and style. It provides examples of common JavaScript methods and properties for manipulating the DOM, interacting with browsers, and displaying data.
Tailwind CSS - KanpurJS
Tailwind CSS is a utility-first CSS framework for building custom designs rapidly. It allows developers to have full control over components without relying on predefined styles. Some key benefits of Tailwind CSS include customization through configuration files, not needing to name CSS classes, minimal context switching between HTML and CSS, and fast development speeds. It also has responsive designs and Purge CSS can be used to reduce file sizes significantly after development.
CSS Flexbox (flexible box layout)
Flexbox is a CSS layout mode that allows elements to be arranged and aligned in an intelligent and space efficient way. It lets items flex and expand to fill additional space, shrink to fit into smaller spaces, and rearrange themselves depending on screen size and device orientation. Some key aspects of flexbox include the flex container, flex items, main and cross axes, flex direction, justify and align content, flex wrap, and flex grow/shrink properties.
Css fonts
This document discusses CSS font properties. It explains how to set the font-family, font-style, font-variant, font-weight, font-size, and font properties to control various typographic styles. Examples are provided to demonstrate setting each property, such as making text italic, bold, small-caps, or a specific font size. The font shorthand property can set multiple font properties at once.
Introducing Cascading Style Sheets
The document discusses an agenda for a class on CSS (Cascading Style Sheets). The agenda includes learning what CSS is and its importance, understanding CSS grammar and syntax, linking a CSS file to HTML, creating a designer's toolbox, designing a basic webpage with CSS, and commenting in CSS. It also provides examples of CSS code, instructions on adding CSS to HTML pages, and homework of creating a basic webpage and CSS file.
Media queries A to Z
Media queries is very important for developing Modern Websites. This slide will guide you about Media queries. After watching this, you don't need any other tutorial or lessons.
Modern Web - an Introduction
This document introduces modern web technologies, including Accelerated Mobile Pages (AMP) and Progressive Web Apps (PWA). It discusses why AMP and PWA are important due to the growing number of mobile users and need for fast loading web content. It provides links to resources on how to build AMP pages and PWA, including sample projects. In the conclusion, it thanks the reader and provides a link to other talks by the author on web development topics.
Unit Testing for Frontend Code at Blibli.com
The document discusses unit testing for frontend code at Blibli.com. It introduces the speaker and outlines Blibli.com's frontend framework preference. It then covers the topics of blackbox vs whitebox testing, the unit test tools used like karma and mocha, automating tests on git commits, and establishing a quality gate. It also compares Karma and Jest testing tools. The document proposes moving from Karma to Jest to simplify tooling, adding Avoriaz for UI testing, implementing end-to-end developer tests, and other improvements to ensure better quality delivery.
More Related Content
What's hot
CSS For Backend Developers
This handy “spellbook” prepared by our Frontend Developer Marta to provide guidance through the basic principles of CSS!
Learn BEM: CSS Naming Convention
http://inarocket.com
Learn BEM fundamentals as fast as possible. What is BEM (Block, element, modifier), BEM syntax, how it works with a real example, etc.
Style and Selector
This document discusses CSS style sheets and selectors. It begins with an introduction to CSS and its uses. It then covers CSS syntax, the different ways to insert CSS (inline, internal, external), and different types of selectors (element, id, class). Examples are provided for each topic. The document concludes with an assignment to create a webpage about movies using various CSS selectors and techniques learned in the document.
CSS pattern libraries
This document discusses best practices for creating CSS pattern libraries. It recommends starting with the smallest reusable components and building up to larger page-level templates. Key aspects covered include using a naming convention based on modules, modifiers and descendants; avoiding overly specific class names; and including utility classes to add single styles without new classes. The document also provides examples of how to structure and name classes for common interface patterns.
Introduction to HTML and CSS
This document summarizes a knowledge sharing session on HTML and CSS basics. It covers topics like HTML tags and structures, CSS rules and selectors, the CSS box model, positioning, sprites, and hacks for dealing with browser inconsistencies. The session introduced fundamental concepts for using HTML to structure content and CSS for styling and layout, providing examples for common tags, selectors, properties and techniques. It aimed to give attendees an overview of the core building blocks of HTML and CSS.
CSS
All you need to know about CSS:
Selectors
Value Processing
Cascading
Box Model
Visual Formatting Model
Block Formatting Context
Stacking Context
At-Rules
Units
Presentation with examples:
http://rawgit.com/vzhidal/HTML-CSS-Training-Presentations/master/css-basics.html
How to manage a big scale HTML/CSS project
The document outlines steps for managing a large-scale web project, including gathering visual elements as a reference, organizing sketches, choosing a markup base to build upon, separating CSS into basic, adaptation, and theme layers, and creating modular and reusable code to establish a solid markup foundation for future work. The end result is a framework of partials that programmers can use to build out pages and repeated elements, providing code reusability and separate responsibilities for integrators and programmers on the team.
Lab#5 style and selector
This document discusses CSS (Cascading Style Sheets) syntax and selectors. It explains the different ways to apply styles to HTML elements using inline styles, internal style sheets, and external style sheets. It also describes the three main CSS selectors - element, id, and class selectors. The element selector styles elements based on the tag name. The id selector selects individual elements using the id attribute. The class selector selects elements that share the same class attribute. Students are assigned to create a webpage presenting their two favorite movies using these CSS selectors.
Html & Css presentation
html & css powerpoint slide show for presentation. Here, basic concept of css using with html. a webpage decorated by css.
HTML- Hyper text markup language.
CSS- Cascading Style sheet.
Bang gia ong nhua ppr 2 lop
Bảng giá ống nhựa PPR 2 lớp Tiền Phong, giá cạnh tranh giao hàng nhanh, ĐT/Zalo 0933320468 hãy liên hệ với chúng tôi để được báo giá nhanh https://vikivn.com.vn/bang-bao-gia-ong-nhua-tien-phong-moi-nhat-2020
HTML/HTML5
This document provides an overview of HTML, CSS, and JavaScript. It discusses how HTML is used to define the structure and layout of web pages using markup tags, how CSS is used to style web pages, and how JavaScript can be used to add interactive elements. It also covers common HTML tags for headings, paragraphs, lists, and other content sections. Key elements like <head> and <body> are explained along with common tags used in each section.
ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)
The document discusses the differences between ePub 2 and ePub 3 formats. ePub 3 includes new features such as support for HTML5, CSS3, SVG, audio and video, JavaScript, and alternative navigation documents. It also describes layout types in ePub including reflowable and fixed layout. Fixed layout does not reflow content to fit different screens and may require metadata for proper display on devices.
Css position
The document discusses the CSS position property, which specifies the type of positioning for an element. There are four position values - static, relative, fixed, and absolute. Elements are then positioned using top, bottom, left, and right properties. These positioning properties work differently depending on the position value. The document provides examples and explanations of each position value.
Introduction to Javascript
This document discusses Dynamic HTML (DHTML) and JavaScript. It defines DHTML as the combination of HTML, JavaScript, CSS, and the DOM to create animated and interactive web pages. It describes the DOM as a standard for accessing and manipulating HTML and XML documents as tree structures. The chapter then explains JavaScript and how it can be used with the DOM to dynamically access and update HTML content, structure, and style. It provides examples of common JavaScript methods and properties for manipulating the DOM, interacting with browsers, and displaying data.
Tailwind CSS - KanpurJS
Tailwind CSS is a utility-first CSS framework for building custom designs rapidly. It allows developers to have full control over components without relying on predefined styles. Some key benefits of Tailwind CSS include customization through configuration files, not needing to name CSS classes, minimal context switching between HTML and CSS, and fast development speeds. It also has responsive designs and Purge CSS can be used to reduce file sizes significantly after development.
CSS Flexbox (flexible box layout)
Flexbox is a CSS layout mode that allows elements to be arranged and aligned in an intelligent and space efficient way. It lets items flex and expand to fill additional space, shrink to fit into smaller spaces, and rearrange themselves depending on screen size and device orientation. Some key aspects of flexbox include the flex container, flex items, main and cross axes, flex direction, justify and align content, flex wrap, and flex grow/shrink properties.
Css fonts
This document discusses CSS font properties. It explains how to set the font-family, font-style, font-variant, font-weight, font-size, and font properties to control various typographic styles. Examples are provided to demonstrate setting each property, such as making text italic, bold, small-caps, or a specific font size. The font shorthand property can set multiple font properties at once.
Introducing Cascading Style Sheets
The document discusses an agenda for a class on CSS (Cascading Style Sheets). The agenda includes learning what CSS is and its importance, understanding CSS grammar and syntax, linking a CSS file to HTML, creating a designer's toolbox, designing a basic webpage with CSS, and commenting in CSS. It also provides examples of CSS code, instructions on adding CSS to HTML pages, and homework of creating a basic webpage and CSS file.
Media queries A to Z
Media queries is very important for developing Modern Websites. This slide will guide you about Media queries. After watching this, you don't need any other tutorial or lessons.
What's hot (20)
More from Irfan Maulana
Modern Web - an Introduction
This document introduces modern web technologies, including Accelerated Mobile Pages (AMP) and Progressive Web Apps (PWA). It discusses why AMP and PWA are important due to the growing number of mobile users and need for fast loading web content. It provides links to resources on how to build AMP pages and PWA, including sample projects. In the conclusion, it thanks the reader and provides a link to other talks by the author on web development topics.
Unit Testing for Frontend Code at Blibli.com
The document discusses unit testing for frontend code at Blibli.com. It introduces the speaker and outlines Blibli.com's frontend framework preference. It then covers the topics of blackbox vs whitebox testing, the unit test tools used like karma and mocha, automating tests on git commits, and establishing a quality gate. It also compares Karma and Jest testing tools. The document proposes moving from Karma to Jest to simplify tooling, adding Avoriaz for UI testing, implementing end-to-end developer tests, and other improvements to ensure better quality delivery.
Programmer In Startup Era
This document summarizes a presentation given by Irfan Maulana about opportunities for programmers in the startup era. It discusses how e-commerce and on-demand startups have grown without physical infrastructure by leveraging technology. It notes that most startups are technology-based and require programmers. For new programmers, it recommends learning basic skills, joining communities, doing small projects, and interning if possible. It also encourages programmers to continue upgrading skills through open source contributions and learning from others. The presentation outlines options for programmers to either create their own startups, join startups, or work for large companies.
Bliblidotcom - Evolusi Frontend Development di Bliblidotcom
Perubahan demi perubahan yang terjadi pada frontend development selama 2 tahun terakhir di Blibli.com
Bliblidotcom - Tech In Asia PDC 2017 Takeaway
The document summarizes the PDC 2017 tech conference, which took place over two days and included sessions on topics like Kotlin, Android UI design, open source strategies, and scaling development processes. Speakers came from companies including Google, GO-JEK, Bukalapak, and Sale Stock. Networking opportunities were also provided each day, and slides from the event are available online.
Bliblidotcom - AMP And PWA
Presentation for Google Mobile Web Hackathon.
Implementation of AMP and PWA technology for better mobile web experience.
Angular - The Return of The King
- Irfan Maulana presented about Angular. He has over 2 years experience with AngularJS and is now learning Angular.
- AngularJS was previously the dominant framework (king) but became outdated. Angular has replaced AngularJS as the new framework and king.
- Angular is the son of AngularJS and is now ready to take over and lead where AngularJS left off. It uses TypeScript for added safety and RxJS for reactive programming.
- Angular comes with a CLI that makes it easy to generate projects, components, and more without configuration headaches. Core parts include modules, components, services, pipes, and routing.
How to Become Rockstar Programmer
The document introduces Irfan Maulana, a software development engineer who previously worked as a Java developer. It provides details on his education background and websites. The rest of the document provides tips on how to become a well-known programmer, such as writing about your work, sharing code, being active in communities, public speaking, continuous learning, respecting others, and passion.
Bliblidotcom - AngularJS Introduction
This document introduces AngularJS version 1.x and provides an overview of its key concepts and features. It discusses AngularJS's MVC architecture including models, views, and controllers. It then provides examples of using AngularJS for data binding, making requests to retrieve data, creating services, and routing. The examples demonstrate basic usage and capabilities of AngularJS. The document concludes by proposing an exercise to create a CRUD application using the AngularJS framework and interacting with a JSON placeholder API.
Php Indonesia x Bliblidotcom - Architecting Scalable CSS
This document summarizes Irfan Maulana's presentation on architecting scalable CSS at his company Blibli.com. It discusses how they moved to using Sass and implemented the BEM methodology to modularize their CSS and make it more maintainable as their codebase grew. Some challenges included building out their own BEM libraries and integrating it with JavaScript frameworks, but overall it improved collaboration and allowed safe refactoring of CSS without side effects. The presentation concludes that scalable CSS is achievable through preprocessors like Sass and strict conventions like BEM.
Journey To The Front End World - Part3 - The Machine
This document is a summary of part 3 of a journey to the front end world. It provides an introduction to JavaScript, including what it is, its uses, data types, operators, conditional statements, loops, functions, and scope. It also discusses ECMAScript, the DOM tree, developer tools, and code conventions. Hands-on examples are provided to add CRUD interactions with local storage. References for further learning are included, and contact information is provided for the author.
Bliblidotcom - SASS Introduction
This slide will intro you to SASS as CSS Preprocessor.
Contains the basic usage and feature that you can see in SASS.
Journey To The Front End World - Part2 - The Cosmetic
This is chapter one of my session to introduce front end stack to newbies.
In this chapter we will introduce CSS and its components.
Journey To The Front End World - Part1 - The Skeleton
The document provides an introduction to HTML for beginners. It explains that HTML is the skeleton for websites and defines common HTML elements like headings, paragraphs, lists, forms, and inputs. It also discusses HTML tags, attributes, and basic page structure using tags like <html>, <head>, <body>, <div>, and <nav>. The document encourages new developers to learn HTML fundamentals and not feel discouraged if it takes practice to understand basic concepts. It includes the presenter's contact information for any additional questions.
PHP Indonesia - Understanding UI UX from Developer Side
This document discusses the importance of developers understanding user interface (UI) and user experience (UX). It defines UI as everything a user interacts with on a device, while UX refers to a person's entire experience using a product or service. The UI/UX process is outlined, including interviews, prototyping, and measuring outcomes. The document suggests developers can support the process by collaborating early, ensuring clear specifications, deploying frequently for feedback, optimizing for speed, and allowing negotiation between designers and developers.
JakartaJS - How I Learn Javascript From Basic
The document shares Irfan Maulana's experience learning JavaScript from a background in Java development. It outlines some of the challenges he faced including lack of consistency and debugging skills. It provides recommendations for learning JavaScript basics through resources like JavaScript for Cats and You Don't Know JS. Irfan emphasizes the importance of practicing by building projects, asking questions on forums, and learning frameworks to strengthen JavaScript skills.
PHP Indonesia - Nodejs Web Development
This document provides an introduction to Node.js web development. It discusses Node.js basics including its asynchronous, non-blocking architecture. It also covers building a simple web app with Express, MongoDB, and Jade. Tools for bundling assets like Grunt and unit testing with Mocha are described. Sample code demonstrates basic routing, database queries, templating, and unit tests. Contact information and GitHub repos are provided to learn more.
[Blibli Brown Bag] Nodejs - The Other Side of Javascript
This document provides an overview of Node.js including what it is, its key features, popular modules, when to use it and when not to use it. Node.js is a JavaScript runtime built on Chrome's V8 engine that allows JavaScript to be used on the server-side. It offers lightweight servers, near real-time speed, non-blocking I/O with event loops, large npm module ecosystem and support for isomorphic JavaScript. Popular Node.js uses include chat applications, APIs, monitoring dashboards, and server-side web applications. The document then discusses building web applications with Node.js including using Express, Mongoose, Jade and testing with Mocha.
Create Rest API in Nodejs
This document discusses how to create a REST API in Node.js using the Express framework and Mongoose ORM for connecting to MongoDB. It begins with an introduction and background on REST APIs and the technologies used. It then walks through setting up dependencies, creating basic Express routes, connecting to MongoDB with Mongoose, defining a schema and model, and using the model for CRUD operations. The document ends with instructions on testing API endpoints in Postman and includes a link to the source code repository.
Irfan Maulana - Career Journey
Irfan Maulana is a software development engineer at PT. GDN (Blibli.com) specializing in web front end development. He has over 7 years of experience in software development, previously working at PT. SML Technologies as a Java and web developer and PT. Dunkindo Lestari as quality control. His skillset includes front end technologies like HTML, CSS, JavaScript, AngularJS, and Sencha ExtJS as well as back end skills in Java, PHP, and NodeJs and databases like MySQL and MongoDB.
More from Irfan Maulana (20)
Bliblidotcom - Evolusi Frontend Development di Bliblidotcom
Bliblidotcom - Evolusi Frontend Development di Bliblidotcom
Php Indonesia x Bliblidotcom - Architecting Scalable CSS
Php Indonesia x Bliblidotcom - Architecting Scalable CSS
Journey To The Front End World - Part3 - The Machine
Journey To The Front End World - Part3 - The Machine
Journey To The Front End World - Part2 - The Cosmetic
Journey To The Front End World - Part2 - The Cosmetic
Journey To The Front End World - Part1 - The Skeleton
Journey To The Front End World - Part1 - The Skeleton
PHP Indonesia - Understanding UI UX from Developer Side
PHP Indonesia - Understanding UI UX from Developer Side
[Blibli Brown Bag] Nodejs - The Other Side of Javascript
[Blibli Brown Bag] Nodejs - The Other Side of Javascript
Recently uploaded
GraphSummit Singapore | The Art of the Possible with Graph - Q2 2024
Neha Bajwa, Vice President of Product Marketing, Neo4j
Join us as we explore breakthrough innovations enabled by interconnected data and AI. Discover firsthand how organizations use relationships in data to uncover contextual insights and solve our most pressing challenges – from optimizing supply chains, detecting fraud, and improving customer experiences to accelerating drug discoveries.
Full-RAG: A modern architecture for hyper-personalization
Mike Del Balso, CEO & Co-Founder at Tecton, presents "Full RAG," a novel approach to AI recommendation systems, aiming to push beyond the limitations of traditional models through a deep integration of contextual insights and real-time data, leveraging the Retrieval-Augmented Generation architecture. This talk will outline Full RAG's potential to significantly enhance personalization, address engineering challenges such as data management and model training, and introduce data enrichment with reranking as a key solution. Attendees will gain crucial insights into the importance of hyperpersonalization in AI, the capabilities of Full RAG for advanced personalization, and strategies for managing complex data integrations for deploying cutting-edge AI solutions.
Video Streaming: Then, Now, and in the Future
In his public lecture, Christian Timmerer provides insights into the fascinating history of video streaming, starting from its humble beginnings before YouTube to the groundbreaking technologies that now dominate platforms like Netflix and ORF ON. Timmerer also presents provocative contributions of his own that have significantly influenced the industry. He concludes by looking at future challenges and invites the audience to join in a discussion.
20240609 QFM020 Irresponsible AI Reading List May 2024
Everything I found interesting about the irresponsible use of machine intelligence in May 2024
GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024
Maruthi Prithivirajan, Head of ASEAN & IN Solution Architecture, Neo4j
Get an inside look at the latest Neo4j innovations that enable relationship-driven intelligence at scale. Learn more about the newest cloud integrations and product enhancements that make Neo4j an essential choice for developers building apps with interconnected data and generative AI.
Artificial Intelligence for XMLDevelopment
In the rapidly evolving landscape of technologies, XML continues to play a vital role in structuring, storing, and transporting data across diverse systems. The recent advancements in artificial intelligence (AI) present new methodologies for enhancing XML development workflows, introducing efficiency, automation, and intelligent capabilities. This presentation will outline the scope and perspective of utilizing AI in XML development. The potential benefits and the possible pitfalls will be highlighted, providing a balanced view of the subject.
We will explore the capabilities of AI in understanding XML markup languages and autonomously creating structured XML content. Additionally, we will examine the capacity of AI to enrich plain text with appropriate XML markup. Practical examples and methodological guidelines will be provided to elucidate how AI can be effectively prompted to interpret and generate accurate XML markup.
Further emphasis will be placed on the role of AI in developing XSLT, or schemas such as XSD and Schematron. We will address the techniques and strategies adopted to create prompts for generating code, explaining code, or refactoring the code, and the results achieved.
The discussion will extend to how AI can be used to transform XML content. In particular, the focus will be on the use of AI XPath extension functions in XSLT, Schematron, Schematron Quick Fixes, or for XML content refactoring.
The presentation aims to deliver a comprehensive overview of AI usage in XML development, providing attendees with the necessary knowledge to make informed decisions. Whether you’re at the early stages of adopting AI or considering integrating it in advanced XML development, this presentation will cover all levels of expertise.
By highlighting the potential advantages and challenges of integrating AI with XML development tools and languages, the presentation seeks to inspire thoughtful conversation around the future of XML development. We’ll not only delve into the technical aspects of AI-powered XML development but also discuss practical implications and possible future directions.
Climate Impact of Software Testing at Nordic Testing Days
My slides at Nordic Testing Days 6.6.2024
Climate impact / sustainability of software testing discussed on the talk. ICT and testing must carry their part of global responsibility to help with the climat warming. We can minimize the carbon footprint but we can also have a carbon handprint, a positive impact on the climate. Quality characteristics can be added with sustainability, and then measured continuously. Test environments can be used less, and in smaller scale and on demand. Test techniques can be used in optimizing or minimizing number of tests. Test automation can be used to speed up testing.
Elizabeth Buie - Older adults: Are we really designing for our future selves?
Elizabeth Buie - Older adults: Are we really designing for our future selves?
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
In this session I delve into the encryption technology used in Microsoft 365 and Microsoft Purview. Including the concepts of Customer Key and Double Key Encryption.
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...
Effective Application Security in Software Delivery lifecycle using Deployment Firewall and DBOM
The modern software delivery process (or the CI/CD process) includes many tools, distributed teams, open-source code, and cloud platforms. Constant focus on speed to release software to market, along with the traditional slow and manual security checks has caused gaps in continuous security as an important piece in the software supply chain. Today organizations feel more susceptible to external and internal cyber threats due to the vast attack surface in their applications supply chain and the lack of end-to-end governance and risk management.
The software team must secure its software delivery process to avoid vulnerability and security breaches. This needs to be achieved with existing tool chains and without extensive rework of the delivery processes. This talk will present strategies and techniques for providing visibility into the true risk of the existing vulnerabilities, preventing the introduction of security issues in the software, resolving vulnerabilities in production environments quickly, and capturing the deployment bill of materials (DBOM).
Speakers:
Bob Boule
Robert Boule is a technology enthusiast with PASSION for technology and making things work along with a knack for helping others understand how things work. He comes with around 20 years of solution engineering experience in application security, software continuous delivery, and SaaS platforms. He is known for his dynamic presentations in CI/CD and application security integrated in software delivery lifecycle.
Gopinath Rebala
Gopinath Rebala is the CTO of OpsMx, where he has overall responsibility for the machine learning and data processing architectures for Secure Software Delivery. Gopi also has a strong connection with our customers, leading design and architecture for strategic implementations. Gopi is a frequent speaker and well-known leader in continuous delivery and integrating security into software delivery.
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Monitoring and observability aren’t traditionally found in software curriculums and many of us cobble this knowledge together from whatever vendor or ecosystem we were first introduced to and whatever is a part of your current company’s observability stack.
While the dev and ops silo continues to crumble….many organizations still relegate monitoring & observability as the purview of ops, infra and SRE teams. This is a mistake - achieving a highly observable system requires collaboration up and down the stack.
I, a former op, would like to extend an invitation to all application developers to join the observability party will share these foundational concepts to build on:
DevOps and Testing slides at DASA Connect
My and Rik Marselis slides at 30.5.2024 DASA Connect conference. We discuss about what is testing, then what is agile testing and finally what is Testing in DevOps. Finally we had lovely workshop with the participants trying to find out different ways to think about quality and testing in different parts of the DevOps infinity loop.
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
The choice of an operating system plays a pivotal role in shaping our computing experience. For decades, Microsoft's Windows has dominated the market, offering a familiar and widely adopted platform for personal and professional use. However, as technological advancements continue to push the boundaries of innovation, alternative operating systems have emerged, challenging the status quo and offering users a fresh perspective on computing.
One such alternative that has garnered significant attention and acclaim is Nitrux Linux 3.5.0, a sleek, powerful, and user-friendly Linux distribution that promises to redefine the way we interact with our devices. With its focus on performance, security, and customization, Nitrux Linux presents a compelling case for those seeking to break free from the constraints of proprietary software and embrace the freedom and flexibility of open-source computing.
UiPath Test Automation using UiPath Test Suite series, part 5
Welcome to UiPath Test Automation using UiPath Test Suite series part 5. In this session, we will cover CI/CD with devops.
Topics covered:
CI/CD with in UiPath
End-to-end overview of CI/CD pipeline with Azure devops
Speaker:
Lyndsey Byblow, Test Suite Sales Engineer @ UiPath, Inc.
Microsoft - Power Platform_G.Aspiotis.pdf
Revolutionizing Application Development
with AI-powered low-code, presentation by George Aspiotis, Sr. Partner Development Manager, Microsoft
UiPath Test Automation using UiPath Test Suite series, part 6
Welcome to UiPath Test Automation using UiPath Test Suite series part 6. In this session, we will cover Test Automation with generative AI and Open AI.
UiPath Test Automation with generative AI and Open AI webinar offers an in-depth exploration of leveraging cutting-edge technologies for test automation within the UiPath platform. Attendees will delve into the integration of generative AI, a test automation solution, with Open AI advanced natural language processing capabilities.
Throughout the session, participants will discover how this synergy empowers testers to automate repetitive tasks, enhance testing accuracy, and expedite the software testing life cycle. Topics covered include the seamless integration process, practical use cases, and the benefits of harnessing AI-driven automation for UiPath testing initiatives. By attending this webinar, testers, and automation professionals can gain valuable insights into harnessing the power of AI to optimize their test automation workflows within the UiPath ecosystem, ultimately driving efficiency and quality in software development processes.
What will you get from this session?
1. Insights into integrating generative AI.
2. Understanding how this integration enhances test automation within the UiPath platform
3. Practical demonstrations
4. Exploration of real-world use cases illustrating the benefits of AI-driven test automation for UiPath
Topics covered:
What is generative AI
Test Automation with generative AI and Open AI.
UiPath integration with generative AI
Speaker:
Deepak Rai, Automation Practice Lead, Boundaryless Group and UiPath MVP
Pushing the limits of ePRTC: 100ns holdover for 100 days
At WSTS 2024, Alon Stern explored the topic of parametric holdover and explained how recent research findings can be implemented in real-world PNT networks to achieve 100 nanoseconds of accuracy for up to 100 days.
Recently uploaded (20)
GraphSummit Singapore | The Art of the Possible with Graph - Q2 2024
GraphSummit Singapore | The Art of the Possible with Graph - Q2 2024
Full-RAG: A modern architecture for hyper-personalization
Full-RAG: A modern architecture for hyper-personalization
20240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 2024
GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024
GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024
Climate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing Days
Elizabeth Buie - Older adults: Are we really designing for our future selves?
Elizabeth Buie - Older adults: Are we really designing for our future selves?
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Monitoring Java Application Security with JDK Tools and JFR Events
Monitoring Java Application Security with JDK Tools and JFR Events
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
UiPath Test Automation using UiPath Test Suite series, part 5
UiPath Test Automation using UiPath Test Suite series, part 5
UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6
Pushing the limits of ePRTC: 100ns holdover for 100 days
Pushing the limits of ePRTC: 100ns holdover for 100 days
Bliblidotcom - Reintroduction BEM CSS
- 1. REINTRODUCTION BEM CSS By Irfan Maulana
- 2. Intro • Thanks to @r_ridho for introduction BEM to Blibli’s Front End Devs • Now, lets deep dive about this methods
- 3. Getting know about BEM B.E.M BLOCK - ELEMENT – MODIFIER BEM is a highly useful, powerful, and simple naming convention that makes your front-end code easier to read and understand, easier to work with, easier to scale, more robust and explicit, and a lot more strict.
- 4. Getting know about BEM B.LOK Standalone entity, have no dependent to its parent. Ex : header, container, footer
- 5. Getting know about BEM E.LEMENT Part of block, cannot stand alone, have dependent with its parent (*block) Ex : header title, header logo, header menu
- 6. Getting know about BEM M.ODIFIER Flag in block or element that change appearance or behavior. Ex : is active, orange, selected, highlighted
- 8. BEM Rule BEM has simple rule for class naming : • Block is like usual class, kiss, meaningful, represent its function. ex : header, menu, etc. • Element using double underscore (__) with its block as prefix. ex : header__logo, header__title, etc • Modifier using double dash (--) ex : menu—selected, tab—active, button— orange, etc.
- 10. Deep Dive • Every block should have own file. • Block can be place everywhere, every positioning has be on its parent. • Element can be stand for own block, but should have element rule. • Modifier can be global without added element or block flagged, but normally NO. • Don’t reuse class, reuse class rule. • BEM comes for reduce nested in OOCSS, so don’t nested more than 2.
- 12. BEM Goals • Maintainable • Easy Tracking • Modular • Flexible • Support partial load • Fit with component based modern framework ex : React, Vue, Polymer.
- 13. Learn from Real Life DEMO FROM BLIBLI TRAVEL https://www.blibli.com/travel
- 14. Learn from Real Life SIMPLE FRAMEWORK WITH BEM https://github.com/mazipan/awesome-bemcss
- 15. THANK YOU