DEV Community: Maciej

🚨Material Design for Bootstrap Version 7.2.0, released!🚨

Maciej — Wed, 13 Mar 2024 12:00:00 +0000

Material Design for Bootstrap Version 7.2.0 Changelog:

New features:
Datepicker

added viewChanged.mdb.datepicker event
changed days aria-label to be human readable

Datatable - allow setting table ID

Select - added search.mdb.select event

Timepicker - added clear.mdb.timepicker event

Fixed & improved:
Transfer

fixed search input init and style
fixed triggering search.mdb.transfer event
fixed checkbox in transfer header

Popconfirm

fixed triggering cancel.mdb.popconfirm event
fixed dispose method

Chips Input

fixed bug with input init
fixed enter keydown triggering form submission

Datatable

fixed sort reset pagination
improved performance while cell formatting many columns
fixed borders bug with fixed option

Datepicker

fixed datepicker cell width
added aria-disabled to disabled dates, month and years

DateTimepicker

added functionality to save the selected date when the timepicker toggle button is clicked
fixed navigation to initial time and date on open

Select

added update of aria-expanded on open and close
fixed clear button action with hidden option

Sidenav

improved marking of active item
fixed transform with RTL when option hidden is set to false

Animated navbar - fixed auto init

Calendar - fixed view change select

Input Mask - fixed bug after backspace keydown

Table editor - fixed rows per page select

Treeview - fixed auto select of parent checkbox

Treetable - fixed animation on open

Carousel - fixed dark variant

Modal - fixed dispose method

Autocomplete - added update of aria-expanded on open and close

Multi Range Slider - fixed start.mdb.multiRangeSlider event

_Timepicker _- fixed RTL styling - clock and button position

Fixed $form-check-input-hover-before-box-shadow SCSS variable

Check out MDB here

DataDen - Coming Soon. Tailor Your Data, Your Way

Maciej — Mon, 04 Mar 2024 17:00:00 +0000

Keep Coding, creators of very popular UI KITS MDB (Bootstrap) and TWE (TailwindCSS) have just announced they are close to launching a new product: DataDen - Plugin that extends the functionality of the library with table component.

Advanced data structure
The latest and most advanced data structure allows customizing each column (sort, width, resize, field) and matches values from each row to a column in which the field equals a given key value.

Draggable columns
Experience seamless interactivity with our draggable columns feature. Effortlessly rearrange your data grid to suit your workflow, ensuring optimal organization and efficiency. Just click, drag, and drop to customize your data display exactly as you need.

Pagination
Explore efficient data navigation with our pagination example. Learn to seamlessly handle large datasets by integrating simple, intuitive pagination controls.

Column search
Discover the power of quick data retrieval with our search column feature. Easily locate the information you need within your DataDen grids for a more streamlined and productive data management experience.

Cell formatting
Enhance your data grid with our versatile cell formatting options. Tailor each cell's appearance for clarity and impact, using colors, fonts, and styles that make your data speak volumes. Perfect for highlighting critical insights and personalizing your data view

Compact version
Unlock the full potential of your data grid with advanced CSS customization. Style every aspect to match your brand or personal preference, from colors and fonts to layouts. Create a visually cohesive and highly functional data interface with ease.

Waiting List
So don’t hesitate to join DataDen’s Waiting List: Get front-row seats to the future of Data Grid.

In due course, you will receive an exclusive discount that you can use to purchase Data Den Plugin (& more!)

https://getdataden.com/general/waiting-list/

MDB5 React 7.2.0 Released!

Maciej — Tue, 30 Jan 2024 13:00:00 +0000

Version 7.2.0, released 29.01.2024

Features:
Tooltip - added type prop
Added disablePortal option in the following components: Popover, Lightbox and Datepicker

Fixed & improved:
Perfect Scrollbar:
Removed react-perfect-scrollbar dependency and created custom component implementation
Fixed 'relative imports outside of src/ are not supported' error in Next.js src/ project

Created custom createPortal implementation to prevent SSR related issues in the following components:
Popover
Timepicker
Dropdown
Alert
Lightbox
Loading management
Autocomplete
Select
Datepicker
Toast
Popconfirm
Tooltip
Select

Select:
Fixed bug when selectData was being changed during option selection
Fixed keyboard accessibility bug when the selected option had no value

Timepicker:
Added handlers for arrowLeft & arrowRight events in timepicker 24h modal mode to make changing hour with the keyboard easier
Fixed a bug causing the sidenav to be above the backdrop until the timepicker animation was complete

Full Changelog here

MDB5 Angular 6.0.0 Released!

Maciej — Wed, 17 Jan 2024 11:59:29 +0000

MDB5 Angular 6.0.0 Changelog

New features:
Select - added new inputId and inputFilterId inputs that allow to declare ids for input elements

Breaking changes:
Updated Angular to v17, this version is required in MDB Angular v6

Calendar - changed type of defaultView input from string to MdbCalendarView

Datepicker - changed type of options input from any to MdbDatepickerOptions

Timepicker:

Changed type of options input from Options to MdbTimepickerOptions and made all parameters optional
Changed SelectedTime type name to MdbTimepickerSelectedTime and added this type to public exports

Popover - removed unused template input

Sidenav:

Changed return type of all events from MdbSidenavComponent to void
Removed redundant li element from MdbSidenavItemComponent template

Transfer

Changed onSearchOutput event name to searchOutput
Changed selectOutput event name to selectOutput
Changed onChange event name to listChange
Changed onSearch event name to itemSearch
Changed onSelect event name to itemSelect

Fixes:
Sidenav - removed height animation transition
Select - blocked input clearing in disabled component
Input fields - resolved problem with default label position in all inputs with built-in placeholder (like datetime-local or time)
Lightbox - resolved problem with component removal from DOM after using browser's back button
Timepicker - resolved problem with font size in landscape view

Full Changelog here

MDB React Version 7.1.0 Released!

Maciej — Wed, 10 Jan 2024 12:10:18 +0000

MDB React Version 7.1.0, released 08.01.2024

New component:
MDBClientOnly- Dedicated for environments using server side rendering, like Next.js. Used to evaluate component's code only on the client side and prevent SSR related errors.

Features:
Select:
Added new events: onOpened, onClosed
Added animationVariants
Added searchFn to allow custom filtering
Added forwardRef to the input
Dropdown - Added wrapper prop
Checkbox - Added forwardRef to the input
DateTimepicker - Added forwardRef to the input
Datepicker - Added forwardRef to the input
Timepicker - Added forwardRef to the input
File - Added forwardRef to the input

Improved & fixed:
Select:
Disabled clear button when the disable prop is set
Fixed keyboard accessibility for Select with Search - reseting active option when the filter query changes.
Dropdown - Changed tabindex of all items to 0
Timepicker:
Fixed bug causing page scroll when inline timepicker opens
Fixed keyboard accessibility
Fixed active class toggling for am/pm toggler
Datepicker - fixed selectOnClick to close picker after selecting date
Buttons- fixed styles for floating buttons with a tag
Table editor - fixed pagination styles to be responsive
Fixed --mdb-link-decoration CSS variable
Sidenav:
Removed unexpected height change animation on window resize
Fixed icons styles
Stepper - fixed height calculating in vertical mode

Full Changelog here

TW Elements v1.1.0 Released!

Maciej — Tue, 05 Dec 2023 16:30:00 +0000

TW Elements v1.1.0 - In this release, we are introducing new Autocomplete and Multi Range Slider components. We also updated integration tutorials and added new guides for SvelteKit and Bun.

The main goal of Bun is to reduce the startup times and memory usage of created apps. Vite works with Bun out of the box. TW Elements can be imported in Vite applications according to the following procedure.

Our team has also addressed lots of issues and improved the overall customization options for our components.

New features
1932: Added new shadow classes to the TW Elements plugin and updated the Shadows page - by juujisai
2040: Prepared environment for unit testing - by Trochonovitz
2064: Added Bun integration guide - by juujisai
2108: Added SvelteKit integration tutorial - by iprzybysz

New components
2008: Added Autocomplete component - by juujisai
2152: Added Multi Range Slider component - by iprzybysz

Docs
1641: Fixed issue where links from API tabs section won't change the tab to API - by juujisai
1937: Fixed Charts examples where options were not provided correctly - by iprzybysz
1948: Updated integration tutorials and added section with troubleshooting - by iprzybysz
1953: Fixed issue with search results from external domains not opening in a new tab - by juujisai
1960: Updated the optimization page information about the initTE method - by letzfets
1982: Updated Charts examples size on mobiles - by njolipatrick, juujisai
2010: Added Roboto import to tutorials - by juujisai
2027: Renamed zip package to twe-starter - by juujisai
2039: Updated toasts icons - by Trochonovitz
2045: Fixed Modal examples visibility on smaller screens - by Trochonovitz
2047: Removed outdated Tab color example - by Trochonovitz
2074: Fixed event name in Datetimepicker documentation - by juujisai
2083: Fixed mobile styling on the main page and Search page - by juujisai
2094: Updated search.json file - by juujisai
2105: Updated snippets on Getting Started page - by iprzybysz
2117: Fixed a typo inside flexbox tutorial - by Mike2020x
2138: Removed double inits from components snippets - by iprzybysz
2148: Fixed typo in Vertically Centered Modal snippet - by liamka

Fixed & improved
1929: Updated dropdown animation for the Select component - by iprzybysz
1938: Fixed issue with setValue method not triggering events in Multiple Select - by Trochonovitz
1947: Fixed issues with datepicker and timepicker options in Datetimepicker - by juujisai
1986: Removed inheriting name attribute by Select input element - by Trochonovitz
1997: Added arrow customization to Select component - by Trochonovitz
2005: Added autoclose option to remove Alert from DOM after closing - by Trochonovitz
2006: Fixed errors that occured when disposing the Rating component - by Trochonovitz
2106: Fixed issue with Modals dispose method not removing event listeners - by Trochonovitz
2012: Improved reading of the main colors for the Ripple component - by juujisai
2036: Datatables - Fixed issue with not beeing able to scroll on the table on smaller screens - by Trochonovitz
2043: Fixed the interval option for Animations - by iprzybysz
2046: Fixed flashing outline border inside Chips - by Trochonovitz
2050: Fixed Input issues with label width when initialized via JS - by Trochonovitz
2051: Updated component intros - by juujisai
2055: Added option to customize animation duration inside Dropdowns - by juujisai
2062: Added listeners for Select value changes inside the Validation component - by juujisai
2075: Added current Datetimepicker value to the datetimeChange.te.datetimepicker event - by Trochonovitz
2080: Added possibility for backdrop customization in Modals - by juujisai
2098: Added possiblity to customize classes of the select all option inside the Select Multiple component - by juujisai
2112: Improved reading of delay time after which the Modals display change - by iprzybysz
2116: Improved reading of transition duration for the Select component - by iprzybysz
2119: Improved step change animation for the Stepper component - by juujisai
2121: Select - fixed cross-site scripting issue - by iprzybysz
2122: Fixed issues with Sidenav right not showing when horizontal scrollbar is visible - by iprzybysz
2127: Fixed issues with Timepicker not updating the modal after time was set by hand inside the input - by iprzybysz
2132: Fixed issues with Stepper events - added onChangeStep and onChangedStep events - by juujisai
2135: Fixed issues with doubleclicking the inline datepicker inside Datetimepicker component - by juujisai
2174: Fixed disabling completed steps in no-editable Stepper - by mako3577
2189: Fixed issues with timepicker dispose method causing dropdowns to stop working - by iprzybysz

Bun vs Node.js: TW Elements now with Vite with Bun

Maciej — Mon, 04 Dec 2023 11:30:00 +0000

TW Elements - now with Vite with Bun

Bun is a tool that is designed to replace Node.js in the development of web applications. The main goal of Bun is to reduce the startup times and memory usage of created apps. Vite works with a Bun out of the box. TW Elements can be imported in Vite applications according to the following procedure:
TWE Bun.js Short Guide

Node.js vs Bun.js

Development and Release:

Node.js: Developed by Ryan Dahl in 2009, Node.js is an open-source, cross-platform runtime environment for executing JavaScript code outside a web browser. It's widely used and has a large community.
Bun: Bun is a newer and less mature environment compared to Node.js. It's designed to be faster and more efficient, focusing on modern JavaScript features.

Performance:

Node.js: Uses the V8 engine (also used by Google Chrome) for executing JavaScript. While it's known for good performance, especially for I/O-bound tasks, it can be less efficient for CPU-intensive tasks.
Bun: Touted for its performance improvements over Node.js, Bun aims to execute JavaScript faster and handle I/O operations more efficiently. It might be a better choice for applications where performance is a critical factor.

Community and Ecosystem:

Node.js: Boasts a large and mature ecosystem with a vast number of libraries and tools available through npm, the Node.js package manager.
Bun: Being newer, Bun's ecosystem is not as developed as Node.js. This might limit the availability of third-party libraries and tools.

Compatibility:

Node.js: Widely compatible with numerous libraries and tools. It's a go-to choice for many developers due to its stability and compatibility.
Bun: May have compatibility issues with some Node.js packages or tools, as it's still in a relatively early stage of development.

Use Cases:

Node.js: Ideal for a wide range of applications, from web servers to IoT applications. Its large community and extensive library support make it a versatile choice.
Bun: Might be preferred for projects where cutting-edge performance is required, though the trade-off is a smaller ecosystem and potential compatibility challenges.

Future Outlook:

Node.js: Continues to evolve, with an emphasis on stability and maintaining a broad user base.
Bun: Represents a newer approach to JavaScript runtime environments, focusing on performance and modern JavaScript features. It's a project to watch for future developments.

TWE Bun.js Short Guide

Check it out HERE

💰SAVE Up To 500$ on TW Elements❗️

Maciej — Thu, 30 Nov 2023 18:30:00 +0000

📢Last Days of LIMITED Cyber Monday PROMO❗️
💰SAVE Up To 500$❗️
🎁3 months 🆓#HOSTING Cyber Week Only🤖
⚡️Lifetime usage
⚖️non-AGPL Commercial License
🔌12 months of updates
🧱 Powerful Components
🖼️ Beautiful Design Blocks

🎁3 months 🆓#HOSTING Cyber Week Only🤖
With every purchase of TW Elements commercial license during Cyber Week, you get an option to claim 3 months of Premium hosting for free. 1G RAM/project, custom domains, SSL support, Jenkins automations, 1G size/database & more! You will be able to claim the gift on the Thank You page, after the purchase.

🤖Cyber Week Offer ends 01.12⏬
TW Elements

#FIGMA Material Minimal Design System: Updated & Extended

Maciej — Wed, 29 Nov 2023 17:00:00 +0000

What is Material Minimal Design System?

The base for the MDBootstrap and TW Elements libraries, an improved version of the classic Material Design. Material Minimal seeks a golden mean between the naturalness of the real world and the functionality necessary in the digital world. On the one hand, Material Minimal appreciates and uses the standard created by Google, and on the other hand improves it, giving it lightness, subtlety, and elegance.

Latest Updates & Improvements: 🧱Components. Over 4000 Variants now. 🔥🔥🔥

➕ Added some that were missing: Sidenav, Scrollspy, Button group, Lightbox, Placeholders, Popconfirm, Popovers, Charts, Charts advanced, Tables, Datatables, Datetimepicker, Carousel.

➕ Already existing Components have been enriched with new variants. For example: many new Cards, Navbars, Footers, and many others were created, mostly those that had such options in all our colour variants.

➕Where it was possible and necessary, mobile versions were added, e.g., Navbar, Footer, Header, in Tables and DataTables.

➕ More resolutions (desktop, MacBook, iPad horizontal, iPad vertical, iPhone). Improved the responsiveness of inputs, including the Label - they are now fully adapted to all resolutions, and can be used to create elegant forms (this improvement in responsiveness is an important topic, as users reported a problem).

➕Improved the responsiveness of many other Components.

➕The library also now features many new Icons (and variants) in the form of a Component ready to use in three different sizes: Including, byt not limited to, social media icons (Twitter updated to X).

➕Some Components have been animated, e.g., Carousel, Lightbox , Pills, Tabs, Accordion, Collapse, Dropdown (basic version), List group, Modal (one specific), Placeholder, Rating, Spinners, Tables (scroll horizontally on mobile). Basic Bar Chart also animates individual data now💪💪💪

Download 🆓 Figma files below & leave a ❤
Material Minimal Design System on Figma

📢SAVE Up To 💰500$. 4 Days Cyber Monday PROMO❗️

Maciej — Mon, 27 Nov 2023 13:58:58 +0000

🤖Cyber Week for TW Elements begins with Cyber Monday.
💰4 Days Special Sale. SAVE Up To 500$❗️

TW Elements
🎁 3 months 🆓#HOSTING Cyber Week Only🤖
⚡️ LIFETIME Usage
⚖️ non AGPL Commercial License
🔌 12 months of UPDATES
🧱 500+ UI Powerful COMPONENTS
🖼️ Beautiful DESIGN BLOCKS
✔️Super simple, 1 minute installation
✔️Easy Theming & Customization

🎁 3 months 🆓#HOSTING Cyber Week Only🤖
With every purchase of TWE commercial license during Cyber Week, you get an option to claim 3 months of Premium hosting for free. 1G RAM/project, custom domains, SSL support, Jenkins automations, 1G size/database & more! You will be able to claim the gift on the Thank You page, after the purchase.

🤖Cyber Week Offer ends 01.12⏬
Check it out HERE

28h. Left: TWE Elements Up To 500$ OFF❗️

Maciej — Fri, 24 Nov 2023 11:53:20 +0000

Up to 500$ OFF❗️
#BlackFriday Promo

✔️500+ #opensource components for #TailwindCSS
✔️LIFETIME Usage
✔️Commercial license (non AGPL)
✔️Support
✔️12 months of updates
✔️Design blocks
✔️And More❗️

Only for #BlackFriday

Only 28 hours left❗️

Hurry Up❗️

TW Elements new pricing plans announcement!

Maciej — Fri, 10 Nov 2023 14:54:53 +0000

But first things first: As you know, TWE is running on a AGPL license; A open-source license that places particular emphasis on ensuring that the source code of software running on servers and accessible over a network is made available to users. It is designed to protect the open-source nature of such software and prevent it from becoming proprietary through network-based distribution:

Network Use: The primary difference between the GPL and the AGPL is that the AGPL explicitly addresses network use. It states that if you run an AGPL-licensed program on a server and make it accessible to others over a network, you must provide them with access to the source code of the modified version of the software you are running.
Distribution: If you distribute AGPL-licensed software to others, you are also obligated to provide them with the source code of the software. This is similar to the GPL's requirements for distribution.
Derived Works: If you create a derivative work of AGPL-licensed software and distribute it to others, you must also release the source code of your derivative work under the AGPL.
Hence the Copyleft rule: Like the GPL, the AGPL is a copyleft license. This means that if you modify or distribute software licensed under the AGPL, you are required to make the corresponding source code available to anyone who interacts with the software over a network. As you should.

“But what about apps and systems with proprietary or sensitive information like medical systems for example?” asks a legal savvy developer, who wants - and rightly so - to protect his and his clients and users information that, both by law and common ethics, should not be widely available in a way that open-source code is? Glad you ask, my tech and jurisprudence astute nerd! In anticipation of yours and yours clients and users needs we have prepared 3 commercial plans and a possibility of a custom license, engineered towards the realities of your particular project.

Learn more here